Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-11 15:16:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #44 from toeverything/feat/layout

Browse Source 
Feat/layout
This commit is contained in:
Qi
2022-10-21 18:00:13 +08:00
committed by GitHub
parent dda503a967 743e3dd9ac
commit 15590e539a
17 changed files with 263 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/package.json
+2 -1
View File
@@ -17,9 +17,10 @@
"@emotion/react": "^11.10.4",
"@emotion/server": "^11.10.0",
"@emotion/styled": "^11.10.4",
"@fontsource/space-mono": "^4.5.10",
"@mui/base": "^5.0.0-alpha.87",
"@mui/material": "^5.8.6",
"@mui/icons-material": "^5.10.9",
"@mui/material": "^5.8.6",
"@toeverything/pathfinder-logger": "workspace:@pathfinder/logger@*",
"css-spring": "^4.1.0",
"lit": "^2.3.1",
packages/app/public/globals.css
-1
View File
@@ -125,7 +125,6 @@ h3,
h4,
h5,
h6,
em,
strong,
b {
font-weight: bold;
packages/app/src/components/Header/index.tsx
+22 -20
View File
@@ -66,29 +66,31 @@ export const Header = () => {
return (
<>
<StyledHeader>
<StyledLogo>
<LogoIcon
onClick={() => {
contactModalHandler(true);
}}
/>
</StyledLogo>
<StyledTitle
onMouseEnter={() => {
setIsHover(true);
}}
onMouseLeave={() => {
setIsHover(false);
<StyledLogo
onClick={() => {
contactModalHandler(true);
}}
>
<EditorModeSwitch
isHover={isHover}
style={{
marginRight: '12px',
<LogoIcon />
</StyledLogo>
{title ? (
<StyledTitle
onMouseEnter={() => {
setIsHover(true);
}}
/>
<StyledTitleWrapper>{title}</StyledTitleWrapper>
</StyledTitle>
onMouseLeave={() => {
setIsHover(false);
}}
>
<EditorModeSwitch
isHover={isHover}
style={{
marginRight: '12px',
}}
/>
<StyledTitleWrapper>{title}</StyledTitleWrapper>
</StyledTitle>
) : null}
<StyledHeaderRightSide>
<ThemeModeSwitch />
packages/app/src/components/Header/styles.ts
+4
View File
@@ -36,7 +36,11 @@ export const StyledTitleWrapper = styled('div')({
export const StyledLogo = styled('div')(({ theme }) => ({
color: theme.colors.primaryColor,
width: '60px',
height: '60px',
cursor: 'pointer',
marginLeft: '-22px',
...displayFlex('center', 'center'),
}));
export const StyledHeaderRightSide = styled('div')({
packages/app/src/components/contact-modal/style.ts
+17 -8
View File
@@ -14,7 +14,7 @@ export const StyledModalContainer = styled('div')(({ theme }) => {
export const StyledModalWrapper = styled('div')(({ theme }) => {
return {
width: '860px',
height: '626px',
height: '540px',
backgroundColor: theme.colors.popoverBackground,
backgroundImage: `url(${bg.src})`,
borderRadius: '20px',
@@ -112,7 +112,6 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
});
export const StyledSubTitle = styled('div')(({ theme }) => {
return {
width: '189px',
fontSize: '18px',
fontWeight: '600',
color: theme.colors.textColor,
@@ -121,10 +120,13 @@ export const StyledSubTitle = styled('div')(({ theme }) => {
});
export const StyledLeftContainer = styled('div')({
width: '320px',
flexDirection: 'column',
...displayFlex('space-between', 'center'),
});
export const StyledRightContainer = styled('div')({
width: '214px',
flexShrink: '0',
flexDirection: 'column',
...displayFlex('center', 'flex-end'),
});
@@ -132,10 +134,11 @@ export const StyledRightContainer = styled('div')({
export const StyledContent = styled('div')({
height: '276px',
width: '100%',
padding: '0 145px',
padding: '0 140px',
...displayFlex('space-between', 'center'),
color: '#3A4C5C',
marginTop: '100px',
marginTop: '58px',
letterSpacing: '0.06em',
});
export const StyledBackdrop = styled('div')(({ theme }) => {
@@ -148,8 +151,8 @@ export const StyledLogo = styled('img')({
export const StyledModalHeader = styled('div')(({ theme }) => {
return {
height: '30px',
marginTop: '54px',
height: '20px',
marginTop: '36px',
padding: '0 48px',
...displayFlex('space-between', 'center'),
};
@@ -197,10 +200,16 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
textAlign: 'center',
color: theme.colors.textColor,
marginTop: '75px',
marginTop: '40px',
'p:first-of-type': {
color: theme.colors.primaryColor,
marginBottom: '10px',
letterSpacing: '0.06em',
marginBottom: '25px',
a: {
':visited': {
color: theme.colors.linkColor,
},
},
},
};
});
packages/app/src/components/editor-mode-switch/style.ts
+6 -1
View File
@@ -30,8 +30,13 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
background: theme.colors.hoverBackground,
position: 'relative',
display: 'flex',
transition: `background ${ANIMATE_DURATION}ms`,
transition: `background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms`,
border: '1px solid transparent',
...shrinkStyle,
':hover': {
border: `1px solid ${theme.colors.primaryColor}`,
},
};
}
);
packages/app/src/components/loading/index.tsx
+14
View File
@@ -0,0 +1,14 @@
import { StyledLoading, StyledLoadingItem } from './styled';
export const Loading = () => {
return (
<StyledLoading>
<StyledLoadingItem />
<StyledLoadingItem />
<StyledLoadingItem />
<StyledLoadingItem />
</StyledLoading>
);
};
export default Loading;
packages/app/src/components/loading/styled.ts
+93
View File
@@ -0,0 +1,93 @@
import { styled } from '@/styles';
const loadingItemSize = '40px';
export const StyledLoading = styled.div`
position: relative;
left: 50%;
transform: rotateX(55deg) rotateZ(-45deg)
translate(calc(${loadingItemSize} * -2), 0);
margin-bottom: calc(3 * ${loadingItemSize});
@keyframes slide {
0% {
transform: translate(var(--sx), var(--sy));
}
65% {
transform: translate(var(--ex), var(--sy));
}
95%,
100% {
transform: translate(var(--ex), var(--ey));
}
}
@keyframes load {
20% {
content: '.';
}
40% {
content: '..';
}
80%,
100% {
content: '...';
}
}
`;
export const StyledLoadingItem = styled.div`
position: absolute;
width: ${loadingItemSize};
height: ${loadingItemSize};
background: #9dacf9;
animation: slide 0.9s cubic-bezier(0.65, 0.53, 0.59, 0.93) infinite;
&::before,
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
}
&::before {
background: #5260b9;
transform: skew(0deg, -45deg);
right: 100%;
top: 50%;
}
&::after {
background: #6880ff;
transform: skew(-45deg, 0deg);
top: 100%;
right: 50%;
}
&:nth-child(1) {
--sx: 50%;
--sy: -50%;
--ex: 150%;
--ey: 50%;
}
&:nth-child(2) {
--sx: -50%;
--sy: -50%;
--ex: 50%;
--ey: -50%;
}
&:nth-child(3) {
--sx: 150%;
--sy: 50%;
--ex: 50%;
--ey: 50%;
}
&:nth-child(4) {
--sx: 50%;
--sy: 50%;
--ex: -50%;
--ey: -50%;
}
`;
packages/app/src/components/shortcuts-modal/config.ts
+6 -6
View File
@@ -19,11 +19,11 @@ export const macKeyboardShortcuts = {
};
export const macMarkdownShortcuts = {
Bold: '**Text**',
Italic: '*Text*',
Underline: '~Text~',
Strikethrough: '~~Text~~',
'Inline code': '`Code`',
Bold: '**Text** Space',
Italic: '*Text* Space',
Underline: '~Text~ Space',
Strikethrough: '~~Text~~ Space',
'Inline code': '`Code` Space',
'Heading 1': '# Space',
'Heading 2': '## Space',
'Heading 3': '### Space',
@@ -38,7 +38,7 @@ export const windowsKeyboardShortcuts = {
Bold: 'Ctrl + B',
Italic: 'Ctrl + I',
Underline: 'Ctrl + U',
Strikethrough: 'Ctrl + ⇧ + S',
Strikethrough: 'Ctrl + Shift + S',
'Inline code': ' Ctrl + E',
Link: 'Ctrl + K',
'Body text': 'Ctrl + Shift + 0',
packages/app/src/pages/_app.tsx
+2
View File
@@ -7,6 +7,8 @@ import { EditorProvider } from '@/components/editor-provider';
import { ModalProvider } from '@/components/global-modal-provider';
import { Logger } from '@toeverything/pathfinder-logger';
import '@fontsource/space-mono';
const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
ssr: false,
});
packages/app/src/pages/_document.tsx
+1 -6
View File
@@ -42,12 +42,7 @@ export default class AppDocument extends Document {
render() {
return (
<Html>
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</Head>
<Head />
<body>
<Main />
<NextScript />
packages/app/src/pages/affine.tsx
+7 -3
View File
@@ -1,5 +1,6 @@
import { displayFlex, styled } from '@/styles';
import { ThemeModeSwitch } from '@/components/theme-mode-switch';
import { Loading } from '@/components/loading';
export const StyledHeader = styled('div')({
height: '60px',
@@ -12,9 +13,12 @@ export const StyledHeader = styled('div')({
const Affine = () => {
return (
<StyledHeader>
<ThemeModeSwitch></ThemeModeSwitch>
</StyledHeader>
<>
<StyledHeader>
<ThemeModeSwitch></ThemeModeSwitch>
</StyledHeader>
<Loading />
</>
);
};
packages/app/src/pages/index.tsx
+24 -1
View File
@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic';
import { styled } from '@/styles';
import { Header } from '@/components/Header';
import { FAQ } from '@/components/faq';
import Loading from '@/components/loading';
import EdgelessToolbar from '@/components/edgeless-toolbar';
import '@/components/simple-counter';
@@ -21,8 +22,30 @@ const StyledPage = styled('div')(({ theme }) => {
};
});
const StyledLoadingContainer = styled('div')(({ theme }) => {
return {
height: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: theme.colors.primaryColor,
h1: {
fontSize: '2em',
marginTop: '150px',
fontWeight: '600',
},
};
});
const DynamicEditor = dynamic(() => import('../components/editor'), {
loading: () => <div style={{ textAlign: 'center' }}>Loading...</div>,
loading: () => (
<StyledLoadingContainer>
<div className="wrapper">
<Loading />
<h1>Loading...</h1>
</div>
</StyledLoadingContainer>
),
ssr: false,
});
packages/app/src/styles/theme.ts
+11 -1
View File
@@ -23,13 +23,15 @@ export const lightTheme: AffineTheme = {
quoteColor: '#4C6275',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(104, 128, 255, 0.1)',
borderColor: '#D0D7E3',
},
font: {
xs: '12px',
sm: '16px',
base: '18px',
family: `Avenir Next, ${basicFontFamily}`,
family2: `Roboto, ${basicFontFamily}`,
family2: `Space Mono, ${basicFontFamily}`,
lineHeightBase: '26px',
},
zIndex: {
modal: 1000,
@@ -41,6 +43,9 @@ export const lightTheme: AffineTheme = {
modal:
'4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
},
space: {
paragraph: '8px',
},
};
export const darkTheme: AffineTheme = {
@@ -63,6 +68,7 @@ export const darkTheme: AffineTheme = {
quoteColor: '#A9B1C6',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(240, 242, 255, 0.8)',
borderColor: '#4D4C53',
},
shadow: {
popover:
@@ -95,6 +101,7 @@ export const globalThemeVariables: (
'--affine-quote-color': theme.colors.quoteColor,
'--affine-selected-color': theme.colors.selectedColor,
'--affine-placeholder-color': theme.colors.placeHolderColor,
'--affine-border-color': theme.colors.borderColor,
'--affine-modal-shadow': theme.shadow.modal,
'--affine-popover-shadow': theme.shadow.popover,
@@ -102,11 +109,14 @@ export const globalThemeVariables: (
'--affine-font-xs': theme.font.xs, // tiny
'--affine-font-sm': theme.font.sm, // small
'--affine-font-base': theme.font.base,
'--affine-line-height-base': theme.font.lineHeightBase,
'--affine-z-index-modal': theme.zIndex.modal,
'--affine-z-index-popover': theme.zIndex.popover,
'--affine-font-family': theme.font.family,
'--affine-font-family2': theme.font.family2,
'--affine-paragraph-space': theme.space.paragraph,
};
};
packages/app/src/styles/themeProvider.tsx
+38 -22
View File
@@ -34,33 +34,49 @@ export const ThemeProvider = ({
localStorageThemeHelper.set(themeMode);
};
// ===================== A temporary solution, just use system theme and not remember the user selected ====================
useEffect(() => {
setMode(localStorageThemeHelper.get() || 'auto');
const systemThemeHelper = new SystemThemeHelper();
const systemTheme = systemThemeHelper.get();
setMode(systemTheme);
systemThemeHelper.onChange(() => {
setMode(systemThemeHelper.get());
});
}, []);
useEffect(() => {
const systemThemeHelper = new SystemThemeHelper();
const selectedThemeMode = localStorageThemeHelper.get();
setTheme(mode === 'auto' ? theme : mode);
}, [mode, setTheme, theme]);
// ===================== ====================
const themeMode = selectedThemeMode || mode;
if (themeMode === 'auto') {
setTheme(systemThemeHelper.get());
} else {
setTheme(themeMode);
}
// When system theme changed, change the theme mode
systemThemeHelper.onChange(() => {
// TODO: There may be should be provided a way to let user choose whether to
if (mode === 'auto') {
setTheme(systemThemeHelper.get());
}
});
return () => {
systemThemeHelper.dispose();
};
}, [mode]);
// useEffect(() => {
// setMode(localStorageThemeHelper.get() || 'auto');
// }, []);
//
// useEffect(() => {
// const systemThemeHelper = new SystemThemeHelper();
// const selectedThemeMode = localStorageThemeHelper.get();
//
// const themeMode = selectedThemeMode || mode;
// if (themeMode === 'auto') {
// setTheme(systemThemeHelper.get());
// } else {
// setTheme(themeMode);
// }
//
// // When system theme changed, change the theme mode
// systemThemeHelper.onChange(() => {
// // TODO: There may be should be provided a way to let user choose whether to
// if (mode === 'auto') {
// setTheme(systemThemeHelper.get());
// }
// });
//
// return () => {
// systemThemeHelper.dispose();
// };
// }, [mode]);
return (
<ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}>
packages/app/src/styles/types.ts
+10
View File
@@ -31,6 +31,7 @@ export interface AffineTheme {
quoteColor: string;
placeHolderColor: string;
selectedColor: string;
borderColor: string;
};
font: {
xs: string; // tiny
@@ -39,6 +40,8 @@ export interface AffineTheme {
family: string;
family2: string;
lineHeightBase: string | number;
};
zIndex: {
modal: number;
@@ -48,6 +51,9 @@ export interface AffineTheme {
modal: string;
popover: string;
};
space: {
paragraph: string;
};
}
export interface AffineThemeCSSVariables {
@@ -68,6 +74,7 @@ export interface AffineThemeCSSVariables {
'--affine-quote-color': AffineTheme['colors']['quoteColor'];
'--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
'--affine-selected-color': AffineTheme['colors']['selectedColor'];
'--affine-border-color': AffineTheme['colors']['borderColor'];
'--affine-modal-shadow': AffineTheme['shadow']['popover'];
'--affine-popover-shadow': AffineTheme['shadow']['modal'];
@@ -75,12 +82,15 @@ export interface AffineThemeCSSVariables {
'--affine-font-xs': AffineTheme['font']['xs']; // tiny
'--affine-font-sm': AffineTheme['font']['sm']; // small
'--affine-font-base': AffineTheme['font']['base'];
'--affine-line-height-base': AffineTheme['font']['lineHeightBase'];
'--affine-z-index-modal': AffineTheme['zIndex']['modal'];
'--affine-z-index-popover': AffineTheme['zIndex']['popover'];
'--affine-font-family': AffineTheme['font']['family'];
'--affine-font-family2': AffineTheme['font']['family2'];
'--affine-paragraph-space': AffineTheme['space']['paragraph'];
}
declare module '@emotion/react' {
pnpm-lock.yaml
Generated
+6
View File
@@ -25,6 +25,7 @@ importers:
'@emotion/react': ^11.10.4
'@emotion/server': ^11.10.0
'@emotion/styled': ^11.10.4
'@fontsource/space-mono': ^4.5.10
'@mui/base': ^5.0.0-alpha.87
'@mui/icons-material': ^5.10.9
'@mui/material': ^5.8.6
@@ -54,6 +55,7 @@ importers:
'@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
'@emotion/server': 11.10.0_@emotion+css@11.10.0
'@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y
'@fontsource/space-mono': 4.5.10
'@mui/base': 5.0.0-alpha.101_7ey2zzynotv32rpkwno45fsx4e
'@mui/icons-material': 5.10.9_5fncb4nagb4cvvcnwamw2rozfa
'@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4
@@ -377,6 +379,10 @@ packages:
- supports-color
dev: true
/@fontsource/space-mono/4.5.10:
resolution: {integrity: sha512-OTrWNdcPp01bZjEbSu52vMu9PaReUFylHAMI4lctKVbYUnm+e7a4eG6YcnRvDrJEMYHBDtEWLAsqGVldV5r1EQ==}
dev: false
/@humanwhocodes/config-array/0.10.4:
resolution: {integrity: sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==}
engines: {node: '>=10.10.0'}