From 3007b9e67fc1ba5a386150052f880ff077b76fc0 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 15 Nov 2023 08:53:42 +0800
Subject: [PATCH] :art: add pin icon`

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

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 23ac57c3f..2d5ac225f 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -254,6 +254,11 @@
       opacity: 1;
       background-color: var(--b3-theme-background-light) !important;
     }
+
+    .b3-chip {
+      margin: 1px 2px;
+      padding: 2px 6px;
+    }
   }
 
   &__cellheader {
@@ -276,11 +281,6 @@
   &__celltext {
     overflow: hidden;
 
-    .b3-chip {
-      margin: 1px 2px;
-      padding: 2px 6px;
-    }
-
     &--url {
       text-decoration: underline var(--b3-border-color);
     }
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index 0569f1128..763470b93 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -86,6 +86,7 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
     <div draggable="true" class="av__cellheader">
         ${column.icon ? unicode2Emoji(column.icon, "av__cellicon", true) : `<svg class="av__cellicon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
         <span class="av__celltext">${column.name}</span>
+        ${column.pin ? '<div class="fn__flex-1"></div><svg class="av__cellicon"><use xlink:href="#iconPin"></use></svg>' : ""}
     </div>
     <div class="av__widthdrag"></div>
 </div>`;
@@ -140,16 +141,11 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                                 text += `<span class="b3-chip b3-chip--info b3-chip--small" data-type="block-ref" data-id="${cell.value.block.id}" data-subtype="s">${window.siyuan.languages.openBy}</span>`;
                             }
                         } else if (cell.valueType === "number") {
-                            text = `<span class="av__celltext" data-content="${cell.value?.number.isNotEmpty ? cell.value?.number.content : ""}">${cell.value?.number.formattedContent || ""}</span>`;
+                            text = `<span style="float: right" class="av__celltext" data-content="${cell.value?.number.isNotEmpty ? cell.value?.number.content : ""}">${cell.value?.number.formattedContent || ""}</span>`;
                         } else if (cell.valueType === "mSelect" || cell.valueType === "select") {
                             cell.value?.mSelect?.forEach((item) => {
                                 text += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span>`;
                             });
-                            if (!text) {
-                                text = '<span class="av__celltext"></span>';
-                            } else {
-                                text = `<span class="av__celltext">${text}</span>`;
-                            }
                         } else if (cell.valueType === "date") {
                             text = '<span class="av__celltext">';
                             const dataValue = cell.value ? cell.value.date : null;
@@ -175,14 +171,10 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                                     text += `<span class="b3-chip av__celltext--url" data-url="${item.content}">${item.name}</span>`;
                                 }
                             });
-                            if (!text) {
-                                text = '<span class="av__celltext"></span>';
-                            }
                         }
-                        if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cell.valueType)) {
-                            if (cell.value && cell.value[cell.valueType as "url"].content) {
-                                text += `<span ${cell.valueType !== "number" ? "" : 'style="right:auto;left:5px"'} data-type="copy" class="block__icon"><svg><use xlink:href="#iconCopy"></use></svg></span>`;
-                            }
+                        if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cell.valueType) &&
+                            cell.value && cell.value[cell.valueType as "url"].content) {
+                            text += `<span ${cell.valueType !== "number" ? "" : 'style="right:auto;left:5px"'} data-type="copy" class="block__icon"><svg><use xlink:href="#iconCopy"></use></svg></span>`;
                         }
                         tableHTML += `<div class="av__cell" data-id="${cell.id}" data-col-id="${data.columns[index].id}"
 ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}  
@@ -190,7 +182,6 @@ ${cell.value?.isDetached ? ' data-detached="true"' : ""}
 style="width: ${data.columns[index].width || "200px"};
 ${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
 white-space: ${data.columns[index].wrap ? "pre-wrap" : "nowrap"};
-${cell.valueType !== "number" ? "" : "flex-direction: row-reverse;"}
 ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
 
                         if (pinIndex === index) {