mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

refactor: Layout full token (#35628)

Browse Source 
* refactor: Layout full token

* chore: commenr
This commit is contained in:
二货机器人 2022-05-19 16:23:12 +08:00 committed by GitHub
parent 61740a616a
commit b67bae6a6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 87 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/_util/theme/interface.ts
View File

@ -6,6 +6,7 @@ import type { ComponentToken as DropdownComponentToken } from '../../dropdown/st
import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
import type { ComponentToken as LayoutComponentToken } from '../../layout/style';
import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
@ -77,6 +78,7 @@ export interface OverrideToken {
Image?: ImageComponentToken;
Input?: {};
InputNumber?: InputNumberComponentToken;
Layout?: LayoutComponentToken;
List?: ListComponentToken;
Mentions?: MentionsComponentToken;
Notification?: NotificationComponentToken;
@ -102,7 +104,6 @@ export interface OverrideToken {
Steps?: {};
Menu?: MenuComponentToken;
Modal?: ModalComponentToken;
Layout?: {};
Upload?: UploadComponentToken;
Tooltip?: {};
Space?: SpaceComponentToken;

165
components/layout/style/index.tsx
View File

@ -1,31 +1,23 @@
// deps-lint-skip-all
// import '../../style/index.less';
// import './index.less';
import { TinyColor } from '@ctrl/tinycolor';
import type { CSSObject } from '@ant-design/cssinjs';
import { genComponentStyleHook, mergeToken } from '../../_util/theme';
import type { GenerateStyle, FullToken } from '../../_util/theme';
import genLayoutLightStyle from './light';
export interface ComponentToken {
colorBgHeader: string;
colorBgBody: string;
colorBgTrigger: string;
}
export interface LayoutToken extends FullToken<'Layout'> {
// Layout
layoutBodyBackground: string;
layoutHeaderBackground: string;
layoutHeaderHeight: number;
layoutHeaderPadding: string;
layoutHeaderPaddingInline: number;
layoutHeaderColor: string;
layoutFooterPadding: string;
layoutFooterBackground: string;
layoutSiderBackground: string;
layoutTriggerHeight: number;
layoutTriggerBackground: string;
layoutTriggerColor: string;
layoutZeroTriggerWidth: number;
layoutZeroTriggerHeight: number;
// Layout Light Theme
layoutSiderBackgroundLight: string;
layoutTriggerBackgroundLight: string;
layoutTriggerColorLight: string;
layoutZeroTriggerSize: number;
}
const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
@ -33,19 +25,16 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
antCls, // .ant
componentCls, // .ant-layout
colorText,
layoutBodyBackground,
colorTextLightSolid,
colorBgHeader,
colorBgBody,
colorBgTrigger,
layoutHeaderHeight,
layoutHeaderPadding,
layoutHeaderPaddingInline,
layoutHeaderColor,
layoutHeaderBackground,
layoutFooterPadding,
layoutFooterBackground,
layoutSiderBackground,
layoutTriggerHeight,
layoutTriggerColor,
layoutTriggerBackground,
layoutZeroTriggerWidth,
layoutZeroTriggerHeight,
layoutZeroTriggerSize,
motionDurationMid,
motionDurationSlow,
fontSizeBase,
@ -59,8 +48,8 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
flexDirection: 'column',
/* fix firefox can't set height smaller than content on flex item */
minHeight: 0, // FIXME: hardcode in v4
background: layoutBodyBackground,
minHeight: 0,
background: colorBgBody,
'&, *': {
boxSizing: 'border-box',
@ -69,20 +58,21 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
[`&${componentCls}-has-sider`]: {
flexDirection: 'row',
[`> ${componentCls}, > ${componentCls}-content`]: {
width: 0, // https://segmentfault.com/a/1190000019498300 // FIXME: hardcode in v4
// https://segmentfault.com/a/1190000019498300
width: 0,
},
},
[`${componentCls}-header, &${componentCls}-footer`]: {
flex: '0 0 auto', // FIXME: hardcode in v4
flex: '0 0 auto',
},
[`${componentCls}-header`]: {
height: layoutHeaderHeight,
padding: layoutHeaderPadding,
paddingInline: layoutHeaderPaddingInline,
color: layoutHeaderColor,
lineHeight: `${layoutHeaderHeight}px`,
background: layoutHeaderBackground,
background: colorBgHeader,
// Other components/menu/style/index.less line:686
// Integration with header element so menu items have the same height
[`${antCls}-menu`]: {
@ -94,31 +84,31 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
padding: layoutFooterPadding,
color: colorText,
fontSize: fontSizeBase,
background: layoutFooterBackground,
background: colorBgBody,
},
[`${componentCls}-content`]: {
flex: 'auto',
// fix firefox can't set height smaller than content on flex item
minHeight: 0, // FIXME: hardcode in v4
minHeight: 0,
},
[`${componentCls}-sider`]: {
position: 'relative',
// fix firefox can't set width smaller than content on flex item
minWidth: 0, // FIXME: hardcode in v4
background: layoutSiderBackground,
minWidth: 0,
background: colorBgHeader,
transition: `all ${motionDurationMid}`,
'&-children': {
height: '100%', // FIXME: hardcode in v4
marginTop: -0.1, // FIXME: hardcode in v4
// Hack for fixing margin collaspe bug
height: '100%',
// Hack for fixing margin collapse bug
// https://github.com/ant-design/ant-design/issues/7967
// solution from https://stackoverflow.com/a/33132624/3040605
paddingTop: 0.1, // FIXME: hardcode in v4
marginTop: -0.1,
paddingTop: 0.1,
[`${antCls}-menu${antCls}menu-inline-collapsed`]: {
width: 'auto',
@ -130,18 +120,18 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
},
'&-right': {
order: 1, // FIXME: hardcode in v4
order: 1,
},
'&-trigger': {
position: 'fixed',
bottom: 0, // FIXME: hardcode in v4
zIndex: 1, // FIXME: hardcode in v4
bottom: 0,
zIndex: 1,
height: layoutTriggerHeight,
color: layoutTriggerColor,
color: colorTextLightSolid,
lineHeight: `${layoutTriggerHeight}px`,
textAlign: 'center',
background: layoutTriggerBackground,
background: colorBgTrigger,
cursor: 'pointer',
transition: `all ${motionDurationMid}`,
},
@ -154,45 +144,42 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
'&-trigger': {
position: 'absolute',
top: layoutHeaderHeight,
insetInlineEnd: -layoutZeroTriggerWidth,
zIndex: 1, // FIXME: hardcode in v4
width: layoutZeroTriggerWidth,
height: layoutZeroTriggerHeight,
color: layoutTriggerColor,
fontSize: layoutZeroTriggerWidth / 2, // FIXME: hardcode in v4
lineHeight: `${layoutZeroTriggerHeight}px`,
textAlign: 'center',
background: layoutSiderBackground,
// borderRadius: `0 ${radiusBase} ${radiusBase} 0`,
borderStartStartRadius: 0, // FIXME: hardcode in v4
insetInlineEnd: -layoutZeroTriggerSize,
zIndex: 1,
width: layoutZeroTriggerSize,
height: layoutZeroTriggerSize,
color: colorTextLightSolid,
fontSize: token.fontSizeXL,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: colorBgHeader,
borderStartStartRadius: 0,
borderStartEndRadius: radiusBase,
borderEndEndRadius: radiusBase,
borderEndStartRadius: 0, // FIXME: hardcode in v4
borderEndStartRadius: 0,
cursor: 'pointer',
transition: `background ${motionDurationSlow} ease`,
'&::after': {
position: 'absolute',
top: 0, // FIXME: hardcode in v4
insetInlineEnd: 0, // FIXME: hardcode in v4
bottom: 0, // FIXME: hardcode in v4
insetInlineStart: 0, // FIXME: hardcode in v4
inset: 0,
background: 'transparent',
transition: `all ${motionDurationSlow}`,
content: '""',
},
'&:hover::after': {
background: new TinyColor('#fff').setAlpha(0.1).toRgbString(), // FIXME: hardcode in v4
// FIXME: Hardcode, but seems no need to create a token for this
background: `rgba(255, 255, 255, 0.2)`,
},
'&-right': {
insetInlineStart: -layoutZeroTriggerWidth,
// borderRadius: `${radiusBase} 0 0 ${radiusBase}`,
insetInlineStart: -layoutZeroTriggerSize,
borderStartStartRadius: radiusBase,
borderStartEndRadius: 0, // FIXME: hardcode in v4
borderEndEndRadius: 0, // FIXME: hardcode in v4
borderStartEndRadius: 0,
borderEndEndRadius: 0,
borderEndStartRadius: radiusBase,
},
},
@ -209,31 +196,27 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
};
// ============================== Export ==============================
export default genComponentStyleHook('Layout', token => {
const layoutHeaderBackground = '#001529'; // FIXME: hardcode in v4
const layoutBodyBackground = '#f0f2f5'; // FIXME: hardcode in v4
const { colorText } = token;
export default genComponentStyleHook(
'Layout',
token => {
const { colorText, controlHeightSM, controlHeight, controlHeightLG, marginXXS } = token;
const layoutHeaderPaddingInline = controlHeightLG * 1.25;
const layoutToken = mergeToken<LayoutToken>(token, {
// Layout
layoutBodyBackground,
layoutHeaderBackground,
layoutHeaderHeight: 64, // FIXME: hardcode in v4
layoutHeaderPadding: '0 50px', // FIXME: hardcode in v4
layoutHeaderColor: colorText,
layoutFooterPadding: '24px 50px', // FIXME: hardcode in v4
layoutFooterBackground: layoutBodyBackground,
layoutSiderBackground: layoutHeaderBackground,
layoutTriggerHeight: 48, // FIXME: hardcode in v4
layoutTriggerBackground: '#002140', // FIXME: hardcode in v4
layoutTriggerColor: '#fff', // FIXME: hardcode in v4
layoutZeroTriggerWidth: 36, // FIXME: hardcode in v4
layoutZeroTriggerHeight: 42, // FIXME: hardcode in v4
// Layout Light Theme
layoutSiderBackgroundLight: '#fff', // FIXME: hardcode in v4
layoutTriggerBackgroundLight: '#fff', // FIXME: hardcode in v4
layoutTriggerColorLight: colorText,
});
const layoutToken = mergeToken<LayoutToken>(token, {
// Layout
layoutHeaderHeight: controlHeight * 2,
layoutHeaderPaddingInline,
layoutHeaderColor: colorText,
layoutFooterPadding: `${controlHeightSM}px ${layoutHeaderPaddingInline}px`,
layoutTriggerHeight: controlHeightLG + marginXXS * 2, // = item height + margin
layoutZeroTriggerSize: controlHeightLG,
});
return [genLayoutStyle(layoutToken)];
});
return [genLayoutStyle(layoutToken)];
},
{
colorBgHeader: '#001529',
colorBgBody: '#f0f2f5',
colorBgTrigger: '#002140',
},
);

23
components/layout/style/light.ts
View File

@ -3,23 +3,22 @@ import type { GenerateStyle } from '../../_util/theme';
import type { LayoutToken } from '.';
const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
const {
componentCls,
layoutSiderBackgroundLight,
layoutTriggerBackgroundLight,
layoutTriggerColorLight,
} = token;
const { componentCls, colorBgComponent, colorBgBody, colorText } = token;
return {
[`&${componentCls}-sider-light`]: {
background: layoutSiderBackgroundLight,
[`${componentCls}-sider-light`]: {
background: colorBgComponent,
[`${componentCls}-sider-trigger`]: {
color: layoutTriggerColorLight,
background: layoutTriggerBackgroundLight,
color: colorText,
background: colorBgComponent,
},
[`${componentCls}-sider-zero-width-trigger`]: {
color: layoutTriggerColorLight,
background: layoutTriggerBackgroundLight,
color: colorText,
background: colorBgComponent,
border: `1px solid ${colorBgBody}`, // Safe to modify to any other color
borderInlineStart: 0,
},
},
};