improve(design): Empty footer style

oceanbase · Jun 24, 2024 · 0e539ea · 0e539ea
1 parent c4a80b0
commit 0e539ea
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 119 deletions.
diff --git a/packages/design/src/_util/genStyle.ts b/packages/design/src/_util/genStyle.ts
@@ -0,0 +1,133 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken } from 'antd/es/theme/internal';
+
+export const genCompactStyle = (componentCls: string, subComponentCls: string = ''): CSSObject => {
+  return {
+    [`&${componentCls}-compact-item:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item ${subComponentCls}`]:
+      {
+        borderStartEndRadius: 0,
+        borderEndEndRadius: 0,
+      },
+    [`&${componentCls}-compact-item:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item) ${subComponentCls}`]:
+      {
+        borderRadius: 0,
+      },
+    [`&${componentCls}-compact-item:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item ${subComponentCls}`]:
+      {
+        borderStartStartRadius: 0,
+        borderEndStartRadius: 0,
+      },
+  };
+};
+
+export const genLargeStyle = (token: FullToken<any>): CSSObject => {
+  const {
+    antCls,
+    iconCls,
+    fontSize,
+    lineWidth,
+    borderRadiusLG,
+    controlHeight,
+    controlHeightSM,
+    controlHeightLG,
+  } = token;
+  const height = controlHeightLG;
+  const lineHeight = `${controlHeightLG}px`;
+
+  return {
+    // Button
+    [`${antCls}-btn`]: {
+      // limit min width for icon button
+      minWidth: controlHeightLG,
+      height,
+      fontSize,
+      borderRadius: borderRadiusLG,
+      // Button in Space.Compact
+      ...genCompactStyle(`${antCls}-btn`),
+    },
+    // Radio.Button
+    [`${antCls}-radio-group`]: {
+      [`${antCls}-radio-button-wrapper`]: {
+        height,
+        lineHeight: `${height - lineWidth * 2}px`,
+        fontSize,
+        [`&:first-child`]: {
+          borderStartStartRadius: borderRadiusLG,
+          borderEndStartRadius: borderRadiusLG,
+        },
+        [`&:last-child`]: {
+          borderStartEndRadius: borderRadiusLG,
+          borderEndEndRadius: borderRadiusLG,
+        },
+      },
+    },
+    // Select
+    [`${antCls}-select`]: {
+      height,
+      fontSize,
+      // Select in Space.Compact
+      ...genCompactStyle(`${antCls}-select`, `${antCls}-select-selector`),
+      [`${antCls}-select-selector`]: {
+        borderRadius: borderRadiusLG,
+      },
+      [`${antCls}-select-selection-item`]: {
+        fontSize,
+      },
+    },
+    // Input
+    [`${antCls}-input-wrapper`]: {
+      fontSize,
+      [`${iconCls}`]: {
+        fontSize,
+      },
+      [`${antCls}-input-affix-wrapper`]: {
+        borderStartEndRadius: 0,
+        borderEndEndRadius: 0,
+      },
+    },
+    [`${antCls}-input-affix-wrapper`]: {
+      height,
+      borderRadius: borderRadiusLG,
+      [`&:not(${antCls}-input-affix-wrapper-lg)`]: {
+        lineHeight: `${controlHeight - lineWidth * 2}px`,
+      },
+      // avoid to conflict with `${antCls}-input-affix-wrapper` height
+      [`${antCls}-input`]: {
+        height: `${controlHeight - lineWidth * 2}px`,
+      },
+      [`${antCls}-input-lg`]: {
+        height: controlHeightSM,
+      },
+      [`${antCls}-input-sm`]: {
+        height: `${controlHeightLG - lineWidth * 2}px`,
+      },
+    },
+    [`${antCls}-input`]: {
+      height,
+      fontSize,
+      borderRadius: borderRadiusLG,
+      // Input in Space.Compact
+      ...genCompactStyle(`${antCls}-input`),
+    },
+    [`${antCls}-input-search-button`]: {
+      height,
+      lineHeight,
+      borderStartEndRadius: borderRadiusLG,
+      borderEndEndRadius: borderRadiusLG,
+    },
+    [`${antCls}-input-group-addon`]: {
+      fontSize,
+      borderStartEndRadius: borderRadiusLG,
+      borderEndEndRadius: borderRadiusLG,
+    },
+    // set large DatePicker, TimePicker and RangePicker style
+    [`${antCls}-picker`]: {
+      height,
+      borderRadius: borderRadiusLG,
+      ...genCompactStyle(`${antCls}-picker`),
+      [`${antCls}-picker-input>input`]: {
+        fontSize,
+      },
+    },
+  };
+};
diff --git a/packages/design/src/config-provider/demo/size.tsx b/packages/design/src/config-provider/demo/size.tsx
@@ -11,7 +11,7 @@ import {
   Table,
   Tabs,
 } from '@oceanbase/design';
