From fa5674166eaa9f1f030be0ded4568b1e63b68b87 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Tue, 4 Mar 2025 10:13:01 +0000 Subject: [PATCH] refactor(editor): cleanup list icons (#10608) --- blocksuite/affine/block-list/package.json | 1 + .../block-list/src/utils/get-list-icon.ts | 30 ++-- .../affine/components/src/icons/list.ts | 133 ------------------ .../src/toggle-button/toggle-button.ts | 15 +- yarn.lock | 1 + 5 files changed, 34 insertions(+), 146 deletions(-) diff --git a/blocksuite/affine/block-list/package.json b/blocksuite/affine/block-list/package.json index 4d24fd839a..6fde32e4b7 100644 --- a/blocksuite/affine/block-list/package.json +++ b/blocksuite/affine/block-list/package.json @@ -18,6 +18,7 @@ "@blocksuite/affine-shared": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.1", "@blocksuite/inline": "workspace:*", "@blocksuite/store": "workspace:*", "@floating-ui/dom": "^1.6.13", diff --git a/blocksuite/affine/block-list/src/utils/get-list-icon.ts b/blocksuite/affine/block-list/src/utils/get-list-icon.ts index 534282e02b..be34d8166c 100644 --- a/blocksuite/affine/block-list/src/utils/get-list-icon.ts +++ b/blocksuite/affine/block-list/src/utils/get-list-icon.ts @@ -1,11 +1,14 @@ -import { - BulletIcons, - checkboxChecked, - checkboxUnchecked, - toggleDown, - toggleRight, -} from '@blocksuite/affine-components/icons'; import type { ListBlockModel } from '@blocksuite/affine-model'; +import { + BulletedList01Icon, + BulletedList02Icon, + BulletedList03Icon, + BulletedList04Icon, + CheckBoxCheckSolidIcon, + CheckBoxUnIcon, + ToggleDownIcon, + ToggleRightIcon, +} from '@blocksuite/icons/lit'; import { html } from 'lit'; import { getNumberPrefix } from './get-number-prefix.js'; @@ -20,6 +23,13 @@ const getListDeep = (model: ListBlockModel): number => { return deep; }; +const BulletIcons = [ + BulletedList01Icon({ width: '24px', height: '24px' }), + BulletedList02Icon({ width: '24px', height: '24px' }), + BulletedList03Icon({ width: '24px', height: '24px' }), + BulletedList04Icon({ width: '24px', height: '24px' }), +]; + export function getListIcon( model: ListBlockModel, showChildren: boolean, @@ -49,7 +59,9 @@ export function getListIcon( class=${`affine-list-block__prefix affine-list-block__todo-prefix ${model.doc.readonly ? 'readonly' : ''}`} @click=${onClick} > - ${model.checked ? checkboxChecked() : checkboxUnchecked()} + ${model.checked + ? CheckBoxCheckSolidIcon({ style: 'color: #1E96EB' }) + : CheckBoxUnIcon()} `; case 'toggle': return html`
- ${showChildren ? toggleDown : toggleRight} + ${showChildren ? ToggleDownIcon() : ToggleRightIcon()}
`; default: console.error('Unknown list type', model.type, model); diff --git a/blocksuite/affine/components/src/icons/list.ts b/blocksuite/affine/components/src/icons/list.ts index 3961937588..461d30a96f 100644 --- a/blocksuite/affine/components/src/icons/list.ts +++ b/blocksuite/affine/components/src/icons/list.ts @@ -1,134 +1,3 @@ -import { html, svg } from 'lit'; - -const Level1Icon = html` - - - -`; - -const Level2Icon = html` - - - -`; - -const Level3Icon = html` - - - -`; - -const Level4Icon = html` - - - -`; - -const toggleSVG = svg` - -`; - -export const toggleRight = html` - - ${toggleSVG} - -`; - -export const toggleDown = html` - - ${toggleSVG} - -`; - -export const checkboxChecked = () => { - return html` - - - - `; -}; - -export const checkboxUnchecked = () => { - return html` - - - - `; -}; - export const playCheckAnimation = async ( refElement: Element, { left = 0, size = 20 }: { left?: number; size?: number } = {} @@ -168,5 +37,3 @@ export const playCheckAnimation = async ( sparkingEl.remove(); }; - -export const BulletIcons = [Level1Icon, Level2Icon, Level3Icon, Level4Icon]; diff --git a/blocksuite/affine/components/src/toggle-button/toggle-button.ts b/blocksuite/affine/components/src/toggle-button/toggle-button.ts index 12c6bd1b91..bc368ce3ca 100644 --- a/blocksuite/affine/components/src/toggle-button/toggle-button.ts +++ b/blocksuite/affine/components/src/toggle-button/toggle-button.ts @@ -1,11 +1,10 @@ import { ShadowlessElement } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/utils'; +import { ToggleDownIcon, ToggleRightIcon } from '@blocksuite/icons/lit'; import { css, unsafeCSS } from 'lit'; import { property } from 'lit/decorators.js'; import { html } from 'lit-html'; -import { toggleDown, toggleRight } from '../icons/list.js'; - export const TOGGLE_BUTTON_PARENT_CLASS = 'blocksuite-toggle-button-parent'; export class ToggleButton extends WithDisposable(ShadowlessElement) { @@ -53,7 +52,11 @@ export class ToggleButton extends WithDisposable(ShadowlessElement) { class="toggle-icon" @click=${() => this.updateCollapsed(!this.collapsed)} > - ${toggleDown} + ${ToggleDownIcon({ + width: '16px', + height: '16px', + style: 'color: #77757D', + })} `; @@ -64,7 +67,11 @@ export class ToggleButton extends WithDisposable(ShadowlessElement) { data-collapsed=${this.collapsed} @click=${() => this.updateCollapsed(!this.collapsed)} > - ${toggleRight} + ${ToggleRightIcon({ + width: '16px', + height: '16px', + style: 'color: #77757D', + })} `; diff --git a/yarn.lock b/yarn.lock index 5a2a6fd342..1d4f5ccca2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2474,6 +2474,7 @@ __metadata: "@blocksuite/affine-shared": "workspace:*" "@blocksuite/block-std": "workspace:*" "@blocksuite/global": "workspace:*" + "@blocksuite/icons": "npm:^2.2.1" "@blocksuite/inline": "workspace:*" "@blocksuite/store": "workspace:*" "@floating-ui/dom": "npm:^1.6.13"