diff --git a/blocksuite/affine/block-attachment/src/components/options.ts b/blocksuite/affine/block-attachment/src/components/options.ts index 6bad4088d5..bf27cc8782 100644 --- a/blocksuite/affine/block-attachment/src/components/options.ts +++ b/blocksuite/affine/block-attachment/src/components/options.ts @@ -2,8 +2,6 @@ import { CaptionIcon, DownloadIcon, EditIcon, - MoreVerticalIcon, - SmallArrowDownIcon, } from '@blocksuite/affine-components/icons'; import { createLitPortal } from '@blocksuite/affine-components/portal'; import { @@ -21,6 +19,7 @@ import { EMBED_CARD_WIDTH, } from '@blocksuite/affine-shared/consts'; import { Bound } from '@blocksuite/global/utils'; +import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit'; import { flip, offset } from '@floating-ui/dom'; import { html, nothing } from 'lit'; import { join } from 'lit/directives/join.js'; @@ -88,7 +87,7 @@ export function attachmentViewToggleMenu({ ${viewType} view - ${SmallArrowDownIcon} + ${ArrowDownSmallIcon({ width: '16px', height: '16px' })} `} > @@ -200,8 +199,12 @@ export function AttachmentOptionsTemplate({ - ${MoreVerticalIcon} + + ${MoreVerticalIcon()} `} > diff --git a/blocksuite/affine/block-code/package.json b/blocksuite/affine/block-code/package.json index f0248e0f8b..835bcecbf7 100644 --- a/blocksuite/affine/block-code/package.json +++ b/blocksuite/affine/block-code/package.json @@ -18,6 +18,7 @@ "@blocksuite/affine-shared": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.3", "@blocksuite/inline": "workspace:*", "@blocksuite/store": "workspace:*", "@floating-ui/dom": "^1.6.10", diff --git a/blocksuite/affine/block-code/src/code-toolbar/components/code-toolbar.ts b/blocksuite/affine/block-code/src/code-toolbar/components/code-toolbar.ts index 5966ec699e..b4af76f53d 100644 --- a/blocksuite/affine/block-code/src/code-toolbar/components/code-toolbar.ts +++ b/blocksuite/affine/block-code/src/code-toolbar/components/code-toolbar.ts @@ -1,4 +1,3 @@ -import { MoreVerticalIcon } from '@blocksuite/affine-components/icons'; import { createLitPortal } from '@blocksuite/affine-components/portal'; import type { EditorIconButton, @@ -6,6 +5,7 @@ import type { } from '@blocksuite/affine-components/toolbar'; import { renderGroups } from '@blocksuite/affine-components/toolbar'; import { noop, WithDisposable } from '@blocksuite/global/utils'; +import { MoreVerticalIcon } from '@blocksuite/icons/lit'; import { flip, offset } from '@floating-ui/dom'; import { css, html, LitElement } from 'lit'; import { property, query, state } from 'lit/decorators.js'; @@ -132,7 +132,7 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) { ?disabled=${this.context.doc.readonly} @click=${() => this._toggleMoreMenu()} > - ${MoreVerticalIcon} + ${MoreVerticalIcon()} `; diff --git a/blocksuite/affine/block-data-view/package.json b/blocksuite/affine/block-data-view/package.json index d64f72e4a5..0d54ed7086 100644 --- a/blocksuite/affine/block-data-view/package.json +++ b/blocksuite/affine/block-data-view/package.json @@ -20,6 +20,7 @@ "@blocksuite/block-std": "workspace:*", "@blocksuite/data-view": "workspace:*", "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.3", "@blocksuite/inline": "workspace:*", "@blocksuite/store": "workspace:*", "@floating-ui/dom": "^1.6.10", diff --git a/blocksuite/affine/block-data-view/src/data-view-block.ts b/blocksuite/affine/block-data-view/src/data-view-block.ts index 6cd10b792c..ca19831328 100644 --- a/blocksuite/affine/block-data-view/src/data-view-block.ts +++ b/blocksuite/affine/block-data-view/src/data-view-block.ts @@ -9,11 +9,7 @@ import { popMenu, popupTargetFromElement, } from '@blocksuite/affine-components/context-menu'; -import { - CopyIcon, - DeleteIcon, - MoreHorizontalIcon, -} from '@blocksuite/affine-components/icons'; +import { CopyIcon, DeleteIcon } from '@blocksuite/affine-components/icons'; import { PeekViewProvider } from '@blocksuite/affine-components/peek'; import { toast } from '@blocksuite/affine-components/toast'; import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts'; @@ -42,6 +38,7 @@ import { uniMap, } from '@blocksuite/data-view'; import { widgetPresets } from '@blocksuite/data-view/widget-presets'; +import { MoreHorizontalIcon } from '@blocksuite/icons/lit'; import { Slice } from '@blocksuite/store'; import { computed, signal } from '@preact/signals-core'; import { css, nothing, unsafeCSS } from 'lit'; @@ -244,7 +241,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent - ${MoreHorizontalIcon} + ${MoreHorizontalIcon()} `; } diff --git a/blocksuite/affine/block-note/src/components/more-indicator.ts b/blocksuite/affine/block-note/src/components/more-indicator.ts new file mode 100644 index 0000000000..f6019f1352 --- /dev/null +++ b/blocksuite/affine/block-note/src/components/more-indicator.ts @@ -0,0 +1,17 @@ +import { html } from 'lit'; + +export const MoreIndicator = html` + +`; diff --git a/blocksuite/affine/block-note/src/note-edgeless-block.ts b/blocksuite/affine/block-note/src/note-edgeless-block.ts index bb7252f294..02372048be 100644 --- a/blocksuite/affine/block-note/src/note-edgeless-block.ts +++ b/blocksuite/affine/block-note/src/note-edgeless-block.ts @@ -1,6 +1,5 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import type { DocTitle } from '@blocksuite/affine-components/doc-title'; -import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons'; import { NoteDisplayMode } from '@blocksuite/affine-model'; import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts'; import { stopPropagation } from '@blocksuite/affine-shared/utils'; @@ -12,6 +11,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; +import { MoreIndicator } from './components/more-indicator'; import { NoteBlockComponent } from './note-block'; import { ACTIVE_NOTE_EXTRA_PADDING } from './note-edgeless-block.css'; import * as styles from './note-edgeless-block.css'; @@ -274,7 +274,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( @mouseup=${stopPropagation} @click=${this._setCollapse} > - ${MoreIndicatorIcon} + ${MoreIndicator} ` : nothing} ${this._collapsedContent()} diff --git a/blocksuite/affine/block-surface-ref/package.json b/blocksuite/affine/block-surface-ref/package.json index afaa5c423a..31ad601d18 100644 --- a/blocksuite/affine/block-surface-ref/package.json +++ b/blocksuite/affine/block-surface-ref/package.json @@ -19,6 +19,7 @@ "@blocksuite/affine-shared": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.3", "@blocksuite/inline": "workspace:*", "@blocksuite/store": "workspace:*", "@lit/context": "^1.1.2", diff --git a/blocksuite/affine/block-surface-ref/src/surface-ref-block.ts b/blocksuite/affine/block-surface-ref/src/surface-ref-block.ts index 312fa9b478..dea698f7cc 100644 --- a/blocksuite/affine/block-surface-ref/src/surface-ref-block.ts +++ b/blocksuite/affine/block-surface-ref/src/surface-ref-block.ts @@ -5,11 +5,6 @@ import { SurfaceElementModel, } from '@blocksuite/affine-block-surface'; import type { BlockCaptionEditor } from '@blocksuite/affine-components/caption'; -import { - EdgelessModeIcon, - FrameIcon, - MoreDeleteIcon, -} from '@blocksuite/affine-components/icons'; import { Peekable } from '@blocksuite/affine-components/peek'; import { FrameBlockModel, @@ -48,6 +43,7 @@ import { DisposableGroup, type SerializedXYWH, } from '@blocksuite/global/utils'; +import { DeleteIcon, EdgelessIcon, FrameIcon } from '@blocksuite/icons/lit'; import type { BaseSelection, Store } from '@blocksuite/store'; import { css, html, nothing, type TemplateResult } from 'lit'; import { query, state } from 'lit/decorators.js'; @@ -55,9 +51,10 @@ import { styleMap } from 'lit/directives/style-map.js'; import { noContentPlaceholder } from './utils.js'; +const iconSize = { width: '20px', height: '20px' }; const REF_LABEL_ICON = { - 'affine:frame': FrameIcon, - DEFAULT_NOTE_HEIGHT: EdgelessModeIcon, + 'affine:frame': FrameIcon(iconSize), + DEFAULT_NOTE_HEIGHT: EdgelessIcon(iconSize), } as Record; const NO_CONTENT_TITLE = { @@ -570,7 +567,7 @@ export class SurfaceRefBlockComponent extends BlockComponent
diff --git a/blocksuite/affine/block-surface/src/index.ts b/blocksuite/affine/block-surface/src/index.ts index 2d05675938..54e3dd007c 100644 --- a/blocksuite/affine/block-surface/src/index.ts +++ b/blocksuite/affine/block-surface/src/index.ts @@ -84,6 +84,7 @@ export { getSurfaceBlock, normalizeWheelDeltaY, } from './utils'; +export * from './utils/mindmap/style-svg'; export type { Options } from './utils/rough/core'; export { sortIndex } from './utils/sort'; export { updateXYWH } from './utils/update-xywh.js'; diff --git a/blocksuite/affine/block-surface/src/utils/index.ts b/blocksuite/affine/block-surface/src/utils/index.ts index 13b41a85ad..b7e611ed99 100644 --- a/blocksuite/affine/block-surface/src/utils/index.ts +++ b/blocksuite/affine/block-surface/src/utils/index.ts @@ -36,3 +36,4 @@ export function normalizeWheelDeltaY(delta: number, zoom = 1) { export { addNote, addNoteAtPoint } from './add-note'; export { getLastPropsKey } from './get-last-props-key'; export { getSurfaceBlock } from './get-surface-block'; +export * from './mindmap/style-svg.js'; diff --git a/blocksuite/affine/block-surface/src/utils/mindmap/style-svg.ts b/blocksuite/affine/block-surface/src/utils/mindmap/style-svg.ts new file mode 100644 index 0000000000..f98f55e150 --- /dev/null +++ b/blocksuite/affine/block-surface/src/utils/mindmap/style-svg.ts @@ -0,0 +1,680 @@ +import { html } from 'lit'; + +export const MindmapStyleOne = html` + + + + + + + + + + + + + + + + + `; + +export const MindmapStyleTwo = html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + +export const MindmapStyleThree = html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + +export const MindmapStyleFour = html` + + + + + + + + `; diff --git a/blocksuite/affine/components/src/icons/edgeless.ts b/blocksuite/affine/components/src/icons/edgeless.ts deleted file mode 100644 index ec00b1991f..0000000000 --- a/blocksuite/affine/components/src/icons/edgeless.ts +++ /dev/null @@ -1,2409 +0,0 @@ -// Edgeless toolbar -import * as icons from '@blocksuite/icons/lit'; -import { html } from 'lit'; - -export const SelectIcon = icons.SelectIcon({ - width: '24', - height: '24', -}); - -export const LassoFreeHandIcon = html` - - - - - - -`; - -export const LassoPolygonalIcon = html` - - - - - - -`; -export const ImageUploadIcon = icons.ImageIcon({ - width: '20', - height: '20', -}); - -export const RenameIcon = icons.EditIcon({ width: '24', height: '24' }); - -export const GroupIcon = icons.GroupIcon({ width: '20', height: '20' }); - -export const ReleaseFromGroupButtonIcon = icons.ReleaseFromGroupIcon({ - width: '24', - height: '24', -}); - -export const UngroupButtonIcon = icons.UngroupIcon({ - width: '24', - height: '24', -}); - -export const FrameNavigatorIcon = icons.PresentationIcon({ - width: '24', - height: '24', -}); - -export const FrameNavigatorPrevIcon = icons.StartPointArrowIcon({ - width: '24', - height: '24', -}); - -export const FrameNavigatorNextIcon = icons.EndPointArrowIcon({ - width: '24', - height: '24', -}); - -export const NavigatorFullScreenIcon = icons.ExpandFullIcon({ - width: '24', - height: '24', -}); -export const NavigatorExitFullScreenIcon = icons.ExpandCloseIcon({ - width: '24', - height: '24', -}); - -export const ExpandIcon = icons.AutoHeightIcon({ - width: '20', - height: '20', -}); - -export const NavigatorSettingsIcon = icons.SettingsIcon({ - width: '24', - height: '24', -}); - -export const ShrinkIcon = icons.CustomizedHeightIcon({ - width: '20', - height: '20', -}); - -export const FrameOrderAdjustmentIcon = icons.LayerIcon({ - width: '24', - height: '24', -}); - -// auto-complete -export const AutoCompleteArrowIcon = icons.ArrowUpBigIcon({ - width: '16', - height: '16', -}); - -export const NoteAutoCompleteIcon = icons.PlusIcon({ - width: '24', - height: '24', -}); - -export const ImageIcon = icons.ImageIcon({ - width: '24', - height: '24', -}); - -export const ImageIcon20 = icons.ImageIcon({ - width: '20', - height: '20', -}); - -export const BookmarkIcon = icons.BookmarkIcon({ - width: '20', - height: '20', -}); - -export const PenIcon = icons.PenIcon({ - width: '24', - height: '24', -}); - -export const HandIcon = icons.HandIcon({ - width: '24', - height: '24', -}); - -export const SquareIcon = icons.SquareIcon({ - width: '20', - height: '20', -}); - -export const EllipseIcon = icons.EllipseIcon({ - width: '20', - height: '20', -}); - -export const DiamondIcon = icons.DiamondIcon({ - width: '20', - height: '20', -}); - -export const TriangleIcon = icons.TriangleIcon({ - width: '20', - height: '20', -}); - -export const RoundedRectangleIcon = icons.RoundedRectangleIcon({ - width: '20', - height: '20', -}); - -export const ScribbledSquareIcon = html` - - - - - - - - -`; - -export const ScribbledEllipseIcon = html` - -`; - -export const ScribbledDiamondIcon = html` - - - - - - - - -`; - -export const ScribbledTriangleIcon = html` - - - - - - -`; - -export const ScribbledRoundedRectangleIcon = html` - - - - - - - - - - -`; - -export const MinusIcon = icons.MinusIcon({ - width: '24', - height: '24', -}); - -export const PlusIcon = icons.PlusIcon({ - width: '24', - height: '24', -}); - -export const ViewBarIcon = icons.ViewBarIcon({ - width: '24', - height: '24', -}); - -export const MoreHorizontalIcon = icons.MoreHorizontalIcon({ - width: '24', - height: '24', -}); - -export const MoreVerticalIcon = icons.MoreVerticalIcon({ - width: '20', - height: '20', -}); - -export const LineStyleIcon = icons.LineStyleIcon({ - width: '20', - height: '20', -}); - -export const ConnectorEndpointNoneIcon = icons.StartPointIcon({ - width: '20', - height: '20', -}); - -export const FrontEndpointArrowIcon = icons.StartPointArrowIcon({ - width: '20', - height: '20', -}); - -export const FrontEndpointTriangleIcon = icons.StartPointTriangleIcon({ - width: '20', - height: '20', -}); - -export const FrontEndpointCircleIcon = icons.StartPointCircleIcon({ - width: '20', - height: '20', -}); - -export const FrontEndpointDiamondIcon = icons.StartPointDiamondIcon({ - width: '20', - height: '20', -}); - -export const RearEndpointArrowIcon = icons.EndPointArrowIcon({ - width: '20', - height: '20', -}); - -export const RearEndpointTriangleIcon = icons.EndPointTriangleIcon({ - width: '20', - height: '20', -}); - -export const RearEndpointCircleIcon = icons.EndPointCircleIcon({ - width: '20', - height: '20', -}); - -export const RearEndpointDiamondIcon = icons.EndPointDiamondIcon({ - width: '20', - height: '20', -}); - -export const FlipDirectionIcon = icons.FlipDirectionIcon({ - width: '20', - height: '20', -}); - -export const ElbowedLineIcon = icons.ElbowedLineIcon({ - width: '20', - height: '20', -}); - -export const CurveLineIcon = icons.CurveLineIcon({ - width: '20', - height: '20', -}); - -export const StraightLineIcon = icons.StraightLineIcon({ - width: '20', - height: '20', -}); - -export const ConnectorCWithArrowIcon = icons.ConnectorCIcon({ - width: '20', - height: '20', -}); - -export const ConnectorXWithArrowIcon = icons.ConnectorEIcon({ - width: '20', - height: '20', -}); - -export const ConnectorLWithArrowIcon = icons.ConnectorLIcon({ - width: '20', - height: '20', -}); - -export const DashLineIcon = icons.DashLineIcon({ - width: '20', - height: '20', -}); - -export const BanIcon = icons.BanIcon({ - width: '20', - height: '20', -}); - -export const NoteSmallIcon = icons.PageIcon({ - width: '16', - height: '16', -}); - -export const NoteIcon = icons.PageIcon({ - width: '24', - height: '24', -}); - -export const NoteCornerIcon = icons.CornerIcon({ - width: '20', - height: '20', -}); - -export const NoteShadowIcon = icons.NoteShadowDuotoneIcon({ - width: '20', - height: '20', -}); - -export const NoteNoShadowIcon = html` - - - - - -`; - -export const NoteShadowSampleIcon = html` - - - - - - - - -`; - -export const SmallNoteIcon = icons.PageIcon({ - width: '20', - height: '20', -}); - -export const FrameIcon = icons.FrameIcon({ - width: '20', - height: '20', -}); - -export const LargeFrameIcon = icons.FrameIcon({ - width: '24', - height: '24', -}); - -export const TextAlignLeftIcon = icons.TextAlignLeftIcon({ - width: '20', - height: '20', -}); - -export const TextAlignCenterIcon = icons.TextAlignCenterIcon({ - width: '20', - height: '20', -}); - -export const TextAlignRightIcon = icons.TextAlignRightIcon({ - width: '20', - height: '20', -}); - -export const HiddenIcon = icons.InvisibleIcon({ - width: '20', - height: '20', -}); - -export const ArrowIcon = icons.ArrowUpSmallIcon({ - width: '16', - height: '16', -}); - -export const SmallScissorsIcon = icons.ScissorsIcon({ - width: '16', - height: '16', -}); - -export const ScissorsIcon = icons.ScissorsIcon({ - width: '20', - height: '20', -}); - -export const ArrowUpIcon = html` - -`; - -export const EdgelessModeIcon = icons.EdgelessIcon({ - width: '20', - height: '20', -}); - -export const EdgelessPenLightIcon = html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; -export const EdgelessPenDarkIcon = html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -export const EdgelessEraserLightIcon = html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; -export const EdgelessEraserDarkIcon = html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -export const EdgelessGeneralShapeIcon = html` - - - - - - - - - - - - - - -`; - -export const ellipseSvg = html` - - `; - -export const triangleSvg = html` - - `; - -export const diamondSvg = html` - -`; - -export const roundedSvg = html` - - `; - -export const MoreIcon = icons.MoreHorizontalIcon({ - width: '24', - height: '24', -}); - -export const BringToFrontIcon = icons.ArrowUpBigTopIcon({ - width: '20', - height: '20', -}); - -export const BringForwardIcon = icons.ArrowUpBigIcon({ - width: '20', - height: '20', -}); - -export const SendBackwardIcon = icons.ArrowDownBigIcon({ - width: '20', - height: '20', -}); - -export const SendToBackIcon = icons.ArrowDownBigBottomIcon({ - width: '20', - height: '20', -}); - -export const MoreCopyIcon = icons.CopyIcon({ - width: '20', - height: '20', -}); - -export const CopyAsPngIcon = icons.ExportToPngIcon({ - width: '20', - height: '20', -}); - -export const MoreDuplicateIcon = icons.DuplicateIcon({ - width: '20', - height: '20', -}); - -export const MoreDeleteIcon = icons.DeleteIcon({ - width: '20', - height: '20', -}); - -export const SmallArrowDownIcon = icons.ArrowDownSmallIcon({ - width: '16', - height: '16', -}); - -export const GeneralStyleIcon = icons.StyleGeneralIcon({ - width: '20', - height: '20', -}); - -export const ScribbledStyleIcon = icons.StyleScribbleIcon({ - width: '20', - height: '20', -}); - -export const ChangeShapeIcon = icons.ShapeIcon({ - width: '20', - height: '20', -}); - -export const ArrowRightSmallIcon = icons.ArrowRightSmallIcon({ - width: '32', - height: '32', -}); - -export const AlignLeftIcon = icons.AlignLeftIcon({ - width: '20', - height: '20', -}); - -export const AlignRightIcon = icons.AlignRightIcon({ - width: '20', - height: '20', -}); - -export const AlignHorizontallyIcon = icons.AlignHorizontalCenterIcon({ - width: '20', - height: '20', -}); - -export const AlignDistributeHorizontallyIcon = icons.DistributeHorizontalIcon({ - width: '20', - height: '20', -}); - -export const AlignTopIcon = icons.AlignTopIcon({ - width: '20', - height: '20', -}); - -export const AlignBottomIcon = icons.AlignBottomIcon({ - width: '20', - height: '20', -}); -export const AlignVerticallyIcon = icons.AlignVerticalCenterIcon({ - width: '20', - height: '20', -}); - -export const AlignDistributeVerticallyIcon = icons.DistributeVerticalIcon({ - width: '20', - height: '20', -}); - -export const RemoteCursor = icons.MultiCursorDuotoneIcon({ - width: '24', - height: '24', -}); - -export const ConnectorIcon = icons.ConnectorCIcon({ - width: '24', - height: '24', -}); - -export const AutoConnectLeftIcon = icons.ArrowLeftSmallIcon({ - width: '16', - height: '16', - style: 'color:#77757D;', -}); - -export const AutoConnectRightIcon = icons.ArrowRightSmallIcon({ - width: '16', - height: '16', - style: 'color:#77757D;', -}); - -export const SettingsIcon = icons.SettingsIcon({ - width: '20', - height: '20', -}); - -export const MoreIndicatorIcon = html` - -`; - -export const EdgelessIcon = icons.EdgelessIcon({ - width: '20', - height: '20', -}); - -export const PageIcon = icons.PageIcon({ - width: '20', - height: '20', -}); - -export const ToolsIcon = html` - - - -`; - -export const MindmapStyleIcon = icons.StyleIcon({ - width: '20', - height: '20', -}); - -export const MindmapBalanceLayoutIcon = icons.RadiantIcon({ - width: '20', - height: '20', -}); - -export const MindmapLeftLayoutIcon = icons.RightLayoutIcon({ - width: '20', - height: '20', - style: 'transform: rotate(0.5turn); transform-origin: center;', -}); - -export const MindmapRightLayoutIcon = icons.RightLayoutIcon({ - width: '20', - height: '20', -}); - -export const MindmapStyleOne = html` - - - - - - - - - - - - - - - - - `; - -export const MindmapStyleTwo = html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; - -export const MindmapStyleThree = html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; - -export const MindmapStyleFour = html` - - - - - - - - `; - -export const MindMapSiblingIcon = icons.SiblingNodeIcon({ - width: '16', - height: '16', -}); - -export const MindMapChildIcon = icons.SubNodeIcon({ - width: '16', - height: '16', -}); - -export const AddTextIcon = icons.AddTextIcon({ - width: '20', - height: '20', -}); - -export const CheckIcon = icons.DoneIcon({ - width: '20', - height: '20', -}); - -export const ArrowLeftSmallIcon = icons.ArrowLeftSmallIcon({ - width: '20', - height: '20', -}); - -export const StopAIIcon = icons.StopAiIcon({ - width: '24', - height: '24', - style: 'color: white;', -}); diff --git a/blocksuite/affine/components/src/icons/index.ts b/blocksuite/affine/components/src/icons/index.ts index bf8b422d3a..77ce937830 100644 --- a/blocksuite/affine/components/src/icons/index.ts +++ b/blocksuite/affine/components/src/icons/index.ts @@ -1,5 +1,4 @@ export * from './ai.js'; -export * from './edgeless.js'; export * from './file-icons.js'; export * from './import-export.js'; export * from './list.js'; diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts index 9517ac60dc..c2c462c808 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts @@ -18,6 +18,7 @@ import { TextSelection, } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/utils'; +import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit'; import type { InlineRange } from '@blocksuite/inline/types'; import { computePosition, inline, offset, shift } from '@floating-ui/dom'; import { html, LitElement, nothing } from 'lit'; @@ -31,9 +32,7 @@ import { CopyIcon, DeleteIcon, EditIcon, - MoreVerticalIcon, OpenIcon, - SmallArrowDownIcon, UnlinkIcon, } from '../../../../../../icons/index.js'; import { toast } from '../../../../../../toast/index.js'; @@ -227,8 +226,12 @@ export class LinkPopup extends WithDisposable(LitElement) { - ${MoreVerticalIcon} + + ${MoreVerticalIcon()} `} > @@ -514,9 +517,10 @@ export class LinkPopup extends WithDisposable(LitElement) { .justify=${'space-between'} .labelHeight=${'20px'} .iconContainerWidth=${'110px'} + .iconSize=${'16px'} >
Inline view
- ${SmallArrowDownIcon} + ${ArrowDownSmallIcon()} `} @toggle=${this._toggleViewSelector} diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts index cddb59bfbe..ce337ccee8 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts @@ -18,6 +18,7 @@ import { type BlockStdScope, } from '@blocksuite/block-std'; import { assertExists, WithDisposable } from '@blocksuite/global/utils'; +import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit'; import type { InlineRange } from '@blocksuite/inline'; import { computePosition, inline, offset, shift } from '@floating-ui/dom'; import { effect } from '@preact/signals-core'; @@ -31,9 +32,7 @@ import { CopyIcon, DeleteIcon, EditIcon, - MoreVerticalIcon, OpenIcon, - SmallArrowDownIcon, } from '../../../../../icons/index.js'; import { notifyLinkedDocSwitchedToEmbed } from '../../../../../notification/index.js'; import { isPeekable, peek } from '../../../../../peek/index.js'; @@ -297,7 +296,7 @@ export class ReferencePopup extends WithDisposable(LitElement) { .justify=${'space-between'} .labelHeight=${'20px'} > - ${OpenIcon}${SmallArrowDownIcon} + ${OpenIcon} ${ArrowDownSmallIcon({ width: '16px', height: '16px' })} `} > @@ -362,7 +361,7 @@ export class ReferencePopup extends WithDisposable(LitElement) { .iconContainerWidth=${'110px'} > Inline view - ${SmallArrowDownIcon} + ${ArrowDownSmallIcon({ width: '16px', height: '16px' })} `} @toggle=${this._toggleViewSelector} @@ -458,8 +457,12 @@ export class ReferencePopup extends WithDisposable(LitElement) { - ${MoreVerticalIcon} + + ${MoreVerticalIcon()} `} > diff --git a/blocksuite/affine/widget-edgeless-auto-connect/package.json b/blocksuite/affine/widget-edgeless-auto-connect/package.json index a79ce990c3..3fca56da32 100644 --- a/blocksuite/affine/widget-edgeless-auto-connect/package.json +++ b/blocksuite/affine/widget-edgeless-auto-connect/package.json @@ -20,6 +20,7 @@ "@blocksuite/affine-shared": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.3", "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.7", "lit": "^3.2.0" diff --git a/blocksuite/affine/widget-edgeless-auto-connect/src/index.ts b/blocksuite/affine/widget-edgeless-auto-connect/src/index.ts index f4f80ad282..bcc4322ca4 100644 --- a/blocksuite/affine/widget-edgeless-auto-connect/src/index.ts +++ b/blocksuite/affine/widget-edgeless-auto-connect/src/index.ts @@ -3,12 +3,7 @@ import { EdgelessLegacySlotIdentifier, isNoteBlock, } from '@blocksuite/affine-block-surface'; -import { - AutoConnectLeftIcon, - AutoConnectRightIcon, - HiddenIcon, - SmallDocIcon, -} from '@blocksuite/affine-components/icons'; +import { SmallDocIcon } from '@blocksuite/affine-components/icons'; import { FrameBlockModel, NoteBlockModel, @@ -24,6 +19,11 @@ import { GfxControllerIdentifier, } from '@blocksuite/block-std/gfx'; import { Bound } from '@blocksuite/global/utils'; +import { + ArrowLeftSmallIcon, + ArrowRightSmallIcon, + InvisibleIcon, +} from '@blocksuite/icons/lit'; import { css, html, nothing, type TemplateResult } from 'lit'; import { state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -259,7 +259,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent { }); return html`
- ${HiddenIcon} + ${InvisibleIcon({ width: '20px', height: '20px' })} ${getIndexLabelTooltip(SmallDocIcon, 'Hidden on page')} @@ -391,6 +391,12 @@ export class EdgelessAutoConnectWidget extends WidgetComponent { }px)`, }); + const iconStyle = { + width: '16px', + height: '16px', + style: 'color:#77757D;', + }; + return html`
{ this._navigateToPrev(); }} > - ${AutoConnectLeftIcon} + ${ArrowLeftSmallIcon(iconStyle)}
{ this._navigateToNext(); }} > - ${AutoConnectRightIcon} + ${ArrowRightSmallIcon(iconStyle)}
`; } diff --git a/blocksuite/affine/widget-remote-selection/package.json b/blocksuite/affine/widget-remote-selection/package.json index 0a68427f38..9e7ab98909 100644 --- a/blocksuite/affine/widget-remote-selection/package.json +++ b/blocksuite/affine/widget-remote-selection/package.json @@ -19,6 +19,7 @@ "@blocksuite/affine-shared": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.3", "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.7", "lit": "^3.2.0" diff --git a/blocksuite/affine/widget-remote-selection/src/edgeless/index.ts b/blocksuite/affine/widget-remote-selection/src/edgeless/index.ts index 1a544e7099..fe56649a2b 100644 --- a/blocksuite/affine/widget-remote-selection/src/edgeless/index.ts +++ b/blocksuite/affine/widget-remote-selection/src/edgeless/index.ts @@ -1,5 +1,4 @@ import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; -import { RemoteCursor } from '@blocksuite/affine-components/icons'; import type { RootBlockModel } from '@blocksuite/affine-model'; import { getSelectedRect, @@ -12,6 +11,7 @@ import { type GfxModel, } from '@blocksuite/block-std/gfx'; import { pickValues } from '@blocksuite/global/utils'; +import { MultiCursorDuotoneIcon } from '@blocksuite/icons/lit'; import type { UserInfo } from '@blocksuite/store'; import { css, html, nothing } from 'lit'; import { state } from 'lit/decorators.js'; @@ -247,7 +247,10 @@ export class EdgelessRemoteSelectionWidget extends WidgetComponent - ${RemoteCursor} + ${MultiCursorDuotoneIcon({ + width: '24px', + height: '24px', + })}
html` this._showOverlay(name)} @pointerleave=${() => this._removeOverlay()} @click=${() => this._autoComplete(name)} @@ -603,6 +601,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) { this._showOverlay('text')} @pointerleave=${() => this._removeOverlay()} @click=${() => this._autoComplete('text')} @@ -611,19 +610,21 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) { this._showOverlay('note')} @pointerleave=${() => this._removeOverlay()} @click=${() => this._autoComplete('note')} > - ${SmallNoteIcon} + ${PageIcon()} this._showOverlay('frame')} @pointerleave=${() => this._removeOverlay()} @click=${() => this._autoComplete('frame')} > - ${FrameIcon} + ${FrameIcon()} { let transform = ''; - const icon = isShape ? AutoCompleteArrowIcon : NoteAutoCompleteIcon; + const iconSize = { width: '16px', height: '16px' }; + const icon = (isShape ? ArrowUpBigIcon : PlusIcon)(iconSize); switch (type) { case Direction.Top: @@ -583,7 +584,10 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) { const [position, target, layout] = type; const isLeftLayout = layout === LayoutType.LEFT; - const icon = target === 'child' ? MindMapChildIcon : MindMapSiblingIcon; + const icon = (target === 'child' ? SubNodeIcon : SiblingNodeIcon)({ + width: '16px', + height: '16px', + }); switch (position) { case Direction.Bottom: diff --git a/blocksuite/blocks/src/root-block/edgeless/components/buttons/tool-icon-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/buttons/tool-icon-button.ts index 3bab78660b..f85c1a575d 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/buttons/tool-icon-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/buttons/tool-icon-button.ts @@ -42,6 +42,7 @@ export class EdgelessToolIconButton extends LitElement { ::slotted(svg) { flex-shrink: 0; + width: var(--icon-size, unset); height: var(--icon-size, unset); } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/note-slicer/index.ts b/blocksuite/blocks/src/root-block/edgeless/components/note-slicer/index.ts index b65ef956dc..fb8781328c 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/note-slicer/index.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/note-slicer/index.ts @@ -1,5 +1,4 @@ import { isNoteBlock } from '@blocksuite/affine-block-surface'; -import { SmallScissorsIcon } from '@blocksuite/affine-components/icons'; import { DEFAULT_NOTE_HEIGHT } from '@blocksuite/affine-model'; import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts'; import { TelemetryProvider } from '@blocksuite/affine-shared/services'; @@ -12,6 +11,7 @@ import { Point, serializeXYWH, } from '@blocksuite/global/utils'; +import { ScissorsIcon } from '@blocksuite/icons/lit'; import { css, html, nothing, type PropertyValues } from 'lit'; import { state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -387,7 +387,7 @@ export class NoteSlicer extends WidgetComponent< transform: 'translateY(-50%)', })} > - ${SmallScissorsIcon} + ${ScissorsIcon({ width: '16px', height: '16px' })}
${this._divingLinePositions.map((pos, idx) => { const dividingLineClasses = classMap({ diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/align-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/align-panel.ts index b70092b02e..b60e69bffd 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/align-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/align-panel.ts @@ -1,9 +1,9 @@ +import { TextAlign } from '@blocksuite/affine-model'; import { TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon, -} from '@blocksuite/affine-components/icons'; -import { TextAlign } from '@blocksuite/affine-model'; +} from '@blocksuite/icons/lit'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -12,17 +12,17 @@ const TEXT_ALIGN_LIST = [ { name: 'Left', value: TextAlign.Left, - icon: TextAlignLeftIcon, + icon: TextAlignLeftIcon(), }, { name: 'Center', value: TextAlign.Center, - icon: TextAlignCenterIcon, + icon: TextAlignCenterIcon(), }, { name: 'Right', value: TextAlign.Right, - icon: TextAlignRightIcon, + icon: TextAlignRightIcon(), }, ]; @@ -53,6 +53,7 @@ export class EdgelessAlignPanel extends LitElement { aria-label=${name} .tooltip=${name} .active=${this.value === value} + .iconSize=${'20px'} @click=${() => this._onSelect(value)} > ${icon} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/font-family-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/font-family-panel.ts index 246702c11b..6b2190f07d 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/font-family-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/font-family-panel.ts @@ -1,6 +1,6 @@ import { TextUtils } from '@blocksuite/affine-block-surface'; -import { CheckIcon } from '@blocksuite/affine-components/icons'; import { FontFamily, FontFamilyList } from '@blocksuite/affine-model'; +import { DoneIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -39,9 +39,10 @@ export class EdgelessFontFamilyPanel extends LitElement { .iconContainerPadding=${[4, 8]} .justify=${'space-between'} .active=${active} + .iconSize=${'20px'} @click=${() => this._onSelect(font)} > - ${name} ${active ? CheckIcon : nothing} + ${name} ${active ? DoneIcon() : nothing} `; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/font-weight-and-style-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/font-weight-and-style-panel.ts index cb6eeed95b..23170344fc 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/font-weight-and-style-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/font-weight-and-style-panel.ts @@ -1,11 +1,11 @@ import { TextUtils } from '@blocksuite/affine-block-surface'; -import { CheckIcon } from '@blocksuite/affine-components/icons'; import { FontFamily, FontFamilyMap, FontStyle, FontWeight, } from '@blocksuite/affine-model'; +import { DoneIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; import { choose } from 'lit/directives/choose.js'; @@ -95,11 +95,12 @@ export class EdgelessFontWeightAndStylePanel extends LitElement { .justify=${'space-between'} .disabled=${this._isDisabled(fontFace.weight as FontWeight)} .active=${active} + .iconSize=${'20px'} @click=${() => this._onSelect(fontFace.weight as FontWeight)} > ${choose(fontFace.weight, FONT_WEIGHT_CHOOSE)} - ${active ? CheckIcon : nothing} + ${active ? DoneIcon() : nothing} `; } @@ -131,7 +132,7 @@ export class EdgelessFontWeightAndStylePanel extends LitElement { )} > ${choose(fontFace.weight, FONT_WEIGHT_CHOOSE)} Italic - ${active ? CheckIcon : nothing} + ${active ? DoneIcon() : nothing} `; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/icons.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/icons.ts new file mode 100644 index 0000000000..42a224a69e --- /dev/null +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/icons.ts @@ -0,0 +1,84 @@ +import { html } from 'lit'; + +export const NoteNoShadowIcon = html` + + + + + +`; + +export const NoteShadowSampleIcon = html` + + + + + + + + +`; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts index a973368569..bc164712a0 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts @@ -1,9 +1,5 @@ -import { - BanIcon, - DashLineIcon, - StraightLineIcon, -} from '@blocksuite/affine-components/icons'; import { LineWidth, StrokeStyle } from '@blocksuite/affine-model'; +import { BanIcon, DashLineIcon, StraightLineIcon } from '@blocksuite/icons/lit'; import { html } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -31,17 +27,17 @@ const LINE_STYLE_LIST = [ { name: 'Solid', value: StrokeStyle.Solid, - icon: StraightLineIcon, + icon: StraightLineIcon(), }, { name: 'Dash', value: StrokeStyle.Dash, - icon: DashLineIcon, + icon: DashLineIcon(), }, { name: 'None', value: StrokeStyle.None, - icon: BanIcon, + icon: BanIcon(), }, ]; @@ -81,6 +77,7 @@ export function LineStylesPanel({ .active=${active} .activeMode=${'background'} .tooltip=${name} + .iconSize=${'24px'} @click=${() => onClick?.({ type: 'lineStyle', diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/note-display-mode-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/note-display-mode-panel.ts index f901161702..689ec0aac7 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/note-display-mode-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/note-display-mode-panel.ts @@ -1,7 +1,7 @@ -import { EdgelessIcon, PageIcon } from '@blocksuite/affine-components/icons'; import { NoteDisplayMode } from '@blocksuite/affine-model'; import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/utils'; +import { EdgelessIcon, PageIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -36,6 +36,11 @@ export class NoteDisplayModePanel extends WithDisposable(LitElement) { align-items: center; gap: 4px; color: var(--affine-icon-color); + + svg { + width: 20px; + height: 20px; + } } .item:hover, .item.selected { @@ -46,11 +51,11 @@ export class NoteDisplayModePanel extends WithDisposable(LitElement) { private _DisplayModeIcon(mode: NoteDisplayMode) { switch (mode) { case NoteDisplayMode.DocAndEdgeless: - return html`${PageIcon} ${EdgelessIcon}`; + return html`${PageIcon()} ${EdgelessIcon()}`; case NoteDisplayMode.DocOnly: - return html`${PageIcon}`; + return html`${PageIcon()}`; case NoteDisplayMode.EdgelessOnly: - return html`${EdgelessIcon}`; + return html`${EdgelessIcon()}`; } } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts index 2682ace7df..db3a70d084 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts @@ -1,7 +1,3 @@ -import { - NoteNoShadowIcon, - NoteShadowSampleIcon, -} from '@blocksuite/affine-components/icons'; import { ColorScheme, NoteShadow } from '@blocksuite/affine-model'; import { WithDisposable } from '@blocksuite/global/utils'; import { css, html, LitElement } from 'lit'; @@ -9,6 +5,8 @@ import { property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; +import { NoteNoShadowIcon, NoteShadowSampleIcon } from './icons'; + const SHADOWS = [ { type: NoteShadow.None, diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-panel.ts index 2952166535..ee0d2e0a54 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-panel.ts @@ -41,6 +41,7 @@ export class EdgelessShapePanel extends LitElement { .tooltip=${tooltip} .active=${this.selectedShape === name} .activeMode=${'background'} + .iconSize=${'20px'} @click=${() => { if (disabled) return; this._onSelect(name); diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-style-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-style-panel.ts index 351a2d88a2..23766723e7 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-style-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-style-panel.ts @@ -1,8 +1,5 @@ -import { - GeneralStyleIcon, - ScribbledStyleIcon, -} from '@blocksuite/affine-components/icons'; import { ShapeStyle } from '@blocksuite/affine-model'; +import { StyleGeneralIcon, StyleScribbleIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -10,11 +7,11 @@ import { repeat } from 'lit/directives/repeat.js'; const SHAPE_STYLE_LIST = [ { value: ShapeStyle.General, - icon: GeneralStyleIcon, + icon: StyleGeneralIcon(), }, { value: ShapeStyle.Scribbled, - icon: ScribbledStyleIcon, + icon: StyleScribbleIcon(), }, ]; @@ -46,6 +43,7 @@ export class EdgelessShapeStylePanel extends LitElement { aria-label=${value} .tooltip=${value} .active=${this.value === value} + .iconSize=${'20px'} @click=${() => this._onSelect(value)} > ${icon} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/size-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/size-panel.ts index 277098508c..0a3c3cc2c3 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/size-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/size-panel.ts @@ -1,5 +1,5 @@ -import { CheckIcon } from '@blocksuite/affine-components/icons'; import { clamp, stopPropagation } from '@blocksuite/affine-shared/utils'; +import { DoneIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -81,9 +81,10 @@ export class EdgelessSizePanel extends LitElement { .iconContainerPadding=${[4, 8]} .justify=${'space-between'} .active=${active} + .iconSize=${'20px'} @click=${() => this._onSelect(value)} > - ${name ?? value} ${active ? CheckIcon : nothing} + ${name ?? value} ${active ? DoneIcon() : nothing} `; }; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts index 79d76eeffa..665bd1f568 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts @@ -1,7 +1,3 @@ -import { - EdgelessPenDarkIcon, - EdgelessPenLightIcon, -} from '@blocksuite/affine-components/icons'; import { EditPropsStore, ThemeProvider, @@ -13,6 +9,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { getTooltipWithShortcut } from '../../utils.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; +import { EdgelessPenDarkIcon, EdgelessPenLightIcon } from './icons.js'; export class EdgelessBrushToolButton extends EdgelessToolbarToolMixin( SignalWatcher(LitElement) diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/icons.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/icons.ts new file mode 100644 index 0000000000..28d8f1c8b8 --- /dev/null +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/icons.ts @@ -0,0 +1,273 @@ +import { html } from 'lit'; + +export const EdgelessPenLightIcon = html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; +export const EdgelessPenDarkIcon = html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/slide-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/slide-menu.ts index 5f140269b9..21be6f60b8 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/slide-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/slide-menu.ts @@ -1,5 +1,5 @@ -import { ArrowRightSmallIcon } from '@blocksuite/affine-components/icons'; import { WithDisposable } from '@blocksuite/global/utils'; +import { ArrowRightSmallIcon } from '@blocksuite/icons/lit'; import { consume } from '@lit/context'; import { css, html, LitElement } from 'lit'; import { property, query } from 'lit/decorators.js'; @@ -126,6 +126,8 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) { } override render() { + const iconSize = { width: '32px', height: '32px' }; + return html`
this._handleSlideButtonClick('left')} style=${styleMap({ opacity: this.showPrevious ? '1' : '0' })} > - ${ArrowRightSmallIcon} + ${ArrowRightSmallIcon(iconSize)}
this._handleSlideButtonClick('right')} > - ${ArrowRightSmallIcon} + ${ArrowRightSmallIcon(iconSize)}
`; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/toolbar-arrow-up-icon.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/toolbar-arrow-up-icon.ts new file mode 100644 index 0000000000..c6741d9ef5 --- /dev/null +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/toolbar-arrow-up-icon.ts @@ -0,0 +1,23 @@ +import { ShadowlessElement } from '@blocksuite/block-std'; +import { ArrowUpSmallIcon } from '@blocksuite/icons/lit'; +import { css, html } from 'lit'; + +export class ToolbarArrowUpIcon extends ShadowlessElement { + static override styles = css` + .arrow-up-icon { + position: absolute; + top: -2px; + right: -2px; + } + `; + + override render() { + return html` ${ArrowUpSmallIcon()} `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'toolbar-arrow-up-icon': ToolbarArrowUpIcon; + } +} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-dense-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-dense-menu.ts index 95ce2db99b..6fdaed5c47 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-dense-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-dense-menu.ts @@ -1,12 +1,11 @@ import { menu } from '@blocksuite/affine-components/context-menu'; -import { - ConnectorCWithArrowIcon, - ConnectorIcon, - ConnectorLWithArrowIcon, - ConnectorXWithArrowIcon, -} from '@blocksuite/affine-components/icons'; import { ConnectorMode } from '@blocksuite/affine-model'; import { EditPropsStore } from '@blocksuite/affine-shared/services'; +import { + ConnectorCIcon, + ConnectorEIcon, + ConnectorLIcon, +} from '@blocksuite/icons/lit'; import type { DenseMenuBuilder } from '../common/type.js'; @@ -26,28 +25,29 @@ export const buildConnectorDenseMenu: DenseMenuBuilder = edgeless => { edgeless.std.get(EditPropsStore).recordLastProps('connector', { mode }); }; + const iconSize = { width: '20', height: '20' }; return menu.subMenu({ name: 'Connector', - prefix: ConnectorIcon, + prefix: ConnectorCIcon(iconSize), select: createSelect(prevMode, false), isSelected, options: { items: [ menu.action({ name: 'Curve', - prefix: ConnectorCWithArrowIcon, + prefix: ConnectorCIcon(iconSize), select: createSelect(ConnectorMode.Curve), isSelected: isSelected && prevMode === ConnectorMode.Curve, }), menu.action({ name: 'Elbowed', - prefix: ConnectorXWithArrowIcon, + prefix: ConnectorEIcon(iconSize), select: createSelect(ConnectorMode.Orthogonal), isSelected: isSelected && prevMode === ConnectorMode.Orthogonal, }), menu.action({ name: 'Straight', - prefix: ConnectorLWithArrowIcon, + prefix: ConnectorLIcon(iconSize), select: createSelect(ConnectorMode.Straight), isSelected: isSelected && prevMode === ConnectorMode.Straight, }), diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts index cb3f85d7d4..2bbc71d347 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts @@ -1,8 +1,3 @@ -import { - ConnectorCWithArrowIcon, - ConnectorLWithArrowIcon, - ConnectorXWithArrowIcon, -} from '@blocksuite/affine-components/icons'; import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model'; import { EditPropsStore, @@ -12,6 +7,11 @@ import { import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; import { SignalWatcher } from '@blocksuite/global/utils'; +import { + ConnectorCIcon, + ConnectorEIcon, + ConnectorLIcon, +} from '@blocksuite/icons/lit'; import { computed } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; @@ -34,25 +34,28 @@ function ConnectorModeButtonGroup( .active=${mode === ConnectorMode.Curve} .activeMode=${'background'} .tooltip=${'Curve'} + .iconSize=${'20px'} @click=${() => setConnectorMode({ mode: ConnectorMode.Curve })} > - ${ConnectorCWithArrowIcon} + ${ConnectorCIcon()} setConnectorMode({ mode: ConnectorMode.Orthogonal })} > - ${ConnectorXWithArrowIcon} + ${ConnectorEIcon()} setConnectorMode({ mode: ConnectorMode.Straight })} > - ${ConnectorLWithArrowIcon} + ${ConnectorLIcon()}
`; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts index 7a626db5e7..620698d866 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts @@ -1,23 +1,21 @@ -import { - ArrowUpIcon, - ConnectorCWithArrowIcon, - ConnectorLWithArrowIcon, - ConnectorXWithArrowIcon, -} from '@blocksuite/affine-components/icons'; import { ConnectorMode, getConnectorModeName } from '@blocksuite/affine-model'; import { EditPropsStore } from '@blocksuite/affine-shared/services'; import { SignalWatcher } from '@blocksuite/global/utils'; +import { + ConnectorCIcon, + ConnectorEIcon, + ConnectorLIcon, +} from '@blocksuite/icons/lit'; import { computed } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; -import { styleMap } from 'lit/directives/style-map.js'; import { getTooltipWithShortcut } from '../../utils.js'; import { QuickToolMixin } from '../mixins/quick-tool.mixin.js'; const IcomMap = { - [ConnectorMode.Straight]: ConnectorLWithArrowIcon, - [ConnectorMode.Orthogonal]: ConnectorXWithArrowIcon, - [ConnectorMode.Curve]: ConnectorCWithArrowIcon, + [ConnectorMode.Straight]: ConnectorLIcon(), + [ConnectorMode.Orthogonal]: ConnectorEIcon(), + [ConnectorMode.Curve]: ConnectorCIcon(), }; export class EdgelessConnectorToolButton extends QuickToolMixin( @@ -27,16 +25,6 @@ export class EdgelessConnectorToolButton extends QuickToolMixin( :host { display: flex; } - .edgeless-connector-button { - display: flex; - position: relative; - } - .arrow-up-icon { - position: absolute; - top: 4px; - right: 2px; - font-size: 0; - } `; private readonly _mode$ = computed(() => { @@ -62,16 +50,16 @@ export class EdgelessConnectorToolButton extends QuickToolMixin( override render() { const { active } = this; const mode = this._mode$.value; - const arrowColor = active ? 'currentColor' : 'var(--affine-icon-secondary)'; return html` { // don't update tool before toggling menu this._toggleMenu(); @@ -81,9 +69,7 @@ export class EdgelessConnectorToolButton extends QuickToolMixin( }} > ${IcomMap[mode]} - - ${ArrowUpIcon} - + `; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/default/default-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/default/default-tool-button.ts index 18899e185e..4c6fd3c08c 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/default/default-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/default/default-tool-button.ts @@ -1,35 +1,20 @@ -import { - ArrowUpIcon, - HandIcon, - SelectIcon, -} from '@blocksuite/affine-components/icons'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; +import { HandIcon, SelectIcon } from '@blocksuite/icons/lit'; import { effect } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { query } from 'lit/decorators.js'; import { getTooltipWithShortcut } from '../../utils.js'; import { QuickToolMixin } from '../mixins/quick-tool.mixin.js'; - export class EdgelessDefaultToolButton extends QuickToolMixin(LitElement) { static override styles = css` .current-icon { transition: 100ms; - width: 24px; - height: 24px; } .current-icon > svg { display: block; - } - .arrow-up-icon { - position: absolute; - top: 4px; - right: 2px; - font-size: 0; - color: var(--affine-icon-secondary); - } - .active .arrow-up-icon { - color: inherit; + width: 24px; + height: 24px; } `; @@ -91,19 +76,20 @@ export class EdgelessDefaultToolButton extends QuickToolMixin(LitElement) { const { active } = this; return html` - - ${localStorage.defaultTool === 'default' ? SelectIcon : HandIcon} - - ${ArrowUpIcon} +
+ ${localStorage.defaultTool === 'default' ? SelectIcon() : HandIcon()} +
+ `; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts index 3c431d314c..6e1ca40d3e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts @@ -4,11 +4,6 @@ import { popMenu, popupTargetFromElement, } from '@blocksuite/affine-components/context-menu'; -import { - ArrowLeftSmallIcon, - ArrowRightSmallIcon, - MoreHorizontalIcon, -} from '@blocksuite/affine-components/icons'; import { darkToolbarStyles, lightToolbarStyles, @@ -22,6 +17,11 @@ import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { WidgetComponent } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; import { debounce, Slot } from '@blocksuite/global/utils'; +import { + ArrowLeftSmallIcon, + ArrowRightSmallIcon, + MoreHorizontalIcon, +} from '@blocksuite/icons/lit'; import { autoPlacement, offset } from '@floating-ui/dom'; import { ContextProvider } from '@lit/context'; import { computed } from '@preact/signals-core'; @@ -499,7 +499,7 @@ export class EdgelessToolbarWidget extends WidgetComponent< .slice(this._visibleQuickToolSize) .some(tool => tool.type === this.edgelessTool?.type)} > - ${MoreHorizontalIcon} + ${MoreHorizontalIcon({ width: '20px', height: '20px' })} More Tools @@ -513,7 +513,7 @@ export class EdgelessToolbarWidget extends WidgetComponent< ?disabled=${this._seniorScrollPrevDisabled} @click=${this._onSeniorNavPrev} > - ${ArrowLeftSmallIcon} + ${ArrowLeftSmallIcon({ width: '20px', height: '20px' })} ${cache( this._seniorPrevTooltip ? html` @@ -540,7 +540,7 @@ export class EdgelessToolbarWidget extends WidgetComponent< ?disabled=${this._seniorScrollNextDisabled} @click=${this._onSeniorNavNext} > - ${ArrowRightSmallIcon} + ${ArrowRightSmallIcon({ width: '20px', height: '20px' })} ${cache( this._seniorNextTooltip ? html` diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/eraser-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/eraser-tool-button.ts index c4d8681edd..0b01a82836 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/eraser-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/eraser-tool-button.ts @@ -1,13 +1,10 @@ -import { - EdgelessEraserDarkIcon, - EdgelessEraserLightIcon, -} from '@blocksuite/affine-components/icons'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; import { css, html, LitElement } from 'lit'; import { getTooltipWithShortcut } from '../../utils.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; +import { EdgelessEraserDarkIcon, EdgelessEraserLightIcon } from './icons.js'; export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin( LitElement diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/icons.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/icons.ts new file mode 100644 index 0000000000..b9bdefcfaa --- /dev/null +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/icons.ts @@ -0,0 +1,422 @@ +import { html } from 'lit'; + +export const EdgelessEraserLightIcon = html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; +export const EdgelessEraserDarkIcon = html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-dense-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-dense-menu.ts index 936b17a0ea..4e199e0570 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-dense-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-dense-menu.ts @@ -1,5 +1,5 @@ import { menu } from '@blocksuite/affine-components/context-menu'; -import { FrameIcon } from '@blocksuite/affine-components/icons'; +import { FrameIcon } from '@blocksuite/icons/lit'; import type { DenseMenuBuilder } from '../common/type.js'; import { FrameConfig } from './config.js'; @@ -7,7 +7,7 @@ import { FrameConfig } from './config.js'; export const buildFrameDenseMenu: DenseMenuBuilder = edgeless => menu.subMenu({ name: 'Frame', - prefix: FrameIcon, + prefix: FrameIcon({ width: '20px', height: '20px' }), select: () => edgeless.gfx.tool.setTool({ type: 'frame' }), isSelected: edgeless.gfx.tool.currentToolName$.peek() === 'frame', options: { diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-tool-button.ts index 354ffdb9cf..a43f8dec0c 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-tool-button.ts @@ -1,10 +1,6 @@ -import { - ArrowUpIcon, - LargeFrameIcon, -} from '@blocksuite/affine-components/icons'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; +import { FrameIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement } from 'lit'; -import { styleMap } from 'lit/directives/style-map.js'; import { getTooltipWithShortcut } from '../../../components/utils.js'; import { QuickToolMixin } from '../mixins/quick-tool.mixin.js'; @@ -14,13 +10,6 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) { :host { display: flex; } - - .arrow-up-icon { - position: absolute; - top: 4px; - right: 2px; - font-size: 0; - } `; override type: GfxToolsFullOptionValue['type'] = 'frame'; @@ -34,13 +23,12 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) { override render() { const type = this.edgelessTool?.type; - const arrowColor = - type === 'frame' ? 'currentColor' : 'var(--affine-icon-secondary)'; return html` { @@ -49,10 +37,8 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) { this.setEdgelessTool({ type: 'frame' }); }} > - ${LargeFrameIcon} - - ${ArrowUpIcon} - + ${FrameIcon()} + `; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/icons.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/icons.ts new file mode 100644 index 0000000000..0881074304 --- /dev/null +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/icons.ts @@ -0,0 +1,71 @@ +import { html } from 'lit'; + +export const LassoFreeHandIcon = html` + + + + + + +`; + +export const LassoPolygonalIcon = html` + + + + + + +`; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-dense-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-dense-menu.ts index 0942226ba8..162cfe38c7 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-dense-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-dense-menu.ts @@ -1,11 +1,8 @@ import { menu } from '@blocksuite/affine-components/context-menu'; -import { - LassoFreeHandIcon, - LassoPolygonalIcon, -} from '@blocksuite/affine-components/icons'; import { LassoMode } from '@blocksuite/affine-shared/types'; import type { DenseMenuBuilder } from '../common/type.js'; +import { LassoFreeHandIcon, LassoPolygonalIcon } from './icons.js'; export const buildLassoDenseMenu: DenseMenuBuilder = edgeless => { // TODO: active state diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-tool-button.ts index e6d788f629..e13e23fd13 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-tool-button.ts @@ -1,17 +1,12 @@ -import { - ArrowUpIcon, - LassoFreeHandIcon, - LassoPolygonalIcon, -} from '@blocksuite/affine-components/icons'; import { LassoMode } from '@blocksuite/affine-shared/types'; import { WithDisposable } from '@blocksuite/global/utils'; import { effect } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { query, state } from 'lit/decorators.js'; -import { styleMap } from 'lit/directives/style-map.js'; import { getTooltipWithShortcut } from '../../utils.js'; import { QuickToolMixin } from '../mixins/quick-tool.mixin.js'; +import { LassoFreeHandIcon, LassoPolygonalIcon } from './icons.js'; export class EdgelessLassoToolButton extends QuickToolMixin( WithDisposable(LitElement) @@ -25,12 +20,6 @@ export class EdgelessLassoToolButton extends QuickToolMixin( .current-icon > svg { display: block; } - .arrow-up-icon { - position: absolute; - top: 4px; - right: 2px; - font-size: 0; - } `; private readonly _changeTool = () => { @@ -80,8 +69,6 @@ export class EdgelessLassoToolButton extends QuickToolMixin( const type = this.edgelessTool?.type; const mode = this.curMode === LassoMode.FreeHand ? 'freehand' : 'polygonal'; - const arrowColor = - type === 'lasso' ? 'currentColor' : 'var(--affine-icon-secondary)'; return html` @@ -96,9 +84,7 @@ export class EdgelessLassoToolButton extends QuickToolMixin( ? LassoFreeHandIcon : LassoPolygonalIcon} - - ${ArrowUpIcon} - + `; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts index d46107aadf..271237ff62 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts @@ -1,9 +1,8 @@ -import { ArrowUpIcon, NoteIcon } from '@blocksuite/affine-components/icons'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; +import { PageIcon } from '@blocksuite/icons/lit'; import { effect } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { state } from 'lit/decorators.js'; -import { styleMap } from 'lit/directives/style-map.js'; import { getTooltipWithShortcut } from '../../../components/utils.js'; import type { NoteToolOption } from '../../../gfx-tool/note-tool.js'; @@ -16,13 +15,6 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) { :host { display: flex; } - - .arrow-up-icon { - position: absolute; - top: 4px; - right: 2px; - font-size: 0; - } `; private _noteMenu: MenuPopper | null = null; @@ -93,7 +85,6 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) { override render() { const { active } = this; - const arrowColor = active ? 'currentColor' : 'var(--affine-icon-secondary)'; return html` { this._toggleNoteMenu(); }} > - ${NoteIcon} - - ${ArrowUpIcon} - + ${PageIcon()} + `; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/frame-order-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/frame-order-button.ts index 8427c34e84..5478805c0f 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/frame-order-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/frame-order-button.ts @@ -1,7 +1,7 @@ -import { FrameOrderAdjustmentIcon } from '@blocksuite/affine-components/icons'; import type { FrameBlockModel } from '@blocksuite/affine-model'; import { createButtonPopper } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/utils'; +import { LayerIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement } from 'lit'; import { property, query } from 'lit/decorators.js'; @@ -49,6 +49,7 @@ export class EdgelessFrameOrderButton extends WithDisposable(LitElement) { { if (readonly) return; @@ -56,7 +57,7 @@ export class EdgelessFrameOrderButton extends WithDisposable(LitElement) { }} .iconContainerPadding=${0} > - ${FrameOrderAdjustmentIcon} + ${LayerIcon()} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/navigator-setting-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/navigator-setting-button.ts index cadb90c64f..65be1692e2 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/navigator-setting-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/navigator-setting-button.ts @@ -1,7 +1,7 @@ -import { NavigatorSettingsIcon } from '@blocksuite/affine-components/icons'; import { EditPropsStore } from '@blocksuite/affine-shared/services'; import { createButtonPopper } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/utils'; +import { SettingsIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; @@ -111,12 +111,13 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) { { this._navigatorSettingPopper?.toggle(); }} .iconContainerPadding=${0} > - ${NavigatorSettingsIcon} + ${SettingsIcon()}
{ this.setEdgelessTool({ type: 'frameNavigator', }); }} > - ${FrameNavigatorIcon} + ${PresentationIcon()}
`; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts index 17fb3d3d30..95fb770b39 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts @@ -1,15 +1,15 @@ -import { - FrameNavigatorNextIcon, - FrameNavigatorPrevIcon, - NavigatorExitFullScreenIcon, - NavigatorFullScreenIcon, - StopAIIcon, -} from '@blocksuite/affine-components/icons'; import { toast } from '@blocksuite/affine-components/toast'; import type { FrameBlockModel } from '@blocksuite/affine-model'; import { EditPropsStore } from '@blocksuite/affine-shared/services'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; import { Bound, clamp, SignalWatcher } from '@blocksuite/global/utils'; +import { + EndPointArrowIcon, + ExpandCloseIcon, + ExpandFullIcon, + StartPointArrowIcon, + StopAiIcon, +} from '@blocksuite/icons/lit'; import { effect } from '@preact/signals-core'; import { cssVar } from '@toeverything/theme'; import { css, html, LitElement, nothing, type PropertyValues } from 'lit'; @@ -83,6 +83,9 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( svg { display: block; + width: 24px; + height: 24px; + color: white; } } .edgeless-frame-navigator-stop::before { @@ -325,9 +328,10 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( this._previousFrame()} > - ${FrameNavigatorPrevIcon} + ${StartPointArrowIcon()}
@@ -350,8 +354,9 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( .tooltip=${'Next'} @click=${() => this._nextFrame()} .iconContainerPadding=${0} + .iconSize=${'24px'} > - ${FrameNavigatorNextIcon} + ${EndPointArrowIcon()}
@@ -364,10 +369,9 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( @click=${() => this._toggleFullScreen()} .iconContainerPadding=${0} .iconContainerWidth=${'24px'} + .iconSize=${'24px'} > - ${document.fullscreenElement - ? NavigatorExitFullScreenIcon - : NavigatorFullScreenIcon} + ${document.fullscreenElement ? ExpandCloseIcon() : ExpandFullIcon()} ${this.dense @@ -399,7 +403,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( @click=${this._exitPresentation} style="background: ${cssVar('warningColor')}" > - ${StopAIIcon} + ${StopAiIcon()} `; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/icons.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/icons.ts new file mode 100644 index 0000000000..348cdd327c --- /dev/null +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/icons.ts @@ -0,0 +1,255 @@ +import { html } from 'lit'; + +export const ScribbledSquareIcon = html` + + + + + + + + +`; + +export const ScribbledEllipseIcon = html` + +`; + +export const ScribbledDiamondIcon = html` + + + + + + + + +`; + +export const ScribbledTriangleIcon = html` + + + + + + +`; + +export const ScribbledRoundedRectangleIcon = html` + + + + + + + + + + +`; + +export const ellipseSvg = html` + + `; + +export const triangleSvg = html` + + `; + +export const roundedSvg = html` + + `; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-draggable.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-draggable.ts index 8e57c18676..6dd1f86a82 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-draggable.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-draggable.ts @@ -2,11 +2,6 @@ import { CanvasElementType, EdgelessCRUDIdentifier, } from '@blocksuite/affine-block-surface'; -import { - ellipseSvg, - roundedSvg, - triangleSvg, -} from '@blocksuite/affine-components/icons'; import { getShapeRadius, getShapeType, @@ -27,6 +22,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { ShapeTool } from '../../../gfx-tool/shape-tool.js'; import { EdgelessDraggableElementController } from '../common/draggable/draggable-element.controller.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; +import { ellipseSvg, roundedSvg, triangleSvg } from './icons.js'; import type { DraggableShape } from './utils.js'; import { buildVariablesObject } from './utils.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts index 0f1caf0d29..a4b57ea0ad 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts @@ -1,19 +1,21 @@ +import { ShapeType } from '@blocksuite/affine-model'; import { DiamondIcon, EllipseIcon, RoundedRectangleIcon, + SquareIcon, + TriangleIcon, +} from '@blocksuite/icons/lit'; +import type { TemplateResult } from 'lit'; + +import type { ShapeToolOption } from '../../../gfx-tool/shape-tool'; +import { ScribbledDiamondIcon, ScribbledEllipseIcon, ScribbledRoundedRectangleIcon, ScribbledSquareIcon, ScribbledTriangleIcon, - SquareIcon, - TriangleIcon, -} from '@blocksuite/affine-components/icons'; -import { ShapeType } from '@blocksuite/affine-model'; -import type { TemplateResult } from 'lit'; - -import type { ShapeToolOption } from '../../../gfx-tool/shape-tool.js'; +} from './icons'; type Config = { name: ShapeToolOption['shapeName']; @@ -26,35 +28,35 @@ type Config = { export const ShapeComponentConfig: Config[] = [ { name: ShapeType.Rect, - generalIcon: SquareIcon, + generalIcon: SquareIcon(), scribbledIcon: ScribbledSquareIcon, tooltip: 'Square', disabled: false, }, { name: ShapeType.Ellipse, - generalIcon: EllipseIcon, + generalIcon: EllipseIcon(), scribbledIcon: ScribbledEllipseIcon, tooltip: 'Ellipse', disabled: false, }, { name: ShapeType.Diamond, - generalIcon: DiamondIcon, + generalIcon: DiamondIcon(), scribbledIcon: ScribbledDiamondIcon, tooltip: 'Diamond', disabled: false, }, { name: ShapeType.Triangle, - generalIcon: TriangleIcon, + generalIcon: TriangleIcon(), scribbledIcon: ScribbledTriangleIcon, tooltip: 'Triangle', disabled: false, }, { name: 'roundedRect', - generalIcon: RoundedRectangleIcon, + generalIcon: RoundedRectangleIcon(), scribbledIcon: ScribbledRoundedRectangleIcon, tooltip: 'Rounded rectangle', disabled: false, diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts index 269ad7fc04..365de426a1 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts @@ -1,7 +1,3 @@ -import { - GeneralStyleIcon, - ScribbledStyleIcon, -} from '@blocksuite/affine-components/icons'; import { DefaultTheme, isTransparent, @@ -17,6 +13,7 @@ import { } from '@blocksuite/affine-shared/services'; import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; +import { StyleGeneralIcon, StyleScribbleIcon } from '@blocksuite/icons/lit'; import { computed, effect, type Signal, signal } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; @@ -132,21 +129,23 @@ export class EdgelessShapeMenu extends SignalWatcher( .tooltip=${'General'} .active=${shapeStyle === ShapeStyle.General} .activeMode=${'background'} + .iconSize=${'20px'} @click=${() => { this._setShapeStyle(ShapeStyle.General); }} > - ${GeneralStyleIcon} + ${StyleGeneralIcon()} { this._setShapeStyle(ShapeStyle.Scribbled); }} > - ${ScribbledStyleIcon} + ${StyleScribbleIcon()}
@@ -158,6 +157,7 @@ export class EdgelessShapeMenu extends SignalWatcher( .tooltip=${tooltip} .active=${shapeName === name} .activeMode=${'background'} + .iconSize=${'20px'} @click=${() => this.onChange(name)} > ${shapeStyle === ShapeStyle.General diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/icon.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/cards.ts similarity index 99% rename from blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/icon.ts rename to blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/cards.ts index 25d929631f..3209462776 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/icon.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/cards.ts @@ -1,6 +1,6 @@ import { html, svg } from 'lit'; -export const ArrowIcon = html` +export const Triangle = html` -
${ArrowIcon}
+
${Triangle}
`; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/template-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/template-tool-button.ts index ff3f5bbf0b..bedf2d2b42 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/template-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/template-tool-button.ts @@ -14,7 +14,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; -import { TemplateCard1, TemplateCard2, TemplateCard3 } from './icon.js'; +import { TemplateCard1, TemplateCard2, TemplateCard3 } from './cards.js'; import type { EdgelessTemplatePanel } from './template-panel.js'; export class EdgelessTemplateButton extends EdgelessToolbarToolMixin( diff --git a/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts b/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts index 2258ddb38b..af1e0408e9 100644 --- a/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts @@ -1,7 +1,7 @@ -import { MoreIcon } from '@blocksuite/affine-components/icons'; import { createLitPortal } from '@blocksuite/affine-components/portal'; import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/utils'; +import { MoreHorizontalIcon } from '@blocksuite/icons/lit'; import { offset } from '@floating-ui/dom'; import { css, html, LitElement, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; @@ -89,9 +89,10 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) { .arrow=${false} .activeMode=${'background'} .iconContainerPadding=${6} + .iconSize=${'24px'} @click=${() => this._toggleZoomMenu()} > - ${MoreIcon} + ${MoreHorizontalIcon()} `; diff --git a/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts b/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts index 56016842dc..7a776dcfc5 100644 --- a/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts +++ b/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts @@ -1,11 +1,7 @@ -import { - MinusIcon, - PlusIcon, - ViewBarIcon, -} from '@blocksuite/affine-components/icons'; import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { ZOOM_STEP } from '@blocksuite/block-std/gfx'; import { WithDisposable } from '@blocksuite/global/utils'; +import { MinusIcon, PlusIcon, ViewBarIcon } from '@blocksuite/icons/lit'; import { effect } from '@preact/signals-core'; import { baseTheme } from '@toeverything/theme'; import { css, html, LitElement, nothing, unsafeCSS } from 'lit'; @@ -168,9 +164,10 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) { .arrow=${!this._isVerticalBar()} @click=${() => this.gfx.fitToScreen()} .iconContainerPadding=${4} + .iconSize=${'24px'} .disabled=${locked} > - ${ViewBarIcon} + ${ViewBarIcon()} this.edgelessService.setZoomByStep(-ZOOM_STEP)} .iconContainerPadding=${4} + .iconSize=${'24px'} .disabled=${locked} > - ${MinusIcon} + ${MinusIcon()}