feat(edgeless): update note ui (toeverything#3185)

Flrande · Jun 21, 2023 · d1fef63 · d1fef63
1 parent a6373de
commit d1fef63
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 46 deletions.
diff --git a/packages/blocks/src/page-block/edgeless/components/block-children-container.ts b/packages/blocks/src/page-block/edgeless/components/block-children-container.ts
@@ -1,5 +1,6 @@
 import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/global/config';
 import { deserializeXYWH } from '@blocksuite/phasor';
+import { matchFlavours } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
@@ -30,17 +31,21 @@ function EdgelessBlockChild(
 ) {
   const { xywh, background } = model;
   const [modelX, modelY, modelW, modelH] = deserializeXYWH(xywh);
+  const isNote = matchFlavours(model, ['affine:note']);
+  const isHiddenNote = isNote && model.hidden;
 
   const style = {
     position: 'absolute',
     zIndex: `${index}`,
     width: modelW + 'px',
     height: modelH + 'px',
     padding: `${EDGELESS_BLOCK_CHILD_PADDING}px`,
-    border: '2px solid var(--affine-black-10)',
+    border: `2px ${isHiddenNote ? 'dashed' : 'solid'} var(--affine-black-10)`,
     borderRadius: '8px',
     boxSizing: 'border-box',
-    background: `var(${background ?? DEFAULT_NOTE_COLOR})`,
+    background: isHiddenNote
+      ? 'transparent'
+      : `var(${background ?? DEFAULT_NOTE_COLOR})`,
     boxShadow: 'var(--affine-shadow-3)',
     pointerEvents: 'all',
     overflow: 'hidden',

diff --git a/packages/blocks/src/page-block/edgeless/components/component-toolbar/change-note-button.ts b/packages/blocks/src/page-block/edgeless/components/component-toolbar/change-note-button.ts
@@ -87,9 +87,9 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      padding: 4px 4px;
       gap: 2px;
       color: var(--affine-text-secondary-color);
+      padding: 0 4px;
       height: 24px;
     }
 
@@ -98,6 +98,16 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
       border-radius: 8px;
     }
 
+    .note-status-button .hover {
+      display: none;
+    }
+    .note-status-button:hover .hover {
+      display: flex;
+    }
+    .note-status-button:hover .unhover {
+      display: none;
+    }
+
     .note-status-button svg {
       width: 16px;
       height: 16px;
@@ -147,7 +157,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
     this.notes.forEach(note => {
       this.page.updateBlock(note, { background: color });
     });
-    // FIXME: force update selection, because connector mode changed
+    // force update selection, because connector mode changed
     this.slots.selectionUpdated.emit({ ...this.selectionState });
   }
 
@@ -164,9 +174,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
       }
     }
     this.requestUpdate();
+    // force update selection, because connector mode changed
+    this.slots.selectionUpdated.emit({ ...this.selectionState });
   }
 
