改进数据库属性面板样式 (#13248)

* 改进数据库属性面板样式

* 改进数据库属性面板样式

* 添加占位符

* 添加占位符

* 改进数据库属性面板样式、添加占位符

* 语法错误

* 改进添加字段按钮 的样式

* 改进 添加字段 按钮的样式

* 改进 添加字段 按钮的样式

* 添加占位符

app/appearance/langs/de_DE.json

@@ -1,4 +1,5 @@
 {
+  "empty": "Leer",
   "newRowInRelation": "Erstellen Sie einen neuen Eintrag in ${x} <b class='ft__on-surface'>${y}</b>",
   "keyContent": "Schlüsselinhalt",
   "addDesc": "Beschreibung hinzufügen",

app/appearance/langs/en_US.json

@@ -1,4 +1,5 @@
 {
+  "empty": "Empty",
   "newRowInRelation": "Create a new entry in ${x} <b class='ft__on-surface'>${y}</b>",
   "keyContent": "Key content",
   "addDesc": "Add description",

app/appearance/langs/es_ES.json

@@ -1,4 +1,5 @@
 {
+  "empty": "Vacío",
   "newRowInRelation": "Crear una nueva entrada en ${x} <b class='ft__on-surface'>${y}</b>",
   "keyContent": "Contenido de la clave",
   "addDesc": "Agregar descripción",

app/appearance/langs/he_IL.json

@@ -1,4 +1,5 @@
 {
+  "empty": "ריק",
   "newRowInRelation": "צור ערך חדש ב-${x} <b class='ft__on-surface'>${y}</b>",
   "keyContent": "תוכן המפתח",
   "addDesc": "הוסף תיאור",

app/appearance/langs/it_IT.json

@@ -1,4 +1,5 @@
 {
+  "empty": "Vuoto",
   "newRowInRelation": "Crea una nuova voce in ${x} <b class='ft__on-surface'>${y}</b>",
   "keyContent": "Contenuto della chiave",
   "addDesc": "Aggiungi descrizione",

app/appearance/langs/ja_JP.json

@@ -1,4 +1,5 @@
 {
+  "empty": "空白",
   "newRowInRelation": "${x} に新しい項目を作成 <b class='ft__on-surface'>${y}</b>",
   "keyContent": "キーコンテンツ",
   "addDesc": "説明を追加",

app/appearance/langs/pl_PL.json

@@ -1,4 +1,5 @@
 {
+  "empty": "Pusty",
   "newRowInRelation": "Utwórz nowy wpis w ${x} <b class='ft__on-surface'>${y}</b>",
   "keyContent": "Zawartość klucza",
   "addDesc": "Dodaj opis",

app/appearance/langs/ru_RU.json

@@ -1,4 +1,5 @@
 {
+  "empty": "Пусто",
   "newRowInRelation": "Создать новую запись в ${x} <b class='ft__on-surface'>${y}</b>",
   "keyContent": "Содержимое ключа",
   "addDesc": "Добавить описание",

app/appearance/langs/zh_CHT.json

@@ -1,4 +1,5 @@
 {
+  "empty": "空白",
   "newRowInRelation": "在 ${x} 中新建條目 <b class='ft__on-surface'>${y}</b>",
   "keyContent": "主鍵內容",
   "addDesc": "添加描述",

app/appearance/langs/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "empty": "空白",
   "newRowInRelation": "在 ${x} 中新建条目 <b class='ft__on-surface'>${y}</b>",
   "keyContent": "主键内容",
   "addDesc": "添加描述",

app/src/assets/scss/business/_custom.scss

@@ -13,6 +13,17 @@
       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;
+      }
+    }
+
     .av__checkbox {
       width: 16px;
       height: 26px;
@@ -65,6 +76,35 @@
         background-color: transparent;
       }
     }
+
+    [placeholder]:empty:before {
+      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-text-field--text {

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

@@ -59,10 +59,10 @@ export const genAVValueHTML = (value: IAVCellValue) => {
             html = `<div class="fn__flex-1">${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">${value.text.content}</textarea>`;
+            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>`;
             break;
         case "number":
-            html = `<input value="${value.number.isNotEmpty ? value.number.content : ""}" type="number" class="b3-text-field b3-text-field--text fn__flex-1">
+            html = `<input value="${value.number.isNotEmpty ? value.number.content : ""}" type="number" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">
 <span class="fn__space"></span><span class="fn__flex-center ft__on-surface b3-tooltips__w b3-tooltips" aria-label="${window.siyuan.languages.format}">${value.number.formattedContent}</span><span class="fn__space"></span>`;
             break;
         case "mSelect":
@@ -84,7 +84,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
             });
             break;
         case "date":
-            html = `<span class="av__celltext" data-value='${JSON.stringify(value[value.type])}'>`;
+            html = `<span class="av__celltext" data-value='${JSON.stringify(value[value.type])}' placeholder="${window.siyuan.languages.empty}">`;
             if (value[value.type] && value[value.type].isNotEmpty) {
                 html += dayjs(value[value.type].content).format(value[value.type].isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
             }
@@ -100,12 +100,12 @@ export const genAVValueHTML = (value: IAVCellValue) => {
             }
             break;
         case "url":
-            html = `<input value="${value.url.content}" class="b3-text-field b3-text-field--text fn__flex-1">
+            html = `<input value="${value.url.content}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">
 <span class="fn__space"></span>
 <a href="${value.url.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconLink"></use></svg></a>`;
             break;
         case "phone":
-            html = `<input value="${value.phone.content}" class="b3-text-field b3-text-field--text fn__flex-1">
+            html = `<input value="${value.phone.content}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">
 <span class="fn__space"></span>
 <a href="tel:${value.phone.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconPhone"></use></svg></a>`;
             break;
@@ -113,10 +113,10 @@ export const genAVValueHTML = (value: IAVCellValue) => {
             html = `<svg class="av__checkbox"><use xlink:href="#icon${value.checkbox.checked ? "Check" : "Uncheck"}"></use></svg>`;
             break;
         case "template":
-            html = `<div class="fn__flex-1">${value.template.content}</div>`;
+            html = `<div class="fn__flex-1" placeholder="${window.siyuan.languages.empty}">${value.template.content}</div>`;
             break;
         case "email":
-            html = `<input value="${value.email.content}" class="b3-text-field b3-text-field--text fn__flex-1">
+            html = `<input value="${value.email.content}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">
 <span class="fn__space"></span>
 <a href="mailto:${value.email.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconEmail"></use></svg></a>`;
             break;
@@ -188,16 +188,13 @@ 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)) : "[]"}"
+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", "block"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
+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>
-        ${genAVValueHTML(item.values[0])}
-    </div>
 </div>`;
             });
-            innerHTML += `<div class="fn__hr"></div>
+            innerHTML += `<div class="fn__hr></div>
-<div class="fn__flex">
+<div class="fn__flex block__icons--addcolumn"">
-    <div class="fn__space"></div><div class="fn__space"></div>
+    <button data-type="addColumn" class="b3-button"><svg><use xlink:href="#iconAdd"></use></svg><span>${window.siyuan.languages.newCol}</span></button>
-    <button data-type="addColumn" class="b3-button b3-button--outline"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}</button>
 </div><div class="fn__hr--b"></div>`;
             html += `<div data-av-id="${table.avID}" data-node-id="${id}" data-type="NodeAttributeView">${innerHTML}</div>`;