From 4174537390f9a47273142864e0de0350853bda74 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 21 Apr 2023 23:21:21 +0800 Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/8070 --- app/src/assets/scss/base.scss | 22 --- app/src/layout/dock/Inbox.ts | 244 ++++++++++++++++++---------------- 2 files changed, 131 insertions(+), 135 deletions(-) diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index aa0d78c9c..2f3b26277 100644 --- a/app/src/assets/scss/base.scss +++ b/app/src/assets/scss/base.scss @@ -83,28 +83,6 @@ html { left: 0; } -.inbox { - &__details { - position: absolute; - background: var(--b3-theme-surface); - left: 0; - top: 30px; - bottom: 0; - overflow: auto; - z-index: 1; - right: 0; - padding: 4px 8px; - word-break: break-all; - user-select: text; - } - - &__list { - label { - height: 28px; - } - } -} - .fullscreen { position: fixed; top: 0; diff --git a/app/src/layout/dock/Inbox.ts b/app/src/layout/dock/Inbox.ts index 018a4c3eb..a5445998a 100644 --- a/app/src/layout/dock/Inbox.ts +++ b/app/src/layout/dock/Inbox.ts @@ -7,7 +7,6 @@ import {updateHotkeyTip} from "../../protyle/util/compatibility"; import {Model} from "../Model"; import {needSubscribe} from "../../util/needSubscribe"; import {MenuItem} from "../../menus/Menu"; -import {hasClosestByAttribute, hasClosestByClassName} from "../../protyle/util/hasClosest"; import {confirmDialog} from "../../dialog/confirmDialog"; import {replaceFileName} from "../../editor/rename"; import {escapeHtml} from "../../util/escape"; @@ -53,8 +52,8 @@ export class Inbox extends Model { -
-
`; +
+
`; /// #else this.element.classList.add("fn__flex-column", "file-tree", "sy__inbox"); this.element.innerHTML = `
@@ -87,117 +86,132 @@ export class Inbox extends Model {
-
-
`; +
+
`; /// #endif const countElement = this.element.querySelector(".inboxSelectCount"); - const detailsElement = this.element.querySelector(".inbox__details"); - const selectAllElement = this.element.querySelector(".block__icons input") as HTMLInputElement; + const detailsElement = this.element.querySelector(".inboxDetails"); + const selectAllElement = this.element.firstElementChild.querySelector("input"); this.element.addEventListener("click", (event: MouseEvent) => { - /// #if !MOBILE - setPanelFocus(this.element); - /// #endif - let target = event.target as HTMLElement; - while (target && !target.isEqualNode(this.element)) { - const typeElement = hasClosestByAttribute(target, "data-type", null); - if (typeElement && this.element.contains(typeElement)) { - const type = typeElement.getAttribute("data-type"); - switch (type) { - case "min": - getDockByType("inbox").toggleModel("inbox"); - break; - case "selectall": - if ((typeElement as HTMLInputElement).checked) { - this.element.lastElementChild.querySelectorAll(".b3-list-item").forEach(item => { - item.querySelector("input").checked = true; - this.selectIds.push(item.getAttribute("data-id")); - this.selectIds = [...new Set(this.selectIds)]; - }); - } else { - this.element.lastElementChild.querySelectorAll(".b3-list-item").forEach(item => { - item.querySelector("input").checked = false; - this.selectIds.splice(this.selectIds.indexOf(item.getAttribute("data-id")), 1); - }); - } - this.updateAction(); - countElement.innerHTML = `${this.selectIds.length.toString()}/${this.pageCount.toString()}`; - break; - case "select": - if ((typeElement.firstElementChild.nextElementSibling as HTMLInputElement).checked) { - this.selectIds.push(typeElement.parentElement.getAttribute("data-id")); - this.selectIds = [...new Set(this.selectIds)]; - } else { - this.selectIds.splice(this.selectIds.indexOf(typeElement.parentElement.getAttribute("data-id")), 1); - } - this.updateAction(); - countElement.innerHTML = `${this.selectIds.length.toString()}/${this.pageCount.toString()}`; - selectAllElement.checked = this.element.lastElementChild.querySelectorAll("input:checked").length === this.element.lastElementChild.querySelectorAll(".b3-list-item").length; - break; - case "previous": - if (typeElement.getAttribute("disabled") !== "disabled") { - this.currentPage--; - this.update(); - } - break; - case "next": - if (typeElement.getAttribute("disabled") !== "disabled") { - this.currentPage++; - this.update(); - } - break; - case "refresh": - this.currentPage = 1; - this.update(); - break; - case "refreshDetails": - fetchPost("/api/inbox/getShorthand", { - id: detailsElement.getAttribute("data-id") - }, (response) => { - detailsElement.innerHTML = `

${response.data.shorthandTitle}

+ /// #if !MOBILE + setPanelFocus(this.element); + /// #endif + let target = event.target as HTMLElement; + while (target && !target.isEqualNode(this.element)) { + const type = target.getAttribute("data-type"); + if (type === "min") { + getDockByType("inbox").toggleModel("inbox"); + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "selectall") { + console.log((target as HTMLInputElement).checked) + if ((target as HTMLInputElement).checked) { + this.element.lastElementChild.querySelectorAll(".b3-list-item").forEach(item => { + item.querySelector("input").checked = true; + this.selectIds.push(item.getAttribute("data-id")); + this.selectIds = [...new Set(this.selectIds)]; + }); + } else { + this.element.lastElementChild.querySelectorAll(".b3-list-item").forEach(item => { + item.querySelector("input").checked = false; + this.selectIds.splice(this.selectIds.indexOf(item.getAttribute("data-id")), 1); + }); + } + this.updateAction(); + countElement.innerHTML = `${this.selectIds.length.toString()}/${this.pageCount.toString()}`; + event.stopPropagation(); + break; + } else if (type === "select") { + if ((target.firstElementChild.nextElementSibling as HTMLInputElement).checked) { + this.selectIds.push(target.parentElement.getAttribute("data-id")); + this.selectIds = [...new Set(this.selectIds)]; + } else { + this.selectIds.splice(this.selectIds.indexOf(target.parentElement.getAttribute("data-id")), 1); + } + this.updateAction(); + countElement.innerHTML = `${this.selectIds.length.toString()}/${this.pageCount.toString()}`; + selectAllElement.checked = this.element.lastElementChild.querySelectorAll("input:checked").length === this.element.lastElementChild.querySelectorAll(".b3-list-item").length; + event.stopPropagation(); + break; + } else if (type === "previous") { + if (target.getAttribute("disabled") !== "disabled") { + this.currentPage--; + this.update(); + } + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "next") { + if (target.getAttribute("disabled") !== "disabled") { + this.currentPage++; + this.update(); + } + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "refresh") { + this.currentPage = 1; + this.update(); + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "back") { + this.back(); + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "more") { + this.more(event); + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "refreshDetails") { + fetchPost("/api/inbox/getShorthand", { + id: detailsElement.getAttribute("data-id") + }, (response) => { + detailsElement.innerHTML = `

${response.data.shorthandTitle}

${response.data.shorthandURL}
${(Lute.New()).MarkdownStr("", response.data.shorthandContent)}
`; - detailsElement.scrollTop = 0; - }); - break; - case "delete": - confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete + "?", () => { - this.remove(detailsElement.getAttribute("data-id")); - }); - break; - case "move": - window.siyuan.menus.menu.remove(); - window.siyuan.notebooks.forEach((item) => { - if (!item.closed) { - window.siyuan.menus.menu.append(new MenuItem({ - iconHTML: `${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_NOTE, false, "b3-menu__icon", true)}`, - label: escapeHtml(item.name), - click: () => { - this.move(item.id, detailsElement.getAttribute("data-id")); - } - }).element); - } - }); - window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); - break; - case "back": - this.back(); - break; - case "more": - this.more(event); - break; + detailsElement.scrollTop = 0; + }); + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "delete") { + confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete + "?", () => { + this.remove(detailsElement.getAttribute("data-id")); + }); + event.stopPropagation(); + event.preventDefault(); + break; + } else if (type === "move") { + window.siyuan.menus.menu.remove(); + window.siyuan.notebooks.forEach((item) => { + if (!item.closed) { + window.siyuan.menus.menu.append(new MenuItem({ + iconHTML: `${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_NOTE, false, "b3-menu__icon", true)}`, + label: escapeHtml(item.name), + click: () => { + this.move(item.id, detailsElement.getAttribute("data-id")); + } + }).element); } - break; - } else { - const itemElement = hasClosestByClassName(target, "b3-list-item"); - if (itemElement) { - const data = this.data[itemElement.getAttribute("data-id")]; - this.element.querySelector('[data-type="back"]').parentElement.classList.remove("fn__none"); - this.element.querySelector('[data-type="more"]').parentElement.classList.add("fn__none"); - detailsElement.innerHTML = `

+ }); + window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); + window.siyuan.menus.menu.element.style.zIndex = "221"; // 移动端被右侧栏遮挡 + event.stopPropagation(); + event.preventDefault(); + break; + } else if (target.classList.contains("b3-list-item")) { + const data = this.data[target.getAttribute("data-id")]; + this.element.querySelector('[data-type="back"]').parentElement.classList.remove("fn__none"); + this.element.querySelector('[data-type="more"]').parentElement.classList.add("fn__none"); + detailsElement.innerHTML = `

