From 0e539ea2932175ba091c3e753038d2c6ef3d8fdf Mon Sep 17 00:00:00 2001 From: dengfuping Date: Mon, 24 Jun 2024 21:07:39 +0800 Subject: [PATCH] improve(design): Empty footer style --- packages/design/src/_util/genStyle.ts | 133 ++++++++++++++++++ .../design/src/config-provider/demo/size.tsx | 2 +- .../design/src/empty/demo/complete-debug.tsx | 9 +- packages/design/src/empty/style/index.ts | 2 + packages/design/src/index.ts | 1 + packages/ui/src/FooterToolbar/style/index.ts | 117 +-------------- packages/ui/src/PageContainer/style/index.ts | 5 +- 7 files changed, 150 insertions(+), 119 deletions(-) create mode 100644 packages/design/src/_util/genStyle.ts diff --git a/packages/design/src/_util/genStyle.ts b/packages/design/src/_util/genStyle.ts new file mode 100644 index 000000000..83b7b24c3 --- /dev/null +++ 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): 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 index b3d2471e9..f355412a3 100644 --- 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 index d51695c32..6e0031543 100644 --- 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 && } + {children && ( + + + + + )} ); diff --git a/packages/design/src/empty/style/index.ts b/packages/design/src/empty/style/index.ts index 9ee8a18a0..4d6b62391 100644 --- 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 = (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 index 79b801271..12854e126 100644 --- 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 index 96cdd1a67..a44d6ee27 100644 --- 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): 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 = ( token: FooterToolBarToken ): CSSObject => { @@ -146,7 +35,7 @@ export const genFooterToolbarStyle: GenerateStyle = ( 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 index 222d6dab1..025c203dd 100644 --- 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 = ( token: PageContainerToken @@ -51,7 +52,7 @@ export const genPageContainerStyle: GenerateStyle = ( lineHeight, marginBlock: 0, // extra operation style - ...genOperationStyle(token), + ...genLargeStyle(token), }, [`${antCls}-page-header-footer`]: { marginBlockStart: 0,