🎨 #8327

siyuan-note · May 22, 2023 · ca764d2 · ca764d2
1 parent 1bd1906
commit ca764d2
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 72 deletions.
diff --git a/app/src/layout/dock/Tag.ts b/app/src/layout/dock/Tag.ts
@@ -6,10 +6,9 @@ import {fetchPost} from "../../util/fetch";
 import {updateHotkeyTip} from "../../protyle/util/compatibility";
 import {openGlobalSearch} from "../../search/util";
 import {MenuItem} from "../../menus/Menu";
-import {confirmDialog} from "../../dialog/confirmDialog";
-import {escapeHtml} from "../../util/escape";
-import {renameTag} from "../../util/noRelyPCFunction";
 import {App} from "../../index";
+import {openTagMenu} from "../../menus/tag";
+import {hasClosestByClassName} from "../../protyle/util/hasClosest";
 
 export class Tag extends Model {
     private openNodes: string[];
@@ -79,29 +78,22 @@ export class Tag extends Model {
         this.tree = new Tree({
             element: this.element.lastElementChild as HTMLElement,
             data: null,
-            click(element: HTMLElement) {
+            click(element: HTMLElement, event?: MouseEvent) {
+                const labelName = element.getAttribute("data-label");
+                if (event) {
+                    const actionElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item__action");
+                    if (actionElement) {
+                        openTagMenu(actionElement.parentElement, event, labelName);
+                        return;
+                    }
+                }
                 openGlobalSearch(app, `#${element.getAttribute("data-label")}#`, !window.siyuan.ctrlIsPressed);
             },
             rightClick: (element: HTMLElement, event: MouseEvent) => {
-                const labelName = element.getAttribute("data-label");
-                window.siyuan.menus.menu.remove();
-                window.siyuan.menus.menu.append(new MenuItem({
-                    label: window.siyuan.languages.rename,
-                    click() {
-                        renameTag(labelName);
-                    }
-                }).element);
-                window.siyuan.menus.menu.append(new MenuItem({
-                    icon: "iconTrashcan",
-                    label: window.siyuan.languages.remove,
-                    click: () => {
-                        confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} <b>${escapeHtml(labelName)}</b>?`, () => {
-                            fetchPost("/api/tag/removeTag", {label: labelName});
-                        });
-                    },
-                }).element);
-                window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
+                openTagMenu(element, event, element.getAttribute("data-label"))
             },
+            blockExtHTML: window.siyuan.config.readonly ? undefined : '<span class="b3-list-item__action"><svg><use xlink:href="#iconMore"></use></svg></span>',
+            topExtHTML: window.siyuan.config.readonly ? undefined : '<span class="b3-list-item__action"><svg><use xlink:href="#iconMore"></use></svg></span>'
         });
         // 为了快捷键的 dispatch
         this.element.querySelector('[data-type="collapse"]').addEventListener("click", () => {

diff --git a/app/src/menus/tag.ts b/app/src/menus/tag.ts
@@ -0,0 +1,33 @@
+import {MenuItem} from "./Menu";
+import {fetchPost} from "../util/fetch";
+import {confirmDialog} from "../dialog/confirmDialog";
+import {escapeHtml} from "../util/escape";
+import {renameTag} from "../util/noRelyPCFunction";
+
+export const openTagMenu = (element: HTMLElement, event: MouseEvent, labelName: string) => {
+    if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
+        window.siyuan.menus.menu.element.getAttribute("data-name") === "tagMenu") {
+        window.siyuan.menus.menu.remove();
+        return;
+    }
+    window.siyuan.menus.menu.remove();
+    window.siyuan.menus.menu.append(new MenuItem({
+        icon: "iconEdit",
+        label: window.siyuan.languages.rename,
+        click: () => {
+            renameTag(labelName);
+        }
+    }).element);
+    window.siyuan.menus.menu.append(new MenuItem({
+        icon: "iconTrashcan",
+        label: window.siyuan.languages.remove,
+        click: () => {
+            confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} <b>${escapeHtml(labelName)}</b>?`, () => {
+                fetchPost("/api/tag/removeTag", {label: labelName});
+            });
+        }
+    }).element);
+    window.siyuan.menus.menu.element.setAttribute("data-name", "tagMenu");
+    window.siyuan.menus.menu.element.style.zIndex = "221";  // 移动端被右侧栏遮挡
+    window.siyuan.menus.menu.popup({x: event.clientX - 11, y: event.clientY + 11, h: 22, w: 12});
+};
diff --git a/app/src/mobile/dock/MobileTags.ts b/app/src/mobile/dock/MobileTags.ts
@@ -2,12 +2,10 @@ import {Tree} from "../../util/Tree";
 import {fetchPost} from "../../util/fetch";
 import {hasClosestByClassName} from "../../protyle/util/hasClosest";
 import {MenuItem} from "../../menus/Menu";
-import {Dialog} from "../../dialog";
-import {confirmDialog} from "../../dialog/confirmDialog";
-import {escapeHtml} from "../../util/escape";
 import {popSearch} from "../menu/search";
 import {Constants} from "../../constants";
 import {App} from "../../index";
+import {openTagMenu} from "../../menus/tag";
 
 export class MobileTags {
     public element: HTMLElement;
@@ -34,56 +32,32 @@ export class MobileTags {
         this.tree = new Tree({
             element: this.element.querySelector(".tagList") as HTMLElement,
             data: null,
-            click: (element: HTMLElement) => {
-                const actionElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item__action");
-                if (actionElement) {
-                    const labelName = element.getAttribute("data-label");
-                    if (actionElement.getAttribute("data-type") === "edit") {
-                        const dialog = new Dialog({
-                            title: window.siyuan.languages.rename,
-                            content: `<div class="b3-dialog__content"><input class="b3-text-field fn__block" value="${labelName}"></div>
-<div class="b3-dialog__action">
-    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
-    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
-</div>`,
-                            width: "92vw",
-                        });
-                        const btnsElement = dialog.element.querySelectorAll(".b3-button");
-                        btnsElement[0].addEventListener("click", () => {
-                            dialog.destroy();
-                        });
-                        const inputElement = dialog.element.querySelector("input");
-                        dialog.bindInput(inputElement, () => {
-                            (btnsElement[1] as HTMLButtonElement).click();
-                        });
-                        inputElement.focus();
-                        inputElement.select();
-                        btnsElement[1].addEventListener("click", () => {
-                            fetchPost("/api/tag/renameTag", {oldLabel: labelName, newLabel: inputElement.value});
-                        });
-                    } else {
-                        confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} <b>${escapeHtml(labelName)}</b>?`, () => {
-                            fetchPost("/api/tag/removeTag", {label: labelName});
-                        });
+            click: (element: HTMLElement, event?: MouseEvent) => {
+                const labelName = element.getAttribute("data-label");
+                if (event) {
+                    const actionElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item__action");
+                    if (actionElement) {
+                        openTagMenu(actionElement.parentElement, event, labelName);
+                        return;
                     }
-                } else {
-                    const searchOption = window.siyuan.storage[Constants.LOCAL_SEARCHDATA];
-                    popSearch(app, {
-                        removed: searchOption.removed,
-                        sort: searchOption.sort,
-                        group: searchOption.group,
-                        hasReplace: false,
-                        method: 0,
-                        hPath: "",
-                        idPath: [],
-                        k: `#${element.getAttribute("data-label")}#`,
-                        r: "",
-                        page: 1,
-                        types: Object.assign({}, searchOption.types)
-                    });
                 }
+                const searchOption = window.siyuan.storage[Constants.LOCAL_SEARCHDATA];
+                popSearch(app, {
+                    removed: searchOption.removed,
+                    sort: searchOption.sort,
+                    group: searchOption.group,
+                    hasReplace: false,
+                    method: 0,
+                    hPath: "",
+                    idPath: [],
+                    k: `#${labelName}#`,
+                    r: "",
+                    page: 1,
+                    types: Object.assign({}, searchOption.types)
+                });
             },
-            topExtHTML: window.siyuan.config.readonly ? undefined : '<span class="b3-list-item__action" data-type="edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="b3-list-item__action" data-type="remove"><svg><use xlink:href="#iconTrashcan"></use></svg></span>'
+            blockExtHTML: window.siyuan.config.readonly ? undefined : '<span class="b3-list-item__action"><svg><use xlink:href="#iconMore"></use></svg></span>',
+            topExtHTML: window.siyuan.config.readonly ? undefined : '<span class="b3-list-item__action"><svg><use xlink:href="#iconMore"></use></svg></span>'
         });
         this.element.addEventListener("click", (event) => {
             let target = event.target as HTMLElement;