Adjust the style of the first column of the attribute view (#10178)

* 🎨 Adjust the style of the column pinned to the attribute view * 🎨 Adjust the style of first column icon * Update index.ts * 🎨 Adjust the style of add row in attribute view #9830 * Update protyle.ts * 🎨 Add `box-shadow` for `.av__colsticky`
siyuan-note · Jan 17, 2024 · 58f9c03 · 58f9c03
1 parent b250013
commit 58f9c03
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 41 deletions.
diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
@@ -109,7 +109,7 @@
         background-color: var(--b3-av-background-hl) !important;
       }
 
-      .av__firstcol svg {
+      .av__firstcol .av__firstcol--icon {
         opacity: 1;
       }
     }
@@ -178,11 +178,16 @@
       display: flex;
 
       .b3-button {
-        margin: 3px 0 3px 24px;
+        padding: 4px 8px;
+        margin: 4px;
         color: var(--b3-theme-on-surface);
         background-color: transparent;
         font-size: 75%;
 
+        > div {
+          background-color: transparent;
+        }
+
         &:hover,
         &:focus {
           background-color: var(--b3-av-hover);
@@ -205,6 +210,23 @@
         }
       }
     }
+
+    &,
+    &--util,
+    &--footer {
+      &:hover {
+        .av__firstcol--icon {
+          opacity: 1;
+        }
+      }
+    }
+
+    &,
+    &--footer {
+      .av__colsticky {
+        box-shadow: 2px 0 4px var(--b3-theme-surface-lighter);
+      }
+    }
   }
 
   &__cell {
@@ -241,6 +263,10 @@
       border-right-color: var(--b3-theme-primary-lighter);
     }
 
