From 8938da4c24ca3aea1809e569f2ddbe8d79e4fc71 Mon Sep 17 00:00:00 2001 From: fundon Date: Wed, 30 Apr 2025 10:21:28 +0000 Subject: [PATCH] fix(editor): fix color of the circle on loading icon (#12092) * Unified loading icon * Removed loading icon on image block * Fixed color of circle on loading icon ## Summary by CodeRabbit - **New Features** - Icons in image fallback and loading states now automatically adapt to the current theme (light or dark mode) for a more consistent visual experience. - **Style** - Updated loading, success, and error icons to support theming and improved their color assignments for better visibility in different themes. - **Refactor** - Replaced static icon usage across several components with dynamic, theme-aware icons to ensure consistent appearance throughout the app. - Removed static SVG icon exports and replaced them with theme-aware icon functions for improved maintainability. --- .../src/components/image-block-fallback.ts | 17 +++-- .../affine/blocks/image/src/image-block.ts | 9 ++- .../blocks/image/src/image-edgeless-block.ts | 5 +- blocksuite/affine/blocks/image/src/index.ts | 1 - blocksuite/affine/blocks/image/src/styles.ts | 72 ------------------- .../affine/components/src/icons/loading.ts | 13 ++-- .../linked-doc/src/linked-doc-popover.ts | 9 ++- .../ai-chat-block/components/chat-images.ts | 4 +- .../ai/components/ai-chat-chips/utils.ts | 4 +- 9 files changed, 38 insertions(+), 96 deletions(-) delete mode 100644 blocksuite/affine/blocks/image/src/styles.ts diff --git a/blocksuite/affine/blocks/image/src/components/image-block-fallback.ts b/blocksuite/affine/blocks/image/src/components/image-block-fallback.ts index 6347c05f52..308ac13c9c 100644 --- a/blocksuite/affine/blocks/image/src/components/image-block-fallback.ts +++ b/blocksuite/affine/blocks/image/src/components/image-block-fallback.ts @@ -1,14 +1,14 @@ -import type { ImageBlockModel } from '@blocksuite/affine-model'; +import { getLoadingIconWith } from '@blocksuite/affine-components/icons'; +import type { ColorScheme, ImageBlockModel } from '@blocksuite/affine-model'; import { humanFileSize } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/lit'; +import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit'; import { modelContext, ShadowlessElement } from '@blocksuite/std'; import { consume } from '@lit/context'; import { css, html } from 'lit'; import { property } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { FailedImageIcon, LoadedImageIcon, LoadingIcon } from '../styles.js'; - export const SURFACE_IMAGE_CARD_WIDTH = 220; export const SURFACE_IMAGE_CARD_HEIGHT = 122; export const NOTE_IMAGE_CARD_WIDTH = 752; @@ -62,7 +62,7 @@ export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) { `; override render() { - const { mode, loading, error, model } = this; + const { theme, mode, loading, error, model } = this; const isEdgeless = mode === 'edgeless'; const width = isEdgeless @@ -82,10 +82,10 @@ export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) { }); const titleIcon = loading - ? LoadingIcon + ? getLoadingIconWith(theme) : error - ? FailedImageIcon - : LoadedImageIcon; + ? BrokenImageIcon() + : ImageIcon(); const titleText = loading ? 'Loading image...' @@ -125,6 +125,9 @@ export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) { @property({ attribute: false }) accessor mode!: 'page' | 'edgeless'; + @property({ attribute: false }) + accessor theme!: ColorScheme; + @consume({ context: modelContext }) accessor model!: ImageBlockModel; } diff --git a/blocksuite/affine/blocks/image/src/image-block.ts b/blocksuite/affine/blocks/image/src/image-block.ts index 6148397262..49435df1d6 100644 --- a/blocksuite/affine/blocks/image/src/image-block.ts +++ b/blocksuite/affine/blocks/image/src/image-block.ts @@ -2,7 +2,10 @@ import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption'; import { whenHover } from '@blocksuite/affine-components/hover'; import { Peekable } from '@blocksuite/affine-components/peek'; import type { ImageBlockModel } from '@blocksuite/affine-model'; -import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services'; +import { + ThemeProvider, + ToolbarRegistryIdentifier, +} from '@blocksuite/affine-shared/services'; import { IS_MOBILE } from '@blocksuite/global/env'; import { BlockSelection } from '@blocksuite/std'; import { html } from 'lit'; @@ -111,6 +114,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent @@ -120,7 +124,8 @@ export class ImageBlockComponent extends CaptionedBlockComponent`, () => html`` )} diff --git a/blocksuite/affine/blocks/image/src/image-edgeless-block.ts b/blocksuite/affine/blocks/image/src/image-edgeless-block.ts index 4bbf872b92..1946bc4702 100644 --- a/blocksuite/affine/blocks/image/src/image-edgeless-block.ts +++ b/blocksuite/affine/blocks/image/src/image-edgeless-block.ts @@ -1,6 +1,7 @@ import type { BlockCaptionEditor } from '@blocksuite/affine-components/caption'; import { Peekable } from '@blocksuite/affine-components/peek'; import type { ImageBlockModel } from '@blocksuite/affine-model'; +import { ThemeProvider } from '@blocksuite/affine-shared/services'; import { GfxBlockComponent } from '@blocksuite/std'; import { css, html } from 'lit'; import { property, query, state } from 'lit/decorators.js'; @@ -85,6 +86,7 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent @@ -94,7 +96,8 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent`, () => html`
diff --git a/blocksuite/affine/blocks/image/src/index.ts b/blocksuite/affine/blocks/image/src/index.ts index 8a814ff4f7..eb3252207b 100644 --- a/blocksuite/affine/blocks/image/src/index.ts +++ b/blocksuite/affine/blocks/image/src/index.ts @@ -5,7 +5,6 @@ export * from './image-block'; export * from './image-edgeless-block'; export * from './image-service'; export * from './image-spec'; -export * from './styles'; export * from './turbo/image-layout-handler'; export * from './turbo/image-painter.worker'; export { addImages, downloadImageBlob, uploadBlobForImage } from './utils'; diff --git a/blocksuite/affine/blocks/image/src/styles.ts b/blocksuite/affine/blocks/image/src/styles.ts deleted file mode 100644 index 9902692152..0000000000 --- a/blocksuite/affine/blocks/image/src/styles.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { html } from 'lit'; - -export const LoadingIcon = html` - - - -`; - -export const LoadedImageIcon = html` - - `; - -export const FailedImageIcon = html` - - - - `; diff --git a/blocksuite/affine/components/src/icons/loading.ts b/blocksuite/affine/components/src/icons/loading.ts index 6b7590e87a..a7712317ce 100644 --- a/blocksuite/affine/components/src/icons/loading.ts +++ b/blocksuite/affine/components/src/icons/loading.ts @@ -1,8 +1,8 @@ import { ColorScheme } from '@blocksuite/affine-model'; import { html } from 'lit'; -const LoadingIcon = (color: string) => { - return html` + html` { { class="spinner" /> `; -}; -export const LightLoadingIcon = LoadingIcon('white'); +export const LightLoadingIcon = LoadingIcon('black'); -export const DarkLoadingIcon = LoadingIcon('black'); +export const DarkLoadingIcon = LoadingIcon('white'); -export const getLoadingIconWith = (theme: ColorScheme) => +export const getLoadingIconWith = (theme: ColorScheme = ColorScheme.Light) => theme === ColorScheme.Light ? LightLoadingIcon : DarkLoadingIcon; diff --git a/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts b/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts index 5fb76d1fad..d94d3f5ffd 100644 --- a/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts +++ b/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts @@ -1,9 +1,10 @@ -import { LoadingIcon } from '@blocksuite/affine-block-image'; import type { IconButton } from '@blocksuite/affine-components/icon-button'; +import { getLoadingIconWith } from '@blocksuite/affine-components/icons'; import { cleanSpecifiedTail, getTextContentFromInlineRange, } from '@blocksuite/affine-rich-text'; +import { ThemeProvider } from '@blocksuite/affine-shared/services'; import { unsafeCSSVar } from '@blocksuite/affine-shared/theme'; import { createKeydownObserver, @@ -127,6 +128,10 @@ export class LinkedDocPopover extends SignalWatcher( ); } + private get _loadingIcon() { + return getLoadingIconWith(this.context.std.get(ThemeProvider).theme$.value); + } + private _getActionItems(group: LinkedMenuGroup) { const isExpanded = !!this._expanded.get(group.name); let items = resolveSignal(group.items); @@ -286,7 +291,7 @@ export class LinkedDocPopover extends SignalWatcher(
${group.name}
${group.isLoading - ? html`${LoadingIcon}` + ? html`${this._loadingIcon}` : nothing}
diff --git a/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/components/chat-images.ts b/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/components/chat-images.ts index 71ade14f0f..36ece9c2fb 100644 --- a/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/components/chat-images.ts +++ b/packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/components/chat-images.ts @@ -1,4 +1,4 @@ -import { LoadingIcon } from '@blocksuite/affine/blocks/image'; +import { LightLoadingIcon } from '@blocksuite/affine/components/icons'; import { css, html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; import { choose } from 'lit/directives/choose.js'; @@ -35,7 +35,7 @@ export class ChatImage extends LitElement { () => html``, ], [ diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/utils.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/utils.ts index 49d04948d8..ab33d5fa5a 100644 --- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/utils.ts +++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/utils.ts @@ -1,4 +1,4 @@ -import { LoadingIcon } from '@blocksuite/affine/blocks/image'; +import { LightLoadingIcon } from '@blocksuite/affine/components/icons'; import { WarningIcon } from '@blocksuite/icons/lit'; import { type TemplateResult } from 'lit'; @@ -41,7 +41,7 @@ export function getChipIcon( return WarningIcon(); } if (isLoading) { - return LoadingIcon; + return LightLoadingIcon; } return icon; }