toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-30 17:42:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): temporarily add page mode editor settings to appearance settings (#8090)

Browse Source 
Will remove it when editor settings is released.

![CleanShot 2024-09-04 at 18 19 29@2x](https://github.com/user-attachments/assets/2b2b75ff-acbf-4ca9-ae60-292e73663e13)
This commit is contained in:
JimmFly 2024-09-05 08:30:01 +00:00
parent 059030fbeb
commit 3837c84791
No known key found for this signature in database
GPG Key ID: 126E0320FEB0D05C
6 changed files with 97 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
View File

@ -13,6 +13,7 @@ import { useCallback, useMemo } from 'react';
import { useAppSettingHelper } from '../../../../../hooks/affine/use-app-setting-helper';
import { LanguageMenu } from '../../../language-menu';
import { Page } from '../editor/page';
import { DateFormatSetting } from './date-format-setting';
import { settingWrapper } from './style.css';
import { ThemeEditorSetting } from './theme-editor-setting';
@ -119,6 +120,8 @@ export const AppearanceSettings = () => {
) : null}
{runtimeConfig.enableThemeEditor ? <ThemeEditorSetting /> : null}
</SettingWrapper>
{/* //TODO(@JimmFly): remove Page component when stable release */}
<Page />
{runtimeConfig.enableNewSettingUnstableApi ? (
<SettingWrapper title={t['com.affine.appearanceSettings.date.title']()}>
<SettingRow

11
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx
View File

@ -11,6 +11,7 @@ import { useI18n } from '@affine/i18n';
import {
ConnectorMode,
LineColor,
LineColorMap,
PointStyle,
StrokeStyle,
} from '@blocksuite/blocks';
@ -19,6 +20,7 @@ import { useCallback, useMemo } from 'react';
import { DropdownMenu } from '../menu';
import { menuTrigger, settingWrapper } from '../style.css';
import { useColor } from '../utils';
import { Point } from './point';
import { EdgelessSnapshot } from './snapshot';
@ -32,6 +34,7 @@ export const ConnectorSettings = () => {
const framework = useFramework();
const { editorSetting } = framework.get(EditorSettingService);
const settings = useLiveData(editorSetting.settings$);
const getColorFromMap = useColor();
const connecterStyleItems = useMemo<RadioItem[]>(
() => [
@ -133,8 +136,8 @@ export const ConnectorSettings = () => {
const currentColor = useMemo(() => {
const color = settings.connector.stroke;
return Object.entries(LineColor).find(([, value]) => value === color);
}, [settings]);
return getColorFromMap(color, LineColorMap);
}, [getColorFromMap, settings.connector.stroke]);
const colorItems = useMemo(() => {
const { stroke } = settings.connector;
@ -206,9 +209,9 @@ export const ConnectorSettings = () => {
trigger={
<MenuTrigger
className={menuTrigger}
prefix={<Point color={currentColor[1]} />}
prefix={<Point color={currentColor.value} />}
>
{currentColor[0]}
{currentColor.key}
</MenuTrigger>
}
/>

13
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx
View File

@ -11,6 +11,7 @@ import { useI18n } from '@affine/i18n';
import {
createEnumMap,
NoteBackgroundColor,
NoteBackgroundColorMap,
NoteShadow,
NoteShadowMap,
StrokeStyle,
@ -20,6 +21,7 @@ import { useCallback, useMemo } from 'react';
import { DropdownMenu } from '../menu';
import { menuTrigger, settingWrapper } from '../style.css';
import { useColor } from '../utils';
import { Point } from './point';
import { EdgelessSnapshot } from './snapshot';
@ -46,6 +48,7 @@ export const NoteSettings = () => {
const framework = useFramework();
const { editorSetting } = framework.get(EditorSettingService);
const settings = useLiveData(editorSetting.settings$);
const getColorFromMap = useColor();
const borderStyleItems = useMemo<RadioItem[]>(
() => [
@ -160,10 +163,8 @@ export const NoteSettings = () => {
const currentColor = useMemo(() => {
const { background } = settings['affine:note'];
return Object.entries(NoteBackgroundColor).find(
([, value]) => value === background
);
}, [settings]);
return getColorFromMap(background, NoteBackgroundColorMap);
}, [getColorFromMap, settings]);
return (
<>
@ -185,9 +186,9 @@ export const NoteSettings = () => {
trigger={
<MenuTrigger
className={menuTrigger}
prefix={<Point color={currentColor[1]} />}
prefix={<Point color={currentColor.value} />}
>
{currentColor[0]}
{currentColor.key}
</MenuTrigger>
}
/>

39
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx
View File

@ -2,12 +2,14 @@ import { MenuItem, MenuTrigger, Slider } from '@affine/component';
import { SettingRow } from '@affine/component/setting-components';
import { EditorSettingService } from '@affine/core/modules/editor-settting';
import { useI18n } from '@affine/i18n';
import { LineColor } from '@blocksuite/blocks';
import { LineColor, LineColorMap } from '@blocksuite/blocks';
import { useFramework, useLiveData } from '@toeverything/infra';
import { useCallback, useMemo } from 'react';
import { DropdownMenu } from '../menu';
import { menuTrigger } from '../style.css';
import { useColor } from '../utils';
import { Point } from './point';
import { EdgelessSnapshot } from './snapshot';
export const PenSettings = () => {
@ -15,6 +17,11 @@ export const PenSettings = () => {
const framework = useFramework();
const { editorSetting } = framework.get(EditorSettingService);
const settings = useLiveData(editorSetting.settings$);
const getColorFromMap = useColor();
const currentColor = useMemo(() => {
return getColorFromMap(settings.brush.color, LineColorMap);
}, [getColorFromMap, settings.brush.color]);
const colorItems = useMemo(() => {
const { color } = settings.brush;
@ -24,12 +31,17 @@ export const PenSettings = () => {
};
const isSelected = color === value;
return (
<MenuItem key={name} onSelect={handler} selected={isSelected}>
<MenuItem
key={name}
onSelect={handler}
selected={isSelected}
prefix={<Point color={value} />}
>
{name}
</MenuItem>
);
});
}, [editorSetting, settings]);
}, [editorSetting, settings.brush]);
const borderThickness = settings.brush.lineWidth;
const setBorderThickness = useCallback(
@ -52,14 +64,19 @@ export const PenSettings = () => {
name={t['com.affine.settings.editorSettings.edgeless.pen.color']()}
desc={''}
>
<DropdownMenu
items={colorItems}
trigger={
<MenuTrigger className={menuTrigger}>
{String(settings.brush.color)}
</MenuTrigger>
}
/>
{currentColor ? (
<DropdownMenu
items={colorItems}
trigger={
<MenuTrigger
className={menuTrigger}
prefix={<Point color={currentColor.value} />}
>
{currentColor.key}
</MenuTrigger>
}
/>
) : null}
</SettingRow>
<SettingRow
name={t['com.affine.settings.editorSettings.edgeless.pen.thickness']()}

11
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx
View File

@ -14,6 +14,7 @@ import {
FontWeight,
FontWeightMap,
LineColor,
LineColorMap,
TextAlign,
} from '@blocksuite/blocks';
import { useFramework, useLiveData } from '@toeverything/infra';
@ -21,6 +22,7 @@ import { useCallback, useMemo } from 'react';
import { DropdownMenu } from '../menu';
import { menuTrigger, settingWrapper } from '../style.css';
import { useColor } from '../utils';
import { Point } from './point';
import { EdgelessSnapshot } from './snapshot';
@ -29,6 +31,7 @@ export const TextSettings = () => {
const framework = useFramework();
const { editorSetting } = framework.get(EditorSettingService);
const settings = useLiveData(editorSetting.settings$);
const getColorFromMap = useColor();
const alignItems = useMemo<RadioItem[]>(
() => [
@ -134,8 +137,8 @@ export const TextSettings = () => {
const currentColor = useMemo(() => {
const { color } = settings['affine:edgeless-text'];
return Object.entries(LineColor).find(([, value]) => value === color);
}, [settings]);
return getColorFromMap(color, LineColorMap);
}, [getColorFromMap, settings]);
return (
<>
<EdgelessSnapshot
@ -154,9 +157,9 @@ export const TextSettings = () => {
trigger={
<MenuTrigger
className={menuTrigger}
prefix={<Point color={currentColor[1]} />}
prefix={<Point color={currentColor.value} />}
>
{currentColor[0]}
{currentColor.key}
</MenuTrigger>
}
/>

45
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/utils.ts Normal file
View File

@ -0,0 +1,45 @@
import { useTheme } from 'next-themes';
function getColorFromMap(
color: string | { normal: string } | { light: string; dark: string },
colorMap: { [key: string]: string },
theme: 'light' | 'dark' = 'light'
):
| {
value: string;
key: string;
}
| undefined {
if (typeof color === 'string') {
return { value: color, key: colorMap[color] };
}
if ('normal' in color) {
return {
value: color.normal,
key: colorMap[color.normal],
};
}
if ('light' in color && 'dark' in color) {
return {
value: color[theme],
key: colorMap[color[theme]],
};
}
return undefined;
}
export const useColor = () => {
const { resolvedTheme } = useTheme();
return (
color: string | { normal: string } | { light: string; dark: string },
colorMap: { [key: string]: string }
) =>
getColorFromMap(
color,
colorMap,
resolvedTheme as 'light' | 'dark' | undefined
);
};