Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-25 10:22:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): fix edgeless toolbar theme (#10897)

Browse Source
This commit is contained in:
fundon
2025-03-20 02:08:20 +00:00
parent ccc210f88a
commit a7acd5c5b1
9 changed files with 54 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
blocksuite/affine/blocks/block-note/src/configs/toolbar.ts
View File

@@ -15,7 +15,6 @@ import {
resolveColor, resolveColor,
} from '@blocksuite/affine-model'; } from '@blocksuite/affine-model';
import { import {
FeatureFlagService,
NotificationProvider, NotificationProvider,
SidebarExtensionIdentifier, SidebarExtensionIdentifier,
type ToolbarAction, type ToolbarAction,
@@ -64,9 +63,7 @@ const builtinSurfaceToolbarConfig = {
when(ctx) { when(ctx) {
return ( return (
ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 && ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 &&
ctx.std ctx.features.getFlag('enable_advanced_block_visibility')
.get(FeatureFlagService)
.getFlag('enable_advanced_block_visibility')
); );
}, },
content(ctx) { content(ctx) {
@@ -98,9 +95,7 @@ const builtinSurfaceToolbarConfig = {
return ( return (
elements.length === 1 && elements.length === 1 &&
!elements[0].isPageBlock() && !elements[0].isPageBlock() &&
!ctx.std !ctx.features.getFlag('enable_advanced_block_visibility')
.get(FeatureFlagService)
.getFlag('enable_advanced_block_visibility')
); );
}, },
generate(ctx) { generate(ctx) {
@@ -153,10 +148,8 @@ const builtinSurfaceToolbarConfig = {
const models = ctx.getSurfaceModelsByType(NoteBlockModel); const models = ctx.getSurfaceModelsByType(NoteBlockModel);
if (!models.length) return null; if (!models.length) return null;
const enableCustomColor = ctx.std const enableCustomColor = ctx.features.getFlag('enable_color_picker');
.get(FeatureFlagService) const theme = ctx.theme.edgeless$.value;
.getFlag('enable_color_picker');
const theme = ctx.themeProvider.edgelessTheme;
const firstModel = models[0]; const firstModel = models[0];
const background = const background =
@@ -216,7 +209,7 @@ const builtinSurfaceToolbarConfig = {
const models = ctx.getSurfaceModelsByType(NoteBlockModel); const models = ctx.getSurfaceModelsByType(NoteBlockModel);
if (!models.length) return null; if (!models.length) return null;
const theme = ctx.themeProvider.edgelessTheme; const theme = ctx.theme.edgeless$.value;
const firstModel = models[0]; const firstModel = models[0];
const { shadowType } = firstModel.props.edgeless.style; const { shadowType } = firstModel.props.edgeless.style;
@@ -367,9 +360,7 @@ const builtinSurfaceToolbarConfig = {
when(ctx) { when(ctx) {
return ( return (
ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 && ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 &&
ctx.std ctx.features.getFlag('enable_advanced_block_visibility')
.get(FeatureFlagService)
.getFlag('enable_advanced_block_visibility')
); );
}, },
run(ctx) { run(ctx) {

11
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
View File

@@ -9,10 +9,7 @@ import {
LineWidth, LineWidth,
resolveColor, resolveColor,
} from '@blocksuite/affine-model'; } from '@blocksuite/affine-model';
import { import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
FeatureFlagService,
type ToolbarModuleConfig,
} from '@blocksuite/affine-shared/services';
import { import {
getMostCommonResolvedValue, getMostCommonResolvedValue,
getMostCommonValue, getMostCommonValue,
@@ -58,10 +55,8 @@ export const builtinBrushToolbarConfig = {
const models = ctx.getSurfaceModelsByType(BrushElementModel); const models = ctx.getSurfaceModelsByType(BrushElementModel);
if (!models.length) return null; if (!models.length) return null;
const enableCustomColor = ctx.std const enableCustomColor = ctx.features.getFlag('enable_color_picker');
.get(FeatureFlagService) const theme = ctx.theme.edgeless$.value;
.getFlag('enable_color_picker');
const theme = ctx.themeProvider.edgelessTheme;
const field = 'color'; const field = 'color';
const firstModel = models[0]; const firstModel = models[0];

15
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts
View File

@@ -21,11 +21,10 @@ import {
resolveColor, resolveColor,
StrokeStyle, StrokeStyle,
} from '@blocksuite/affine-model'; } from '@blocksuite/affine-model';
import { import type {
FeatureFlagService, ToolbarContext,
type ToolbarContext, ToolbarGenericAction,
type ToolbarGenericAction, ToolbarModuleConfig,
type ToolbarModuleConfig,
} from '@blocksuite/affine-shared/services'; } from '@blocksuite/affine-shared/services';
import { import {
getMostCommonResolvedValue, getMostCommonResolvedValue,
@@ -129,10 +128,8 @@ export const builtinConnectorToolbarConfig = {
const models = ctx.getSurfaceModelsByType(ConnectorElementModel); const models = ctx.getSurfaceModelsByType(ConnectorElementModel);
if (!models.length) return null; if (!models.length) return null;
const enableCustomColor = ctx.std const enableCustomColor = ctx.features.getFlag('enable_color_picker');
.get(FeatureFlagService) const theme = ctx.theme.edgeless$.value;
.getFlag('enable_color_picker');
const theme = ctx.themeProvider.edgelessTheme;
const field = 'stroke'; const field = 'stroke';
const firstModel = models[0]; const firstModel = models[0];

7
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts
View File

@@ -16,7 +16,6 @@ import {
SurfaceRefBlockSchema, SurfaceRefBlockSchema,
} from '@blocksuite/affine-model'; } from '@blocksuite/affine-model';
import { import {
FeatureFlagService,
type ToolbarModuleConfig, type ToolbarModuleConfig,
ToolbarModuleExtension, ToolbarModuleExtension,
} from '@blocksuite/affine-shared/services'; } from '@blocksuite/affine-shared/services';
@@ -125,10 +124,8 @@ const builtinSurfaceToolbarConfig = {
const models = ctx.getSurfaceModelsByType(FrameBlockModel); const models = ctx.getSurfaceModelsByType(FrameBlockModel);
if (!models.length) return null; if (!models.length) return null;
const theme = ctx.themeProvider.edgelessTheme; const enableCustomColor = ctx.features.getFlag('enable_color_picker');
const enableCustomColor = ctx.std const theme = ctx.theme.edgeless$.value;
.get(FeatureFlagService)
.getFlag('enable_color_picker');
const field = 'background'; const field = 'background';
const firstModel = models[0]; const firstModel = models[0];

13
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts
View File

@@ -24,10 +24,9 @@ import {
ShapeType, ShapeType,
StrokeStyle, StrokeStyle,
} from '@blocksuite/affine-model'; } from '@blocksuite/affine-model';
import { import type {
FeatureFlagService, ToolbarGenericAction,
type ToolbarGenericAction, ToolbarModuleConfig,
type ToolbarModuleConfig,
} from '@blocksuite/affine-shared/services'; } from '@blocksuite/affine-shared/services';
import { getMostCommonValue } from '@blocksuite/affine-shared/utils'; import { getMostCommonValue } from '@blocksuite/affine-shared/utils';
import { Bound } from '@blocksuite/global/gfx'; import { Bound } from '@blocksuite/global/gfx';
@@ -184,10 +183,8 @@ export const builtinShapeToolbarConfig = {
const models = ctx.getSurfaceModelsByType(ShapeElementModel); const models = ctx.getSurfaceModelsByType(ShapeElementModel);
if (!models.length) return null; if (!models.length) return null;
const enableCustomColor = ctx.std const enableCustomColor = ctx.features.getFlag('enable_color_picker');
.get(FeatureFlagService) const theme = ctx.theme.edgeless$.value;
.getFlag('enable_color_picker');
const theme = ctx.themeProvider.edgelessTheme;
const firstModel = models[0]; const firstModel = models[0];
const originalFillColor = firstModel.fillColor; const originalFillColor = firstModel.fillColor;

13
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
View File

@@ -16,10 +16,9 @@ import {
TextAlign, TextAlign,
type TextStyleProps, type TextStyleProps,
} from '@blocksuite/affine-model'; } from '@blocksuite/affine-model';
import { import type {
FeatureFlagService, ToolbarActions,
type ToolbarActions, ToolbarContext,
type ToolbarContext,
} from '@blocksuite/affine-shared/services'; } from '@blocksuite/affine-shared/services';
import { import {
getMostCommonResolvedValue, getMostCommonResolvedValue,
@@ -180,10 +179,8 @@ export function createTextActions<
); );
if (!allowed) return null; if (!allowed) return null;
const enableCustomColor = ctx.std const enableCustomColor = ctx.features.getFlag('enable_color_picker');
.get(FeatureFlagService) const theme = ctx.theme.edgeless$.value;
.getFlag('enable_color_picker');
const theme = ctx.themeProvider.edgelessTheme;
const palettes = const palettes =
type === 'shape' type === 'shape'

4
blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts
View File

@@ -62,9 +62,7 @@ export class CardStyleDropdownMenu extends SignalWatcher(LitElement) {
@property({ attribute: false }) @property({ attribute: false })
accessor style$!: Signal<string> | ReadonlySignal<string>; accessor style$!: Signal<string> | ReadonlySignal<string>;
icons$ = computed( icons$ = computed(() => cardStyleMap[this.context.theme.theme$.value]);
() => cardStyleMap[this.context.themeProvider.theme$.value]
);
override render() { override render() {
const { const {

11
blocksuite/affine/shared/src/services/toolbar-service/context.ts
View File

@@ -18,6 +18,7 @@ import type {
import { DocModeProvider } from '../doc-mode-service'; import { DocModeProvider } from '../doc-mode-service';
import { EditPropsStore } from '../edit-props-store'; import { EditPropsStore } from '../edit-props-store';
import { FeatureFlagService } from '../feature-flag-service';
import { TelemetryProvider, type TelemetryService } from '../telemetry-service'; import { TelemetryProvider, type TelemetryService } from '../telemetry-service';
import { ThemeProvider } from '../theme-service'; import { ThemeProvider } from '../theme-service';
import { ToolbarRegistryIdentifier } from './registry'; import { ToolbarRegistryIdentifier } from './registry';
@@ -98,18 +99,18 @@ abstract class ToolbarContextBase {
return this.std.get(GfxControllerIdentifier); return this.std.get(GfxControllerIdentifier);
} }
get themeProvider() {
return this.std.get(ThemeProvider);
}
get theme() { get theme() {
return this.themeProvider.theme; return this.std.get(ThemeProvider);
} }
get settings() { get settings() {
return this.std.get(EditPropsStore); return this.std.get(EditPropsStore);
} }
get features() {
return this.std.get(FeatureFlagService);
}
get toolbarRegistry() { get toolbarRegistry() {
return this.std.get(ToolbarRegistryIdentifier); return this.std.get(ToolbarRegistryIdentifier);
} }

22
blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts
View File

@@ -1,7 +1,11 @@
import { DatabaseSelection } from '@blocksuite/affine-block-database'; import { DatabaseSelection } from '@blocksuite/affine-block-database';
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import { TableSelection } from '@blocksuite/affine-block-table'; import { TableSelection } from '@blocksuite/affine-block-table';
import { EditorToolbar } from '@blocksuite/affine-components/toolbar'; import {
darkToolbarStyles,
EditorToolbar,
lightToolbarStyles,
} from '@blocksuite/affine-components/toolbar';
import { import {
CodeBlockModel, CodeBlockModel,
ImageBlockModel, ImageBlockModel,
@@ -34,7 +38,7 @@ import {
import { nextTick } from '@blocksuite/global/utils'; import { nextTick } from '@blocksuite/global/utils';
import type { Placement, ReferenceElement, SideObject } from '@floating-ui/dom'; import type { Placement, ReferenceElement, SideObject } from '@floating-ui/dom';
import { batch, effect, signal } from '@preact/signals-core'; import { batch, effect, signal } from '@preact/signals-core';
import { css } from 'lit'; import { css, unsafeCSS } from 'lit';
import groupBy from 'lodash-es/groupBy'; import groupBy from 'lodash-es/groupBy';
import throttle from 'lodash-es/throttle'; import throttle from 'lodash-es/throttle';
import toPairs from 'lodash-es/toPairs'; import toPairs from 'lodash-es/toPairs';
@@ -71,6 +75,13 @@ export class AffineToolbarWidget extends WidgetComponent {
opacity: 0; opacity: 0;
} }
} }
editor-toolbar[data-app-theme='dark'] {
${unsafeCSS(darkToolbarStyles.join('\n'))}
}
editor-toolbar[data-app-theme='light'] {
${unsafeCSS(lightToolbarStyles.join('\n'))}
}
`; `;
placement$ = signal<Placement>('top'); placement$ = signal<Placement>('top');
@@ -564,6 +575,13 @@ export class AffineToolbarWidget extends WidgetComponent {
}) })
); );
// Updates toolbar theme when `app-theme` changing
disposables.add(
context.theme.app$.subscribe(theme => {
toolbar.dataset.appTheme = theme;
})
);
disposables.add( disposables.add(
effect(() => { effect(() => {
const value = flags.value$.value; const value = flags.value$.value;