From 91b23f0bb0b1432d08105f99013a40d82e56fa8f Mon Sep 17 00:00:00 2001 From: Vanessa Date: Thu, 3 Aug 2023 15:08:07 +0800 Subject: [PATCH] :sparkles: fix https://github.com/siyuan-note/siyuan/issues/8892 --- app/appearance/icons/ant/icon.js | 6 ++++ app/appearance/icons/ant/icon.json | 2 +- app/appearance/icons/index.html | 12 ++++++++ app/appearance/icons/material/icon.js | 6 ++++ app/appearance/icons/material/icon.json | 2 +- app/appearance/langs/en_US.json | 2 ++ app/appearance/langs/es_ES.json | 2 ++ app/appearance/langs/fr_FR.json | 2 ++ app/appearance/langs/zh_CHT.json | 2 ++ app/appearance/langs/zh_CN.json | 2 ++ app/src/assets/scss/business/_av.scss | 32 ++++++++++----------- app/src/protyle/render/av/action.ts | 25 ++++++++++++++++ app/src/protyle/render/av/addCol.ts | 38 ++++++++++++++++++++++++- app/src/protyle/render/av/cell.ts | 4 +-- app/src/protyle/render/av/col.ts | 4 +++ app/src/protyle/render/av/filter.ts | 12 +++++--- app/src/protyle/render/av/render.ts | 30 ++++++++++--------- app/src/types/index.d.ts | 15 +++++++++- 18 files changed, 159 insertions(+), 39 deletions(-) diff --git a/app/appearance/icons/ant/icon.js b/app/appearance/icons/ant/icon.js index cfa188888..3fdc3b39e 100644 --- a/app/appearance/icons/ant/icon.js +++ b/app/appearance/icons/ant/icon.js @@ -1,5 +1,11 @@ document.body.insertAdjacentHTML('afterbegin', ` + + + + + + diff --git a/app/appearance/icons/ant/icon.json b/app/appearance/icons/ant/icon.json index 4cf43600e..88633c17e 100644 --- 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 index e140709ed..aa0e31214 100644 --- a/app/appearance/icons/index.html +++ b/app/appearance/icons/index.html @@ -28,6 +28,18 @@

SiYuan

+
+ + + + iconPhone +
+
+ + + + iconEmail +
diff --git a/app/appearance/icons/material/icon.js b/app/appearance/icons/material/icon.js index 9f4811c6d..a0a35e8fb 100644 --- a/app/appearance/icons/material/icon.js +++ b/app/appearance/icons/material/icon.js @@ -1,5 +1,11 @@ document.body.insertAdjacentHTML('afterbegin', ` + + + + + + diff --git a/app/appearance/icons/material/icon.json b/app/appearance/icons/material/icon.json index b55b78a7d..a4db183bd 100644 --- 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 index 823d31256..494c85424 100644 --- 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 inbox 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 index 387e32591..1ee04610c 100644 --- 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 bandeja de entrada 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 index 417e34d83..8ca11c6ad 100644 --- 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 boîte de réception 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 index b9bd74889..afdd4f4e1 100644 --- a/app/appearance/langs/zh_CHT.json +++ b/app/appearance/langs/zh_CHT.json @@ -1,4 +1,6 @@ { + "email": "郵箱", + "phone": "電話", "inboxTip": "打開用戶指南搜索 收集箱 查看使用說明", "builtIn": "內置", "endDate": "結束日期", diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json index 2f3231ddb..f1d0c40e9 100644 --- a/app/appearance/langs/zh_CN.json +++ b/app/appearance/langs/zh_CN.json @@ -1,4 +1,6 @@ { + "email": "邮箱", + "phone": "电话", "inboxTip": "打开用户指南搜索 收集箱 查看使用说明", "builtIn": "内置", "endDate": "结束时间", diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 88668f1a5..2f5058dbe 100644 --- 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 index dcf2f8bff..b9b6590c0 100644 --- 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 index 071dc0510..9ca209545 100644 --- 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 index ebe52e55a..81bec4307 100644 --- 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 = ``; } else if (type === "number") { html = ``; diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index ecef77e2d..b4862fec8 100644 --- 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 index 4bb62cbd0..175841d17 100644 --- 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 = ` @@ -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: `` @@ -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 index 105913b9d..2b2602fd4 100644 --- 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) || '${cell.value?.text.content || ""}`; - } else if (cell.valueType === "url") { - text = `${cell.value?.url.content || ""}`; - if (cell.value?.url.content) { - text += `${window.siyuan.languages.openBy}`; + } else if (["url", "email", "phone"].includes(cell.valueType)) { + text = `${cell.value ? cell.value[cell.valueType as "url"].content : ""}`; + if (cell.value && cell.value[cell.valueType as "url"].content) { + text += ``; } } else if (cell.valueType === "block") { text = `${cell.value?.block.content || ""}`; @@ -235,6 +235,16 @@ const genAVValueHTML = (value: IAVCellValue) => { `; break; + case "phone": + html = ` + +`; + break; + case "email": + html = ` + +`; + break; } return html; }; @@ -266,7 +276,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string) => {
+class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}"> ${genAVValueHTML(item.values[0])}
`; @@ -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") { + if (["url", "text", "email", "phone"].includes(item.parentElement.dataset.type)) { value = { - url: { - content: item.value - } - }; - } else if (item.parentElement.dataset.type === "text") { - 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 index e80078cc1..6c5508234 100644 --- 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 }