From 6029c4d09b020b60eed96af38909c071a5f6734d Mon Sep 17 00:00:00 2001 From: L-Sun Date: Wed, 21 May 2025 06:18:39 +0000 Subject: [PATCH] fix(editor): update color of deleted banner of surface-ref (#12393) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close [BS-3504](https://linear.app/affine-design/issue/BS-3504/linked-card-ui调整) Close [BS-3377](https://linear.app/affine-design/issue/BS-3377/surface-ref在page-mode下的dark颜色不对，垃圾桶也不对) ## Summary by CodeRabbit - **New Features** - The "not found" placeholder now adapts its appearance to match light or dark themes for a more cohesive visual experience. - **Style** - Updated placeholder icons to use distinct designs for light and dark themes, providing improved clarity and consistency. - **Chores** - Theme information is now more accurately passed to placeholder components for proper rendering. --- .../surface-ref/src/components/placeholder.ts | 13 +- .../affine/blocks/surface-ref/src/icons.ts | 308 ++++++++++++------ .../surface-ref/src/surface-ref-block.ts | 6 +- 3 files changed, 222 insertions(+), 105 deletions(-) diff --git a/blocksuite/affine/blocks/surface-ref/src/components/placeholder.ts b/blocksuite/affine/blocks/surface-ref/src/components/placeholder.ts index 9ebea549d1..d5a4110033 100644 --- a/blocksuite/affine/blocks/surface-ref/src/components/placeholder.ts +++ b/blocksuite/affine/blocks/surface-ref/src/components/placeholder.ts @@ -1,3 +1,4 @@ +import { ColorScheme } from '@blocksuite/affine-model'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit'; import { DeleteIcon } from '@blocksuite/icons/lit'; @@ -7,7 +8,7 @@ import { css, html, nothing } from 'lit'; import { property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; -import { SurfaceRefNotFoundBackground } from '../icons'; +import { DarkDeletedSmallBanner, LightDeletedSmallBanner } from '../icons'; import { getReferenceModelTitle, TYPE_ICON_MAP } from '../utils'; export class SurfaceRefPlaceHolder extends SignalWatcher( @@ -70,6 +71,9 @@ export class SurfaceRefPlaceHolder extends SignalWatcher( @property({ attribute: false }) accessor inEdgeless = false; + @property({ attribute: false }) + accessor theme: ColorScheme = ColorScheme.Light; + override render() { const { referenceModel, refFlavour, inEdgeless } = this; @@ -83,6 +87,11 @@ export class SurfaceRefPlaceHolder extends SignalWatcher( (referenceModel && getReferenceModelTitle(referenceModel)) ?? matchedType.name; + const notFoundBackground = + this.theme === ColorScheme.Light + ? LightDeletedSmallBanner + : DarkDeletedSmallBanner; + return html`
${modelNotFound ? html`
- ${SurfaceRefNotFoundBackground} + ${notFoundBackground}
` : nothing}
diff --git a/blocksuite/affine/blocks/surface-ref/src/icons.ts b/blocksuite/affine/blocks/surface-ref/src/icons.ts index 63ea88b29a..9cf04a946b 100644 --- a/blocksuite/affine/blocks/surface-ref/src/icons.ts +++ b/blocksuite/affine/blocks/surface-ref/src/icons.ts @@ -1,105 +1,211 @@ import { html } from 'lit'; -export const SurfaceRefNotFoundBackground = html` - - - - - - - - - - + + + - - - - - - - - - - - - - - -`; + + + + + + + + + + + + + + + + + + + `; + +export const DarkDeletedSmallBanner = html` + + + + + + + + + + + + + + + + + + + + + + + `; diff --git a/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts b/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts index 6414768721..18840341e4 100644 --- a/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts +++ b/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts @@ -374,6 +374,7 @@ export class SurfaceRefBlockComponent extends BlockComponent
${guard(this._previewDoc, () => { return this._previewDoc @@ -440,13 +442,14 @@ export class SurfaceRefBlockComponent extends BlockComponent` : this._renderRefContent(); - const edgelessTheme = this.std.get(ThemeProvider).edgeless$.value; return html`
${content}