From c53adbc7e893d91c8da1dbc2d4fef700be579bed Mon Sep 17 00:00:00 2001 From: JimmFly Date: Wed, 28 Aug 2024 02:35:26 +0000 Subject: [PATCH] chore: adjust font menu and slider style (#7989) ![CleanShot 2024-08-27 at 15 52 09@2x](https://github.com/user-attachments/assets/69c8a340-0d59-4d8d-846e-73dc81f2800a) ![CleanShot 2024-08-27 at 15 52 39@2x](https://github.com/user-attachments/assets/2177f267-bdc1-459b-b043-868642b08d9a) --- .../component/src/ui/slider/index.css.ts | 8 +- .../general-setting/editor/general.tsx | 76 ++++++++++++------- .../general-setting/editor/style.css.ts | 47 +++++++++++- 3 files changed, 96 insertions(+), 35 deletions(-) diff --git a/packages/frontend/component/src/ui/slider/index.css.ts b/packages/frontend/component/src/ui/slider/index.css.ts index 4d2811098..70b752803 100644 --- a/packages/frontend/component/src/ui/slider/index.css.ts +++ b/packages/frontend/component/src/ui/slider/index.css.ts @@ -29,8 +29,8 @@ export const filledTrackStyle = style({ }); export const thumbStyle = style({ - width: '8px', - height: '8px', + width: '14px', + height: '14px', backgroundColor: cssVarV2('icon/primary'), borderRadius: '50%', position: 'absolute', @@ -40,8 +40,8 @@ export const thumbStyle = style({ }); export const nodeStyle = style({ - width: '4px', - height: '4px', + width: '8px', + height: '8px', border: '2px solid transparent', backgroundColor: cssVarV2('layer/insideBorder/border'), borderRadius: '50%', diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx index 898941886..c43c7985d 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx @@ -23,12 +23,9 @@ import { SystemFontFamilyService, } from '@affine/core/modules/system-font-family'; import { useI18n } from '@affine/i18n'; -import { - type DocMode, - useLiveData, - useService, - useServices, -} from '@toeverything/infra'; +import { DoneIcon, SearchIcon } from '@blocksuite/icons/rc'; +import { type DocMode, useLiveData, useServices } from '@toeverything/infra'; +import clsx from 'clsx'; import { type ChangeEvent, forwardRef, @@ -41,7 +38,7 @@ import { } from 'react'; import { Virtuoso } from 'react-virtuoso'; -import { menu, menuTrigger, searchInput, settingWrapper } from './style.css'; +import * as styles from './style.css'; const FontFamilySettings = () => { const t = useI18n(); @@ -101,7 +98,7 @@ const FontFamilySettings = () => { items={radioItems} value={settings.fontFamily} width={250} - className={settingWrapper} + className={styles.settingWrapper} onChange={handleFontFamilyChange} /> ); @@ -126,7 +123,15 @@ const Scroller = forwardRef< Scroller.displayName = 'Scroller'; const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => { - const systemFontFamily = useService(SystemFontFamilyService).systemFontFamily; + const { systemFontFamilyService, editorSettingService } = useServices({ + SystemFontFamilyService, + EditorSettingService, + }); + const systemFontFamily = systemFontFamilyService.systemFontFamily; + + const currentCustomFont = useLiveData( + editorSettingService.editorSetting.settings$ + ).customFontFamily; useEffect(() => { if (systemFontFamily.fontList$.value.length === 0) { systemFontFamily.loadFontList(); @@ -153,14 +158,17 @@ const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => { return (
- +
+ + +
{isLoading ? ( @@ -178,11 +186,12 @@ const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => { key={result[index].fullName} font={result[index]} onSelect={onSelect} + currentFont={currentCustomFont} /> )} /> ) : ( -
No font found
+
No results found.
)} @@ -194,9 +203,11 @@ const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => { const FontMenuItem = ({ font, + currentFont, onSelect, }: { font: FontData; + currentFont: string; onSelect: (font: string) => void; }) => { const handleFontSelect = useCallback( @@ -204,13 +215,22 @@ const FontMenuItem = ({ [font, onSelect] ); const fontFamily = getFontFamily(font.family); + const selected = currentFont === font.fullName; + return ( - - {font.fullName} + +
+
+
+ {font.fullName} +
+
+ {font.fullName} +
+
+ + {selected && } +
); }; @@ -246,7 +266,7 @@ const CustomFontFamilySettings = () => { style: { width: '250px' }, }} > - + {settings.customFontFamily || 'Select a font'} @@ -276,7 +296,7 @@ const NewDocDefaultModeSettings = () => { items={radioItems} value={value} width={250} - className={settingWrapper} + className={styles.settingWrapper} onChange={setValue} /> ); @@ -319,11 +339,11 @@ export const General = () => { > Plain Text} > - + Plain Text diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts index 6102f91c6..5e4705181 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts @@ -49,11 +49,16 @@ export const shapeIndicator = style({ boxShadow: 'none', backgroundColor: cssVarV2('layer/background/tertiary'), }); - +export const InputContainer = style({ + display: 'flex', + alignItems: 'center', + padding: '4px', + width: '100%', + justifyContent: 'flex-start', + gap: '6px', +}); export const searchInput = style({ flexGrow: 1, - padding: '10px 0', - margin: '-10px 0', border: 'none', outline: 'none', fontSize: cssVar('fontSm'), @@ -64,3 +69,39 @@ export const searchInput = style({ color: cssVarV2('text/placeholder'), }, }); +export const searchIcon = style({ + color: cssVarV2('icon/primary'), + fontSize: '20px', +}); +export const fontItemContainer = style({ + display: 'flex', + justifyContent: 'space-between', + fontSize: cssVar('fontXs'), + alignItems: 'center', + overflow: 'hidden', + width: '100%', +}); +export const fontItem = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', +}); +export const fontLabel = style({ + color: cssVarV2('text/secondary'), + width: '100%', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', + selectors: { + '&.secondary': { + color: cssVarV2('text/secondary'), + }, + }, +}); +export const selectedIcon = style({ + color: cssVarV2('button/primary'), + marginLeft: '8px', +});