Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-17 01:56:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(editor): update slash menu ui (#11305)

Browse Source 
Close [BS-2954](https://linear.app/affine-design/issue/BS-2954/menu长宽为280390)
Close [BS-2955](https://linear.app/affine-design/issue/BS-2955/frame-与mind-map的tooltips)
Close [BS-2956](https://linear.app/affine-design/issue/BS-2956/to-do-list-tooltip缺失)

### What Changes
- update size of slash menu
- updare tooltips in slash menu
  - frame
  - mindmap
This commit is contained in:
L-Sun
2025-04-01 05:51:59 +00:00
parent dc67614d6d
commit 10d86fee9f
5 changed files with 108 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/blocks/block-note/src/configs/tooltips.ts
+20
View File
@@ -227,6 +227,21 @@ export const UnderlineTooltip = html`<svg width="170" height="68" viewBox="0 0 1
</svg>
`;
// prettier-ignore
export const TodoTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="170" height="68" rx="2" fill="white"/>
<mask id="mask0_5604_203551" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
<rect width="170" height="68" rx="2" fill="white"/>
</mask>
<g mask="url(#mask0_5604_203551)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 19C12.7462 19 12 19.7462 12 20.6667V27.3333C12 28.2538 12.7462 29 13.6667 29H20.3333C21.2538 29 22 28.2538 22 27.3333V20.6667C22 19.7462 21.2538 19 20.3333 19H13.6667ZM12.9091 20.6667C12.9091 20.2483 13.2483 19.9091 13.6667 19.9091H20.3333C20.7517 19.9091 21.0909 20.2483 21.0909 20.6667V27.3333C21.0909 27.7517 20.7517 28.0909 20.3333 28.0909H13.6667C13.2483 28.0909 12.9091 27.7517 12.9091 27.3333V20.6667Z" fill="#77757D"/>
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="28" y="27.6364">Here is an example of todo list.</tspan></text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 40.6667C12 39.7462 12.7462 39 13.6667 39H20.3333C21.2538 39 22 39.7462 22 40.6667V47.3333C22 48.2538 21.2538 49 20.3333 49H13.6667C12.7462 49 12 48.2538 12 47.3333V40.6667ZM19.7457 42.5032C19.9232 42.3257 19.9232 42.0379 19.7457 41.8604C19.5681 41.6829 19.2803 41.6829 19.1028 41.8604L16.0909 44.8723L15.2002 43.9816C15.0227 43.8041 14.7349 43.8041 14.5574 43.9816C14.3799 44.1591 14.3799 44.4469 14.5574 44.6244L15.7695 45.8366C15.947 46.0141 16.2348 46.0141 16.4123 45.8366L19.7457 42.5032Z" fill="#1E96EB"/>
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="28" y="47.6364">Make a list for building preview.</tspan></text>
</g>
</svg>
`
export const tooltips: Record<string, SlashMenuTooltip> = {
Text: {
figure: TextTooltip,
@@ -307,4 +322,9 @@ export const tooltips: Record<string, SlashMenuTooltip> = {
figure: StrikethroughTooltip,
caption: 'Strikethrough',
},
'To-do List': {
figure: TodoTooltip,
caption: 'To-do List',
},
};
blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts
+3 -3
View File
@@ -13,7 +13,7 @@ import { BlockSelection } from '@blocksuite/std';
import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
import { insertSurfaceRefBlockCommand } from '../commands';
import { EdgelessTooltip } from './tooltips';
import { EdgelessTooltip, FrameTooltip, MindMapTooltip } from './tooltips';
const surfaceRefSlashMenuConfig: SlashMenuConfig = {
items: ({ std, model }) => {
@@ -56,7 +56,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
description: 'Insert a blank frame',
icon: FrameIcon(),
tooltip: {
figure: EdgelessTooltip,
figure: FrameTooltip,
caption: 'Frame',
},
group: `5_Edgeless Element@${index++}`,
@@ -72,7 +72,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
description: 'Insert a mind map',
icon: MindmapIcon(),
tooltip: {
figure: EdgelessTooltip,
figure: MindMapTooltip,
caption: 'Edgeless',
},
group: `5_Edgeless Element@${index++}`,
blocksuite/affine/blocks/block-surface-ref/src/configs/tooltips.ts
+83
View File
@@ -26,3 +26,86 @@ export const EdgelessTooltip = html`<svg width="170" height="106" viewBox="0 0 1
</g>
</svg>
`;
// prettier-ignore
export const FrameTooltip = html`<svg width="170" height="89" viewBox="0 0 170 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5269_147682)">
<rect width="170" height="89" fill="white"/>
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Create a blank frame in Edgeless</tspan></text>
<rect x="16" y="45" width="164" height="59" rx="3" stroke="black" stroke-opacity="0.52" stroke-width="2"/>
<rect x="15" y="27" width="32" height="13" rx="3" fill="black" fill-opacity="0.95"/>
<text fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="8" font-weight="500" letter-spacing="0px"><tspan x="19" y="35.8182">Frame</tspan></text>
</g>
<defs>
<clipPath id="clip0_5269_147682">
<rect width="170" height="89" fill="white"/>
</clipPath>
</defs>
</svg>
`
// prettier-ignore
export const MindMapTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5150_67028)">
<rect width="170" height="106" fill="white"/>
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Create a mind map in Edgeless</tspan></text>
<g filter="url(#filter0_d_5150_67028)">
<rect x="21" y="53" width="59" height="19" rx="5" stroke="#29A3FA" stroke-width="2"/>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Poppins" font-size="8" font-weight="500" letter-spacing="0px"><tspan x="30.5" y="65.076">Mind Map</tspan></text>
</g>
<g filter="url(#filter1_d_5150_67028)">
<rect x="119.75" y="30" width="28.25" height="13.125" rx="5" stroke="#6E52DF" stroke-width="2"/>
</g>
<g filter="url(#filter2_d_5150_67028)">
<rect x="119.75" y="55.8013" width="28.25" height="13.125" rx="5" stroke="#E660A4" stroke-width="2"/>
</g>
<g filter="url(#filter3_d_5150_67028)">
<rect x="119.75" y="81.603" width="28.25" height="13.125" rx="5" stroke="#FF8C38" stroke-width="2"/>
</g>
<path d="M81.5139 62.7686C104.205 62.7686 97.1139 88.7686 120.514 88.7686" stroke="#FF8C38" stroke-width="2"/>
<path d="M81.5139 62.7686C104.205 62.7686 97.1139 62.7686 120.514 62.7686" stroke="#E660A4" stroke-width="2"/>
<path d="M81.5139 62.7686C104.205 62.7686 97.1139 36.7686 120.514 36.7686" stroke="#6E52DF" stroke-width="2"/>
</g>
<defs>
<filter id="filter0_d_5150_67028" x="8" y="46" width="85" height="45" 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 dy="6"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5150_67028"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5150_67028" result="shape"/>
</filter>
<filter id="filter1_d_5150_67028" x="106.75" y="23" width="54.25" height="39.125" 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 dy="6"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5150_67028"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5150_67028" result="shape"/>
</filter>
<filter id="filter2_d_5150_67028" x="106.75" y="48.8013" width="54.25" height="39.125" 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 dy="6"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5150_67028"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5150_67028" result="shape"/>
</filter>
<filter id="filter3_d_5150_67028" x="106.75" y="74.603" width="54.25" height="39.125" 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 dy="6"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5150_67028"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5150_67028" result="shape"/>
</filter>
<clipPath id="clip0_5150_67028">
<rect width="170" height="106" fill="white"/>
</clipPath>
</defs>
</svg>
`
blocksuite/affine/widgets/widget-slash-menu/src/consts.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export const AFFINE_SLASH_MENU_WIDGET = 'affine-slash-menu-widget';
export const AFFINE_SLASH_MENU_TRIGGER_KEY = '/';
export const AFFINE_SLASH_MENU_TOOLTIP_TIMEOUT = 800;
export const AFFINE_SLASH_MENU_MAX_HEIGHT = 334;
export const AFFINE_SLASH_MENU_MAX_HEIGHT = 390;
blocksuite/affine/widgets/widget-slash-menu/src/styles.ts
+1 -1
View File
@@ -20,7 +20,7 @@ export const styles = css`
top: 0;
box-sizing: border-box;
padding: 8px 4px 8px 8px;
width: 258px;
width: 280px;
overflow-y: auto;
font-family: ${unsafeCSS(baseTheme.fontSansFamily)};