chore(blocks): refine format bar

toeverything · Jul 10, 2024 · 40b25c0 · 40b25c0
1 parent 6f6eae8
commit 40b25c0
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 168 deletions.
diff --git a/packages/blocks/src/_common/components/toolbar/icon-button.ts b/packages/blocks/src/_common/components/toolbar/icon-button.ts
@@ -32,11 +32,11 @@ export class EditorIconButton extends LitElement {
       user-select: none;
     }
 
-    .icon-container.active-mode-color[active] {
+    :host([active]) .icon-container.active-mode-color {
       color: var(--affine-primary-color);
     }
 
-    .icon-container.active-mode-background[active] {
+    :host([active]) .icon-container.active-mode-background {
       background: var(--affine-hover-color);
     }
 

diff --git a/packages/blocks/src/_common/components/toolbar/menu-button.ts b/packages/blocks/src/_common/components/toolbar/menu-button.ts
@@ -112,7 +112,6 @@ export class EditorMenuContent extends LitElement {
     :host([data-show]) {
       ${PANEL_BASE}
       justify-content: center;
-      gap: 8px;
       padding: var(--content-padding, 0 6px);
     }
 
@@ -124,6 +123,10 @@ export class EditorMenuContent extends LitElement {
       min-height: 36px;
     }
 
+    ::slotted([slot]) {
+      min-width: 146px;
+    }
+
     ::slotted([slot][data-size='small']) {
       min-width: 164px;
     }
@@ -162,6 +165,7 @@ export class EditorMenuAction extends LitElement {
       gap: 8px;
       color: var(--affine-text-primary-color);
       font-weight: 400;
+      min-height: 30px; // 22 + 8
     }
 
     :host(:hover),

diff --git a/packages/blocks/src/_common/components/toolbar/toolbar.ts b/packages/blocks/src/_common/components/toolbar/toolbar.ts
@@ -33,7 +33,12 @@ export class EditorToolbar extends WithDisposable(LitElement) {
 
   override connectedCallback() {
     super.connectedCallback();
-    this._disposables.addFromEvent(this, 'pointerdown', stopPropagation);
+
+    this._disposables.addFromEvent(this, 'pointerdown', (e: PointerEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this._disposables.addFromEvent(this, 'wheel', stopPropagation);
   }
 
   override render() {

diff --git a/packages/blocks/src/_common/components/utils.ts b/packages/blocks/src/_common/components/utils.ts
@@ -253,11 +253,7 @@ export const scrollbarStyle = (container: string) => {
     );
 
   // sanitize container name
-  if (
-    container.length > 50 ||
-    container.includes('{') ||
-    container.includes('}')
-  )
+  if (container.includes('{') || container.includes('}'))
     throw new Error('Invalid container name!');
 
   return css`

diff --git a/packages/blocks/src/root-block/widgets/format-bar/components/config-renderer.ts b/packages/blocks/src/root-block/widgets/format-bar/components/config-renderer.ts
@@ -1,5 +1,9 @@
+import '../../../../_common/components/toolbar/icon-button.js';
+import '../../../../_common/components/toolbar/separator.js';
+
 import { html, type TemplateResult } from 'lit';
 
+import { renderToolbarSeparator } from '../../../../_common/components/toolbar/separator.js';
 import { isFormatSupported } from '../../../../note-block/commands/utils.js';
 import type { AffineFormatBarWidget } from '../format-bar.js';
 import { HighlightButton } from './highlight/highlight-button.js';
@@ -26,7 +30,7 @@ export function ConfigRenderer(formatBar: AffineFormatBarWidget) {
       let template: TemplateResult | null = null;
       switch (item.type) {
         case 'divider':
-          template = html`<div class="divider"></div>`;
+          template = renderToolbarSeparator();
           break;
         case 'highlighter-dropdown': {
           template = HighlightButton(formatBar);
@@ -36,18 +40,19 @@ export function ConfigRenderer(formatBar: AffineFormatBarWidget) {
           template = ParagraphButton(formatBar);
           break;
         case 'inline-action': {
-          template = html`<icon-button
-            size="32px"
-            data-testid=${item.id}
-            ?active=${item.isActive(formatBar.std.command.chain(), formatBar)}
-            @click=${() => {
-              item.action(formatBar.std.command.chain(), formatBar);
-              formatBar.requestUpdate();
-            }}
-          >
-            ${typeof item.icon === 'function' ? item.icon() : item.icon}
-            <affine-tooltip>${item.name}</affine-tooltip>
-          </icon-button>`;
+          template = html`
+            <editor-icon-button
+              data-testid=${item.id}
+              ?active=${item.isActive(formatBar.std.command.chain(), formatBar)}
+              .tooltip=${item.name}
+              @click=${() => {
+                item.action(formatBar.std.command.chain(), formatBar);
+                formatBar.requestUpdate();
+              }}
+            >
+              ${typeof item.icon === 'function' ? item.icon() : item.icon}
+            </editor-icon-button>
+          `;
           break;
         }
         case 'custom': {

diff --git a/packages/blocks/src/root-block/widgets/format-bar/components/highlight/highlight-button.ts b/packages/blocks/src/root-block/widgets/format-bar/components/highlight/highlight-button.ts
@@ -1,3 +1,6 @@
+import '../../../../../_common/components/toolbar/icon-button.js';
+import '../../../../../_common/components/toolbar/menu-button.js';
+
 import type { EditorHost } from '@blocksuite/block-std';
 import { assertExists } from '@blocksuite/global/utils';
 import { computePosition, flip, offset, shift } from '@floating-ui/dom';
@@ -53,51 +56,56 @@ const HighlightPanel = (
   formatBar: AffineFormatBarWidget,
   containerRef?: RefOrCallback
 ) => {
-  return html`<div ${ref(containerRef)} class="highlight-panel">
-    <!-- Text Color Highlight -->
-    <div class="highligh-panel-heading">Color</div>
-    ${foregroundConfig.map(
-      ({ name, color }) =>
-        html`<icon-button
-          width="100%"
-          height="32px"
-          style="padding-left: 4px; justify-content: flex-start; gap: 8px;"
-          text="${name}"
-          data-testid="${color ?? 'unset'}"
-          @click="${() => {
-            updateHighlight(formatBar.host, color, HighlightType.Foreground);
-            formatBar.requestUpdate();
-          }}"
-        >
-          <span style="color: ${color}; display: flex; align-items: center;">
-            ${TextForegroundDuotoneIcon}
-          </span>
-        </icon-button>`
-    )}
+  return html`
+    <editor-menu-content class="highlight-panel" data-show ${ref(containerRef)}>
+      <div slot data-orientation="vertical">
+        <!-- Text Color Highlight -->
+        <div class="highligh-panel-heading">Color</div>
+        ${foregroundConfig.map(
+          ({ name, color }) => html`
+            <editor-menu-action
+              data-testid="${color ?? 'unset'}"
+              @click="${() => {
+                updateHighlight(
+                  formatBar.host,
+                  color,
+                  HighlightType.Foreground
+                );
+                formatBar.requestUpdate();
+              }}"
+            >
+              <span style="display: flex; color: ${color}">
+                ${TextForegroundDuotoneIcon}
+              </span>
+              ${name}
+            </editor-menu-action>
+          `
+        )}
 
-    <!-- Text Background Highlight -->
-    <div class="highligh-panel-heading">Background</div>
-    ${backgroundConfig.map(
-      ({ name, color }) =>
-        html`<icon-button
-          width="100%"
-          height="32px"
-          style="padding-left: 4px; justify-content: flex-start; gap: 8px;"
-          text="${name}"
-          @click="${() => {
-            updateHighlight(formatBar.host, color, HighlightType.Background);
-            formatBar.requestUpdate();
-          }}"
-        >
-          <span
-            style="color: ${color ??
-            'rgba(0,0,0,0)'}; display: flex; align-items: center;"
-          >
-            ${TextBackgroundDuotoneIcon}
-          </span>
-        </icon-button>`
-    )}
-  </div>`;
+        <!-- Text Background Highlight -->
+        <div class="highligh-panel-heading">Background</div>
+        ${backgroundConfig.map(
+          ({ name, color }) => html`
+            <editor-menu-action
+              @click="${() => {
+                updateHighlight(
+                  formatBar.host,
+                  color,
+                  HighlightType.Background
+                );
+                formatBar.requestUpdate();
+              }}"
+            >
+              <span style="display: flex; color: ${color ?? 'transparent'}">
+                ${TextBackgroundDuotoneIcon}
+              </span>
+              ${name}
+            </editor-menu-action>
+          `
+        )}
+      </div>
+    </editor-menu-content>
+  `;
 };
 
 export const HighlightButton = (formatBar: AffineFormatBarWidget) => {
@@ -117,12 +125,12 @@ export const HighlightButton = (formatBar: AffineFormatBarWidget) => {
       formatBar.shadowRoot?.querySelector<HTMLElement>('.highlight-panel');
     assertExists(button);
     assertExists(panel);
-    panel.style.display = 'block';
+    panel.style.display = 'flex';
     computePosition(button, panel, {
       placement: 'bottom',
       middleware: [
         flip(),
-        offset(10),
+        offset(6),
         shift({
           padding: 6,
         }),
@@ -137,21 +145,20 @@ export const HighlightButton = (formatBar: AffineFormatBarWidget) => {
 
   const highlightPanel = HighlightPanel(formatBar, setFloating);
 
-  return html`<div ${ref(setReference)} class="highlight-button">
-    <icon-button
-      class="highlight-icon"
-      data-last-used="${lastUsedColor ?? 'unset'}"
-      width="52px"
-      height="32px"
-      @click="${() =>
-        updateHighlight(editorHost, lastUsedColor, lastUsedHighlightType)}"
-    >
-      <span
-        style="color: ${lastUsedColor}; display: flex; align-items: center; "
-        >${HighLightDuotoneIcon}</span
+  return html`
+    <div class="highlight-button" ${ref(setReference)}>
+      <editor-icon-button
+        class="highlight-icon"
+        data-last-used="${lastUsedColor ?? 'unset'}"
+        @click="${() =>
+          updateHighlight(editorHost, lastUsedColor, lastUsedHighlightType)}"
       >
-      ${ArrowDownIcon}</icon-button
-    >
-    ${highlightPanel}
-  </div>`;
+        <span style="display: flex; color: ${lastUsedColor}">
+          ${HighLightDuotoneIcon}
+        </span>
+        ${ArrowDownIcon}
+      </editor-icon-button>
+      ${highlightPanel}
+    </div>
+  `;
 };
diff --git a/packages/blocks/src/root-block/widgets/format-bar/components/paragraph-button.ts b/packages/blocks/src/root-block/widgets/format-bar/components/paragraph-button.ts
@@ -1,3 +1,6 @@
+import '../../../../_common/components/toolbar/icon-button.js';
+import '../../../../_common/components/toolbar/menu-button.js';
+
 import type { EditorHost } from '@blocksuite/block-std';
 import { assertExists } from '@blocksuite/global/utils';
 import { computePosition, flip, offset, shift } from '@floating-ui/dom';
@@ -33,22 +36,22 @@ const ParagraphPanel = ({
 
   const renderedConfig = repeat(
     config,
-    item =>
-      html`<icon-button
-        width="100%"
-        height="32px"
-        style="padding-left: 12px; justify-content: flex-start; gap: 8px;"
-        text="${item.name}"
+    item => html`
+      <editor-menu-action
         data-testid="${item.id}"
         @click="${() => item.action(formatBar.std.command.chain(), formatBar)}"
       >
         ${typeof item.icon === 'function' ? item.icon() : item.icon}
-      </icon-button>`
+        ${item.name}
+      </editor-menu-action>
+    `
   );
 
-  return html`<div ${ref(containerRef)} class="paragraph-panel">
-    ${renderedConfig}
-  </div>`;
+  return html`
+    <editor-menu-content class="paragraph-panel" data-show ${ref(containerRef)}>
+      <div slot data-orientation="vertical">${renderedConfig}</div>
+    </editor-menu-content>
+  `;
 };
 
 export const ParagraphButton = (formatBar: AffineFormatBarWidget) => {
@@ -93,12 +96,12 @@ export const ParagraphButton = (formatBar: AffineFormatBarWidget) => {
     assertExists(button);
     assertExists(panel);
     assertExists(formatQuickBarElement, 'format quick bar should exist');
-    panel.style.display = 'block';
+    panel.style.display = 'flex';
     computePosition(formatQuickBarElement, panel, {
       placement: 'top-start',
       middleware: [
         flip(),
-        offset(4),
+        offset(6),
         shift({
           padding: 6,
         }),
@@ -117,10 +120,12 @@ export const ParagraphButton = (formatBar: AffineFormatBarWidget) => {
     ref: setFloating,
   });
 
-  return html`<div ${ref(setReference)} class="paragraph-button">
-    <icon-button class="paragraph-button-icon" width="52px" height="32px">
-      ${paragraphIcon} ${ArrowDownIcon}</icon-button
-    >
-    ${paragraphPanel}
-  </div>`;
+  return html`
+    <div class="paragraph-button" ${ref(setReference)}>
+      <editor-icon-button class="paragraph-button-icon">
+        ${paragraphIcon} ${ArrowDownIcon}
+      </editor-icon-button>
+      ${paragraphPanel}
+    </div>
+  `;
 };
diff --git a/packages/blocks/src/root-block/widgets/format-bar/config.ts b/packages/blocks/src/root-block/widgets/format-bar/config.ts
@@ -12,14 +12,14 @@ import {
   CodeIcon,
   CopyIcon,
   DatabaseTableViewIcon20,
-  FontLinkedDocIcon,
   Heading1Icon,
   Heading2Icon,
   Heading3Icon,
   Heading4Icon,
   Heading5Icon,
   Heading6Icon,
   ItalicIcon,
+  LinkedDocIcon,
   LinkIcon,
   NumberedListIcon,
   QuoteIcon,
@@ -143,6 +143,7 @@ export function toolbarDefaultConfig(toolbar: AffineFormatBarWidget) {
       },
       showWhen: () => true,
     })
+    .addDivider()
     .addInlineAction({
       id: 'convert-to-database',
       name: 'Group as Database',
@@ -169,10 +170,11 @@ export function toolbarDefaultConfig(toolbar: AffineFormatBarWidget) {
         );
       },
     })
+    .addDivider()
     .addInlineAction({
       id: 'convert-to-linked-doc',
       name: 'Create Linked Doc',
-      icon: FontLinkedDocIcon,
+      icon: LinkedDocIcon,
       isActive: () => false,
       action: (chain, formatBar) => {
         const [_, ctx] = chain