✨ fix #8892

siyuan-note · Aug 3, 2023 · 91b23f0 · 91b23f0
1 parent 8e1e813
commit 91b23f0
Show file tree

Hide file tree

Showing 18 changed files with 159 additions and 39 deletions.
diff --git a/app/appearance/icons/ant/icon.js b/app/appearance/icons/ant/icon.js
diff --git a/app/appearance/icons/ant/icon.json b/app/appearance/icons/ant/icon.json
@@ -2,5 +2,5 @@
   "name": "ant",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.21.1"
+  "version": "1.22.0"
 }
diff --git a/app/appearance/icons/index.html b/app/appearance/icons/index.html
@@ -28,6 +28,18 @@
 <body>
 <h2>SiYuan</h2>
 <div class="fn__clear">
+    <div>
+        <svg>
+            <use xlink:href="#iconPhone"></use>
+        </svg>
+        iconPhone
+    </div>
+    <div>
+        <svg>
+            <use xlink:href="#iconEmail"></use>
+        </svg>
+        iconEmail
+    </div>
     <div>
         <svg>
             <use xlink:href="#iconDrag"></use>

diff --git a/app/appearance/icons/material/icon.js b/app/appearance/icons/material/icon.js
diff --git a/app/appearance/icons/material/icon.json b/app/appearance/icons/material/icon.json
@@ -2,5 +2,5 @@
   "name": "material",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.21.1"
+  "version": "1.22.0"
 }