-  override firstUpdated(changedProperties: Map<string, unknown>) {
+  override updated(changedProperties: Map<string, unknown>) {
     const _disposables = this._disposables;
 
     if (this._colorSelector) {
@@ -179,7 +191,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
       );
       _disposables.add(this._colorSelectorPopper);
     }
-    super.firstUpdated(changedProperties);
+    super.updated(changedProperties);
   }
 
   override render() {
@@ -196,12 +208,14 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
 
     if (note.hidden) {
       return html`
+        <div class="note-status hidden">${HiddenIcon}</div>
         <div
           @click=${() => this._setNoteHidden(note, !note.hidden)}
           class="note-status-button"
         >
-          ${HiddenIcon}
-          <span>${'Hidden on page mode'}</span>
+          <span class="unhover">${'Hidden on page mode'}</span>
+          <span class="hover">${NoteIcon}</span>
+          <span class="hover">${'Show on page'}</span>
         </div>
       `;
     } else {
@@ -211,10 +225,12 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
         </div>
         <div
           @click=${() => this._setNoteHidden(note, !note.hidden)}
-          class="note-status-button"
+          class="note-status-button unhover"
         >
-          ${NoteIcon}
-          <span>${'On Page'}</span>
+          <span class="unhover">${NoteIcon}</span>
+          <span class="unhover">${'On Page'}</span>
+          <span class="hover">${HiddenIcon}</span>
+          <span class="hover">${'Hidden'}</span>
         </div>
         <edgeless-tool-icon-button
           .tooltip=${this._popperShow ? '' : 'Color'}

diff --git a/packages/blocks/src/page-block/edgeless/components/edgeless-selected-rect.ts b/packages/blocks/src/page-block/edgeless/components/edgeless-selected-rect.ts
@@ -9,7 +9,7 @@ import {
   serializeXYWH,
   TextElement,
 } from '@blocksuite/phasor';
-import type { Page } from '@blocksuite/store';
+import { matchFlavours, type Page } from '@blocksuite/store';
 import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
@@ -32,11 +32,7 @@ import type { HandleDirection } from './resize-handles.js';
 import { ResizeHandles, type ResizeMode } from './resize-handles.js';
 import { HandleResizeManager } from './resize-manager.js';
 import { SingleConnectorHandles } from './single-connector-handles.js';
-import {
-  getCommonRectStyle,
-  getSelectableBounds,
-  getSelectedRect,
-} from './utils.js';
+import { getSelectableBounds, getSelectedRect } from './utils.js';
 
 @customElement('edgeless-selected-rect')
 export class EdgelessSelectedRect extends WithDisposable(LitElement) {
@@ -53,6 +49,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
       box-sizing: border-box;
       z-index: 1;
       border: var(--affine-border-width) solid var(--affine-blue);
+      border-radius: 8px;
     }
 
     .affine-edgeless-selected-rect > [aria-label^='handle'] {
@@ -129,8 +126,8 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
     .affine-edgeless-selected-rect > [aria-label='handle-left']:after,
     .affine-edgeless-selected-rect > [aria-label='handle-right']:after {
       position: absolute;
-      width: 12px;
-      height: 12px;
+      width: 7px;
+      height: 7px;
       box-sizing: border-box;
       border-radius: 6px;
       z-index: 10;
@@ -141,11 +138,11 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
     }
 
     .affine-edgeless-selected-rect > [aria-label='handle-left']:after {
-      left: -3px;
+      left: -1px;
     }
 
     .affine-edgeless-selected-rect > [aria-label='handle-right']:after {
-      right: -3px;
+      right: -1px;
     }
 
     edgeless-component-toolbar {
@@ -309,10 +306,23 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
       return nothing;
     }
 
+    const isSingleHiddenNote =
+      selected.length === 1 &&
+      isTopLevelBlock(selected[0]) &&
+      matchFlavours(selected[0], ['affine:note']) &&
+      selected[0].hidden;
+
     const { page, surface, resizeMode, _resizeManager } = this;
     const selectedRect = getSelectedRect(selected, surface.viewport);
 
-    const style = getCommonRectStyle(selectedRect, active, true);
+    const style = {
+      '--affine-border-width': `${active ? 2 : 1}px`,
+      left: selectedRect.x + 'px',
+      top: selectedRect.y + 'px',
+      width: selectedRect.width + 'px',
+      height: selectedRect.height + 'px',
+      borderStyle: isSingleHiddenNote ? 'dashed' : 'solid',
+    };
 
     const hasResizeHandles = !active && !page.readonly;
     const resizeHandles = hasResizeHandles

diff --git a/packages/blocks/src/page-block/edgeless/components/hover-rect.ts b/packages/blocks/src/page-block/edgeless/components/hover-rect.ts
@@ -1,17 +1,24 @@
+import { matchFlavours } from '@blocksuite/store';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { EdgelessHoverState } from '../selection-manager.js';
-import { getCommonRectStyle } from './utils.js';
+import { isTopLevelBlock } from '../utils.js';
 
-export function EdgelessHoverRect(
-  hoverState: EdgelessHoverState | null,
-  zoom: number
-) {
+export function EdgelessHoverRect(hoverState: EdgelessHoverState | null) {
   if (!hoverState) return null;
   const rect = hoverState.rect;
+  const isNote =
+    isTopLevelBlock(hoverState.content) &&
+    matchFlavours(hoverState.content, ['affine:note']);
 
-  const style = getCommonRectStyle(rect);
+  const style = {
+    left: rect.x + 'px',
+    top: rect.y + 'px',
+    width: rect.width + 'px',
+    height: rect.height + 'px',
+    backgroundColor: isNote ? 'var(--affine-hover-color)' : '',
+  };
 
   return html`
     <div class="affine-edgeless-hover-rect" style=${styleMap(style)}></div>

diff --git a/packages/blocks/src/page-block/edgeless/components/utils.ts b/packages/blocks/src/page-block/edgeless/components/utils.ts
@@ -7,21 +7,6 @@ import { html } from 'lit';
 import type { Selectable } from '../selection-manager.js';
 import { getSelectionBoxBound, getXYWH, isTopLevelBlock } from '../utils.js';
 
-export function getCommonRectStyle(
-  rect: DOMRect,
-  active = false,
-  selected = false
-) {
-  return {
-    '--affine-border-width': `${active ? 2 : 1}px`,
-    left: rect.x + 'px',
-    top: rect.y + 'px',
-    width: rect.width + 'px',
-    height: rect.height + 'px',
-    backgroundColor: !active && selected ? 'var(--affine-hover-color)' : '',
-  };
-}
-
 export function getSelectedRect(
   selected: Selectable[],
   viewport: SurfaceViewport

diff --git a/packages/blocks/src/page-block/edgeless/edgeless-page-block.ts b/packages/blocks/src/page-block/edgeless/edgeless-page-block.ts
@@ -978,7 +978,7 @@ export class EdgelessPageBlockComponent
     const draggingAreaTpl = EdgelessDraggingArea(draggingArea);
 
     const hoverState = selection.getHoverState();
-    const hoverRectTpl = EdgelessHoverRect(hoverState, zoom);
+    const hoverRectTpl = EdgelessHoverRect(hoverState);
 
     const { grid, gap, translateX, translateY } = getBackgroundGrid(
       viewportX,

diff --git a/tests/edgeless/note.spec.ts b/tests/edgeless/note.spec.ts
@@ -509,7 +509,7 @@ test('manage note index and hidden status', async ({ page }) => {
 
   // hide note-3
   await page.locator('.note-status-button').click();
-  expect(await page.locator('.note-status').count()).toBe(0);
+  expect(await page.locator('.note-status.hidden').count()).toBe(1);
   // reappear note-3
   await page.locator('.note-status-button').click();
   // index of note-3 still be 3
@@ -518,7 +518,7 @@ test('manage note index and hidden status', async ({ page }) => {
   // select note-2 and hide
   await selectNoteInEdgeless(page, '6');
   await page.locator('.note-status-button').click();
-  expect(await page.locator('.note-status').count()).toBe(0);
+  expect(await page.locator('.note-status.hidden').count()).toBe(1);
 
   // index of note-1 still 1
   await selectNoteInEdgeless(page, '4');