Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-19 15:26:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: modify style & add edgeless toolbar

Browse Source
This commit is contained in:
QiShaoXuan
2022-10-20 18:55:03 +08:00
parent 1c3fb798de
commit 06657596ff
17 changed files with 608 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
packages/app/src/styles/helper.ts Normal file
View File

@@ -0,0 +1,84 @@
import type { CSSProperties } from 'react';
export const displayFlex = (
justifyContent: CSSProperties['justifyContent'] = 'unset',
alignItems: CSSProperties['alignContent'] = 'unset',
alignContent: CSSProperties['alignContent'] = 'unset'
): {
display: CSSProperties['display'];
justifyContent: CSSProperties['justifyContent'];
alignItems: CSSProperties['alignContent'];
alignContent: CSSProperties['alignContent'];
} => {
return {
display: 'flex',
justifyContent,
alignItems,
alignContent,
};
};
export const absoluteCenter = ({
horizontal = false,
vertical = false,
position: { left, right, top, bottom } = {},
}: {
horizontal?: boolean;
vertical?: boolean;
position?: {
left?: CSSProperties['left'];
right?: CSSProperties['right'];
top?: CSSProperties['top'];
bottom?: CSSProperties['bottom'];
};
}): {
position: CSSProperties['position'];
left: CSSProperties['left'];
top: CSSProperties['top'];
right: CSSProperties['right'];
bottom: CSSProperties['bottom'];
transform: CSSProperties['transform'];
} => {
return {
position: 'absolute',
left: left ? left : horizontal ? '50%' : 'auto',
top: top ? top : vertical ? '50%' : 'auto',
right: right ? right : horizontal ? 'auto' : 'auto',
bottom: bottom ? bottom : vertical ? 'auto' : 'auto',
transform: `translate(${horizontal ? '-50%' : '0'}, ${
vertical ? '-50%' : '0'
})`,
};
};
export const fixedCenter = ({
horizontal = false,
vertical = false,
position: { left, right, top, bottom } = {},
}: {
horizontal?: boolean;
vertical?: boolean;
position?: {
left?: CSSProperties['left'];
right?: CSSProperties['right'];
top?: CSSProperties['top'];
bottom?: CSSProperties['bottom'];
};
}): {
position: CSSProperties['position'];
left: CSSProperties['left'];
top: CSSProperties['top'];
right: CSSProperties['right'];
bottom: CSSProperties['bottom'];
transform: CSSProperties['transform'];
} => {
return {
position: 'fixed',
left: left ? left : horizontal ? '50%' : 'auto',
top: top ? top : vertical ? '50%' : 'auto',
right: right ? right : horizontal ? 'auto' : 'auto',
bottom: bottom ? bottom : vertical ? 'auto' : 'auto',
transform: `translate(${horizontal ? '-50%' : '0'}, ${
vertical ? '-50%' : '0'
})`,
};
};

1
packages/app/src/styles/index.ts
View File

@@ -4,3 +4,4 @@ export * from './styled';
export { ThemeProvider } from './themeProvider';
export { lightTheme, darkTheme } from './theme';
export { useTheme } from './hooks';
export * from './helper';