fix(layout): update drawer style

ant-design · Nov 25, 2022 · eb7ace8 · eb7ace8
1 parent 3e06527
commit eb7ace8
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 50 deletions.
diff --git a/packages/layout/src/components/SettingDrawer/LayoutChange.tsx b/packages/layout/src/components/SettingDrawer/LayoutChange.tsx
@@ -21,13 +21,15 @@ const LayoutSetting: React.FC<{
   settings: Partial<ProSettings>;
   changeSetting: (key: string, value: any, hideLoading?: boolean) => void;
   hashId: string;
-}> = ({ settings = {}, changeSetting, hashId }) => {
+  prefixCls: string;
+}> = ({ settings = {}, prefixCls, changeSetting, hashId }) => {
   const formatMessage = getFormatMessage();
   const { contentWidth, splitMenus, fixedHeader, layout, fixSiderbar } =
     settings || defaultSettings;
 
   return (
     <List
+      className={`${prefixCls}-list ${hashId}`}
       split={false}
       dataSource={[
         {

diff --git a/packages/layout/src/components/SettingDrawer/RegionalChange.tsx b/packages/layout/src/components/SettingDrawer/RegionalChange.tsx
@@ -8,11 +8,13 @@ const RegionalSetting: React.FC<{
   settings: Partial<ProSettings>;
   changeSetting: (key: string, value: any, hideLoading?: boolean) => void;
   hashId: string;
-}> = ({ settings = {}, changeSetting, hashId }) => {
+  prefixCls: string;
+}> = ({ settings = {}, prefixCls, changeSetting, hashId }) => {
   const formatMessage = getFormatMessage();
   const regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
   return (
     <List
+      className={`${prefixCls}-list ${hashId}`}
       split={false}
       renderItem={renderLayoutSettingItem}
       dataSource={regionalSetting.map((key) => {

diff --git a/packages/layout/src/components/SettingDrawer/index.tsx b/packages/layout/src/components/SettingDrawer/index.tsx
@@ -45,7 +45,7 @@ type MergerSettingsType<T> = Partial<T> & {
 };
 
 const Body: React.FC<BodyProps> = ({ children, hashId, prefixCls, title }) => (
-  <div style={{ marginBlockEnd: 24 }}>
+  <div style={{ marginBlockEnd: 12 }}>
     <h3 className={`${prefixCls}-body-title ${hashId}`}>{title}</h3>
     {children}
   </div>
@@ -468,6 +468,7 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
                 </Body>
               ) : null}
               <LayoutSetting
+                prefixCls={baseClassName}
                 hashId={hashId}
                 settings={settingState}
                 changeSetting={changeSetting}
@@ -481,6 +482,7 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
               >
                 <RegionalSetting
                   hashId={hashId}
+                  prefixCls={baseClassName}
                   settings={settingState}
                   changeSetting={changeSetting}
                 />
@@ -494,6 +496,7 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
                 title={formatMessage({ id: 'app.setting.othersettings' })}
               >
                 <List
+                  className={`${baseClassName}-list ${hashId}`}
                   split={false}
                   size="small"
                   renderItem={renderLayoutSettingItem}

diff --git a/packages/layout/src/components/SettingDrawer/style/index.ts b/packages/layout/src/components/SettingDrawer/style/index.ts
@@ -30,22 +30,22 @@ const genSettingDrawerStyle: GenerateStyle<SettingDrawerToken> = (token) => {
     [token.componentCls]: {
       '&-content': { position: 'relative', minHeight: '100%', color: token.colorText },
       '&-body-title': {
-        marginBlockEnd: '12px',
+        marginBlock: token.marginXS,
         fontSize: '14px',
         lineHeight: '22px',
         color: token.colorTextHeading,
       },
       '&-block-checkbox': {
         display: 'flex',
         minHeight: 42,
+        gap: 12,
         '& &-item': {
           position: 'relative',
           width: '44px',
           height: '36px',
-          marginInlineEnd: '16px',
           overflow: 'hidden',
           borderRadius: '4px',
-          boxShadow: '0 1px 2.5px 0 rgba(0, 0, 0, 0.18)',
+          boxShadow: token.boxShadowCard,
           cursor: 'pointer',
           fontSize: 56,
           lineHeight: '56px',
@@ -123,6 +123,12 @@ const genSettingDrawerStyle: GenerateStyle<SettingDrawerToken> = (token) => {
           cursor: 'pointer',
         },
       },
+      '&-list': {
+        [`li${token.antCls}-list-item`]: {
+          paddingInline: 0,
+          paddingBlock: 8,
+        },
+      },
     },
   };
 };