From 488616f7fe05c1fc4ac25d0e65f30e9dc0a3b2ee Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Mon, 4 Mar 2024 15:45:53 +0800 Subject: [PATCH] style(TableColumn): fix style of mouse hover (#3597) --- .../core/client/src/css-variable/CSSVariableProvider.tsx | 6 ++++++ packages/core/client/src/global.less | 6 ++++++ .../antd/table-v2/Table.Column.ActionBar.tsx | 5 +++-- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/core/client/src/css-variable/CSSVariableProvider.tsx b/packages/core/client/src/css-variable/CSSVariableProvider.tsx index fd6fb67b7..e88f3758f 100644 --- a/packages/core/client/src/css-variable/CSSVariableProvider.tsx +++ b/packages/core/client/src/css-variable/CSSVariableProvider.tsx @@ -42,6 +42,9 @@ 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); @@ -72,6 +75,9 @@ export const CSSVariableProvider = ({ children }) => { token.colorSettings, token.colorBgSettingsHover, token.colorBorderSettingsHover, + token.margin, + token.padding, + token.paddingXXS, ]); return children; diff --git a/packages/core/client/src/global.less b/packages/core/client/src/global.less index 0d59a4cc3..099c57678 100644 --- a/packages/core/client/src/global.less +++ b/packages/core/client/src/global.less @@ -33,3 +33,9 @@ .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)); +} diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx index e4a5de134..fe7e52c42 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx @@ -4,8 +4,9 @@ import React from 'react'; import { SortableItem, useDesigner } from '../..'; export const designerCss = css` - margin: -18px -16px; - padding: 18px 16px; + position: relative; + margin: calc(0px - var(--margin)) calc(0px - var(--margin)); + padding: calc(var(--padding) + var(--paddingXXS)) var(--padding); &:hover { > .general-schema-designer {