From d458eeb1bc7e3e5919adf2c654d51023d66ee367 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sun, 7 Apr 2024 10:16:11 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10882

---
 app/src/assets/scss/business/_av.scss      |  5 ++
 app/src/protyle/render/av/blockAttr.ts     | 16 ++---
 app/src/protyle/render/av/col.ts           | 78 +++++++++++-----------
 app/src/protyle/render/av/openMenuPanel.ts | 10 +--
 4 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 5e1aa82ad..53f577a08 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -456,6 +456,11 @@
 
       &__item {
         transition: margin .2s cubic-bezier(0, 0, .2, 1) 0ms;
+
+        &[disabled] {
+          opacity: .38;
+          cursor: not-allowed;
+        }
       }
 
       &__item:hover .b3-menu__action {
diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts
index f6ca9bf0e..8b1b81ebd 100644
--- a/app/src/protyle/render/av/blockAttr.ts
+++ b/app/src/protyle/render/av/blockAttr.ts
@@ -175,7 +175,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
             table.keyValues?.forEach(item => {
                 html += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}">
     <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
-    <div class="block__logo ariaLabel${item.values[0].type === "block" ? "" : " fn__pointer"}" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}">
+    <div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}">
         ${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
         <span>${item.key.name}</span>
     </div>
@@ -326,14 +326,12 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
                         event.preventDefault();
                         break;
                     } else if (type === "editCol") {
-                        if (target.classList.contains("fn__pointer")) {
-                            openMenuPanel({
-                                protyle,
-                                blockElement,
-                                type: "edit",
-                                colId: target.parentElement.dataset.colId
-                            });
-                        }
+                        openMenuPanel({
+                            protyle,
+                            blockElement,
+                            type: "edit",
+                            colId: target.parentElement.dataset.colId
+                        });
                         event.stopPropagation();
                         event.preventDefault();
                         break;
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index a5caebfd8..d883b7e37 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -131,7 +131,7 @@ export const getEditHTML = (options: {
     <span style="padding: 5px;margin-right: 8px;width: 14px;font-size: 14px;" class="block__icon block__icon--show" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
     <span class="b3-menu__label" style="padding: 4px;display: flex;"><input data-type="name" class="b3-text-field fn__block" type="text" value="${colData.name}"></span>
 </button>
-<button class="b3-menu__item" data-type="goUpdateColType">
+<button class="b3-menu__item" data-type="goUpdateColType" ${colData.type === "block" ? "disabled" : ""}>
     <span class="b3-menu__label">${window.siyuan.languages.type}</span>
     <span class="fn__space"></span>
     <svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>
@@ -200,22 +200,22 @@ export const getEditHTML = (options: {
     <input data-type="fillCreated" type="checkbox" class="b3-switch b3-switch--menu" ${colData.date?.autoFillNow ? "checked" : ""}>
 </label>`;
     }
-    return `<div class="b3-menu__items">
-    ${html}
-    <button class="b3-menu__separator"></button>
-    <button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}">
-        <svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
-        <span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
-    </button>
-    <button class="b3-menu__item${colData.type === "relation" ? " fn__none" : ""}" data-type="duplicateCol">
-        <svg class="b3-menu__icon" style=""><use xlink:href="#iconCopy"></use></svg>
-        <span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
-    </button>
-    <button class="b3-menu__item" data-type="removeCol">
-        <svg class="b3-menu__icon" style=""><use xlink:href="#iconTrashcan"></use></svg>
-        <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
-    </button>
-</div>
+    if (colData.type !== "block") {
+        html += ` <button class="b3-menu__separator"></button>
+<button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}">
+    <svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
+    <span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
+</button>
+<button class="b3-menu__item${colData.type === "relation" ? " fn__none" : ""}" data-type="duplicateCol">
+    <svg class="b3-menu__icon" style=""><use xlink:href="#iconCopy"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
+</button>
+<button class="b3-menu__item" data-type="removeCol">
+    <svg class="b3-menu__icon" style=""><use xlink:href="#iconTrashcan"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
+</button>`
+    }
+    return `<div class="b3-menu__items">${html}</div>
 <div class="b3-menu__items fn__none">
     <button class="b3-menu__item" data-type="nobg" data-col-id="${colData.id}">
         <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goEditCol">
@@ -444,6 +444,8 @@ export const getColNameByType = (type: TAVCol) => {
             return window.siyuan.languages.assets;
         case "checkbox":
             return window.siyuan.languages.checkbox;
+        case "block":
+            return window.siyuan.languages["_attrView"].key;
     }
 };
 
@@ -520,7 +522,7 @@ const addAttrViewColAnimation = (options: {
         const nodeId = options.blockElement.getAttribute("data-node-id");
         options.blockElement.querySelector(".fn__hr").insertAdjacentHTML("beforebegin", `<div class="block__icons av__row" data-id="${nodeId}" data-col-id="${options.id}">
     <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
-    <div class="block__logo ariaLabel" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}">
+    <div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}">
         <svg class="block__logoicon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>
         <span>${getColNameByType(options.type)}</span>
     </div>
@@ -614,27 +616,25 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
             });
         }
     });