+    &--add {
+      padding-left: 0.5em;
+    }
+
     &--select {
       background-color: var(--b3-menu-background);
       box-shadow: 2px 2px 0 var(--b3-theme-primary-lighter) inset, -2px -2px 0px var(--b3-theme-primary-lighter) inset;
@@ -339,15 +365,16 @@
   }
 
   &__firstcol {
-    svg {
+    border-right: 1px solid var(--b3-theme-surface-lighter);
+
+    &--icon {
       @extend .av__checkbox;
-      opacity: 0;
       padding: 9.5px 5px;
-      cursor: pointer;
+      opacity: 0;
     }
 
-    &:hover svg {
-      opacity: 1;
+    &--checkbox {
+      cursor: pointer;
     }
   }
 
@@ -357,7 +384,6 @@
     z-index: 2; // 需大于 av__widthdrag，否则横行滚动后，拖拽会悬浮于 stick 列上
     display: flex;
 
-    &.av__firstcol,
     & > div:not(.av__cell--select):not(.av__cell--active) {
       background-color: var(--av-background);
     }

diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts
@@ -1883,7 +1883,7 @@ export const setFold = (protyle: IProtyle, nodeElement: Element, isOpen?: boolea
         nodeElement.querySelectorAll(".img--select, .av__cell--select, .av__cell--active, .av__row--select").forEach((item: HTMLElement) => {
             if (item.classList.contains("av__row--select")) {
                 item.classList.remove("av__row--select");
-                item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
+                item.querySelector(".av__firstcol--checkbox use").setAttribute("xlink:href", "#iconUncheck");
                 updateHeader(item);
             } else {
                 item.querySelector(".av__drag-fill")?.remove();

diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
@@ -35,7 +35,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
     if (event.shiftKey) {
         const rowElement = hasClosestByClassName(event.target, "av__row");
         if (rowElement && !rowElement.classList.contains("av__row--header")) {
-            selectRow(rowElement.querySelector(".av__firstcol"), "toggle");
+            selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "toggle");
             return true;
         }
     }
@@ -159,7 +159,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
-        } else if (target.classList.contains("av__firstcol")) {
+        } else if (target.classList.contains("av__firstcol--checkbox")) {
             window.siyuan.menus.menu.remove();
             selectRow(target, "toggle");
             event.preventDefault();
@@ -214,10 +214,10 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
                 }
                 const type = getTypeByCellElement(target);
                 if (type === "updated" || type === "created" || (type === "block" && !target.getAttribute("data-detached"))) {
-                    selectRow(rowElement.querySelector(".av__firstcol"), "toggle");
+                    selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "toggle");
                 } else {
                     scrollElement.querySelectorAll(".av__row--select").forEach(item => {
-                        item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
+                        item.querySelector(".av__firstcol--checkbox use").setAttribute("xlink:href", "#iconUncheck");
                         item.classList.remove("av__row--select");
                     });
                     updateHeader(rowElement);
@@ -264,7 +264,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
         blockElement.querySelectorAll(".av__row--select").forEach(item => {
             item.classList.remove("av__row--select");
         });
-        blockElement.querySelectorAll(".av__firstcol use").forEach(item => {
+        blockElement.querySelectorAll(".av__firstcol--checkbox use").forEach(item => {
             item.setAttribute("xlink:href", "#iconUncheck");
         });
     }
@@ -274,7 +274,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
         return true;
     }
     rowElement.classList.add("av__row--select");
-    rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck");
+    rowElement.querySelector(".av__firstcol--checkbox use").setAttribute("xlink:href", "#iconCheck");
     const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header)");
     updateHeader(rowElement);
     if (!protyle.disabled) {

diff --git a/app/src/protyle/render/av/keydown.ts b/app/src/protyle/render/av/keydown.ts
@@ -29,7 +29,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
         });
         if (event.key === "Escape") {
             selectCellElement.classList.remove("av__cell--select");
-            selectRow(rowElement.querySelector(".av__firstcol"), "select");
+            selectRow(rowElement.querySelector(".av__firstcol--checkbox"), "select");
             event.preventDefault();
             return true;
         }
@@ -46,7 +46,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
         let newCellElement;
         if (event.key === "ArrowLeft" || matchHotKey("⇧⇥", event)) {
             const previousRowElement = rowElement.previousElementSibling;
-            if (selectCellElement.previousElementSibling && !selectCellElement.previousElementSibling.classList.contains("av__firstcol")) {
+            if (selectCellElement.previousElementSibling && !selectCellElement.previousElementSibling.classList.contains("av__firstcol--checkbox")) {
                 if (selectCellElement.previousElementSibling.classList.contains("av__cell")) {
                     newCellElement = selectCellElement.previousElementSibling;
                 } else {
@@ -133,7 +133,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
         }
         if (event.key === "Escape") {
             event.preventDefault();
-            selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
+            selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll");
             return true;
         }
         if (event.key === "Backspace") {
@@ -142,17 +142,17 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
             return true;
         }
         if (event.key === "Enter") {
-            selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
+            selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll");
             popTextCell(protyle, [selectRowElements[0].querySelector(".av__cell")]);
             event.preventDefault();
             return true;
         }
         // TODO event.shiftKey
         if (event.key === "ArrowUp") {
             const previousRowElement = selectRowElements[0].previousElementSibling;
-            selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
+            selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll");
             if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) {
-                selectRow(previousRowElement.querySelector(".av__firstcol"), "select");
+                selectRow(previousRowElement.querySelector(".av__firstcol--checkbox"), "select");
                 cellScrollIntoView(nodeElement, previousRowElement);
             } else {
                 nodeElement.classList.add("protyle-wysiwyg--select");
@@ -162,9 +162,9 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
         }
         if (event.key === "ArrowDown") {
             const nextRowElement = selectRowElements[selectRowElements.length - 1].nextElementSibling;
-            selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
+            selectRow(selectRowElements[0].querySelector(".av__firstcol--checkbox"), "unselectAll");
             if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) {
-                selectRow(nextRowElement.querySelector(".av__firstcol"), "select");
+                selectRow(nextRowElement.querySelector(".av__firstcol--checkbox"), "select");
                 cellScrollIntoView(nodeElement, nextRowElement);
             } else {
                 nodeElement.classList.add("protyle-wysiwyg--select");
@@ -175,4 +175,3 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
     }
     return false;
 };
-
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
@@ -67,8 +67,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
                     e.dataset.pageSize = data.pageSize.toString();
                 }
                 // header
-                let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
-                let calcHTML = '<div style="width: 24px"></div>';
+                let tableHTML = '<div class="av__row av__row--header"><div class="av__colsticky"><div class="av__firstcol"><svg class="av__firstcol--icon av__firstcol--checkbox"><use xlink:href="#iconUncheck"></use></svg></div>';
+                let calcHTML = '<div class="av__colsticky"><div class="av__firstcol"><svg class="av__firstcol--icon"><use xlink:href="#iconMath"></use></svg></div>';
                 let pinIndex = -1;
                 let pinMaxIndex = -1;
                 let indexWidth = 0;
@@ -85,9 +85,9 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
                     }
                 });
                 pinIndex = Math.min(pinIndex, pinMaxIndex);