diff --git a/app/appearance/langs/en_US.json b/app/appearance/langs/en_US.json
@@ -1,4 +1,6 @@
 {
+  "email": "Email",
+  "phone": "Phone",
   "inboxTip": "Open the user guide to search the <code class='fn__code'>inbox</code> to view the instructions",
   "builtIn": "Built-in",
   "endDate": "End date",

diff --git a/app/appearance/langs/es_ES.json b/app/appearance/langs/es_ES.json
@@ -1,4 +1,6 @@
 {
+  "email": "Correo electrónico",
+  "phone": "Teléfono",
   "inboxTip": "Abra la guía del usuario para buscar en la <code class='fn__code'>bandeja de entrada</code> para ver las instrucciones",
   "builtIn": "Incorporado",
   "endDate": "Fecha de finalización",

diff --git a/app/appearance/langs/fr_FR.json b/app/appearance/langs/fr_FR.json
@@ -1,4 +1,6 @@
 {
+  "email": "E-mail",
+  "phone": "Téléphone",
   "inboxTip": "Ouvrez le guide de l'utilisateur pour rechercher la <code class='fn__code'>boîte de réception</code> pour afficher les instructions",
   "builtIn": "Intégré",
   "endDate": "Date de fin",

diff --git a/app/appearance/langs/zh_CHT.json b/app/appearance/langs/zh_CHT.json
@@ -1,4 +1,6 @@
 {
+  "email": "郵箱",
+  "phone": "電話",
   "inboxTip": "打開用戶指南搜索 <code class='fn__code'>收集箱</code> 查看使用說明",
   "builtIn": "內置",
   "endDate": "結束日期",

diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json
@@ -1,4 +1,6 @@
 {
+  "email": "邮箱",
+  "phone": "电话",
   "inboxTip": "打开用户指南搜索 <code class='fn__code'>收集箱</code> 查看使用说明",
   "builtIn": "内置",
   "endDate": "结束时间",

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
@@ -175,28 +175,21 @@
     display: flex;
     align-items: center;
 
-    svg {
-      height: 12px;
-      width: 12px;
-      color: var(--b3-theme-on-surface);
-      margin-right: 5px;
-      flex-shrink: 0;
-    }
-
-    [data-type="block-ref"],
-    [data-type="a"] {
+    [data-type="block-ref"] {
       display: none;
       position: absolute;
       right: 5px;
       font-size: 10px;
     }
 
-    &:hover [data-type="a"] {
-      display: block;
+    .block__icon {
+      position: absolute;
+      right: 5px;
+    }
 
-      &:hover {
-        border-bottom: 0 !important;
-      }
+    &:hover .block__icon {
+      opacity: 1;
+      background-color: var(--b3-theme-background-light) !important;
     }
   }
 
@@ -206,10 +199,17 @@
     align-items: center;
     flex: 1;
     overflow: hidden;
+
+    & > svg {
+      height: 12px;
+      width: 12px;
+      color: var(--b3-theme-on-surface);
+      margin-right: 5px;
+      flex-shrink: 0;
+    }
   }
 
   &__celltext {
-    flex: 1;
     overflow: hidden;
 
     .b3-chip {

diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
@@ -11,6 +11,8 @@ import {openMenuPanel} from "./openMenuPanel";
 import {hintRef} from "../../hint/extend";
 import {hideElements} from "../../ui/hideElements";
 import {focusByRange} from "../../util/selection";
+import {writeText} from "../../util/compatibility";
+import {showMessage} from "../../../dialog/message";
 
 export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
     const blockElement = hasClosestBlock(event.target);
@@ -103,6 +105,29 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
+    const copyElement = hasClosestByAttribute(event.target, "data-type", "copy");
+    if (copyElement) {
+        writeText(copyElement.previousElementSibling.textContent.trim());
+        showMessage(window.siyuan.languages.copied);
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+    }
+
+    const linkElement = hasClosestByClassName(event.target, "av__celltext--url");
+    if (linkElement) {
+        let prefix = ""
+        if (linkElement.dataset.type === "phone") {
+            prefix = "tel:"
+        } else if (linkElement.dataset.type === "email") {
+            prefix = "mailto:"
+        }
+        window.open(prefix + linkElement.textContent.trim());
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+    }
+
     const cellHeaderElement = hasClosestByClassName(event.target, "av__cellheader");
     if (cellHeaderElement) {
         showColMenu(protyle, blockElement, cellHeaderElement.parentElement);

diff --git a/app/src/protyle/render/av/addCol.ts b/app/src/protyle/render/av/addCol.ts
@@ -101,7 +101,7 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
             const id = Lute.NewNodeID();
             transaction(protyle, [{
                 action: "addAttrViewCol",
-                name: "Link",
+                name: "URL",
                 avID,
                 type: "url",
                 id
@@ -112,5 +112,41 @@ export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
             }]);
         }
     });
+    menu.addItem({
+        icon: "iconEmail",
+        label: window.siyuan.languages.email,
+        click() {
+            const id = Lute.NewNodeID();
+            transaction(protyle, [{
+                action: "addAttrViewCol",
+                name: "Email",
+                avID,
+                type: "email",
+                id
+            }], [{
+                action: "removeAttrViewCol",
+                id,
+                avID,
+            }]);
+        }
+    });
+    menu.addItem({
+        icon: "iconPhone",
+        label: window.siyuan.languages.phone,
+        click() {
+            const id = Lute.NewNodeID();
+            transaction(protyle, [{
+                action: "addAttrViewCol",
+                name: "Phone",
+                avID,
+                type: "phone",
+                id
+            }], [{
+                action: "removeAttrViewCol",
+                id,
+                avID,
+            }]);
+        }
+    });
     return menu;
 };
diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts
@@ -86,7 +86,7 @@ export const genCellValue = (colType: TAVCol, value: string | {
                     }
                 };
             }
-        } else if (["text", "block", "url"].includes(colType)) {
+        } else if (["text", "block", "url", "phone", "email"].includes(colType)) {
             cellValue = {
                 type: colType,
                 [colType]: {
@@ -348,7 +348,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
     let html = "";
     const style = `style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px;width:${Math.max(cellRect.width, 200)}px;height: ${cellRect.height}px"`;
     const blockElement = hasClosestBlock(cellElements[0]);
-    if (["text", "url"].includes(type)) {
+    if (["text", "url", "email", "phone"].includes(type)) {
         html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.textContent}</textarea>`;
     } else if (type === "number") {
         html = `<input type="number" value="${cellElements[0].textContent}" ${style} class="b3-text-field">`;

diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
@@ -229,6 +229,10 @@ export const getColIconByType = (type: TAVCol) => {
             return "iconCalendar";
         case "url":
             return "iconLink";
+        case "email":
+            return "iconEmail";
+        case "phone":
+            return "iconPhone";
     }
 };
 

diff --git a/app/src/protyle/render/av/filter.ts b/app/src/protyle/render/av/filter.ts
@@ -11,7 +11,7 @@ export const getDefaultOperatorByType = (type: TAVCol) => {
     if (type === "number" || type === "select") {
         return "=";
     }
-    if (["text", "mSelect", "url", "block"].includes(type)) {
+    if (["text", "mSelect", "url", "block", "email", "phone"].includes(type)) {
         return "Contains";
     }
 };
@@ -139,6 +139,8 @@ export const setFilter = (options: {
         case "block":
         case "text":
         case "url":
+        case "phone":
+        case "email":
             selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
 <option ${"!=" === options.filter.operator ? "selected" : ""} value="!=">${window.siyuan.languages.filterOperatorIsNot}</option>
 <option ${"Contains" === options.filter.operator ? "selected" : ""} value="Contains">${window.siyuan.languages.filterOperatorContains}</option>
@@ -212,7 +214,7 @@ export const setFilter = (options: {
                 }
             });
         });
-    } else if (["text", "url", "block"].includes(colData.type)) {
+    } else if (["text", "url", "block", "email", "phone"].includes(colData.type)) {
         menu.addItem({
             iconHTML: "",
             label: `<input style="margin: 4px 0" value="${options.filter.value ? options.filter.value[colData.type as "text"].content : ""}" class="b3-text-field fn__size200">`
@@ -388,8 +390,10 @@ export const getFiltersHTML = (data: IAVTable) => {
                     } else if ("<=" === filter.operator) {
                         filterValue = ` ≤ ${filter.value.number.content}`;
                     }
-                } else if (filter.value?.text?.content || filter.value?.block?.content || filter.value?.url?.content) {
-                    const content = filter.value?.text?.content || filter.value?.block?.content || filter.value?.url?.content;
+                } else if (filter.value?.text?.content || filter.value?.block?.content || filter.value?.url?.content ||
+                    filter.value?.phone?.content || filter.value?.email?.content) {
+                    const content = filter.value?.text?.content || filter.value?.block?.content ||
+                        filter.value?.url?.content || filter.value?.phone?.content || filter.value?.email?.content;
                     if (["=", "Contains"].includes(filter.operator)) {
                         filterValue = `: ${content}`;
                     } else if (filter.operator === "Does not contains") {

diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
@@ -68,10 +68,10 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                         let text = "";
                         if (cell.valueType === "text") {
                             text = `<span class="av__celltext">${cell.value?.text.content || ""}</span>`;
-                        } else if (cell.valueType === "url") {
-                            text = `<span class="av__celltext av__celltext--url">${cell.value?.url.content || ""}</span>`;
-                            if (cell.value?.url.content) {
-                                text += `<span class="b3-chip b3-chip--info b3-chip--small" data-type="a" data-href="${cell.value.url.content}">${window.siyuan.languages.openBy}</span>`;
+                        } else if (["url", "email", "phone"].includes(cell.valueType)) {
+                            text = `<span class="av__celltext av__celltext--url" data-type="${cell.valueType}">${cell.value ? cell.value[cell.valueType as "url"].content : ""}</span>`;
+                            if (cell.value && cell.value[cell.valueType as "url"].content) {
+                                text += `<span data-type="copy" class="b3-tooltips b3-tooltips__n block__icon" aria-label="${window.siyuan.languages.copy}"><svg><use xlink:href="#iconCopy"></use></svg></span>`;
                             }
                         } else if (cell.valueType === "block") {
                             text = `<span class="av__celltext">${cell.value?.block.content || ""}</span>`;
@@ -235,6 +235,16 @@ const genAVValueHTML = (value: IAVCellValue) => {
 <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">
+<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;
+        case "email":
+            html = `<input value="${value.email.content}" class="b3-text-field b3-text-field--text fn__flex-1">
+<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;
     }
     return html;
 };
@@ -266,7 +276,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string) => {
     </div>
     <div data-av-id="${table.avID}" data-key-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)) : "[]"}"
-class="fn__flex-1 fn__flex${["url", "text", "number"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
+class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
         ${genAVValueHTML(item.values[0])}
     </div>
 </div>`;
@@ -436,15 +446,9 @@ class="fn__flex-1 fn__flex${["url", "text", "number"].includes(item.values[0].ty
         element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => {
             item.addEventListener("change", () => {
                 let value;
-                if (item.parentElement.dataset.type === "url") {
-                    value = {
-                        url: {
-                            content: item.value
-                        }
-                    };
-                } else if (item.parentElement.dataset.type === "text") {
+                if (["url", "text", "email", "phone"].includes(item.parentElement.dataset.type)) {
                     value = {
-                        text: {
+                        [item.parentElement.dataset.type]: {
                             content: item.value
                         }
                     };

diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
@@ -45,7 +45,18 @@ type TEventBus = "ws-main" |
     "open-menu-av" | "open-menu-content" | "open-menu-breadcrumbmore" |
     "input-search" |
     "loaded-protyle"
-type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block" | "mSelect" | "url"
+type TAVCol =
+    "text"
+    | "date"
+    | "number"
+    | "relation"
+    | "rollup"
+    | "select"
+    | "block"
+    | "mSelect"
+    | "url"
+    | "email"
+    | "phone"
 type THintSource = "search" | "av" | "hint";
 type TAVFilterOperator =
     "="
@@ -932,6 +943,8 @@ interface IAVCellValue {
     mSelect?: { content: string, color: string }[]
     block?: { content: string, id?: string }
     url?: { content: string }
+    phone?: { content: string }
+    email?: { content: string }
     date?: IAVCellDateValue
 }