From 9465d0dc73a7d586fa31f549dd58d39f75edcebd Mon Sep 17 00:00:00 2001 From: fundon Date: Tue, 27 May 2025 05:10:27 +0000 Subject: [PATCH] fix(editor): loading style (#12537) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes: [BS-3555](https://linear.app/affine-design/issue/BS-3555/ui-attachment-loading-变量更新) Closes: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-图片-loading-变量更新) ### Dark Screenshot 2025-05-26 at 20 32 36 ### Light Screenshot 2025-05-26 at 20 32 25 ## Summary by CodeRabbit - **New Features** - Loading icons are now invoked as functions, allowing for more flexible and customizable rendering with parameters like size and progress. - **Refactor** - Replaced theme-dependent and static loading icon references with a unified `LoadingIcon()` component across multiple components and blocks. - Removed legacy icon variants and simplified icon import statements, centralizing icon rendering logic. - **Style** - Updated styles for loading and reload buttons to use theme-aware CSS variables. - Enlarged and repositioned loading indicators in image blocks for better visibility. - **Bug Fixes** - Achieved consistent loading icon rendering across various blocks and components by standardizing icon invocation. --- .../blocks/attachment/src/attachment-block.ts | 8 +-- .../affine/blocks/attachment/src/styles.ts | 5 +- .../bookmark/src/components/bookmark-card.ts | 6 +-- .../embed-linked-doc-block.ts | 8 +-- .../src/embed-linked-doc-block/styles.ts | 3 +- .../src/embed-linked-doc-block/utils.ts | 13 ----- .../components/embed-synced-doc-card.ts | 8 +-- .../src/embed-synced-doc-block/styles.ts | 3 +- .../src/embed-synced-doc-block/utils.ts | 9 ---- .../affine/blocks/embed/src/common/utils.ts | 6 --- .../embed-github-block/embed-github-block.ts | 6 +-- .../components/embed-iframe-loading-card.ts | 8 +-- .../src/embed-loom-block/embed-loom-block.ts | 6 +-- .../embed-youtube-block.ts | 6 +-- .../image/src/components/page-image-block.ts | 14 +++-- .../affine/blocks/image/src/image-block.ts | 15 +++--- .../blocks/image/src/image-edgeless-block.ts | 26 +++++----- .../affine/components/src/icons/loading.ts | 52 ++++++++++++------- .../affine/components/src/icons/text.ts | 22 -------- .../toolbar/mindmap-importing-placeholder.ts | 4 +- .../src/footnote-node/footnote-popup.ts | 10 +--- .../linked-doc/src/linked-doc-popover.ts | 9 +--- .../ai/actions/edgeless-response.ts | 4 +- .../ai-chat-block/components/chat-images.ts | 4 +- .../ai/components/ai-chat-chips/utils.ts | 4 +- .../components/generating-placeholder.ts | 9 +--- .../ai-panel/components/state/generating.ts | 1 - 27 files changed, 103 insertions(+), 166 deletions(-) diff --git a/blocksuite/affine/blocks/attachment/src/attachment-block.ts b/blocksuite/affine/blocks/attachment/src/attachment-block.ts index 9cf1a627a5..bbf2b0b289 100644 --- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts +++ b/blocksuite/affine/blocks/attachment/src/attachment-block.ts @@ -4,7 +4,7 @@ import { } from '@blocksuite/affine-components/caption'; import { getAttachmentFileIcon, - getLoadingIconWith, + LoadingIcon, } from '@blocksuite/affine-components/icons'; import { Peekable } from '@blocksuite/affine-components/peek'; import { @@ -20,7 +20,6 @@ import { DocModeProvider, FileSizeLimitProvider, TelemetryProvider, - ThemeProvider, } from '@blocksuite/affine-shared/services'; import { formatSize } from '@blocksuite/affine-shared/utils'; import { @@ -304,15 +303,12 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent(() => { - const theme = this.std.get(ThemeProvider).theme$.value; - const loadingIcon = getLoadingIconWith(theme); - const size = this.model.props.size; const name = this.model.props.name$.value; const kind = getAttachmentFileIcon(name.split('.').pop() ?? ''); const resolvedState = this.resourceController.resolveStateWith({ - loadingIcon, + loadingIcon: LoadingIcon(), errorIcon: WarningIcon(), icon: AttachmentIcon(), title: name, diff --git a/blocksuite/affine/blocks/attachment/src/styles.ts b/blocksuite/affine/blocks/attachment/src/styles.ts index 7d30bb6f61..d13cbb6fe0 100644 --- a/blocksuite/affine/blocks/attachment/src/styles.ts +++ b/blocksuite/affine/blocks/attachment/src/styles.ts @@ -47,11 +47,10 @@ export const styles = css` .affine-attachment-content-title-icon { display: flex; - width: 16px; - height: 16px; align-items: center; justify-content: center; color: var(--affine-text-primary-color); + font-size: 16px; } .affine-attachment-content-title-text { @@ -107,7 +106,7 @@ export const styles = css` .affine-attachment-card.loading { .affine-attachment-content-title-text { - color: var(--affine-placeholder-color); + color: ${unsafeCSSVarV2('text/placeholder')}; } } diff --git a/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts b/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts index 68665acaca..62261a53d4 100644 --- a/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts +++ b/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts @@ -1,5 +1,5 @@ import { getEmbedCardIcons } from '@blocksuite/affine-block-embed'; -import { WebIcon16 } from '@blocksuite/affine-components/icons'; +import { LoadingIcon, WebIcon16 } from '@blocksuite/affine-components/icons'; import { ImageProxyService } from '@blocksuite/affine-shared/adapters'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; import { getHostName } from '@blocksuite/affine-shared/utils'; @@ -60,11 +60,11 @@ export class BookmarkCard extends SignalWatcher( : title; const theme = this.bookmark.std.get(ThemeProvider).theme; - const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme); + const { EmbedCardBannerIcon } = getEmbedCardIcons(theme); const imageProxyService = this.bookmark.store.get(ImageProxyService); const titleIcon = this.loading - ? LoadingIcon + ? LoadingIcon() : icon ? html`icon` : WebIcon16; diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts index e4460a4453..a4e1f8c210 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts @@ -3,6 +3,7 @@ import { RENDER_CARD_THROTTLE_MS, } from '@blocksuite/affine-block-embed'; import { SurfaceBlockModel } from '@blocksuite/affine-block-surface'; +import { LoadingIcon } from '@blocksuite/affine-components/icons'; import { isPeekable, Peekable } from '@blocksuite/affine-components/peek'; import { RefNodeSlotsProvider } from '@blocksuite/affine-inline-reference'; import type { @@ -31,6 +32,7 @@ import { referenceToNode, } from '@blocksuite/affine-shared/utils'; import { Bound } from '@blocksuite/global/gfx'; +import { ResetIcon } from '@blocksuite/icons/lit'; import { BlockSelection } from '@blocksuite/std'; import { Text } from '@blocksuite/store'; import { computed } from '@preact/signals-core'; @@ -337,8 +339,6 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent - ${ReloadIcon} Reload + ${ResetIcon()} Reload ` diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts index d39a678d21..fc9b4b74ce 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts @@ -124,11 +124,11 @@ export const styles = css` align-items: center; gap: 4px; cursor: pointer; + color: ${unsafeCSSVarV2('button/primary')}; } .affine-embed-linked-doc-card-content-reload-button svg { width: 12px; height: 12px; - fill: var(--affine-background-primary-color); } .affine-embed-linked-doc-card-content-reload-button > span { display: -webkit-box; @@ -138,7 +138,6 @@ export const styles = css` white-space: normal; overflow: hidden; text-overflow: ellipsis; - color: var(--affine-brand-color); font-family: var(--affine-font-family); font-size: var(--affine-font-xs); font-style: normal; diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/utils.ts b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/utils.ts index d7d01846d1..ef9a270b1b 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/utils.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/utils.ts @@ -1,8 +1,6 @@ import { EmbedEdgelessIcon, EmbedPageIcon, - getLoadingIconWith, - ReloadIcon, } from '@blocksuite/affine-components/icons'; import { ColorScheme, @@ -35,8 +33,6 @@ import { } from './styles.js'; type EmbedCardImages = { - LoadingIcon: TemplateResult<1>; - ReloadIcon: TemplateResult<1>; LinkedDocIcon: TemplateResult<1>; LinkedDocDeletedIcon: TemplateResult<1>; LinkedDocEmptyBanner: TemplateResult<1>; @@ -50,12 +46,9 @@ export function getEmbedLinkedDocIcons( style: (typeof EmbedLinkedDocStyles)[number] ): EmbedCardImages { const small = style !== 'vertical'; - const LoadingIcon = getLoadingIconWith(theme); if (editorMode === 'page') { if (theme === ColorScheme.Light) { return { - LoadingIcon, - ReloadIcon, LinkedDocIcon: EmbedPageIcon, LinkedDocDeletedIcon, LinkedDocEmptyBanner: small @@ -68,8 +61,6 @@ export function getEmbedLinkedDocIcons( }; } else { return { - ReloadIcon, - LoadingIcon, LinkedDocIcon: EmbedPageIcon, LinkedDocDeletedIcon, LinkedDocEmptyBanner: small @@ -84,8 +75,6 @@ export function getEmbedLinkedDocIcons( } else { if (theme === ColorScheme.Light) { return { - ReloadIcon, - LoadingIcon, LinkedDocIcon: EmbedEdgelessIcon, LinkedDocDeletedIcon, LinkedDocEmptyBanner: small @@ -98,8 +87,6 @@ export function getEmbedLinkedDocIcons( }; } else { return { - ReloadIcon, - LoadingIcon, LinkedDocIcon: EmbedEdgelessIcon, LinkedDocDeletedIcon, LinkedDocEmptyBanner: small diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/components/embed-synced-doc-card.ts b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/components/embed-synced-doc-card.ts index 5efda972fb..41260e1c2e 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/components/embed-synced-doc-card.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/components/embed-synced-doc-card.ts @@ -1,6 +1,8 @@ import { RENDER_CARD_THROTTLE_MS } from '@blocksuite/affine-block-embed'; +import { LoadingIcon } from '@blocksuite/affine-components/icons'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; import { WithDisposable } from '@blocksuite/global/lit'; +import { ResetIcon } from '@blocksuite/icons/lit'; import { BlockSelection, isGfxBlockComponent, @@ -148,9 +150,7 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) { const theme = this.std.get(ThemeProvider).theme; const { - LoadingIcon, SyncedDocErrorIcon, - ReloadIcon, SyncedDocEmptyBanner, SyncedDocErrorBanner, SyncedDocDeletedBanner, @@ -159,7 +159,7 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) { const icon = error ? SyncedDocErrorIcon : isLoading - ? LoadingIcon + ? LoadingIcon() : this.block.icon$.value; const title = isLoading ? 'Loading...' : this.block.title$; @@ -216,7 +216,7 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) { class="affine-embed-synced-doc-card-content-reload-button" @click=${() => this.block.refreshData()} > - ${ReloadIcon} Reload + ${ResetIcon()} Reload ` diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts index 29a731f73a..a4afe663c0 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts @@ -303,11 +303,11 @@ export const cardStyles = css` align-items: center; gap: 4px; cursor: pointer; + color: ${unsafeCSSVarV2('button/primary')}; } .affine-embed-synced-doc-card-content-reload-button svg { width: 12px; height: 12px; - fill: var(--affine-background-primary-color); } .affine-embed-synced-doc-card-content-reload-button > span { display: -webkit-box; @@ -317,7 +317,6 @@ export const cardStyles = css` white-space: normal; overflow: hidden; text-overflow: ellipsis; - color: var(--affine-brand-color); font-family: var(--affine-font-family); font-size: var(--affine-font-xs); font-style: normal; diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts index 8d3651c5f5..8c622a34bf 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts @@ -1,8 +1,6 @@ import { EmbedEdgelessIcon, EmbedPageIcon, - getLoadingIconWith, - ReloadIcon, } from '@blocksuite/affine-components/icons'; import { ColorScheme } from '@blocksuite/affine-model'; import type { BlockComponent } from '@blocksuite/std'; @@ -21,11 +19,9 @@ import { } from './styles.js'; type SyncedCardImages = { - LoadingIcon: TemplateResult<1>; SyncedDocIcon: TemplateResult<1>; SyncedDocErrorIcon: TemplateResult<1>; SyncedDocDeletedIcon: TemplateResult<1>; - ReloadIcon: TemplateResult<1>; SyncedDocEmptyBanner: TemplateResult<1>; SyncedDocErrorBanner: TemplateResult<1>; SyncedDocDeletedBanner: TemplateResult<1>; @@ -35,25 +31,20 @@ export function getSyncedDocIcons( theme: ColorScheme, editorMode: 'page' | 'edgeless' ): SyncedCardImages { - const LoadingIcon = getLoadingIconWith(theme); if (theme === ColorScheme.Light) { return { - LoadingIcon, SyncedDocIcon: editorMode === 'page' ? EmbedPageIcon : EmbedEdgelessIcon, SyncedDocErrorIcon, SyncedDocDeletedIcon, - ReloadIcon, SyncedDocEmptyBanner: LightSyncedDocEmptyBanner, SyncedDocErrorBanner: LightSyncedDocErrorBanner, SyncedDocDeletedBanner: LightSyncedDocDeletedBanner, }; } else { return { - LoadingIcon, SyncedDocIcon: editorMode === 'page' ? EmbedPageIcon : EmbedEdgelessIcon, SyncedDocErrorIcon, SyncedDocDeletedIcon, - ReloadIcon, SyncedDocEmptyBanner: DarkSyncedDocEmptyBanner, SyncedDocErrorBanner: DarkSyncedDocErrorBanner, SyncedDocDeletedBanner: DarkSyncedDocDeletedBanner, diff --git a/blocksuite/affine/blocks/embed/src/common/utils.ts b/blocksuite/affine/blocks/embed/src/common/utils.ts index 9e8cef4818..1f65446d47 100644 --- a/blocksuite/affine/blocks/embed/src/common/utils.ts +++ b/blocksuite/affine/blocks/embed/src/common/utils.ts @@ -9,13 +9,11 @@ import { EmbedCardLightHorizontalIcon, EmbedCardLightListIcon, EmbedCardLightVerticalIcon, - getLoadingIconWith, } from '@blocksuite/affine-components/icons'; import { ColorScheme } from '@blocksuite/affine-model'; import type { TemplateResult } from 'lit'; type EmbedCardIcons = { - LoadingIcon: TemplateResult<1>; EmbedCardBannerIcon: TemplateResult<1>; EmbedCardHorizontalIcon: TemplateResult<1>; EmbedCardListIcon: TemplateResult<1>; @@ -24,11 +22,8 @@ type EmbedCardIcons = { }; export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons { - const LoadingIcon = getLoadingIconWith(theme); - if (theme === ColorScheme.Light) { return { - LoadingIcon, EmbedCardBannerIcon: EmbedCardLightBannerIcon, EmbedCardHorizontalIcon: EmbedCardLightHorizontalIcon, EmbedCardListIcon: EmbedCardLightListIcon, @@ -37,7 +32,6 @@ export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons { }; } else { return { - LoadingIcon, EmbedCardBannerIcon: EmbedCardDarkBannerIcon, EmbedCardHorizontalIcon: EmbedCardDarkHorizontalIcon, EmbedCardListIcon: EmbedCardDarkListIcon, diff --git a/blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts b/blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts index 9006d04b2d..432385bdae 100644 --- a/blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts +++ b/blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts @@ -1,4 +1,4 @@ -import { OpenIcon } from '@blocksuite/affine-components/icons'; +import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons'; import type { EmbedGithubModel, EmbedGithubStyles, @@ -133,8 +133,8 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent< const loading = this.loading; const theme = this.std.get(ThemeProvider).theme; const imageProxyService = this.store.get(ImageProxyService); - const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme); - const titleIcon = loading ? LoadingIcon : GithubIcon; + const { EmbedCardBannerIcon } = getEmbedCardIcons(theme); + const titleIcon = loading ? LoadingIcon() : GithubIcon; const statusIcon = status ? getGithubStatusIcon(githubType, status, statusReason) : nothing; diff --git a/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts b/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts index cff2e3136e..1618575b96 100644 --- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts +++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts @@ -1,4 +1,4 @@ -import { ThemeProvider } from '@blocksuite/affine-shared/services'; +import { LoadingIcon } from '@blocksuite/affine-components/icons'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { EmbedIcon } from '@blocksuite/icons/lit'; import { type BlockStdScope } from '@blocksuite/std'; @@ -7,7 +7,6 @@ import { property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { getEmbedCardIcons } from '../../common/utils'; import { LOADING_CARD_DEFAULT_HEIGHT } from '../consts'; import type { EmbedIframeStatusCardOptions } from '../types'; @@ -156,9 +155,6 @@ export class EmbedIframeLoadingCard extends LitElement { `; override render() { - const theme = this.std.get(ThemeProvider).theme; - const { LoadingIcon } = getEmbedCardIcons(theme); - const { layout, width, height } = this.options; const cardClasses = classMap({ 'affine-embed-iframe-loading-card': true, @@ -176,7 +172,7 @@ export class EmbedIframeLoadingCard extends LitElement { return html`
- +
Loading...
diff --git a/blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts b/blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts index 8d2b438917..3fe0b454d3 100644 --- a/blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts +++ b/blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts @@ -1,4 +1,4 @@ -import { OpenIcon } from '@blocksuite/affine-components/icons'; +import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons'; import type { EmbedLoomModel, EmbedLoomStyles } from '@blocksuite/affine-model'; import { ImageProxyService } from '@blocksuite/affine-shared/adapters'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; @@ -94,8 +94,8 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent< const loading = this.loading; const theme = this.std.get(ThemeProvider).theme; const imageProxyService = this.store.get(ImageProxyService); - const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme); - const titleIcon = loading ? LoadingIcon : LoomIcon; + const { EmbedCardBannerIcon } = getEmbedCardIcons(theme); + const titleIcon = loading ? LoadingIcon() : LoomIcon; const titleText = loading ? 'Loading...' : title; const descriptionText = loading ? '' : description; const bannerImage = diff --git a/blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts b/blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts index eed4fc9f4a..2a3d70eb1b 100644 --- a/blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts +++ b/blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts @@ -1,4 +1,4 @@ -import { OpenIcon } from '@blocksuite/affine-components/icons'; +import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons'; import type { EmbedYoutubeModel, EmbedYoutubeStyles, @@ -108,8 +108,8 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent< const loading = this.loading; const theme = this.std.get(ThemeProvider).theme; const imageProxyService = this.store.get(ImageProxyService); - const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme); - const titleIcon = loading ? LoadingIcon : YoutubeIcon; + const { EmbedCardBannerIcon } = getEmbedCardIcons(theme); + const titleIcon = loading ? LoadingIcon() : YoutubeIcon; const titleText = loading ? 'Loading...' : title; const descriptionText = loading ? null : description; const bannerImage = diff --git a/blocksuite/affine/blocks/image/src/components/page-image-block.ts b/blocksuite/affine/blocks/image/src/components/page-image-block.ts index a5d4c2a477..b50e5b191b 100644 --- a/blocksuite/affine/blocks/image/src/components/page-image-block.ts +++ b/blocksuite/affine/blocks/image/src/components/page-image-block.ts @@ -46,12 +46,16 @@ export class ImageBlockPageComponent extends SignalWatcher( justify-content: center; position: absolute; top: 4px; - right: 4px; - width: 20px; - height: 20px; - padding: 4px; - border-radius: 4px; + left: 4px; + width: 36px; + height: 36px; + padding: 5px; + border-radius: 8px; background: ${unsafeCSSVarV2('loading/backgroundLayer')}; + + & > svg { + font-size: 25.71px; + } } affine-page-image .affine-image-status { diff --git a/blocksuite/affine/blocks/image/src/image-block.ts b/blocksuite/affine/blocks/image/src/image-block.ts index 639f877b1f..8111e861eb 100644 --- a/blocksuite/affine/blocks/image/src/image-block.ts +++ b/blocksuite/affine/blocks/image/src/image-block.ts @@ -1,19 +1,17 @@ import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption'; import { whenHover } from '@blocksuite/affine-components/hover'; -import { getLoadingIconWith } from '@blocksuite/affine-components/icons'; +import { LoadingIcon } from '@blocksuite/affine-components/icons'; import { Peekable } from '@blocksuite/affine-components/peek'; import { ResourceController } from '@blocksuite/affine-components/resource'; import type { ImageBlockModel } from '@blocksuite/affine-model'; import { ImageSelection } from '@blocksuite/affine-shared/selection'; -import { - ThemeProvider, - ToolbarRegistryIdentifier, -} from '@blocksuite/affine-shared/services'; +import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services'; import { formatSize } from '@blocksuite/affine-shared/utils'; import { IS_MOBILE } from '@blocksuite/global/env'; import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit'; import { BlockSelection } from '@blocksuite/std'; import { computed } from '@preact/signals-core'; +import { cssVarV2 } from '@toeverything/theme/v2'; import { html } from 'lit'; import { query } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; @@ -126,9 +124,6 @@ export class ImageBlockComponent extends CaptionedBlockComponent svg { + font-size: 25.71px; + } } affine-edgeless-image .affine-image-status { @@ -108,9 +111,6 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent ${when( resovledState.loading, - () => html`
${loadingIcon}
` + () => html`
${resovledState.icon}
` )} ${when( resovledState.error && resovledState.description, diff --git a/blocksuite/affine/components/src/icons/loading.ts b/blocksuite/affine/components/src/icons/loading.ts index a7712317ce..7101334669 100644 --- a/blocksuite/affine/components/src/icons/loading.ts +++ b/blocksuite/affine/components/src/icons/loading.ts @@ -1,14 +1,23 @@ -import { ColorScheme } from '@blocksuite/affine-model'; +import { cssVarV2 } from '@toeverything/theme/v2'; import { html } from 'lit'; -const LoadingIcon = (color: string) => +export const LoadingIcon = ({ + size = '1em', + progress = 0.2, + strokeColor = cssVarV2('loading/foreground'), +}: { + size?: string; + progress?: number; + strokeColor?: string; +} = {}) => html` - `; - -export const LightLoadingIcon = LoadingIcon('black'); - -export const DarkLoadingIcon = LoadingIcon('white'); - -export const getLoadingIconWith = (theme: ColorScheme = ColorScheme.Light) => - theme === ColorScheme.Light ? LightLoadingIcon : DarkLoadingIcon; diff --git a/blocksuite/affine/components/src/icons/text.ts b/blocksuite/affine/components/src/icons/text.ts index 8c218badb3..e53d1dc15e 100644 --- a/blocksuite/affine/components/src/icons/text.ts +++ b/blocksuite/affine/components/src/icons/text.ts @@ -840,28 +840,6 @@ export const EmbedCardDarkCubeIcon = html` `; -export const ReloadIcon = html` - - - - - - - - -`; - export const EmbedPageIcon = icons.LinkedPageIcon({ width: '16', height: '16', diff --git a/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-importing-placeholder.ts b/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-importing-placeholder.ts index 229848ab8e..8f491901ff 100644 --- a/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-importing-placeholder.ts +++ b/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-importing-placeholder.ts @@ -1,4 +1,4 @@ -import { LightLoadingIcon } from '@blocksuite/affine-components/icons'; +import { LoadingIcon } from '@blocksuite/affine-components/icons'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { ShadowlessElement } from '@blocksuite/std'; import { css, html } from 'lit'; @@ -46,7 +46,7 @@ export class MindMapPlaceholder extends ShadowlessElement { return html`
${importMindMapIcon}
- ${LightLoadingIcon} + ${LoadingIcon()} Importing mind map...
`; diff --git a/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts b/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts index 4efa9c937a..5adc6eeda5 100644 --- a/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts +++ b/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts @@ -1,6 +1,6 @@ import { getAttachmentFileIcon, - getLoadingIconWith, + LoadingIcon, WebIcon16, } from '@blocksuite/affine-components/icons'; import type { FootNote } from '@blocksuite/affine-model'; @@ -8,7 +8,6 @@ import { ImageProxyService } from '@blocksuite/affine-shared/adapters'; import { DocDisplayMetaProvider, LinkPreviewServiceIdentifier, - ThemeProvider, } from '@blocksuite/affine-shared/services'; import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit'; @@ -77,7 +76,7 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) { return getAttachmentFileIcon(fileType); } else if (referenceType === 'url') { if (this._isLoading$.value) { - return this._LoadingIcon(); + return LoadingIcon(); } const favicon = this._linkPreview$.value?.favicon; @@ -126,11 +125,6 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) { return this._popupLabel$.value; }); - private readonly _LoadingIcon = () => { - const theme = this.std.get(ThemeProvider).theme; - return getLoadingIconWith(theme); - }; - private readonly _onClick = () => { this.onPopupClick(this.footnote, this.abortController); this.abortController.abort(); 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 4d9d61c09d..dc909f7cc9 100644 --- a/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts +++ b/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts @@ -1,10 +1,9 @@ import type { IconButton } from '@blocksuite/affine-components/icon-button'; -import { getLoadingIconWith } from '@blocksuite/affine-components/icons'; +import { LoadingIcon } 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, @@ -128,10 +127,6 @@ 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); @@ -291,7 +286,7 @@ export class LinkedDocPopover extends SignalWatcher(
${group.name}
${group.isLoading - ? html`${this._loadingIcon}` + ? html`${LoadingIcon()}` : nothing}
diff --git a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts index 5286441e34..d6fae1a43c 100644 --- a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts +++ b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts @@ -1,7 +1,7 @@ import { CodeBlockPreviewIdentifier } from '@blocksuite/affine/blocks/code'; import { addImages } from '@blocksuite/affine/blocks/image'; import { getSurfaceBlock } from '@blocksuite/affine/blocks/surface'; -import { LightLoadingIcon } from '@blocksuite/affine/components/icons'; +import { LoadingIcon } from '@blocksuite/affine/components/icons'; import { addTree } from '@blocksuite/affine/gfx/mindmap'; import { fitContent } from '@blocksuite/affine/gfx/shape'; import { createTemplateJob } from '@blocksuite/affine/gfx/template'; @@ -123,7 +123,7 @@ export function createInsertItems( { name: `${buttonText} - Loading...`, icon: html`
- ${LightLoadingIcon} + ${LoadingIcon()}
`, testId: 'answer-insert-below-loading', showWhen: () => { 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 36ece9c2fb..ae34f0d15d 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 { LightLoadingIcon } from '@blocksuite/affine/components/icons'; +import { LoadingIcon } 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 ab33d5fa5a..20ed59c6f0 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 { LightLoadingIcon } from '@blocksuite/affine/components/icons'; +import { LoadingIcon } 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 LightLoadingIcon; + return LoadingIcon(); } return icon; } diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts index 16c30ffe4e..0d6a375af5 100644 --- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts +++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts @@ -1,6 +1,5 @@ -import { getLoadingIconWith } from '@blocksuite/affine/components/icons'; +import { LoadingIcon } from '@blocksuite/affine/components/icons'; import { WithDisposable } from '@blocksuite/affine/global/lit'; -import type { ColorScheme } from '@blocksuite/affine/model'; import { unsafeCSSVar } from '@blocksuite/affine/shared/theme'; import { baseTheme } from '@toeverything/theme'; import { @@ -88,7 +87,6 @@ export class GeneratingPlaceholder extends WithDisposable(LitElement) { protected override render() { const loadingText = this.stages[this.loadingProgress - 1] || ''; - const loadingIcon = getLoadingIconWith(this.theme); return html`