From ca764d2b40e8f1d3baa0d266648aae315f630dbb Mon Sep 17 00:00:00 2001 From: Vanessa Date: Mon, 22 May 2023 22:00:42 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/8327 --- app/src/layout/dock/Tag.ts | 36 ++++++--------- app/src/menus/tag.ts | 33 ++++++++++++++ app/src/mobile/dock/MobileTags.ts | 74 ++++++++++--------------------- 3 files changed, 71 insertions(+), 72 deletions(-) create mode 100644 app/src/menus/tag.ts diff --git a/app/src/layout/dock/Tag.ts b/app/src/layout/dock/Tag.ts index 8be62e26a..fecac4edf 100644 --- 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} ${escapeHtml(labelName)}?`, () => { - 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 : '', + topExtHTML: window.siyuan.config.readonly ? undefined : '' }); // 为了快捷键的 dispatch this.element.querySelector('[data-type="collapse"]').addEventListener("click", () => { diff --git a/app/src/menus/tag.ts b/app/src/menus/tag.ts new file mode 100644 index 000000000..492a6d451 --- /dev/null +++ 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} ${escapeHtml(labelName)}?`, () => { + 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 index a70f0ad33..d489070a1 100644 --- 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: `
-
-
- -
`, - 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} ${escapeHtml(labelName)}?`, () => { - 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 : '' + blockExtHTML: window.siyuan.config.readonly ? undefined : '', + topExtHTML: window.siyuan.config.readonly ? undefined : '' }); this.element.addEventListener("click", (event) => { let target = event.target as HTMLElement;