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

feat(editor): store real color values in edgeless (#9254)

Browse Source 
### What's Changed!

* adds theme type: `ThemeSchema`
* adds default theme: `DefaultTheme`
* stores real color values
This commit is contained in:
fundon
2024-12-30 03:36:35 +00:00
parent a5641ae608
commit b9f2650369
287 changed files with 2219 additions and 1520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
blocksuite/affine/block-note/src/note-edgeless-block.ts
View File

@@ -2,7 +2,7 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons';
import type { NoteBlockModel } from '@blocksuite/affine-model';
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
DefaultTheme,
NoteDisplayMode,
StrokeStyle,
} from '@blocksuite/affine-model';
@@ -24,6 +24,7 @@ import {
WithDisposable,
} from '@blocksuite/global/utils';
import type { BlockModel } from '@blocksuite/store';
import { computed } from '@preact/signals-core';
import { css, html, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
@@ -141,6 +142,16 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
}
`;
private readonly _backgroundColor$ = computed(() => {
const themeProvider = this.std.get(ThemeProvider);
const theme = themeProvider.theme$.value;
return themeProvider.generateColorProperty(
this.model.background$.value,
DefaultTheme.noteBackgrounColor,
theme
);
});
private get _isShowCollapsedContent() {
return this.model.edgeless.collapse && (this._isResizing || this._isHover);
}
@@ -406,9 +417,6 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
};
const extra = this._editing ? ACTIVE_NOTE_EXTRA_PADDING : 0;
const backgroundColor = this.std
.get(ThemeProvider)
.generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR);
const backgroundStyle = {
position: 'absolute',
@@ -420,7 +428,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
transition: this._editing
? 'left 0.3s, top 0.3s, width 0.3s, height 0.3s'
: 'none',
backgroundColor,
backgroundColor: this._backgroundColor$.value,
border: `${borderSize}px ${
borderStyle === StrokeStyle.Dash ? 'dashed' : borderStyle
} var(--affine-black-10)`,