fix: fix hover style for sub table (#3623)
* Revert "style(TableColumn): fix style of mouse hover (#3597)"
This reverts commit 488616f7fe.
* fix: fix hover style for sub table
* fix: style
* Revert "fix: style"
This reverts commit 33901c4ff96458b17f0f68839f726f520370e622.
* fix: style
			
			
This commit is contained in:
		
							parent
							
								
									f9a10de981
								
							
						
					
					
						commit
						202fcef17c
					
				@ -42,9 +42,6 @@ export const CSSVariableProvider = ({ children }) => {
 | 
			
		||||
    document.body.style.setProperty('--colorSettings', token.colorSettings || defaultTheme.token.colorSettings);
 | 
			
		||||
    document.body.style.setProperty('--colorBgSettingsHover', token.colorBgSettingsHover);
 | 
			
		||||
    document.body.style.setProperty('--colorBorderSettingsHover', token.colorBorderSettingsHover);
 | 
			
		||||
    document.body.style.setProperty('--margin', `${token.margin}px`);
 | 
			
		||||
    document.body.style.setProperty('--padding', `${token.padding}px`);
 | 
			
		||||
    document.body.style.setProperty('--paddingXXS', `${token.paddingXXS}px`);
 | 
			
		||||
 | 
			
		||||
    // 设置登录页面的背景色
 | 
			
		||||
    document.body.style.setProperty('background-color', token.colorBgContainer);
 | 
			
		||||
@ -75,9 +72,6 @@ export const CSSVariableProvider = ({ children }) => {
 | 
			
		||||
    token.colorSettings,
 | 
			
		||||
    token.colorBgSettingsHover,
 | 
			
		||||
    token.colorBorderSettingsHover,
 | 
			
		||||
    token.margin,
 | 
			
		||||
    token.padding,
 | 
			
		||||
    token.paddingXXS,
 | 
			
		||||
  ]);
 | 
			
		||||
 | 
			
		||||
  return children;
 | 
			
		||||
 | 
			
		||||
@ -33,9 +33,3 @@
 | 
			
		||||
.rc-virtual-list-scrollbar-thumb:active {
 | 
			
		||||
  background: var(--colorBgScrollBarActive) !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// fix https://nocobase.height.app/T-3333/description
 | 
			
		||||
.ant-table-column-has-sorters .nb-sortable-designer {
 | 
			
		||||
  margin-right: calc(0px - var(--margin) - var(--margin));
 | 
			
		||||
  padding-right: calc(var(--padding) + var(--padding));
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -2,11 +2,12 @@ import { css } from '@emotion/css';
 | 
			
		||||
import { observer } from '@formily/react';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
import { SortableItem, useDesigner } from '../..';
 | 
			
		||||
import { useFlag } from '../../../flag-provider/hooks/useFlag';
 | 
			
		||||
 | 
			
		||||
export const designerCss = css`
 | 
			
		||||
export const designerCss = ({ margin = '-18px -16px', padding = '18px 16px' } = {}) => css`
 | 
			
		||||
  position: relative;
 | 
			
		||||
  margin: calc(0px - var(--margin)) calc(0px - var(--margin));
 | 
			
		||||
  padding: calc(var(--padding) + var(--paddingXXS)) var(--padding);
 | 
			
		||||
  margin: ${margin};
 | 
			
		||||
  padding: ${padding};
 | 
			
		||||
 | 
			
		||||
  &:hover {
 | 
			
		||||
    > .general-schema-designer {
 | 
			
		||||
@ -45,8 +46,14 @@ export const designerCss = css`
 | 
			
		||||
export const TableColumnActionBar = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const Designer = useDesigner();
 | 
			
		||||
    const { isInSubTable } = useFlag() || {};
 | 
			
		||||
    return (
 | 
			
		||||
      <SortableItem className={designerCss}>
 | 
			
		||||
      <SortableItem
 | 
			
		||||
        className={designerCss({
 | 
			
		||||
          margin: isInSubTable ? '-12px -8px' : '-18px -16px',
 | 
			
		||||
          padding: isInSubTable ? '12px 8px' : '18px 16px',
 | 
			
		||||
        })}
 | 
			
		||||
      >
 | 
			
		||||
        <Designer />
 | 
			
		||||
        {props.children}
 | 
			
		||||
      </SortableItem>
 | 
			
		||||
 | 
			
		||||
@ -7,6 +7,7 @@ import {
 | 
			
		||||
  useCompile,
 | 
			
		||||
  useDesigner,
 | 
			
		||||
  CollectionFieldContext,
 | 
			
		||||
  useFlag,
 | 
			
		||||
} from '../../../';
 | 
			
		||||
import { designerCss } from './Table.Column.ActionBar';
 | 
			
		||||
import { isCollectionFieldComponent } from './utils';
 | 
			
		||||
@ -35,6 +36,7 @@ export const TableColumnDecorator = (props) => {
 | 
			
		||||
  const field = useField();
 | 
			
		||||
  const { fieldSchema, uiSchema, collectionField } = useColumnSchema();
 | 
			
		||||
  const compile = useCompile();
 | 
			
		||||
  const { isInSubTable } = useFlag() || {};
 | 
			
		||||
  useLayoutEffect(() => {
 | 
			
		||||
    if (field.title) {
 | 
			
		||||
      return;
 | 
			
		||||
@ -47,7 +49,12 @@ export const TableColumnDecorator = (props) => {
 | 
			
		||||
    }
 | 
			
		||||
  }, [uiSchema?.title]);
 | 
			
		||||
  return (
 | 
			
		||||
    <SortableItem className={designerCss}>
 | 
			
		||||
    <SortableItem
 | 
			
		||||
      className={designerCss({
 | 
			
		||||
        margin: isInSubTable ? '-12px -8px' : '-18px -16px',
 | 
			
		||||
        padding: isInSubTable ? '12px 8px' : '18px 16px',
 | 
			
		||||
      })}
 | 
			
		||||
    >
 | 
			
		||||
      <CollectionFieldContext.Provider value={collectionField}>
 | 
			
		||||
        <Designer fieldSchema={fieldSchema} uiSchema={uiSchema} collectionField={collectionField} />
 | 
			
		||||
        {/* <RecursionField name={columnSchema.name} schema={columnSchema}/> */}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user