Revert "Adjust the style of the first column of the attribute view" (#10143)

app/src/assets/scss/business/_av.scss

@@ -189,14 +189,11 @@
       display: flex;
 
       .b3-button {
+        margin: 3px 0 3px 24px;
         color: var(--b3-theme-on-surface);
         background-color: transparent;
         font-size: 75%;
 
-        > div {
-          background-color: transparent;
-        }
-
         &:hover,
         &:focus {
           background-color: var(--b3-av-hover);
@@ -219,16 +216,6 @@
         }
       }
     }
-
-    &,
-    &--util,
-    &--footer {
-      &:hover {
-        .av__firstcol svg {
-          opacity: 1;
-        }
-      }
-    }
   }
 
   &__cell {
@@ -265,10 +252,6 @@
       border-right-color: var(--b3-theme-primary-lighter);
     }
 
-    &--add {
-      padding-left: 0.5em;
-    }
-
     &--select {
       background-color: var(--b3-theme-primary-lightest);
       box-shadow: 2px 2px 0 var(--b3-theme-primary-lighter) inset, -2px -2px 0px var(--b3-theme-primary-lighter) inset;
@@ -338,14 +321,16 @@
   }
 
   &__firstcol {
-    border-right: 1px solid var(--b3-theme-surface-lighter);
-
     svg {
       @extend .av__checkbox;
-      padding: 9.5px 5px;
       opacity: 0;
+      padding: 9.5px 5px;
       cursor: pointer;
     }
+
+    &:hover svg {
+      opacity: 1;
+    }
   }
 
   &__colsticky {

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__row--select").forEach((item: HTMLElement) => {
             if (item.classList.contains("av__row--select")) {
                 item.classList.remove("av__row--select");
-                item.querySelector(".av__check use").setAttribute("xlink:href", "#iconUncheck");
+                item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
                 updateHeader(item);
             } else {
                 item.classList.remove("img--select", "av__cell--select");

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__check"), "toggle");
+            selectRow(rowElement.querySelector(".av__firstcol"), "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__check")) {
+        } else if (target.classList.contains("av__firstcol")) {
             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__check"), "toggle");
+                    selectRow(rowElement.querySelector(".av__firstcol"), "toggle");
                 } else {
                     scrollElement.querySelectorAll(".av__row--select").forEach(item => {
-                        item.querySelector(".av__check use").setAttribute("xlink:href", "#iconUncheck");
+                        item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
                         item.classList.remove("av__row--select");
                     });
                     updateHeader(rowElement);
@@ -263,7 +263,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__check use").forEach(item => {
+        blockElement.querySelectorAll(".av__firstcol use").forEach(item => {
             item.setAttribute("xlink:href", "#iconUncheck");
         });
     }
@@ -273,7 +273,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
         return true;
     }
     rowElement.classList.add("av__row--select");
-    rowElement.querySelector(".av__check use").setAttribute("xlink:href", "#iconCheck");
+    rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck");
     const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header)");
     updateHeader(rowElement);
     if (!protyle.disabled) {

app/src/protyle/render/av/keydown.ts

@@ -25,7 +25,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
         }
         if (event.key === "Escape") {
             selectCellElement.classList.remove("av__cell--select");
-            selectRow(rowElement.querySelector(".av__check"), "select");
+            selectRow(rowElement.querySelector(".av__firstcol"), "select");
             event.preventDefault();
             return true;
         }
@@ -42,7 +42,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__check")) {
+            if (selectCellElement.previousElementSibling && !selectCellElement.previousElementSibling.classList.contains("av__firstcol")) {
                 if (selectCellElement.previousElementSibling.classList.contains("av__cell")) {
                     newCellElement = selectCellElement.previousElementSibling;
                 } else {
@@ -129,7 +129,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
         }
         if (event.key === "Escape") {
             event.preventDefault();
-            selectRow(selectRowElements[0].querySelector(".av__check"), "unselectAll");
+            selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
             return true;
         }
         if (event.key === "Backspace") {
@@ -138,7 +138,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
             return true;
         }
         if (event.key === "Enter") {
-            selectRow(selectRowElements[0].querySelector(".av__check"), "unselectAll");
+            selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
             popTextCell(protyle, [selectRowElements[0].querySelector(".av__cell")]);
             event.preventDefault();
             return true;
@@ -146,9 +146,9 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
         // TODO event.shiftKey
         if (event.key === "ArrowUp") {
             const previousRowElement = selectRowElements[0].previousElementSibling;
-            selectRow(selectRowElements[0].querySelector(".av__check"), "unselectAll");
+            selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
             if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) {
-                selectRow(previousRowElement.querySelector(".av__check"), "select");
+                selectRow(previousRowElement.querySelector(".av__firstcol"), "select");
                 cellScrollIntoView(nodeElement, previousRowElement);
             } else {
                 nodeElement.classList.add("protyle-wysiwyg--select");
@@ -158,9 +158,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__check"), "unselectAll");
+            selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
             if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) {
-                selectRow(nextRowElement.querySelector(".av__check"), "select");
+                selectRow(nextRowElement.querySelector(".av__firstcol"), "select");
                 cellScrollIntoView(nodeElement, nextRowElement);
             } else {
                 nodeElement.classList.add("protyle-wysiwyg--select");
@@ -171,3 +171,4 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
     }
     return false;
 };
+

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__colsticky"><div class="av__firstcol"><svg class="av__check"><use xlink:href="#iconUncheck"></use></svg></div>';
-                let calcHTML = '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconMath"></use></svg></div>';
+                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 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 < 0) {
-                    tableHTML += '</div>';
-                    calcHTML += '</div>';
+                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>';
                 }
                 data.columns.forEach((column: IAVColumn, index: number) => {
                     if (column.hidden) {
@@ -120,15 +120,11 @@ 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}">
-<div class="av__colsticky">
-    <div class="av__firstcol">
-        <svg class="av__check"><use xlink:href="#iconUncheck"></use></svg>
-    </div>
-`;
-
-                    if (pinIndex < 0) {
-                        tableHTML += '</div>';
+                    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>';
                     }
 
                     row.cells.forEach((cell, index) => {
@@ -198,9 +194,6 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, data.colum
             ${tableHTML}
             <div class="av__row--util">
                 <div class="av__colsticky">
-                    <div class="av__firstcol">
-                        <svg><use xlink:href="#iconAdd"></use></svg>
-                    </div>
                     <button class="b3-button" data-type="av-add-bottom">
                         <svg><use xlink:href="#iconAdd"></use></svg>
                         ${window.siyuan.languages.addAttr}

app/src/protyle/render/av/row.ts

@@ -13,7 +13,7 @@ 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")) {
-            rowElement.parentElement.querySelectorAll(".av__check").forEach(item => {
+            rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
                 item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
                 const rowItemElement = hasClosestByClassName(item, "av__row");
                 if (rowItemElement) {
@@ -21,7 +21,7 @@ export const selectRow = (checkElement: Element, type: "toggle" | "select" | "un
                 }
             });
         } else {
-            rowElement.parentElement.querySelectorAll(".av__check").forEach(item => {
+            rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
                 item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
                 const rowItemElement = hasClosestByClassName(item, "av__row");
                 if (rowItemElement) {

app/src/protyle/wysiwyg/index.ts

@@ -194,7 +194,7 @@ export class WYSIWYG {
         protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .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__check use").setAttribute("xlink:href", "#iconUncheck");
+                item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
                 updateHeader(item);
             } else {
                 item.classList.remove("img--select", "av__cell--select");