-import { SizeType } from '@oceanbase/design/es/config-provider';
+import type { SizeType } from '@oceanbase/design/es/config-provider';
 import React, { useState } from 'react';
 
 const { TabPane } = Tabs;

diff --git a/packages/design/src/empty/demo/complete-debug.tsx b/packages/design/src/empty/demo/complete-debug.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Empty, Form, Switch } from '@oceanbase/design';
+import { Button, Empty, Form, Space, Switch } from '@oceanbase/design';
 
 export default () => {
   const [title, setTitle] = useState(true);
@@ -47,7 +47,12 @@ export default () => {
         title={title && 'Create Your Cluster'}
         description={description ? 'There is no cluster, welcome to create one!' : ''}
       >
-        {children && <Button type="primary">Create</Button>}
+        {children && (
+          <Space>
+            <Button type="primary">Primary</Button>
+            <Button>Second</Button>
+          </Space>
+        )}
       </Empty>
     </>
   );

diff --git a/packages/design/src/empty/style/index.ts b/packages/design/src/empty/style/index.ts
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+import { genLargeStyle } from '../../_util/genStyle';
 
 export type EmptyToken = FullToken<'Badge'>;
 
@@ -38,6 +39,7 @@ export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSS
       },
       [`${componentCls}-footer`]: {
         marginTop: token.marginLG,
+        ...genLargeStyle(token),
       },
       [`${antCls}-steps`]: {
         marginTop: token.margin,

diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
@@ -100,3 +100,4 @@ const { useToken } = theme;
 export { useToken };
 
 export type { PresetStatusColorType } from 'antd/es/_util/colors';
+export { genLargeStyle } from './_util/genStyle';
diff --git a/packages/ui/src/FooterToolbar/style/index.ts b/packages/ui/src/FooterToolbar/style/index.ts
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FooterToolBarToken } from '@ant-design/pro-layout/es/components/FooterToolbar/style';
-import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme';
+import { genLargeStyle } from '@oceanbase/design';
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 
 export const genCompactStyle = (componentCls: string, subComponentCls: string = ''): CSSObject => {
@@ -22,118 +23,6 @@ export const genCompactStyle = (componentCls: string, subComponentCls: string =
   };
 };
 