-                if (pinIndex > -1) {
-                    tableHTML = '<div class="av__row av__row--header"><div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
-                    calcHTML = '<div class="av__colsticky"><div style="width: 24px"></div>';
+                if (pinIndex < 0) {
+                    tableHTML += '</div>';
+                    calcHTML += '</div>';
                 }
                 data.columns.forEach((column: IAVColumn, index: number) => {
                     if (column.hidden) {
@@ -118,11 +118,15 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
 </div>`;
                 // body
                 data.rows.forEach((row: IAVRow) => {
-                    tableHTML += `<div class="av__row" data-id="${row.id}">`;
-                    if (pinIndex > -1) {
-                        tableHTML += '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
-                    } else {
-                        tableHTML += '<div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
+                    tableHTML += `<div class="av__row" data-id="${row.id}">
+<div class="av__colsticky">
+    <div class="av__firstcol">
+        <svg class="av__firstcol--icon av__firstcol--checkbox"><use xlink:href="#iconUncheck"></use></svg>
+    </div>
+`;
+
+                    if (pinIndex < 0) {
+                        tableHTML += '</div>';
                     }
 
                     row.cells.forEach((cell, index) => {
@@ -193,11 +197,11 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
             ${tableHTML}
             <div class="av__row--util">
                 <div class="av__colsticky">
+                    <span class="fn__space"></span>
                     <button class="b3-button" data-type="av-add-bottom">
                         <svg><use xlink:href="#iconAdd"></use></svg>
                         ${window.siyuan.languages.addAttr}
                     </button>
-                    <span class="fn__space"></span>
                     <button class="b3-button${data.rowCount > data.rows.length ? "" : " fn__none"}">
                         <svg data-type="av-load-more"><use xlink:href="#iconArrowDown"></use></svg>
                         <span data-type="av-load-more">

diff --git a/app/src/protyle/render/av/row.ts b/app/src/protyle/render/av/row.ts
@@ -13,15 +13,15 @@ export const selectRow = (checkElement: Element, type: "toggle" | "select" | "un
     const useElement = checkElement.querySelector("use");
     if (rowElement.classList.contains("av__row--header") || type === "unselectAll") {
         if ("#iconCheck" === useElement.getAttribute("xlink:href") || type === "unselectAll") {
-            rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
+            rowElement.parentElement.querySelectorAll(".av__firstcol--checkbox").forEach(item => {
                 item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
                 const rowItemElement = hasClosestByClassName(item, "av__row");
                 if (rowItemElement) {
                     rowItemElement.classList.remove("av__row--select");
                 }
             });
         } else {
-            rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
+            rowElement.parentElement.querySelectorAll(".av__firstcol--checkbox").forEach(item => {
                 item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
                 const rowItemElement = hasClosestByClassName(item, "av__row");
                 if (rowItemElement) {
@@ -81,10 +81,10 @@ export const updateHeader = (rowElement: HTMLElement) => {
  */
 export const insertAttrViewBlockAnimation = (protyle: IProtyle, blockElement: Element, srcIDs: string[], previousId: string, avId?: string,) => {
     const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header");
-    let colHTML = '<div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
+    let colHTML = '<div class="av__colsticky"><div class="av__firstcol><svg class="av__firstcol--icon"><use xlink:href="#iconUncheck"></use></svg></div>';
     const pinIndex = previousElement.querySelectorAll(".av__colsticky .av__cell").length - 1;
-    if (pinIndex > -1) {
-        colHTML = '<div class="av__colsticky"><div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
+    if (pinIndex <= 0) {
+        colHTML += "</div>";
     }
     previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement, index) => {
         colHTML += `<div class="av__cell" data-col-id="${item.dataset.colId}" 

diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
@@ -202,7 +202,7 @@ export class WYSIWYG {
         protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .av__cell--active, .av__row--select").forEach((item: HTMLElement) => {
             if (item.classList.contains("av__row--select") && !hasClosestByClassName(element, "av")) {
                 item.classList.remove("av__row--select");
-                item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
+                item.querySelector(".av__firstcol--checkbox use").setAttribute("xlink:href", "#iconUncheck");
                 updateHeader(item);
             } else {
                 item.classList.remove("img--select", "av__cell--select", "av__cell--active");