mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-27 02:42:25 +08:00
chore(editor): update slash menu tooltips (#10746)
Close [BS-2676](https://linear.app/affine-design/issue/BS-2676/loom入口增加简介) [BS-2767](https://linear.app/affine-design/issue/BS-2767/table的tooltip需要更新,现在用的是database的)
This commit is contained in:
@@ -30,6 +30,7 @@
|
|||||||
{ "path": "../fragments/fragment-doc-title" },
|
{ "path": "../fragments/fragment-doc-title" },
|
||||||
{ "path": "../fragments/fragment-frame-panel" },
|
{ "path": "../fragments/fragment-frame-panel" },
|
||||||
{ "path": "../fragments/fragment-outline" },
|
{ "path": "../fragments/fragment-outline" },
|
||||||
|
{ "path": "../gfx/text" },
|
||||||
{ "path": "../model" },
|
{ "path": "../model" },
|
||||||
{ "path": "../rich-text" },
|
{ "path": "../rich-text" },
|
||||||
{ "path": "../shared" },
|
{ "path": "../shared" },
|
||||||
|
|||||||
@@ -9,6 +9,8 @@ import {
|
|||||||
import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
|
import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
|
||||||
import { FontIcon } from '@blocksuite/icons/lit';
|
import { FontIcon } from '@blocksuite/icons/lit';
|
||||||
|
|
||||||
|
import { calloutTooltip } from './tooltips';
|
||||||
|
|
||||||
export const calloutSlashMenuConfig: SlashMenuConfig = {
|
export const calloutSlashMenuConfig: SlashMenuConfig = {
|
||||||
disableWhen: ({ model }) => {
|
disableWhen: ({ model }) => {
|
||||||
return (
|
return (
|
||||||
@@ -22,6 +24,10 @@ export const calloutSlashMenuConfig: SlashMenuConfig = {
|
|||||||
name: 'Callout',
|
name: 'Callout',
|
||||||
description: 'Let your words stand out.',
|
description: 'Let your words stand out.',
|
||||||
icon: FontIcon(),
|
icon: FontIcon(),
|
||||||
|
tooltip: {
|
||||||
|
figure: calloutTooltip,
|
||||||
|
caption: 'Callout',
|
||||||
|
},
|
||||||
searchAlias: ['callout'],
|
searchAlias: ['callout'],
|
||||||
group: '0_Basic@9',
|
group: '0_Basic@9',
|
||||||
when: ({ std, model }) => {
|
when: ({ std, model }) => {
|
||||||
|
|||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { html } from 'lit';
|
||||||
|
|
||||||
|
// prettier-ignore
|
||||||
|
export const calloutTooltip = 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_3479_144688)">
|
||||||
|
<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">Highlight important notes.</tspan></text>
|
||||||
|
<path d="M8 32.1816C8 29.3199 10.3199 27 13.1816 27H489.892C492.754 27 495.073 29.3199 495.073 32.1816V90.8403C495.073 93.702 492.754 96.0219 489.892 96.0219H13.1816C10.3199 96.0219 8 93.702 8 90.8403V32.1816Z" fill="#EEFFFD"/>
|
||||||
|
<g clip-path="url(#clip1_3479_144688)">
|
||||||
|
<g clip-path="url(#clip2_3479_144688)">
|
||||||
|
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="15" font-weight="500" letter-spacing="0em"><tspan x="14.7494" y="50.1658">👋</tspan></text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="44.9541" y="49.4196">A storyboard is a visual representation of a story, typically presented in the form of sequential </tspan><tspan x="44.9541" y="64.9645">panels. Each panel features illustrations or images accompanied by notes describing key </tspan><tspan x="44.9541" y="80.5094">scenes or shots, including details of action and dialogue. </tspan></text>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_3479_144688">
|
||||||
|
<rect width="170" height="106" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip1_3479_144688">
|
||||||
|
<rect width="24" height="30.477" fill="white" transform="translate(14.477 30.2388)"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip2_3479_144688">
|
||||||
|
<rect x="14.477" y="36.7158" width="24" height="24" rx="1.94311" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
@@ -7,6 +7,7 @@ export const embedLoomSlashMenuConfig: SlashMenuConfig = {
|
|||||||
{
|
{
|
||||||
name: 'Loom',
|
name: 'Loom',
|
||||||
icon: LoomLogoDuotoneIcon(),
|
icon: LoomLogoDuotoneIcon(),
|
||||||
|
description: 'Embed a Loom video.',
|
||||||
group: '4_Content & Media@8',
|
group: '4_Content & Media@8',
|
||||||
when: ({ model }) =>
|
when: ({ model }) =>
|
||||||
model.doc.schema.flavourSchemaMap.has('affine:embed-loom'),
|
model.doc.schema.flavourSchemaMap.has('affine:embed-loom'),
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import type { SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
|
|||||||
import { TableIcon } from '@blocksuite/icons/lit';
|
import { TableIcon } from '@blocksuite/icons/lit';
|
||||||
|
|
||||||
import { insertTableBlockCommand } from '../commands';
|
import { insertTableBlockCommand } from '../commands';
|
||||||
|
import { tableTooltip } from './tooltips';
|
||||||
|
|
||||||
export const tableSlashMenuConfig: SlashMenuConfig = {
|
export const tableSlashMenuConfig: SlashMenuConfig = {
|
||||||
disableWhen: ({ model }) => model.flavour === 'affine:table',
|
disableWhen: ({ model }) => model.flavour === 'affine:table',
|
||||||
@@ -13,6 +14,10 @@ export const tableSlashMenuConfig: SlashMenuConfig = {
|
|||||||
name: 'Table',
|
name: 'Table',
|
||||||
description: 'Create a simple table.',
|
description: 'Create a simple table.',
|
||||||
icon: TableIcon(),
|
icon: TableIcon(),
|
||||||
|
tooltip: {
|
||||||
|
figure: tableTooltip,
|
||||||
|
caption: 'Table',
|
||||||
|
},
|
||||||
group: '4_Content & Media@0',
|
group: '4_Content & Media@0',
|
||||||
when: ({ model }) =>
|
when: ({ model }) =>
|
||||||
!isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'),
|
!isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'),
|
||||||
|
|||||||
68
blocksuite/affine/blocks/block-table/src/configs/tooltips.ts
Normal file
68
blocksuite/affine/blocks/block-table/src/configs/tooltips.ts
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
import { html } from 'lit';
|
||||||
|
|
||||||
|
// prettier-ignore
|
||||||
|
export const tableTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="170" height="106" fill="white"/>
|
||||||
|
<mask id="path-1-inside-1_3479_144620" fill="white">
|
||||||
|
<path d="M8 26H50V43.25H8V26Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M8 26V25H7V26H8ZM50 26H51V25H50V26ZM50 43.25V44.25H51V43.25H50ZM8 43.25H7V44.25H8V43.25ZM8 27H50V25H8V27ZM49 26V43.25H51V26H49ZM50 42.25H8V44.25H50V42.25ZM9 43.25V26H7V43.25H9Z" fill="black" fill-opacity="0.1" mask="url(#path-1-inside-1_3479_144620)"/>
|
||||||
|
<text fill="#7A7A7A" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="16" y="36.8068">Ranking</tspan></text>
|
||||||
|
<mask id="path-4-inside-2_3479_144620" fill="white">
|
||||||
|
<path d="M8 43.25H50V60.5H8V43.25Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M50 60.5V61.5H51V60.5H50ZM8 60.5H7V61.5H8V60.5ZM49 43.25V60.5H51V43.25H49ZM50 59.5H8V61.5H50V59.5ZM9 60.5V43.25H7V60.5H9Z" fill="black" fill-opacity="0.1" mask="url(#path-4-inside-2_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="14" y="54.0568">🥇 First</tspan></text>
|
||||||
|
<mask id="path-7-inside-3_3479_144620" fill="white">
|
||||||
|
<path d="M8 60.5H50V77.75H8V60.5Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M50 77.75V78.75H51V77.75H50ZM8 77.75H7V78.75H8V77.75ZM49 60.5V77.75H51V60.5H49ZM50 76.75H8V78.75H50V76.75ZM9 77.75V60.5H7V77.75H9Z" fill="black" fill-opacity="0.1" mask="url(#path-7-inside-3_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="14" y="71.3068">🥈 Second</tspan></text>
|
||||||
|
<mask id="path-10-inside-4_3479_144620" fill="white">
|
||||||
|
<path d="M8 77.75H50V95H8V77.75Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M50 95V96H51V95H50ZM8 95H7V96H8V95ZM49 77.75V95H51V77.75H49ZM50 94H8V96H50V94ZM9 95V77.75H7V95H9Z" fill="black" fill-opacity="0.1" mask="url(#path-10-inside-4_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="14" y="88.5568">🥉 Third</tspan></text>
|
||||||
|
<mask id="path-13-inside-5_3479_144620" fill="white">
|
||||||
|
<path d="M50 26H88V43.25H50V26Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M88 26H89V25H88V26ZM88 43.25V44.25H89V43.25H88ZM50 27H88V25H50V27ZM87 26V43.25H89V26H87ZM88 42.25H50V44.25H88V42.25Z" fill="black" fill-opacity="0.1" mask="url(#path-13-inside-5_3479_144620)"/>
|
||||||
|
<text fill="#7A7A7A" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="56" y="36.8068">Country</tspan></text>
|
||||||
|
<mask id="path-16-inside-6_3479_144620" fill="white">
|
||||||
|
<path d="M50 43.25H88V60.5H50V43.25Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M88 60.5V61.5H89V60.5H88ZM87 43.25V60.5H89V43.25H87ZM88 59.5H50V61.5H88V59.5Z" fill="black" fill-opacity="0.1" mask="url(#path-16-inside-6_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="56" y="54.0568">China</tspan></text>
|
||||||
|
<mask id="path-19-inside-7_3479_144620" fill="white">
|
||||||
|
<path d="M50 60.5H88V77.75H50V60.5Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M88 77.75V78.75H89V77.75H88ZM87 60.5V77.75H89V60.5H87ZM88 76.75H50V78.75H88V76.75Z" fill="black" fill-opacity="0.1" mask="url(#path-19-inside-7_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="56" y="71.3068">Japan</tspan></text>
|
||||||
|
<mask id="path-22-inside-8_3479_144620" fill="white">
|
||||||
|
<path d="M50 77.75H88V95H50V77.75Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M88 95V96H89V95H88ZM87 77.75V95H89V77.75H87ZM88 94H50V96H88V94Z" fill="black" fill-opacity="0.1" mask="url(#path-22-inside-8_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="56" y="88.5568">USA</tspan></text>
|
||||||
|
<mask id="path-25-inside-9_3479_144620" fill="white">
|
||||||
|
<path d="M88 26H164V43.25H88V26Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M164 26H165V25H164V26ZM164 43.25V44.25H165V43.25H164ZM88 27H164V25H88V27ZM163 26V43.25H165V26H163ZM164 42.25H88V44.25H164V42.25Z" fill="black" fill-opacity="0.1" mask="url(#path-25-inside-9_3479_144620)"/>
|
||||||
|
<text fill="#7A7A7A" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="94" y="36.8068">Weekly Overtime (Hrs)</tspan></text>
|
||||||
|
<mask id="path-28-inside-10_3479_144620" fill="white">
|
||||||
|
<path d="M88 43.25H164V60.5H88V43.25Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M164 60.5V61.5H165V60.5H164ZM163 43.25V60.5H165V43.25H163ZM164 59.5H88V61.5H164V59.5Z" fill="black" fill-opacity="0.1" mask="url(#path-28-inside-10_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="94" y="54.0568">10+</tspan></text>
|
||||||
|
<mask id="path-31-inside-11_3479_144620" fill="white">
|
||||||
|
<path d="M88 60.5H164V77.75H88V60.5Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M164 77.75V78.75H165V77.75H164ZM163 60.5V77.75H165V60.5H163ZM164 76.75H88V78.75H164V76.75Z" fill="black" fill-opacity="0.1" mask="url(#path-31-inside-11_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="94" y="71.3068">8</tspan></text>
|
||||||
|
<mask id="path-34-inside-12_3479_144620" fill="white">
|
||||||
|
<path d="M88 77.75H164V95H88V77.75Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M164 95V96H165V95H164ZM163 77.75V95H165V77.75H163ZM164 94H88V96H164V94Z" fill="black" fill-opacity="0.1" mask="url(#path-34-inside-12_3479_144620)"/>
|
||||||
|
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="94" y="88.5568">3</tspan></text>
|
||||||
|
<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">Insert editable tabular data.</tspan></text>
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
@@ -28,6 +28,7 @@ export const PackageList = [
|
|||||||
'blocksuite/affine/fragments/fragment-doc-title',
|
'blocksuite/affine/fragments/fragment-doc-title',
|
||||||
'blocksuite/affine/fragments/fragment-frame-panel',
|
'blocksuite/affine/fragments/fragment-frame-panel',
|
||||||
'blocksuite/affine/fragments/fragment-outline',
|
'blocksuite/affine/fragments/fragment-outline',
|
||||||
|
'blocksuite/affine/gfx/text',
|
||||||
'blocksuite/affine/model',
|
'blocksuite/affine/model',
|
||||||
'blocksuite/affine/rich-text',
|
'blocksuite/affine/rich-text',
|
||||||
'blocksuite/affine/shared',
|
'blocksuite/affine/shared',
|
||||||
|
|||||||
Reference in New Issue
Block a user