From f9ae348abcb81d7daadf5f470904df603a5bc608 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Wed, 25 Sep 2024 20:35:10 +0800
Subject: [PATCH] feat: add icon_size config in theme
---
packages/vtable/src/icons.ts | 104 +++++++++++++++-----------
packages/vtable/src/themes/DARK.ts | 2 +-
packages/vtable/src/ts-types/theme.ts | 13 +++-
3 files changed, 74 insertions(+), 45 deletions(-)
diff --git a/packages/vtable/src/icons.ts b/packages/vtable/src/icons.ts
index f4977433c..28773841e 100644
--- a/packages/vtable/src/icons.ts
+++ b/packages/vtable/src/icons.ts
@@ -9,32 +9,52 @@ import { DrillDown, DrillUp } from './tools/global';
let sort_color: string;
let sort_color_opacity: string;
let sort_color_2: string;
-let sort_color_2_opacity: string;
+let sort_color_opacity_2: string;
+let sort_icon_size: number;
+let sort_icon_size_2: number;
let frozen_color: string;
let frozen_color_opacity: string;
+let freeze_color_opacity: string;
let frozen_color_2: string;
-let frozen_color_2_opacity: string;
+let frozen_color_opacity_2: string;
+let frozen_icon_size: number;
+let frozen_icon_size_2: number;
let collapse_color: string;
let collapse_color_opacity: string;
+let collapse_icon_size: number;
+let collapse_icon_size_2: number;
let expand_color: string;
let expand_color_opacity: string;
+let expand_icon_size: number;
+let expand_icon_size_2: number;
let dragReorder_color: string;
let dragReorder_color_opacity: string;
+let dragReorder_icon_size: number;
export function setIconColor(themeIconsColor: ITableThemeDefine['internalIconsStyle']) {
sort_color = themeIconsColor?.sort_color ?? '#282F38';
sort_color_opacity = themeIconsColor?.sort_color_opacity ?? '0.35';
sort_color_2 = themeIconsColor?.sort_color_2 ?? '#416EFF';
- sort_color_2_opacity = themeIconsColor?.sort_color_2_opacity ?? '1';
+ sort_color_opacity_2 = themeIconsColor?.sort_color_opacity_2 ?? '1';
+ sort_icon_size = themeIconsColor?.sort_icon_size ?? 16;
+ sort_icon_size_2 = themeIconsColor?.sort_icon_size_2 ?? 22;
frozen_color = themeIconsColor?.frozen_color ?? '#282F38';
frozen_color_opacity = themeIconsColor?.frozen_color_opacity ?? '0.35';
+ freeze_color_opacity = themeIconsColor?.frozen_color_opacity ?? '0.2'; //之前是个0.2 为了不让bugServer错误太多
frozen_color_2 = themeIconsColor?.frozen_color_2 ?? '#416EFF';
- frozen_color_2_opacity = themeIconsColor?.frozen_color_2_opacity ?? '1';
+ frozen_color_opacity_2 = themeIconsColor?.frozen_color_opacity_2 ?? '1';
+ frozen_icon_size = themeIconsColor?.frozen_icon_size ?? 22;
+ frozen_icon_size_2 = themeIconsColor?.frozen_icon_size_2 ?? 22;
collapse_color = themeIconsColor?.collapse_color ?? '#141414';
collapse_color_opacity = themeIconsColor?.collapse_color_opacity ?? '0.65';
+ collapse_icon_size = themeIconsColor?.collapse_icon_size ?? 16;
+ collapse_icon_size_2 = themeIconsColor?.frozen_icon_size_2 ?? 22;
expand_color = themeIconsColor?.expand_color ?? '#141414';
expand_color_opacity = themeIconsColor?.expand_color_opacity ?? '0.65';
+ expand_icon_size = themeIconsColor?.expand_icon_size ?? 16;
+ expand_icon_size_2 = themeIconsColor?.expand_icon_size_2 ?? 22;
dragReorder_color = themeIconsColor?.dragReorder_color ?? '#666666';
dragReorder_color_opacity = themeIconsColor?.dragReorder_color_opacity ?? '1';
+ dragReorder_icon_size = themeIconsColor?.dragReorder_icon_size ?? 20;
}
const builtins = {
get sort_downward(): SvgIcon {
@@ -42,19 +62,19 @@ const builtins = {
type: 'svg',
svg:
' ',
- width: 16, //其实指定的是svg图片绘制多大，实际下面的阴影是box，margin也是相对阴影范围指定的
- height: 16,
+ width: sort_icon_size, //其实指定的是svg图片绘制多大，实际下面的阴影是box，margin也是相对阴影范围指定的
+ height: sort_icon_size,
funcType: IconFuncTypeEnum.sort,
name: 'sort_downward',
// positionType: IconPosition.inlineEnd,
positionType: IconPosition.contentRight,
marginLeft: 3, //设计要求的是距离8px，这个些5是基于外面的box而言的
hover: {
- width: 22,
- height: 22,
+ width: sort_icon_size_2,
+ height: sort_icon_size_2,
bgColor: 'rgba(101, 117, 168, 0.1)'
},
cursor: 'pointer'
@@ -66,18 +86,18 @@ const builtins = {
svg:
'',
- width: 16,
- height: 16,
+ width: sort_icon_size,
+ height: sort_icon_size,
funcType: IconFuncTypeEnum.sort,
// positionType: IconPosition.inlineEnd,
positionType: IconPosition.contentRight,
name: 'sort_upward',
marginLeft: 3,
hover: {
- width: 22,
- height: 22,
+ width: sort_icon_size_2,
+ height: sort_icon_size_2,
bgColor: 'rgba(101, 117, 168, 0.1)'
},
cursor: 'pointer'
@@ -91,16 +111,16 @@ const builtins = {
`` +
`` +
' ',
- width: 16,
- height: 16,
+ width: sort_icon_size,
+ height: sort_icon_size,
funcType: IconFuncTypeEnum.sort,
// positionType: IconPosition.inlineEnd,
positionType: IconPosition.contentRight,
name: 'sort_normal',
marginLeft: 3,
hover: {
- width: 22,
- height: 22,
+ width: sort_icon_size_2,
+ height: sort_icon_size_2,
bgColor: 'rgba(101, 117, 168, 0.1)'
},
cursor: 'pointer'
@@ -113,7 +133,7 @@ const builtins = {
svg:
'',
- width: 22,
- height: 22,
+ width: frozen_icon_size,
+ height: frozen_icon_size,
name: 'freeze',
funcType: IconFuncTypeEnum.frozen,
positionType: IconPosition.right,
marginRight: 0,
hover: {
- width: 22,
- height: 22,
+ width: frozen_icon_size_2,
+ height: frozen_icon_size_2,
bgColor: 'rgba(101, 117, 168, 0.1)'
},
cursor: 'pointer'
@@ -142,15 +162,15 @@ const builtins = {
'',
- width: 22,
- height: 22,
+ width: frozen_icon_size,
+ height: frozen_icon_size,
name: 'frozen',
funcType: IconFuncTypeEnum.frozen,
positionType: IconPosition.right,
marginRight: 0,
hover: {
- width: 22,
- height: 22,
+ width: frozen_icon_size_2,
+ height: frozen_icon_size_2,
bgColor: 'rgba(101, 117, 168, 0.1)'
},
cursor: 'pointer'
@@ -161,18 +181,18 @@ const builtins = {
type: 'svg',
svg:
'',
- width: 22,
- height: 22,
+ width: frozen_icon_size,
+ height: frozen_icon_size,
funcType: IconFuncTypeEnum.frozen,
positionType: IconPosition.right,
name: 'frozenCurrent',
marginRight: 0,
// marginLeft: 6,
hover: {
- width: 22,
- height: 22,
+ width: frozen_icon_size_2,
+ height: frozen_icon_size_2,
bgColor: 'rgba(101, 117, 168, 0.1)'
},
cursor: 'pointer'
@@ -275,16 +295,16 @@ const builtins = {
svg: ``,
- width: 16, //其实指定的是svg图片绘制多大，实际占位是box，margin也是相对阴影范围指定的
- height: 16,
+ width: expand_icon_size, //其实指定的是svg图片绘制多大，实际占位是box，margin也是相对阴影范围指定的
+ height: expand_icon_size,
funcType: IconFuncTypeEnum.expand,
name: 'expand',
positionType: IconPosition.contentLeft,
marginLeft: 0,
marginRight: 4,
hover: {
- width: 22,
- height: 22,
+ width: expand_icon_size_2,
+ height: expand_icon_size_2,
bgColor: 'rgba(101, 117, 168, 0.1)'
},
cursor: 'pointer'
@@ -297,16 +317,16 @@ const builtins = {
svg: ``,
- width: 16, //其实指定的是svg图片绘制多大，实际占位是box，margin也是相对阴影范围指定的
- height: 16,
+ width: collapse_icon_size, //其实指定的是svg图片绘制多大，实际占位是box，margin也是相对阴影范围指定的
+ height: collapse_icon_size,
funcType: IconFuncTypeEnum.collapse,
name: 'collapse',
positionType: IconPosition.contentLeft,
marginLeft: 0,
marginRight: 4,
hover: {
- width: 22,
- height: 22,
+ width: collapse_icon_size_2,
+ height: collapse_icon_size_2,
bgColor: 'rgba(101, 117, 168, 0.1)'
},
cursor: 'pointer'
@@ -342,8 +362,8 @@ const builtins = {
return {
type: 'svg',
svg: ``,
- width: 20, //其实指定的是svg图片绘制多大，实际下面的阴影是box，margin也是相对阴影范围指定的
- height: 20,
+ width: dragReorder_icon_size, //其实指定的是svg图片绘制多大，实际下面的阴影是box，margin也是相对阴影范围指定的
+ height: dragReorder_icon_size,
funcType: IconFuncTypeEnum.dragReorder,
positionType: IconPosition.left,
name: 'dragReorder',
diff --git a/packages/vtable/src/themes/DARK.ts b/packages/vtable/src/themes/DARK.ts
index ce1f7f45e..1c2454aa8 100644
--- a/packages/vtable/src/themes/DARK.ts
+++ b/packages/vtable/src/themes/DARK.ts
@@ -125,7 +125,7 @@ export default {
sort_color: '#FFFFFF',
sort_color_opacity: '0.75',
sort_color_2: '#416EFF',
- sort_color_2_opacity: '1',
+ sort_color_opacity_2: '1',
frozen_color: '#FFFFFF',
frozen_color_opacity: '0.75',
collapse_color: '#FFF',
diff --git a/packages/vtable/src/ts-types/theme.ts b/packages/vtable/src/ts-types/theme.ts
index 59190b50b..13ff3e10a 100644
--- a/packages/vtable/src/ts-types/theme.ts
+++ b/packages/vtable/src/ts-types/theme.ts
@@ -180,17 +180,26 @@ export interface ITableThemeDefine {
sort_color?: string;
sort_color_opacity?: string;
sort_color_2?: string;
- sort_color_2_opacity?: string;
+ sort_color_opacity_2?: string;
+ sort_icon_size?: number;
+ sort_icon_size_2?: number;
frozen_color?: string;
frozen_color_opacity?: string;
frozen_color_2?: string;
- frozen_color_2_opacity?: string;
+ frozen_color_opacity_2?: string;
+ frozen_icon_size?: number;
+ frozen_icon_size_2?: number;
collapse_color?: string;
collapse_color_opacity?: string;
+ collapse_icon_size?: number;
+ collapse_icon_size_2?: number;
expand_color?: string;
expand_color_opacity?: string;
+ expand_icon_size?: number;
+ expand_icon_size_2?: number;
dragReorder_color?: string;
dragReorder_color_opacity?: string;
+ dragReorder_icon_size?: number;
};
}