From 8d628593fa20d36c4a567e31d07c3e055ca8f5b1 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 7 Jul 2023 16:05:05 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/8691

---
 app/src/assets/scss/business/_av.scss      |  2 +-
 app/src/protyle/render/av/openMenuPanel.ts | 24 ++++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index b734f0b3a..7c4f169fe 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -150,7 +150,7 @@
       max-height: 70vh;
 
       .b3-chip {
-        max-width: 220px;
+        max-width: 196px;
         margin: 1px 0;
         padding: 6px 12px 6px 14px;
         float: left;
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index c436200f0..25626888a 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -627,16 +627,28 @@ const getPropertiesHTML = (data: IAV) => {
     let hideHTML = "";
     data.columns.forEach((item: IAVColumn) => {
         if (item.hidden) {
-            hideHTML += `<button class="b3-menu__item">
-    <svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>
-    <span class="b3-menu__label">${item.name}</span>
+            hideHTML += `<button class="b3-menu__item" data-type="nobg">
+    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <div class="fn__flex-1">
+        <span class="b3-chip">
+            <svg><use xlink:href="#${getColIconByType(item.type)}"></use></svg>
+            <span class="fn__ellipsis">${item.name}</span>
+        </span>
+    </div>
     <svg class="b3-menu__action" data-type="showCol" data-id="${item.id}"><use xlink:href="#iconEyeoff"></use></svg>
+    <svg class="b3-menu__action"><use xlink:href="#iconEdit"></use></svg>
 </button>`;
         } else {
-            showHTML += `<button class="b3-menu__item">
-    <svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>
-    <span class="b3-menu__label">${item.name}</span>
+            showHTML += `<button class="b3-menu__item" data-type="nobg">
+    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <div class="fn__flex-1">
+        <span class="b3-chip">
+            <svg><use xlink:href="#${getColIconByType(item.type)}"></use></svg>
+            <span class="fn__ellipsis">${item.name}</span>
+        </span>
+    </div>
     <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol" data-id="${item.id}"><use xlink:href="#iconEye"></use></svg>
+    <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}"><use xlink:href="#iconEdit"></use></svg>
 </button>`;
         }
     });