refactor(blocks): refine code block toolbar

toeverything · Jul 10, 2024 · b117987 · b117987
1 parent 1320356
commit b117987
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 213 deletions.
diff --git a/packages/blocks/src/_common/components/filterable-list/index.ts b/packages/blocks/src/_common/components/filterable-list/index.ts
@@ -1,3 +1,5 @@
+import '../toolbar/separator.js';
+
 import { WithDisposable } from '@blocksuite/block-std';
 import { autoPlacement, offset, type Placement, size } from '@floating-ui/dom';
 import { html, LitElement, nothing } from 'lit';
@@ -154,7 +156,7 @@ export class FilterableListComponent<Props = unknown> extends WithDisposable(
         class=${classMap({ 'affine-filterable-list': true, flipped: isFlip })}
       >
         <div class="input-wrapper">
-          <div class="search-icon">${SearchIcon}</div>
+          ${SearchIcon}
           <input
             id="filter-input"
             type="text"
@@ -167,7 +169,9 @@ export class FilterableListComponent<Props = unknown> extends WithDisposable(
           />
         </div>
 
-        <div class="divider"></div>
+        <editor-toolbar-separator
+          data-orientation="horizontal"
+        ></editor-toolbar-separator>
         <div class="items-container">${content}</div>
       </div>
     `;

diff --git a/packages/blocks/src/_common/components/filterable-list/styles.ts b/packages/blocks/src/_common/components/filterable-list/styles.ts
@@ -1,67 +1,64 @@
-import { baseTheme } from '@toeverything/theme';
-import { css, unsafeCSS } from 'lit';
+import { css } from 'lit';
 
+import { PANEL_BASE } from '../../styles.js';
 import { scrollbarStyle } from '../utils.js';
+
 export const filterableListStyles = css`
   :host {
-    background: var(--affine-background-overlay-panel-color);
-    color: var(--affine-text-primary-color);
-    box-shadow: var(--affine-menu-shadow);
-    border-radius: 12px;
+    ${PANEL_BASE}
 
-    display: flex;
     flex-direction: column;
+    padding: 0;
 
     max-height: 100%;
-    width: 230px;
     pointer-events: auto;
     overflow: hidden;
     z-index: var(--affine-z-index-popover);
   }
 
   .affine-filterable-list {
-    box-sizing: border-box;
     display: flex;
-    height: 100%;
-    overflow: hidden;
     flex-direction: column;
-    border-radius: 8px;
+    align-items: stretch;
+    justify-content: center;
+    width: 230px;
     padding: 8px;
+    box-sizing: border-box;
+    overflow: hidden;
   }
 
   .affine-filterable-list.flipped {
     flex-direction: column-reverse;
   }
 
   .items-container {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     flex: 1;
     overflow-y: scroll;
     padding-top: 5px;
     padding-left: 4px;
     padding-right: 4px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
   }
 
-  .divider {
-    height: 1px;
-    background-color: var(--affine-divider-color);
+  editor-toolbar-separator {
     margin: 8px 0;
-    flex-shrink: 0;
   }
 
   .input-wrapper {
     display: flex;
-    margin-left: 4px;
+    align-items: center;
     border-radius: 4px;
     padding: 4px 10px;
     gap: 4px;
-    border: 1px solid transparent;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
   }
 
   .input-wrapper:focus-within {
-    border: 1px solid var(--affine-blue-600);
+    border-color: var(--affine-blue-700);
     box-shadow: var(--affine-active-shadow);
   }
 
@@ -85,7 +82,7 @@ export const filterableListStyles = css`
   }
 
   .filterable-item.focussed {
-    color: var(--affine-blue-600);
+    color: var(--affine-blue-700);
     background: var(--affine-hover-color-filled);
   }
 
@@ -96,12 +93,9 @@ export const filterableListStyles = css`
     width: 140px;
     border-radius: 8px;
     padding-top: 2px;
-    border: none;
-    font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
-    font-size: var(--affine-font-sm);
-    box-sizing: border-box;
+    border: transparent;
+    background: transparent;
     color: inherit;
-    background: var(--affine-background-overlay-panel-color);
   }
 
   #filter-input:focus {
@@ -112,10 +106,4 @@ export const filterableListStyles = css`
     color: var(--affine-placeholder-color);
     font-size: var(--affine-font-sm);
   }
-
-  .search-icon {
-    display: flex;
-    align-items: center;
-    color: var(--affine-icon-color);
-  }
 `;
diff --git a/packages/blocks/src/_common/components/more-popup-menu/more-popup-menu.ts b/packages/blocks/src/_common/components/more-popup-menu/more-popup-menu.ts
diff --git a/packages/blocks/src/_common/components/toolbar/menu-button.ts b/packages/blocks/src/_common/components/toolbar/menu-button.ts
@@ -17,29 +17,6 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
       justify-content: center;
       gap: 8px;
     }
-
-    ::slotted([slot]) {
-      display: flex;
-      align-items: center;
-      align-self: stretch;
-      gap: 8px;
-      min-height: 36px;
-    }
-
-    ::slotted([slot][data-size='small']) {
-      min-width: 164px;
-    }
-
-    ::slotted([slot][data-size='large']) {
-      min-width: 184px;
-    }
-
-    ::slotted([slot][data-orientation='vertical']) {
-      flex-direction: column;
-      align-items: stretch;
-      gap: unset;
-      min-height: unset;
-    }
   `;
 
   @query('editor-icon-button')
@@ -115,20 +92,20 @@ export class EditorMenuContent extends LitElement {
       outline: none;
     }
 
-    :host:before,
-    :host:after {
+    :host::before,
+    :host::after {
       content: '';
       display: block;
       position: absolute;
       height: var(--packed-height);
       width: 100%;
     }
 
-    :host:before {
+    :host::before {
       top: var(--offset-height);
     }
 
-    :host:after {
+    :host::after {
       bottom: var(--offset-height);
     }
 
@@ -138,6 +115,29 @@ export class EditorMenuContent extends LitElement {
       gap: 8px;
       padding: var(--content-padding, 0 6px);
     }
+
+    ::slotted([slot]) {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      gap: 8px;
+      min-height: 36px;
+    }
+
+    ::slotted([slot][data-size='small']) {
+      min-width: 164px;
+    }
+
+    ::slotted([slot][data-size='large']) {
+      min-width: 184px;
+    }
+
+    ::slotted([slot][data-orientation='vertical']) {
+      flex-direction: column;
+      align-items: stretch;
+      gap: unset;
+      min-height: unset;
+    }
   `;
 
   override render() {

diff --git a/packages/blocks/src/_common/components/toolbar/separator.ts b/packages/blocks/src/_common/components/toolbar/separator.ts
@@ -9,6 +9,7 @@ export class EditorToolbarSeparator extends LitElement {
       align-items: center;
       justify-content: center;
       align-self: stretch;
+      flex-shrink: 0;
 
       width: 4px;
     }

diff --git a/packages/blocks/src/_common/inline/presets/nodes/link-node/link-popup/styles.ts b/packages/blocks/src/_common/inline/presets/nodes/link-node/link-popup/styles.ts
@@ -67,8 +67,8 @@ const editLinkStyle = css`
     background: transparent;
   }
   .affine-edit-area:focus-within {
-    border: 1px solid var(--affine-blue-700);
-    box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+    border-color: var(--affine-blue-700);
+    box-shadow: var(--affine-active-shadow);
   }
 
   .affine-edit-area.text {
@@ -188,7 +188,7 @@ export const linkPopupStyle = css`
   }
   .affine-link-popover-input:focus {
     border-color: var(--affine-blue-700);
-    box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+    box-shadow: var(--affine-active-shadow);
   }
 
   ${editLinkStyle}

diff --git a/packages/blocks/src/attachment-block/components/styles.ts b/packages/blocks/src/attachment-block/components/styles.ts
@@ -27,7 +27,7 @@ export const renameStyles = css`
 
   .affine-attachment-rename-input-wrapper:focus-within {
     border-color: var(--affine-blue-700);
-    box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+    box-shadow: var(--affine-active-shadow);
   }
 
   .affine-attachment-rename-input-wrapper input {