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

milestone: publish alpha version (#637)

Browse Source 
- document folder
- full-text search
- blob storage
- basic edgeless support

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>
Co-authored-by: DiamondThree <diamond.shx@gmail.com>
Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: Himself65 <himself65@outlook.com>
Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
This commit is contained in:
DarkSky
2022-12-30 21:40:15 +08:00
committed by GitHub
parent cc790dcbc2
commit 6c2c7dcd48
296 changed files with 16139 additions and 2072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/app/src/styles/helper.ts
View File

@@ -17,6 +17,23 @@ export const displayFlex = (
alignContent,
};
};
export const displayInlineFlex = (
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: 'inline-flex',
justifyContent,
alignItems,
alignContent,
};
};
export const absoluteCenter = ({
horizontal = false,
@@ -82,3 +99,21 @@ export const fixedCenter = ({
})`,
};
};
export const textEllipsis = (lineNum = 1): CSSProperties => {
if (lineNum > 1) {
return {
display: '-webkit-box',
wordBreak: 'break-all',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: `${lineNum}`, //需要显示的行数
overflow: 'hidden',
textOverflow: 'ellipsis',
};
}
return {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
};
};

4
packages/app/src/styles/hooks.ts
View File

@@ -1,4 +0,0 @@
import { useContext } from 'react';
import { ThemeContext } from './themeProvider';
export const useTheme = () => useContext(ThemeContext);

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

@@ -1,7 +1,5 @@
export type { ThemeMode, ThemeProviderProps, AffineTheme } from './types';
export * from './styled';
export { ThemeProvider } from './themeProvider';
export * from './theme';
export { useTheme } from './hooks';
export * from './helper';

24
packages/app/src/styles/theme.ts
View File

@@ -16,18 +16,21 @@ export const getLightTheme = (
pageBackground: '#fff',
hoverBackground: '#F1F3FF',
innerHoverBackground: '#E0E6FF',
popoverBackground: '#fff',
tooltipBackground: '#6880FF',
codeBackground: '#f2f5f9',
warningBackground: '#FFF9C7',
errorBackground: '#FFDED8',
textColor: '#3A4C5C',
edgelessTextColor: '#3A4C5C',
iconColor: '#9096A5',
iconColor: '#888a9e',
linkColor: '#6880FF',
linkColor2: '#6880FF',
linkVisitedColor: '#ABB8FE',
popoverColor: '#4C6275',
inputColor: '#4C6275',
tooltipColor: '#fff',
codeColor: '#517ea6',
quoteColor: '#4C6275',
@@ -36,13 +39,21 @@ export const getLightTheme = (
borderColor: '#D0D7E3',
disableColor: '#C0C0C0',
warningColor: '#906616',
errorColor: '#EB4335',
},
font: {
xs: '12px',
sm: '16px',
base: '18px',
h1: '30px',
h2: '28px',
h3: '26px',
h4: '24px',
h5: '22px',
h6: '20px',
family: `Avenir Next, Poppins, ${basicFontFamily}`,
family2: `Space Mono, ${basicFontFamily}`,
mono: `Space Mono, ${basicFontFamily}`,
lineHeightBase: '26px',
},
zIndex: {
@@ -78,6 +89,7 @@ export const getDarkTheme = (
pageBackground: '#2c2c2c',
hoverBackground: '#3C3C42',
innerHoverBackground: '#E0E6FF',
popoverBackground: '#1F2021',
tooltipBackground: '#1F2021',
codeBackground:
@@ -85,14 +97,16 @@ export const getDarkTheme = (
? lightTheme.colors.codeBackground
: '#505662',
warningBackground: '#FFF9C7',
errorBackground: '#FFDED8',
textColor: '#fff',
edgelessTextColor: '#3A4C5C',
iconColor: '#9096A5',
iconColor: '#888a9e',
linkColor: '#7D91FF',
linkColor2: '#6880FF',
linkVisitedColor: '#505FAB',
popoverColor: '#C6CBD9',
inputColor: '#C6CBD9',
tooltipColor: '#fff',
codeColor:
editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD',
@@ -102,6 +116,7 @@ export const getDarkTheme = (
borderColor: '#4D4C53',
disableColor: '#4b4b4b',
warningColor: '#906616',
errorColor: '#EB4335',
},
shadow: {
popover:
@@ -137,6 +152,7 @@ export const globalThemeVariables: (
'--affine-link-visited-color': theme.colors.linkVisitedColor,
'--affine-icon-color': theme.colors.iconColor,
'--affine-popover-color': theme.colors.popoverColor,
'--affine-input-color': theme.colors.inputColor,
'--affine-code-color': theme.colors.codeColor,
'--affine-quote-color': theme.colors.quoteColor,
'--affine-selected-color': theme.colors.selectedColor,
@@ -158,7 +174,7 @@ export const globalThemeVariables: (
'--affine-z-index-popover': theme.zIndex.popover,
'--affine-font-family': theme.font.family,
'--affine-font-family2': theme.font.family2,
'--affine-font-mono': theme.font.mono,
'--affine-paragraph-space': theme.space.paragraph,
'--affine-popover-radius': theme.radius.popover,

97
packages/app/src/styles/themeProvider.tsx
View File

@@ -1,97 +0,0 @@
import {
ThemeProvider as EmotionThemeProvider,
Global,
css,
} from '@emotion/react';
import { createContext, useEffect, useState } from 'react';
import type { PropsWithChildren } from 'react';
import {
Theme,
ThemeMode,
ThemeProviderProps,
ThemeProviderValue,
} from './types';
import { getLightTheme, getDarkTheme, globalThemeVariables } from './theme';
import { SystemThemeHelper, localStorageThemeHelper } from './utils';
import { useEditor } from '@/components/editor-provider';
export const ThemeContext = createContext<ThemeProviderValue>({
mode: 'light',
changeMode: () => {},
theme: getLightTheme('page'),
});
export const ThemeProvider = ({
defaultTheme = 'light',
children,
}: PropsWithChildren<ThemeProviderProps>) => {
const [theme, setTheme] = useState<Theme>(defaultTheme);
const [mode, setMode] = useState<ThemeMode>('auto');
const { mode: editorMode } = useEditor();
const themeStyle =
theme === 'light' ? getLightTheme(editorMode) : getDarkTheme(editorMode);
const changeMode = (themeMode: ThemeMode) => {
themeMode !== mode && setMode(themeMode);
// Remember the theme mode which user selected for next time
localStorageThemeHelper.set(themeMode);
};
// ===================== A temporary solution, just use system theme and not remember the user selected ====================
useEffect(() => {
const systemThemeHelper = new SystemThemeHelper();
const systemTheme = systemThemeHelper.get();
setMode(systemTheme);
systemThemeHelper.onChange(() => {
setMode(systemThemeHelper.get());
});
}, []);
useEffect(() => {
setTheme(mode === 'auto' ? theme : mode);
}, [mode, setTheme, theme]);
// ===================== ====================
// 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 }}>
<Global
styles={css`
:root {
${globalThemeVariables(mode, themeStyle) as {}}
}
`}
/>
<EmotionThemeProvider theme={themeStyle}>{children}</EmotionThemeProvider>
</ThemeContext.Provider>
);
};
export default ThemeProvider;

15
packages/app/src/styles/types.ts
View File

@@ -23,8 +23,10 @@ export interface AffineTheme {
popoverBackground: string;
tooltipBackground: string;
hoverBackground: string;
innerHoverBackground: string;
codeBackground: string;
warningBackground: string;
errorBackground: string;
// Use for the page`s text
textColor: string;
// Use for the editor`s text, because in edgeless mode text is different form other
@@ -35,6 +37,7 @@ export interface AffineTheme {
linkVisitedColor: string;
iconColor: string;
popoverColor: string;
inputColor: string;
tooltipColor: string;
codeColor: string;
quoteColor: string;
@@ -43,14 +46,21 @@ export interface AffineTheme {
borderColor: string;
disableColor: string;
warningColor: string;
errorColor: string;
};
font: {
xs: string; // tiny
sm: string; // small
base: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
family: string;
family2: string;
mono: string;
lineHeightBase: string | number;
};
@@ -111,7 +121,7 @@ export interface AffineThemeCSSVariables {
'--affine-z-index-popover': AffineTheme['zIndex']['popover'];
'--affine-font-family': AffineTheme['font']['family'];
'--affine-font-family2': AffineTheme['font']['family2'];
'--affine-font-mono': AffineTheme['font']['mono'];
'--affine-paragraph-space': AffineTheme['space']['paragraph'];
@@ -119,5 +129,6 @@ export interface AffineThemeCSSVariables {
}
declare module '@emotion/react' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface Theme extends AffineTheme {}
}