From bea3d42f4078965f2c2d85507f4e3abbbe120e32 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Tue, 3 Sep 2024 03:14:49 +0000 Subject: [PATCH] feat(core): add color picker ui to editor settings (#8053) close AF-1306 AF-1280 ![CleanShot 2024-09-03 at 00 23 10@2x](https://github.com/user-attachments/assets/46928c85-45ec-43b1-bbde-24beb7c5c580) --- .../editor/edgeless/connector.tsx | 59 +++++-- .../editor/edgeless/mind-map.tsx | 15 +- .../general-setting/editor/edgeless/note.tsx | 61 +++++-- .../general-setting/editor/edgeless/pen.tsx | 17 +- .../general-setting/editor/edgeless/point.tsx | 21 +++ .../general-setting/editor/edgeless/shape.tsx | 81 ++++++---- .../general-setting/editor/edgeless/text.tsx | 71 +++++--- .../general-setting/editor/general.tsx | 151 ++++++++++-------- .../general-setting/editor/menu.tsx | 23 +++ 9 files changed, 330 insertions(+), 169 deletions(-) create mode 100644 packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/point.tsx create mode 100644 packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/menu.tsx diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx index b127f658c1..c6edd4e805 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx @@ -1,5 +1,4 @@ import { - Menu, MenuItem, MenuTrigger, RadioGroup, @@ -18,7 +17,9 @@ import { import { useFramework, useLiveData } from '@toeverything/infra'; import { useCallback, useMemo } from 'react'; +import { DropdownMenu } from '../menu'; import { menuTrigger, settingWrapper } from '../style.css'; +import { Point } from './point'; import { EdgelessSnapshot } from './snapshot'; enum ConnecterStyle { @@ -130,6 +131,11 @@ export const ConnectorSettings = () => { [editorSetting] ); + const currentColor = useMemo(() => { + const color = settings.connector.stroke; + return Object.entries(LineColor).find(([, value]) => value === color); + }, [settings]); + const colorItems = useMemo(() => { const { stroke } = settings.connector; return Object.entries(LineColor).map(([name, value]) => { @@ -138,7 +144,12 @@ export const ConnectorSettings = () => { }; const isSelected = stroke === value; return ( - + } + > {name} ); @@ -188,11 +199,19 @@ export const ConnectorSettings = () => { ]()} desc={''} > - - - {String(settings.connector.stroke)} - - + {currentColor ? ( + } + > + {currentColor[0]} + + } + /> + ) : null} { ]()} desc={''} > - - - {String(settings.connector.frontEndpointStyle)} - - + + {String(settings.connector.frontEndpointStyle)} + + } + /> { ]()} desc={''} > - - - {String(settings.connector.rearEndpointStyle)} - - + + {String(settings.connector.rearEndpointStyle)} + + } + /> ); diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/mind-map.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/mind-map.tsx index 33d4a5c584..0972863d32 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/mind-map.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/mind-map.tsx @@ -1,5 +1,4 @@ import { - Menu, MenuItem, MenuTrigger, RadioGroup, @@ -9,6 +8,7 @@ import { SettingRow } from '@affine/component/setting-components'; import { useI18n } from '@affine/i18n'; import { useMemo, useState } from 'react'; +import { DropdownMenu } from '../menu'; import { menuTrigger, settingWrapper } from '../style.css'; import { EdgelessSnapshot } from './snapshot'; @@ -54,11 +54,14 @@ export const MindMapSettings = () => { name={t['com.affine.settings.editorSettings.edgeless.style']()} desc={''} > - Style 1}> - - Style 1 - - + Style 1} + trigger={ + + Style 1 + + } + /> { }; const isSelected = background === value; return ( - + } + > {name} ); @@ -140,6 +146,13 @@ export const NoteSettings = () => { }); }, [editorSetting, settings]); + const currentColor = useMemo(() => { + const { background } = settings['affine:note']; + return Object.entries(NoteBackgroundColor).find( + ([, value]) => value === background + ); + }, [settings]); + return ( <> { ]()} desc={''} > - - - {String(settings['affine:note'].background)} - - + {currentColor ? ( + } + > + {currentColor[0]} + + } + /> + ) : null} - - - {String(settings['affine:note'].edgeless.style.borderRadius)} - - + + {String(settings['affine:note'].edgeless.style.borderRadius)} + + } + /> - - - {String(settings['affine:note'].edgeless.style.shadowType)} - - + + {String(settings['affine:note'].edgeless.style.shadowType)} + + } + /> { }, [editorSetting] ); - return ( <> { name={t['com.affine.settings.editorSettings.edgeless.pen.color']()} desc={''} > - - - {String(settings.brush.color)} - - + + {String(settings.brush.color)} + + } + /> { + return ( +
+ ); +}; diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx index fdde2abc48..fccc763552 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx @@ -1,5 +1,4 @@ import { - Menu, MenuItem, MenuTrigger, RadioGroup, @@ -10,6 +9,7 @@ import { SettingRow } from '@affine/component/setting-components'; import { useI18n } from '@affine/i18n'; import { useMemo, useState } from 'react'; +import { DropdownMenu } from '../menu'; import { menuTrigger, settingWrapper, shapeIndicator } from '../style.css'; import { EdgelessSnapshot } from './snapshot'; @@ -164,11 +164,14 @@ export const ShapeSettings = () => { ]()} desc={''} > - Yellow}> - - Yellow - - + Yellow} + trigger={ + + Yellow + + } + /> { ]()} desc={''} > - Yellow}> - - Yellow - - + Yellow} + trigger={ + + Yellow + + } + /> { ]()} desc={''} > - Yellow}> - - Yellow - - + Yellow} + trigger={ + + Yellow + + } + /> - Inter}> - - Inter - - + {' '} + Inter} + trigger={ + + Inter + + } + /> { ]()} desc={''} > - 15px}> - - 15px - - + 15px} + trigger={ + + 15px + + } + /> { ]()} desc={''} > - Regular}> - - Regular - - + Regular} + trigger={ + + Regular + + } + /> { @@ -73,7 +74,12 @@ export const TextSettings = () => { }; const isSelected = color === value; return ( - + } + > {name} ); @@ -125,6 +131,10 @@ export const TextSettings = () => { }); }, [editorSetting, settings]); + const currentColor = useMemo(() => { + const { color } = settings['affine:edgeless-text']; + return Object.entries(LineColor).find(([, value]) => value === color); + }, [settings]); return ( <> { name={t['com.affine.settings.editorSettings.edgeless.text.color']()} desc={''} > - - - {String(settings['affine:edgeless-text'].color)} - - + {currentColor ? ( + } + > + {currentColor[0]} + + } + /> + ) : null} { ]()} desc={''} > - - - {FontFamilyMap[settings['affine:edgeless-text'].fontFamily]} - - + + {FontFamilyMap[settings['affine:edgeless-text'].fontFamily]} + + } + /> { ]()} desc={''} > - - - {String(settings['affine:edgeless-text'].fontStyle)} - - + + {String(settings['affine:edgeless-text'].fontStyle)} + + } + /> { ]()} desc={''} > - - - {settings['affine:edgeless-text'].fontWeight} - - + + {settings['affine:edgeless-text'].fontWeight} + + } + /> { @@ -94,13 +95,18 @@ const FontFamilySettings = () => { ); return ( - + + + ); }; @@ -303,13 +309,71 @@ const NewDocDefaultModeSettings = () => { [editorSettingService.editorSetting] ); return ( - + + + + ); +}; + +export const DeFaultCodeBlockSettings = () => { + const t = useI18n(); + return ( + <> + + Plain Text} + trigger={ + + Plain Text + + } + /> + + + + + + ); +}; + +export const SpellCheckSettings = () => { + const t = useI18n(); + return ( + + + ); }; @@ -323,62 +387,11 @@ export const General = () => { > - - - + - - - - - Plain Text} - > - - Plain Text - - - - - - - - - + + + ); }; diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/menu.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/menu.tsx new file mode 100644 index 0000000000..987b3a22fc --- /dev/null +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/menu.tsx @@ -0,0 +1,23 @@ +import { Menu } from '@affine/component'; +import { type ReactNode } from 'react'; + +export const DropdownMenu = ({ + items, + trigger, +}: { + items: ReactNode; + trigger: ReactNode; +}) => { + return ( + + {trigger} + + ); +};