-    if (type !== "block") {
-        menu.addItem({
-            icon: "iconEdit",
-            label: window.siyuan.languages.edit,
-            click() {
-                const colName = (menu.element.querySelector(".b3-text-field") as HTMLInputElement).value;
-                openMenuPanel({
-                    protyle,
-                    blockElement,
-                    type: "edit",
-                    colId,
-                    cb(avElement) {
-                        // 修改名字后点击编辑，需要更新名字
-                        const editNameElement = avElement.querySelector('.b3-text-field[data-type="name"]') as HTMLInputElement;
-                        editNameElement.value = colName;
-                        editNameElement.select();
-                    }
-                });
-            }
-        });
-    }
+    menu.addItem({
+        icon: "iconEdit",
+        label: window.siyuan.languages.edit,
+        click() {
+            const colName = (menu.element.querySelector(".b3-text-field") as HTMLInputElement).value;
+            openMenuPanel({
+                protyle,
+                blockElement,
+                type: "edit",
+                colId,
+                cb(avElement) {
+                    // 修改名字后点击编辑，需要更新名字
+                    const editNameElement = avElement.querySelector('.b3-text-field[data-type="name"]') as HTMLInputElement;
+                    editNameElement.value = colName;
+                    editNameElement.select();
+                }
+            });
+        }
+    });
     menu.addSeparator();
     menu.addItem({
         icon: "iconUp",
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index d7066a8b1..e83bfcaf7 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -820,7 +820,7 @@ export const openMenuPanel = (options: {
                     menuElement.innerHTML = getEditHTML({
                         protyle: options.protyle,
                         data,
-                        colId: target.parentElement.dataset.id,
+                        colId: target.dataset.id,
                         isCustomAttr
                     });
                     bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
@@ -1188,24 +1188,24 @@ const getPropertiesHTML = (data: IAVTable) => {
     let hideHTML = "";
     data.columns.forEach((item: IAVColumn) => {
         if (item.hidden) {
-            hideHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
+            hideHTML += `<button class="b3-menu__item" data-type="editCol" draggable="true" data-id="${item.id}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="b3-menu__label fn__flex">
         ${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
         ${item.name}
     </div>
     <svg class="b3-menu__action" data-type="showCol"><use xlink:href="#iconEye"></use></svg>
-    <svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>`;
         } else {
-            showHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
+            showHTML += `<button class="b3-menu__item" data-type="editCol" draggable="true" data-id="${item.id}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="b3-menu__label fn__flex">
         ${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
         ${item.name}
     </div>
     <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol"><use xlink:href="#iconEyeoff"></use></svg>
-    <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>`;
         }
     });