From e1d780f33e3e187484b2a824525c23c78ecd3389 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 24 Oct 2022 11:42:11 +0800 Subject: [PATCH] feat: modify styles --- .../src/components/edgeless-toolbar/index.tsx | 53 ++++++++++++------- .../components/editor-mode-switch/style.ts | 2 +- .../app/src/components/editor-provider.tsx | 1 + packages/app/src/components/loading/styled.ts | 1 + packages/app/src/styles/theme.ts | 3 ++ packages/app/src/styles/types.ts | 4 ++ 6 files changed, 45 insertions(+), 19 deletions(-) diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx index 49762dde8..0334b5a1f 100644 --- a/packages/app/src/components/edgeless-toolbar/index.tsx +++ b/packages/app/src/components/edgeless-toolbar/index.tsx @@ -19,59 +19,59 @@ import { useEditor } from '@/components/editor-provider'; const toolbarList1 = [ { + flavor: 'select', icon: , toolTip: 'Select', - onClick: () => {}, disable: false, }, { + flavor: 'text', icon: , toolTip: 'Text(coming soon)', - onClick: () => {}, disable: true, }, { + flavor: 'shape', icon: , toolTip: 'Shape(coming soon)', - onClick: () => {}, disable: true, }, { + flavor: 'sticky', icon: , - toolTip: 'Sticker(coming soon)', - onClick: () => {}, + toolTip: 'Sticky(coming soon)', disable: true, }, { + flavor: 'pen', icon: , toolTip: 'Pen(coming soon)', - onClick: () => {}, disable: true, }, { + flavor: 'connector', icon: , toolTip: 'Connector(coming soon)', - onClick: () => {}, disable: true, }, ]; const toolbarList2 = [ { + flavor: 'undo', icon: , - toolTip: 'Undo(coming soon)', - onClick: () => {}, - disable: true, + toolTip: 'Undo', + disable: false, }, { + flavor: 'redo', icon: , - toolTip: 'Redo(coming soon)', - onClick: () => {}, - disable: true, + toolTip: 'Redo', + disable: false, }, ]; export const EdgelessToolbar = () => { - const { mode } = useEditor(); + const { mode, editor } = useEditor(); return ( { > - {toolbarList1.map(({ icon, toolTip, onClick, disable }, index) => { + {toolbarList1.map(({ icon, toolTip, flavor, disable }, index) => { return ( - + { + console.log('flavor', flavor); + }} + > {icon} @@ -92,10 +97,22 @@ export const EdgelessToolbar = () => { })} - {toolbarList2.map(({ icon, toolTip, onClick, disable }, index) => { + {toolbarList2.map(({ icon, toolTip, flavor, disable }, index) => { return ( - + { + switch (flavor) { + case 'undo': + editor?.store?.undo(); + break; + case 'redo': + editor?.store?.redo(); + break; + } + }} + > {icon} diff --git a/packages/app/src/components/editor-mode-switch/style.ts b/packages/app/src/components/editor-mode-switch/style.ts index ac7050e94..5c7620092 100644 --- a/packages/app/src/components/editor-mode-switch/style.ts +++ b/packages/app/src/components/editor-mode-switch/style.ts @@ -3,7 +3,7 @@ import { displayFlex, keyframes, styled } from '@/styles'; import spring, { toString } from 'css-spring'; import type { ItemStatus } from './type'; -const ANIMATE_DURATION = 400; +const ANIMATE_DURATION = 500; export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>( ({ shrink, theme }) => { diff --git a/packages/app/src/components/editor-provider.tsx b/packages/app/src/components/editor-provider.tsx index 030b912d1..52f04ceb3 100644 --- a/packages/app/src/components/editor-provider.tsx +++ b/packages/app/src/components/editor-provider.tsx @@ -9,6 +9,7 @@ type EditorContextValue = { setEditor: (editor: EditorContainer) => void; setMode: (mode: EditorContainer['mode']) => void; }; + type EditorContextProps = PropsWithChildren<{}>; export const EditorContext = createContext({ diff --git a/packages/app/src/components/loading/styled.ts b/packages/app/src/components/loading/styled.ts index 43c7254d2..f8b9e959d 100644 --- a/packages/app/src/components/loading/styled.ts +++ b/packages/app/src/components/loading/styled.ts @@ -1,5 +1,6 @@ import { styled } from '@/styles'; +// Inspired by https://codepen.io/graphilla/pen/rNvBMYY const loadingItemSize = '40px'; export const StyledLoading = styled.div` position: relative; diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index c24b83589..e07b9a33d 100644 --- a/packages/app/src/styles/theme.ts +++ b/packages/app/src/styles/theme.ts @@ -14,6 +14,7 @@ export const lightTheme: AffineTheme = { codeBackground: '#f2f5f9', textColor: '#3A4C5C', + edgelessTextColor: '#3A4C5C', iconColor: '#9096A5', linkColor: '#6880FF', linkColor2: '#6880FF', @@ -59,6 +60,7 @@ export const darkTheme: AffineTheme = { codeBackground: '#505662', textColor: '#fff', + edgelessTextColor: '#3A4C5C', iconColor: '#9096A5', linkColor: '#7D91FF', linkColor2: '#6880FF', @@ -91,6 +93,7 @@ export const globalThemeVariables: ( '--affine-code-background': theme.colors.codeBackground, '--affine-text-color': theme.colors.textColor, + '--affine-edgeless-text-color': theme.colors.edgelessTextColor, '--affine-link-color': theme.colors.linkColor, // In dark mode, normal text`s (not bold) color '--affine-link-color2': theme.colors.linkColor2, diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts index b95dd38fc..c8f33a0fd 100644 --- a/packages/app/src/styles/types.ts +++ b/packages/app/src/styles/types.ts @@ -20,7 +20,10 @@ export interface AffineTheme { hoverBackground: string; codeBackground: string; + // Use for the page`s text textColor: string; + // Use for the editor`s text, because in edgeless mode text is different form other + edgelessTextColor: string; linkColor: string; // In dark mode, normal text`s (not bold) color linkColor2: string; @@ -64,6 +67,7 @@ export interface AffineThemeCSSVariables { '--affine-code-background': AffineTheme['colors']['codeBackground']; '--affine-text-color': AffineTheme['colors']['textColor']; + '--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor']; '--affine-link-color': AffineTheme['colors']['linkColor']; // In dark mode, normal text`s (not bold) color '--affine-link-color2': AffineTheme['colors']['linkColor2'];