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

refactor(editor): remove redundant edgeless icons (#10169)

Browse Source 
Continue [BS-2240](https://linear.app/affine-design/issue/BS-2240/%E6%B8%85%E7%90%86%E9%87%8D%E5%A4%8D%E7%9A%84icon)

This PR removes `icons/edgeless.ts` and refactor with `@blocksuite/icons` for reducing redundant icons
This commit is contained in:
L-Sun
2025-02-14 05:03:26 +00:00
parent 1f6ac4b1fe
commit 9d08f446cc
90 changed files with 2309 additions and 2899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
blocksuite/affine/block-attachment/src/components/options.ts
View File

@@ -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({
<span style="text-transform: capitalize">${viewType}</span>
view
</div>
${SmallArrowDownIcon}
${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
</editor-icon-button>
`}
>
@@ -200,8 +199,12 @@ export function AttachmentOptionsTemplate({
<editor-menu-button
.contentPadding=${'8px'}
.button=${html`
<editor-icon-button aria-label="More" .tooltip=${'More'}>
${MoreVerticalIcon}
<editor-icon-button
aria-label="More"
.tooltip=${'More'}
.iconSize=${'20px'}
>
${MoreVerticalIcon()}
</editor-icon-button>
`}
>

1
blocksuite/affine/block-code/package.json
View File

@@ -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",

4
blocksuite/affine/block-code/src/code-toolbar/components/code-toolbar.ts
View File

@@ -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()}
</editor-icon-button>
</editor-toolbar>
`;

1
blocksuite/affine/block-data-view/package.json
View File

@@ -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",

9
blocksuite/affine/block-data-view/src/data-view-block.ts
View File

@@ -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<DataViewBloc
return nothing;
}
return html` <div class="database-ops" @click="${this._clickDatabaseOps}">
${MoreHorizontalIcon}
${MoreHorizontalIcon()}
</div>`;
}

17
blocksuite/affine/block-note/src/components/more-indicator.ts Normal file
View File

@@ -0,0 +1,17 @@
import { html } from 'lit';
export const MoreIndicator = html`<svg
width="34"
height="29"
viewBox="0 0 34 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 14.4292L16.8345 18.9019C17.0345 18.9665 17.2498 18.9665 17.4498 18.9019L31.2843 14.4292"
stroke="black"
stroke-opacity="0.3"
stroke-width="5"
stroke-linecap="round"
/>
</svg>`;

4
blocksuite/affine/block-note/src/note-edgeless-block.ts
View File

@@ -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}
</div>`
: nothing}
${this._collapsedContent()}

1
blocksuite/affine/block-surface-ref/package.json
View File

@@ -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",

13
blocksuite/affine/block-surface-ref/src/surface-ref-block.ts
View File

@@ -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<string, TemplateResult>;
const NO_CONTENT_TITLE = {
@@ -570,7 +567,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
</div>
<div class="placeholder-action">
<button class="delete-button" type="button" @click=${this._deleteThis}>
<span class="icon">${MoreDeleteIcon}</span
<span class="icon">${DeleteIcon()}</span
><span>Delete this block</span>
</button>
</div>

1
blocksuite/affine/block-surface/src/index.ts
View File

@@ -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';

1
blocksuite/affine/block-surface/src/utils/index.ts
View File

@@ -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';

680
blocksuite/affine/block-surface/src/utils/mindmap/style-svg.ts Normal file
View File

@@ -0,0 +1,680 @@
import { html } from 'lit';
export const MindmapStyleOne = html`<svg
width="64"
height="48"
viewBox="0 0 64 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="64" height="48" rx="4" />
<path d="M23.976 24L43.4022 24" stroke="#E660A4" stroke-width="1.4" />
<path
d="M23.976 24.0001L26.5099 24.0001C30.4749 24.0001 33.6891 20.7858 33.6891 16.8208V16.8208C33.6891 12.8559 36.9034 9.6416 40.8684 9.6416L43.4022 9.6416"
stroke="#6E52DF"
stroke-width="1.4"
/>
<path
d="M23.976 24L26.5099 24C30.4749 24 33.6891 27.2143 33.6891 31.1792V31.1792C33.6891 35.1442 36.9034 38.3585 40.8684 38.3585L43.4022 38.3585"
stroke="#FF8C38"
stroke-width="1.4"
/>
<g>
<rect
x="42.7023"
y="33.4353"
width="15.7585"
height="9.84617"
rx="2.38923"
stroke="#FF8C38"
stroke-width="1.4"
shape-rendering="crispEdges"
/>
</g>
<g>
<rect
x="42.7023"
y="19.0769"
width="15.7585"
height="9.84617"
rx="2.38923"
stroke="#E660A4"
stroke-width="1.4"
shape-rendering="crispEdges"
/>
</g>
<g>
<rect
x="42.7023"
y="4.71846"
width="15.7585"
height="9.84617"
rx="2.38923"
stroke="#6E52DF"
stroke-width="1.4"
shape-rendering="crispEdges"
/>
</g>
<g>
<rect
x="5.53921"
y="17.3879"
width="18.2923"
height="13.2246"
rx="2.77776"
stroke="#84CFFF"
stroke-width="1.4"
shape-rendering="crispEdges"
/>
</g>
</svg> `;
export const MindmapStyleTwo = html`<svg
width="64"
height="48"
viewBox="0 0 64 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.9761 24L43.4023 24"
stroke="black"
stroke-width="1.4"
stroke-linejoin="round"
/>
<path
d="M23.9761 24.0001L33.5892 24.0001C33.6444 24.0001 33.6892 23.9553 33.6892 23.9001L33.6892 9.7416C33.6892 9.68637 33.7339 9.6416 33.7892 9.6416L43.4023 9.6416"
stroke="black"
stroke-width="1.4"
stroke-linejoin="round"
/>
<path
d="M23.9761 24L33.5892 24C33.6444 24 33.6892 24.0448 33.6892 24.1L33.6892 38.2585C33.6892 38.3137 33.7339 38.3585 33.7892 38.3585L43.4023 38.3585"
stroke="black"
stroke-width="1.4"
stroke-linejoin="round"
/>
<g filter="url(#filter0_dd_7851_11431)">
<rect
x="43.4023"
y="34.1353"
width="14.3585"
height="8.44617"
rx="0.1"
fill="#84CFFF"
/>
</g>
<g filter="url(#filter1_dd_7851_11431)">
<rect
x="43.4023"
y="19.7769"
width="14.3585"
height="8.44617"
rx="0.1"
fill="#84CFFF"
/>
</g>
<g filter="url(#filter2_dd_7851_11431)">
<rect
x="43.4023"
y="5.41846"
width="14.3585"
height="8.44617"
rx="0.1"
fill="#84CFFF"
/>
</g>
<g filter="url(#filter3_dd_7851_11431)">
<rect
x="6.23926"
y="18.0879"
width="16.8923"
height="11.8246"
rx="0.1"
fill="#FFC46B"
/>
</g>
<defs>
<filter
id="filter0_dd_7851_11431"
x="42.4023"
y="33.1353"
width="17.3585"
height="11.4463"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect1_dropShadow_7851_11431"
/>
<feOffset dx="1" dy="1" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_7851_11431"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect2_dropShadow_7851_11431"
/>
<feOffset />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_dropShadow_7851_11431"
result="effect2_dropShadow_7851_11431"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect2_dropShadow_7851_11431"
result="shape"
/>
</filter>
<filter
id="filter1_dd_7851_11431"
x="42.4023"
y="18.7769"
width="17.3585"
height="11.4463"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect1_dropShadow_7851_11431"
/>
<feOffset dx="1" dy="1" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_7851_11431"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect2_dropShadow_7851_11431"
/>
<feOffset />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_dropShadow_7851_11431"
result="effect2_dropShadow_7851_11431"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect2_dropShadow_7851_11431"
result="shape"
/>
</filter>
<filter
id="filter2_dd_7851_11431"
x="42.4023"
y="4.41846"
width="17.3585"
height="11.4463"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect1_dropShadow_7851_11431"
/>
<feOffset dx="1" dy="1" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_7851_11431"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect2_dropShadow_7851_11431"
/>
<feOffset />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_dropShadow_7851_11431"
result="effect2_dropShadow_7851_11431"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect2_dropShadow_7851_11431"
result="shape"
/>
</filter>
<filter
id="filter3_dd_7851_11431"
x="5.23926"
y="17.0879"
width="19.8923"
height="14.8247"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect1_dropShadow_7851_11431"
/>
<feOffset dx="1" dy="1" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_7851_11431"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="1"
operator="dilate"
in="SourceAlpha"
result="effect2_dropShadow_7851_11431"
/>
<feOffset />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_dropShadow_7851_11431"
result="effect2_dropShadow_7851_11431"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect2_dropShadow_7851_11431"
result="shape"
/>
</filter>
</defs>
</svg> `;
export const MindmapStyleThree = html`<svg
width="64"
height="48"
viewBox="0 0 64 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M23.976 24L43.4022 24" stroke="#FFD338" stroke-width="1.4" />
<path
d="M23.976 24.0001L26.5099 24.0001C30.4749 24.0001 33.6891 20.7858 33.6891 16.8208V16.8208C33.6891 12.8559 36.9034 9.6416 40.8684 9.6416L43.4022 9.6416"
stroke="#FFD338"
stroke-width="1.4"
/>
<path
d="M23.976 24L26.5099 24C30.4749 24 33.6891 27.2143 33.6891 31.1792V31.1792C33.6891 35.1442 36.9034 38.3585 40.8684 38.3585L43.4022 38.3585"
stroke="#FFD338"
stroke-width="1.4"
/>
<g filter="url(#filter0_d_7851_6843)">
<rect
x="43.4023"
y="34.1353"
width="14.3585"
height="8.44617"
rx="1.68923"
fill="white"
/>
<rect
x="42.7023"
y="33.4353"
width="15.7585"
height="9.84617"
rx="2.38923"
stroke="#FFD338"
stroke-width="1.4"
/>
</g>
<g filter="url(#filter1_d_7851_6843)">
<rect
x="43.4023"
y="19.7769"
width="14.3585"
height="8.44617"
rx="1.68923"
fill="white"
/>
<rect
x="42.7023"
y="19.0769"
width="15.7585"
height="9.84617"
rx="2.38923"
stroke="#FFD338"
stroke-width="1.4"
/>
</g>
<g filter="url(#filter2_d_7851_6843)">
<rect
x="43.4023"
y="5.41846"
width="14.3585"
height="8.44617"
rx="1.68923"
fill="white"
/>
<rect
x="42.7023"
y="4.71846"
width="15.7585"
height="9.84617"
rx="2.38923"
stroke="#FFD338"
stroke-width="1.4"
/>
</g>
<g filter="url(#filter3_d_7851_6843)">
<rect
x="6.23921"
y="18.0879"
width="16.8923"
height="11.8246"
rx="2.07776"
fill="#FFD338"
/>
<rect
x="5.53921"
y="17.3879"
width="18.2923"
height="13.2246"
rx="2.77776"
stroke="white"
stroke-width="1.4"
/>
</g>
<defs>
<filter
id="filter0_d_7851_6843"
x="39.4684"
y="30.2015"
width="22.2262"
height="16.3138"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="1.26693" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_7851_6843"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_7851_6843"
result="shape"
/>
</filter>
<filter
id="filter1_d_7851_6843"
x="39.4684"
y="15.8431"
width="22.2262"
height="16.3138"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="1.26693" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_7851_6843"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_7851_6843"
result="shape"
/>
</filter>
<filter
id="filter2_d_7851_6843"
x="39.4684"
y="1.4847"
width="22.2262"
height="16.3138"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="1.26693" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_7851_6843"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_7851_6843"
result="shape"
/>
</filter>
<filter
id="filter3_d_7851_6843"
x="2.30537"
y="14.1541"
width="24.76"
height="19.6922"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="1.26693" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_7851_6843"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_7851_6843"
result="shape"
/>
</filter>
</defs>
</svg> `;
export const MindmapStyleFour = html`<svg
width="64"
height="48"
viewBox="0 0 64 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.9761 24L43.4023 24"
stroke="#E660A4"
stroke-width="1.4"
stroke-linecap="round"
/>
<path
d="M23.9761 24.0001L26.5099 24.0001C30.4749 24.0001 33.6892 20.7858 33.6892 16.8208V16.8208C33.6892 12.8559 36.9034 9.6416 40.8684 9.6416L43.4023 9.6416"
stroke="#6E52DF"
stroke-width="1.4"
stroke-linecap="round"
/>
<path
d="M23.9761 24L26.5099 24C30.4749 24 33.6892 27.2143 33.6892 31.1792V31.1792C33.6892 35.1442 36.9034 38.3585 40.8684 38.3585L43.4023 38.3585"
stroke="#FF8C38"
stroke-width="1.4"
stroke-linecap="round"
/>
<path
d="M7 26C9.85124 21.8236 11.8347 18.5607 11.8347 20.649C11.8347 22.7372 10.9669 24.695 11.2149 25.3475C11.4628 26 12.9504 24.0423 13.9421 22.8677C14.9339 21.6931 15.9256 21.0405 15.8017 22.8677C15.6777 24.6949 16.2975 25.739 17.2893 24.8254C18.281 23.9118 19.2727 23.5203 20.0165 23.7813C20.6116 23.9901 21.5868 24.5644 22 24.8254"
stroke="black"
stroke-width="1.4"
stroke-linecap="round"
/>
<path
d="M44 11C46.4711 7.51964 48.1901 4.80062 48.1901 6.54079C48.1901 8.28097 47.438 9.91246 47.6529 10.4562C47.8678 11 49.157 9.36862 50.0165 8.38977C50.876 7.41092 51.7355 6.86712 51.6281 8.38977C51.5207 9.91243 52.0579 10.7825 52.9174 10.0212C53.7769 9.25986 54.6364 8.93358 55.281 9.1511C55.7967 9.32512 56.6419 9.80367 57 10.0212"
stroke="black"
stroke-width="1.4"
stroke-linecap="round"
/>
<path
d="M44 25.5C46.4711 22.0196 48.1901 19.3006 48.1901 21.0408C48.1901 22.781 47.438 24.4125 47.6529 24.9562C47.8678 25.5 49.157 23.8686 50.0165 22.8898C50.876 21.9109 51.7355 21.3671 51.6281 22.8898C51.5207 24.4124 52.0579 25.2825 52.9174 24.5212C53.7769 23.7599 54.6364 23.4336 55.281 23.6511C55.7967 23.8251 56.6419 24.3037 57 24.5212"
stroke="black"
stroke-width="1.4"
stroke-linecap="round"
/>
<path
d="M44 40C46.4711 36.5196 48.1901 33.8006 48.1901 35.5408C48.1901 37.281 47.438 38.9125 47.6529 39.4562C47.8678 40 49.157 38.3686 50.0165 37.3898C50.876 36.4109 51.7355 35.8671 51.6281 37.3898C51.5207 38.9124 52.0579 39.7825 52.9174 39.0212C53.7769 38.2599 54.6364 37.9336 55.281 38.1511C55.7967 38.3251 56.6419 38.8037 57 39.0212"
stroke="black"
stroke-width="1.4"
stroke-linecap="round"
/>
</svg> `;

2409
blocksuite/affine/components/src/icons/edgeless.ts
View File

File diff suppressed because it is too large Load Diff

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

@@ -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';

14
blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts
View File

@@ -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) {
<editor-menu-button
.contentPadding=${'8px'}
.button=${html`
<editor-icon-button aria-label="More" .tooltip=${'More'}>
${MoreVerticalIcon}
<editor-icon-button
aria-label="More"
.tooltip=${'More'}
.iconSize=${'20px'}
>
${MoreVerticalIcon()}
</editor-icon-button>
`}
>
@@ -514,9 +517,10 @@ export class LinkPopup extends WithDisposable(LitElement) {
.justify=${'space-between'}
.labelHeight=${'20px'}
.iconContainerWidth=${'110px'}
.iconSize=${'16px'}
>
<div class="label">Inline view</div>
${SmallArrowDownIcon}
${ArrowDownSmallIcon()}
</editor-icon-button>
`}
@toggle=${this._toggleViewSelector}

15
blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts
View File

@@ -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' })}
</editor-icon-button>
`}
>
@@ -362,7 +361,7 @@ export class ReferencePopup extends WithDisposable(LitElement) {
.iconContainerWidth=${'110px'}
>
<span class="label">Inline view</span>
${SmallArrowDownIcon}
${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
</editor-icon-button>
`}
@toggle=${this._toggleViewSelector}
@@ -458,8 +457,12 @@ export class ReferencePopup extends WithDisposable(LitElement) {
<editor-menu-button
.contentPadding=${'8px'}
.button=${html`
<editor-icon-button aria-label="More" .tooltip=${'More'}>
${MoreVerticalIcon}
<editor-icon-button
aria-label="More"
.tooltip=${'More'}
.iconSize=${'20px'}
>
${MoreVerticalIcon()}
</editor-icon-button>
`}
>

1
blocksuite/affine/widget-edgeless-auto-connect/package.json
View File

@@ -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"

24
blocksuite/affine/widget-edgeless-auto-connect/src/index.ts
View File

@@ -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<RootBlockModel> {
});
return html`<div style=${style} class="edgeless-only-index-label">
${HiddenIcon}
${InvisibleIcon({ width: '20px', height: '20px' })}
<affine-tooltip tip-position="bottom">
${getIndexLabelTooltip(SmallDocIcon, 'Hidden on page')}
</affine-tooltip>
@@ -391,6 +391,12 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
}px)`,
});
const iconStyle = {
width: '16px',
height: '16px',
style: 'color:#77757D;',
};
return html`<div class=${className} style=${navigatorStyle}>
<div
role="button"
@@ -400,7 +406,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
this._navigateToPrev();
}}
>
${AutoConnectLeftIcon}
${ArrowLeftSmallIcon(iconStyle)}
</div>
<span></span>
<div
@@ -411,7 +417,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
this._navigateToNext();
}}
>
${AutoConnectRightIcon}
${ArrowRightSmallIcon(iconStyle)}
</div>
</div> `;
}

1
blocksuite/affine/widget-remote-selection/package.json
View File

@@ -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"

7
blocksuite/affine/widget-remote-selection/src/edgeless/index.ts
View File

@@ -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<RootBlockMode
color: _remoteColorManager.get(id),
})}
>
${RemoteCursor}
${MultiCursorDuotoneIcon({
width: '24px',
height: '24px',
})}
<div
class="remote-username"
style=${styleMap({