luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(editor): edgeless toolbar chevron down icon (#10898)

Browse Source
This commit is contained in:
fundon
2025-03-20 02:08:20 +00:00
parent a7acd5c5b1
commit 831f290f84
14 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
View File

@@ -1,4 +1,5 @@
import { toast } from '@blocksuite/affine-components/toast'; import { toast } from '@blocksuite/affine-components/toast';
import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { import {
type EmbedCardStyle, type EmbedCardStyle,
EmbedLinkedDocModel, EmbedLinkedDocModel,
@@ -25,7 +26,6 @@ import {
import { BlockFlavourIdentifier } from '@blocksuite/block-std'; import { BlockFlavourIdentifier } from '@blocksuite/block-std';
import { Bound } from '@blocksuite/global/gfx'; import { Bound } from '@blocksuite/global/gfx';
import { import {
ArrowDownSmallIcon,
CaptionIcon, CaptionIcon,
CopyIcon, CopyIcon,
DeleteIcon, DeleteIcon,
@@ -136,7 +136,7 @@ const openDocActionGroup = {
.contentPadding="${'8px'}" .contentPadding="${'8px'}"
.button=${html` .button=${html`
<editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}> <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
${OpenInNewIcon()} ${ArrowDownSmallIcon()} ${OpenInNewIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

4
blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
View File

@@ -1,4 +1,5 @@
import { toast } from '@blocksuite/affine-components/toast'; import { toast } from '@blocksuite/affine-components/toast';
import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { EmbedSyncedDocModel } from '@blocksuite/affine-model'; import { EmbedSyncedDocModel } from '@blocksuite/affine-model';
import { import {
ActionPlacement, ActionPlacement,
@@ -14,7 +15,6 @@ import { getBlockProps } from '@blocksuite/affine-shared/utils';
import { BlockFlavourIdentifier } from '@blocksuite/block-std'; import { BlockFlavourIdentifier } from '@blocksuite/block-std';
import { Bound } from '@blocksuite/global/gfx'; import { Bound } from '@blocksuite/global/gfx';
import { import {
ArrowDownSmallIcon,
CaptionIcon, CaptionIcon,
CopyIcon, CopyIcon,
DeleteIcon, DeleteIcon,
@@ -89,7 +89,7 @@ const openDocActionGroup = {
.contentPadding="${'8px'}" .contentPadding="${'8px'}"
.button=${html` .button=${html`
<editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}> <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
${OpenInNewIcon()} ${ArrowDownSmallIcon()} ${OpenInNewIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

5
blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
View File

@@ -1,6 +1,7 @@
import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { LineWidth, type StrokeStyle } from '@blocksuite/affine-model'; import { LineWidth, type StrokeStyle } from '@blocksuite/affine-model';
import { ShadowlessElement } from '@blocksuite/block-std'; import { ShadowlessElement } from '@blocksuite/block-std';
import { ArrowDownSmallIcon, LineStyleIcon } from '@blocksuite/icons/lit'; import { LineStyleIcon } from '@blocksuite/icons/lit';
import { html } from 'lit'; import { html } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
@@ -15,7 +16,7 @@ export class EdgelessNoteBorderDropdownMenu extends ShadowlessElement {
aria-label="Border style" aria-label="Border style"
.tooltip="${'Border style'}" .tooltip="${'Border style'}"
> >
${LineStyleIcon()} ${ArrowDownSmallIcon()} ${LineStyleIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

4
blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts
View File

@@ -1,6 +1,6 @@
import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { NoteDisplayMode } from '@blocksuite/affine-model'; import { NoteDisplayMode } from '@blocksuite/affine-model';
import { ShadowlessElement } from '@blocksuite/block-std'; import { ShadowlessElement } from '@blocksuite/block-std';
import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import { html } from 'lit'; import { html } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
@@ -34,7 +34,7 @@ export class EdgelessNoteDisplayModeDropdownMenu extends ShadowlessElement {
.labelHeight="${'20px'}" .labelHeight="${'20px'}"
> >
<span class="label">${mode}</span> <span class="label">${mode}</span>
${ArrowDownSmallIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

8
blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts
View File

@@ -1,8 +1,6 @@
import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { ColorScheme, NoteShadow } from '@blocksuite/affine-model'; import { ColorScheme, NoteShadow } from '@blocksuite/affine-model';
import { import { NoteShadowDuotoneIcon } from '@blocksuite/icons/lit';
ArrowDownSmallIcon,
NoteShadowDuotoneIcon,
} from '@blocksuite/icons/lit';
import { css, html, LitElement } from 'lit'; import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js'; import { repeat } from 'lit/directives/repeat.js';
@@ -119,7 +117,7 @@ export class EdgelessNoteShadowDropdownMenu extends LitElement {
aria-label="Shadow style" aria-label="Shadow style"
.tooltip="${'Shadow style'}" .tooltip="${'Shadow style'}"
> >
${NoteShadowDuotoneIcon()} ${ArrowDownSmallIcon()} ${NoteShadowDuotoneIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

4
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts
View File

@@ -4,6 +4,7 @@ import {
EdgelessCRUDIdentifier, EdgelessCRUDIdentifier,
updateXYWH, updateXYWH,
} from '@blocksuite/affine-block-surface'; } from '@blocksuite/affine-block-surface';
import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import type { ToolbarContext } from '@blocksuite/affine-shared/services'; import type { ToolbarContext } from '@blocksuite/affine-shared/services';
import type { GfxModel } from '@blocksuite/block-std/gfx'; import type { GfxModel } from '@blocksuite/block-std/gfx';
import { Bound } from '@blocksuite/global/gfx'; import { Bound } from '@blocksuite/global/gfx';
@@ -14,7 +15,6 @@ import {
AlignRightIcon, AlignRightIcon,
AlignTopIcon, AlignTopIcon,
AlignVerticalCenterIcon, AlignVerticalCenterIcon,
ArrowDownSmallIcon,
AutoTidyUpIcon, AutoTidyUpIcon,
DistributeHorizontalIcon, DistributeHorizontalIcon,
DistributeVerticalIcon, DistributeVerticalIcon,
@@ -272,7 +272,7 @@ export function renderAlignmentMenu(
aria-label="${label}" aria-label="${label}"
.tooltip="${tooltip ?? label}" .tooltip="${tooltip ?? label}"
> >
${icon} ${ArrowDownSmallIcon()} ${icon} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

7
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
View File

@@ -6,6 +6,7 @@ import {
packColor, packColor,
type PickColorEvent, type PickColorEvent,
} from '@blocksuite/affine-components/color-picker'; } from '@blocksuite/affine-components/color-picker';
import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { import {
DefaultTheme, DefaultTheme,
FontFamily, FontFamily,
@@ -26,7 +27,6 @@ import {
} from '@blocksuite/affine-shared/utils'; } from '@blocksuite/affine-shared/utils';
import type { GfxModel } from '@blocksuite/block-std/gfx'; import type { GfxModel } from '@blocksuite/block-std/gfx';
import { import {
ArrowDownSmallIcon,
TextAlignCenterIcon, TextAlignCenterIcon,
TextAlignLeftIcon, TextAlignLeftIcon,
TextAlignRightIcon, TextAlignRightIcon,
@@ -157,7 +157,8 @@ export function createTextActions<
> >
<span class="label padding0" style=${styleMap(styleInfo)} <span class="label padding0" style=${styleMap(styleInfo)}
>Aa</span >Aa</span
>${ArrowDownSmallIcon()} >
${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >
@@ -285,7 +286,7 @@ export function createTextActions<
'key' 'key'
)} )}
</span> </span>
${ArrowDownSmallIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

4
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts
View File

@@ -1,5 +1,5 @@
import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import type { ToolbarContext } from '@blocksuite/affine-shared/services'; import type { ToolbarContext } from '@blocksuite/affine-shared/services';
import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import { html } from 'lit'; import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { repeat } from 'lit/directives/repeat.js'; import { repeat } from 'lit/directives/repeat.js';
@@ -31,7 +31,7 @@ export function renderMenu<T>({
.tooltip="${tooltip ?? label}" .tooltip="${tooltip ?? label}"
> >
${icon ?? renderCurrentMenuItemWith(items, currentValue, 'icon')} ${icon ?? renderCurrentMenuItemWith(items, currentValue, 'icon')}
${ArrowDownSmallIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

6
blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts
View File

@@ -1,12 +1,13 @@
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
import { PropTypes, requiredProperties } from '@blocksuite/block-std'; import { PropTypes, requiredProperties } from '@blocksuite/block-std';
import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import { LitElement } from 'lit'; import { LitElement } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
import { html } from 'lit-html'; import { html } from 'lit-html';
import { repeat } from 'lit-html/directives/repeat.js'; import { repeat } from 'lit-html/directives/repeat.js';
import { EditorChevronDown } from '../toolbar';
const colors = [ const colors = [
'default', 'default',
'red', 'red',
@@ -56,8 +57,7 @@ export class HighlightDropdownMenu extends LitElement {
'var(--affine-text-primary-color)', 'var(--affine-text-primary-color)',
})} })}
></affine-highlight-duotone-icon> ></affine-highlight-duotone-icon>
${EditorChevronDown}
${ArrowDownSmallIcon()}
</editor-icon-button> </editor-icon-button>
`} `}
> >

6
blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts
View File

@@ -1,7 +1,7 @@
import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { stopPropagation } from '@blocksuite/affine-shared/utils';
import { PropTypes, requiredProperties } from '@blocksuite/block-std'; import { PropTypes, requiredProperties } from '@blocksuite/block-std';
import { SignalWatcher } from '@blocksuite/global/lit'; import { SignalWatcher } from '@blocksuite/global/lit';
import { ArrowDownSmallIcon, DoneIcon } from '@blocksuite/icons/lit'; import { DoneIcon } from '@blocksuite/icons/lit';
import type { ReadonlySignal, Signal } from '@preact/signals-core'; import type { ReadonlySignal, Signal } from '@preact/signals-core';
import { css, html, LitElement, type TemplateResult } from 'lit'; import { css, html, LitElement, type TemplateResult } from 'lit';
import { property, query } from 'lit/decorators.js'; import { property, query } from 'lit/decorators.js';
@@ -9,7 +9,7 @@ import { repeat } from 'lit-html/directives/repeat.js';
import { when } from 'lit-html/directives/when.js'; import { when } from 'lit-html/directives/when.js';
import clamp from 'lodash-es/clamp'; import clamp from 'lodash-es/clamp';
import type { EditorMenuButton } from '../toolbar'; import { EditorChevronDown, type EditorMenuButton } from '../toolbar';
type SizeItem = { key?: string | number; value: number }; type SizeItem = { key?: string | number; value: number };
@@ -145,7 +145,7 @@ export class SizeDropdownMenu extends SignalWatcher(LitElement) {
> >
${icon ?? ${icon ??
html`<span class="label">${format?.(size) ?? size}</span>`} html`<span class="label">${format?.(size) ?? size}</span>`}
${ArrowDownSmallIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

7
blocksuite/affine/components/src/toolbar/chevron-down.ts Normal file
View File

@@ -0,0 +1,7 @@
import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
export const EditorChevronDown = ArrowDownSmallIcon({
style: 'display: flex;',
width: '16px',
height: '16px',
});

1
blocksuite/affine/components/src/toolbar/index.ts
View File

@@ -8,6 +8,7 @@ import { EditorToolbarSeparator } from './separator.js';
import { EditorToolbar } from './toolbar.js'; import { EditorToolbar } from './toolbar.js';
import { Tooltip } from './tooltip.js'; import { Tooltip } from './tooltip.js';
export { EditorChevronDown } from './chevron-down.js';
export { ToolbarMoreMenuConfigExtension } from './config.js'; export { ToolbarMoreMenuConfigExtension } from './config.js';
export { EditorIconButton } from './icon-button.js'; export { EditorIconButton } from './icon-button.js';
export { export {

5
blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts
View File

@@ -4,7 +4,6 @@ import {
} from '@blocksuite/affine-shared/services'; } from '@blocksuite/affine-shared/services';
import { PropTypes, requiredProperties } from '@blocksuite/block-std'; import { PropTypes, requiredProperties } from '@blocksuite/block-std';
import { SignalWatcher } from '@blocksuite/global/lit'; import { SignalWatcher } from '@blocksuite/global/lit';
import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import type { ReadonlySignal, Signal } from '@preact/signals-core'; import type { ReadonlySignal, Signal } from '@preact/signals-core';
import { LitElement } from 'lit'; import { LitElement } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
@@ -12,6 +11,8 @@ import { html } from 'lit-html';
import { ifDefined } from 'lit-html/directives/if-defined.js'; import { ifDefined } from 'lit-html/directives/if-defined.js';
import { repeat } from 'lit-html/directives/repeat.js'; import { repeat } from 'lit-html/directives/repeat.js';
import { EditorChevronDown } from '../toolbar';
@requiredProperties({ @requiredProperties({
actions: PropTypes.array, actions: PropTypes.array,
context: PropTypes.instanceOf(ToolbarContext), context: PropTypes.instanceOf(ToolbarContext),
@@ -46,7 +47,7 @@ export class ViewDropdownMenu extends SignalWatcher(LitElement) {
.iconContainerWidth="${'110px'}" .iconContainerWidth="${'110px'}"
> >
<span class="label">${viewType}</span> <span class="label">${viewType}</span>
${ArrowDownSmallIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >

10
packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
View File

@@ -35,9 +35,10 @@ import {
} from '@blocksuite/affine/components/notification'; } from '@blocksuite/affine/components/notification';
import { isPeekable, peek } from '@blocksuite/affine/components/peek'; import { isPeekable, peek } from '@blocksuite/affine/components/peek';
import { toast } from '@blocksuite/affine/components/toast'; import { toast } from '@blocksuite/affine/components/toast';
import type { import {
MenuContext, EditorChevronDown,
MenuItemGroup, type MenuContext,
type MenuItemGroup,
} from '@blocksuite/affine/components/toolbar'; } from '@blocksuite/affine/components/toolbar';
import { watch } from '@blocksuite/affine/global/lit'; import { watch } from '@blocksuite/affine/global/lit';
import { import {
@@ -69,7 +70,6 @@ import {
import { matchModels } from '@blocksuite/affine/shared/utils'; import { matchModels } from '@blocksuite/affine/shared/utils';
import type { ExtensionType } from '@blocksuite/affine/store'; import type { ExtensionType } from '@blocksuite/affine/store';
import { import {
ArrowDownSmallIcon,
CenterPeekIcon, CenterPeekIcon,
CopyAsImgaeIcon, CopyAsImgaeIcon,
CopyIcon, CopyIcon,
@@ -617,7 +617,7 @@ function renderOpenDocMenu(
.contentPadding="${'8px'}" .contentPadding="${'8px'}"
.button=${html` .button=${html`
<editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}> <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
${OpenInNewIcon()} ${ArrowDownSmallIcon()} ${OpenInNewIcon()} ${EditorChevronDown}
</editor-icon-button> </editor-icon-button>
`} `}
> >