-export const genOperationStyle = (token: FullToken<any>): CSSObject => {
-  const {
-    antCls,
-    iconCls,
-    fontSize,
-    lineWidth,
-    borderRadiusLG,
-    controlHeight,
-    controlHeightSM,
-    controlHeightLG,
-  } = token;
-  const height = controlHeightLG;
-  const lineHeight = `${controlHeightLG}px`;
-
-  return {
-    // Button
-    [`${antCls}-btn`]: {
-      // limit min width for icon button
-      minWidth: controlHeightLG,
-      height,
-      fontSize,
-      borderRadius: borderRadiusLG,
-      // Button in Space.Compact
-      ...genCompactStyle(`${antCls}-btn`),
-    },
-    // Radio.Button
-    [`${antCls}-radio-group`]: {
-      [`${antCls}-radio-button-wrapper`]: {
-        height,
-        lineHeight: `${height - lineWidth * 2}px`,
-        fontSize,
-        [`&:first-child`]: {
-          borderStartStartRadius: borderRadiusLG,
-          borderEndStartRadius: borderRadiusLG,
-        },
-        [`&:last-child`]: {
-          borderStartEndRadius: borderRadiusLG,
-          borderEndEndRadius: borderRadiusLG,
-        },
-      },
-    },
-    // Select
-    [`${antCls}-select`]: {
-      height,
-      fontSize,
-      // Select in Space.Compact
-      ...genCompactStyle(`${antCls}-select`, `${antCls}-select-selector`),
-      [`${antCls}-select-selector`]: {
-        borderRadius: borderRadiusLG,
-      },
-      [`${antCls}-select-selection-item`]: {
-        fontSize,
-      },
-    },
-    // Input
-    [`${antCls}-input-wrapper`]: {
-      fontSize,
-      [`${iconCls}`]: {
-        fontSize,
-      },
-      [`${antCls}-input-affix-wrapper`]: {
-        borderStartEndRadius: 0,
-        borderEndEndRadius: 0,
-      },
-    },
-    [`${antCls}-input-affix-wrapper`]: {
-      height,
-      borderRadius: borderRadiusLG,
-      [`&:not(${antCls}-input-affix-wrapper-lg)`]: {
-        lineHeight: `${controlHeight - lineWidth * 2}px`,
-      },
-      // avoid to conflict with `${antCls}-input-affix-wrapper` height
-      [`${antCls}-input`]: {
-        height: `${controlHeight - lineWidth * 2}px`,
-      },
-      [`${antCls}-input-lg`]: {
-        height: controlHeightSM,
-      },
-      [`${antCls}-input-sm`]: {
-        height: `${controlHeightLG - lineWidth * 2}px`,
-      },
-    },
-    [`${antCls}-input`]: {
-      height,
-      fontSize,
-      borderRadius: borderRadiusLG,
-      // Input in Space.Compact
-      ...genCompactStyle(`${antCls}-input`),
-    },
-    [`${antCls}-input-search-button`]: {
-      height,
-      lineHeight,
-      borderStartEndRadius: borderRadiusLG,
-      borderEndEndRadius: borderRadiusLG,
-    },
-    [`${antCls}-input-group-addon`]: {
-      fontSize,
-      borderStartEndRadius: borderRadiusLG,
-      borderEndEndRadius: borderRadiusLG,
-    },
-    // set large DatePicker, TimePicker and RangePicker style
-    [`${antCls}-picker`]: {
-      height,
-      borderRadius: borderRadiusLG,
-      ...genCompactStyle(`${antCls}-picker`),
-      [`${antCls}-picker-input>input`]: {
-        fontSize,
-      },
-    },
-  };
-};
-
 export const genFooterToolbarStyle: GenerateStyle<FooterToolBarToken> = (
   token: FooterToolBarToken
 ): CSSObject => {
@@ -146,7 +35,7 @@ export const genFooterToolbarStyle: GenerateStyle<FooterToolBarToken> = (
       borderRadius: borderRadius,
       boxShadow: boxShadowSecondary,
       borderBlockStart: 'none',
-      ...genOperationStyle(token),
+      ...genLargeStyle(token),
     },
   };
 };

diff --git a/packages/ui/src/PageContainer/style/index.ts b/packages/ui/src/PageContainer/style/index.ts
@@ -1,8 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { PageContainerToken } from '@ant-design/pro-layout/es/components/PageContainer/style';
+import { genLargeStyle } from '@oceanbase/design';
 import type { GenerateStyle } from '@oceanbase/design/es/theme';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
-import { genOperationStyle, genFooterToolbarStyle } from '../../FooterToolbar/style';
+import { genFooterToolbarStyle } from '../../FooterToolbar/style';
 
 export const genPageContainerStyle: GenerateStyle<PageContainerToken> = (
   token: PageContainerToken
@@ -51,7 +52,7 @@ export const genPageContainerStyle: GenerateStyle<PageContainerToken> = (
           lineHeight,
           marginBlock: 0,
           // extra operation style
-          ...genOperationStyle(token),
+          ...genLargeStyle(token),
         },
         [`${antCls}-page-header-footer`]: {
           marginBlockStart: 0,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -100,3 +100,4 @@ const { useToken } = theme;
		export { useToken };

		export type { PresetStatusColorType } from 'antd/es/_util/colors';
		export { genLargeStyle } from './_util/genStyle';