From 671851235a479a733cfea627581f4dbd26947b55 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 27 Nov 2024 22:33:22 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/pull/13248

---
 app/src/assets/scss/business/_custom.scss  | 40 +++++-----------------
 app/src/assets/scss/component/_button.scss | 15 ++++++--
 app/src/protyle/render/av/blockAttr.ts     | 14 ++++----
 3 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/app/src/assets/scss/business/_custom.scss b/app/src/assets/scss/business/_custom.scss
index 945146f17..813c2478a 100644
--- a/app/src/assets/scss/business/_custom.scss
+++ b/app/src/assets/scss/business/_custom.scss
@@ -9,19 +9,12 @@
     min-height: 26px;
     flex-wrap: wrap;
 
-    &:hover {
+    &:not(.custom-attr__avvalue--readonly):hover {
       background-color: var(--b3-theme-background);
     }
 
     &--readonly {
-      padding: 7px 8px;
-      line-height: 26px;
-      min-height: 26px;
-
-      &[data-type="created"],
-      &[data-type="updated"] {
-        padding: 4px 8px;
-      }
+      cursor: default;
     }
 
     .av__checkbox {
@@ -77,33 +70,18 @@
       }
     }
 
-    [placeholder]:empty:before {
+    [placeholder]:empty::after {
       color: var(--b3-empty-color);
       content: attr(placeholder);
     }
   }
 
-  .block__icons--addcolumn {
-    padding: 0 8px;
-
-    .b3-button[data-type="addColumn"] {
-      margin: 0 0 0 16px;
-      color: var(--b3-theme-on-surface);
-      background-color: rgba(0,0,0,0);
-
-      &:hover,
-      &:focus {
-        background-color: var(--b3-list-hover);
-        box-shadow: none;
-      }
-
-      svg {
-        padding: 4px;
-      }
-
-      span {
-        padding-right: 4px;
-      }
+  .b3-button[data-type="addColumn"] {
+    margin-left: 28px;
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
     }
   }
 
diff --git a/app/src/assets/scss/component/_button.scss b/app/src/assets/scss/component/_button.scss
index 12ac868df..73d4e5d1d 100644
--- a/app/src/assets/scss/component/_button.scss
+++ b/app/src/assets/scss/component/_button.scss
@@ -66,8 +66,7 @@
     font-size: 16px;
   }
 
-  &--text,
-  &--cancel {
+  &--text {
     color: var(--b3-theme-primary);
     background-color: transparent;
 
@@ -85,6 +84,18 @@
 
   &--cancel {
     color: var(--b3-theme-on-surface);
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+      background-color: var(--b3-list-hover);
+      box-shadow: none;
+    }
+
+    &:active {
+      background-color: var(--b3-list-icon-hover);
+      box-shadow: none;
+    }
   }
 
   &--outline {
diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts
index d25bf014e..cea8f5bc2 100644
--- a/app/src/protyle/render/av/blockAttr.ts
+++ b/app/src/protyle/render/av/blockAttr.ts
@@ -56,7 +56,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
     let html = "";
     switch (value.type) {
         case "block":
-            html = `<div class="fn__flex-1">${value.block.content}</div>`;
+            html = `<div class="fn__flex-1" placeholder="${window.siyuan.languages.empty}">${value.block.content}</div>`;
             break;
         case "text":
             html = `<textarea style="resize: vertical" rows="${value.text.content.split("\n").length}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">${value.text.content}</textarea>`;
@@ -188,14 +188,14 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
         <span>${escapeHtml(item.key.name)}</span>
     </div>
     <div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}" 
-data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"${["block", "created", "updated", "text", "number", "date", "url", "phone", "template", "email"].includes(item.values[0].type) ? "" : ` placeholder="${window.siyuan.languages.empty}`}" 
-class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : ["block", "created", "updated"].includes(item.values[0].type) ? " custom-attr__avvalue--readonly" : " custom-attr__avvalue"}">${genAVValueHTML(item.values[0])}</div>
+data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}" 
+${["text", "number", "date", "url", "phone", "template", "email"].includes(item.values[0].type) ? "" : `placeholder="${window.siyuan.languages.empty}"`}  
+class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}${["block", "created", "updated"].includes(item.values[0].type) ? " custom-attr__avvalue--readonly" : ""}">${genAVValueHTML(item.values[0])}</div>
 </div>`;
             });
-            innerHTML += `<div class="fn__hr></div>
-<div class="fn__flex block__icons--addcolumn"">
-    <button data-type="addColumn" class="b3-button"><svg><use xlink:href="#iconAdd"></use></svg><span>${window.siyuan.languages.newCol}</span></button>
-</div><div class="fn__hr--b"></div>`;
+            innerHTML += `<div class="fn__hr"></div>
+<button data-type="addColumn" class="b3-button b3-button--cancel"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.newCol}</button>
+<div class="fn__hr--b"></div>`;
             html += `<div data-av-id="${table.avID}" data-node-id="${id}" data-type="NodeAttributeView">${innerHTML}</div>`;
 
             if (element.innerHTML) {