${data.shorthandTitle}

@@ -206,16 +220,17 @@ ${data.shorthandTitle}
${(Lute.New()).MarkdownStr("", data.shorthandContent)}
`; - detailsElement.setAttribute("data-id", data.oId); - detailsElement.classList.remove("fn__none"); - detailsElement.scrollTop = 0; - break; - } - } - target = target.parentElement; + detailsElement.setAttribute("data-id", data.oId); + detailsElement.classList.remove("fn__none"); + detailsElement.scrollTop = 0; + this.element.lastElementChild.classList.add("fn__none"); + event.stopPropagation(); + event.preventDefault(); + break; } + target = target.parentElement; } - ); + }); this.update(); /// #if !MOBILE setPanelFocus(this.element); @@ -235,7 +250,8 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} private back() { this.element.querySelector('[data-type="back"]').parentElement.classList.add("fn__none"); this.element.querySelector('[data-type="more"]').parentElement.classList.remove("fn__none"); - this.element.querySelector(".inbox__details").classList.add("fn__none"); + this.element.querySelector(".inboxDetails").classList.add("fn__none"); + this.element.lastElementChild.classList.remove("fn__none"); } private more(event: MouseEvent) { @@ -275,6 +291,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} } }).element); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); + window.siyuan.menus.menu.element.style.zIndex = "221"; // 移动端被右侧栏遮挡 } private remove(id?: string) { @@ -379,6 +396,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} } const selectCount = this.element.lastElementChild.querySelectorAll(".b3-list-item").length; this.element.firstElementChild.querySelector("input").checked = this.element.lastElementChild.querySelectorAll("input:checked").length === selectCount && selectCount !== 0; + this.element.lastElementChild.scrollTop = 0; }); } }