diff --git a/app/src/assets/scss/util/_function.scss b/app/src/assets/scss/util/_function.scss index 29f33aa2d..0f51b13e1 100644 --- a/app/src/assets/scss/util/_function.scss +++ b/app/src/assets/scss/util/_function.scss @@ -12,6 +12,12 @@ width: 8px; display: inline-block; flex-shrink: 0; + + &--small { + width: 4px; + display: inline-block; + flex-shrink: 0; + } } &__hr { diff --git a/app/src/layout/dock/Inbox.ts b/app/src/layout/dock/Inbox.ts index 1c75cd880..633656da1 100644 --- a/app/src/layout/dock/Inbox.ts +++ b/app/src/layout/dock/Inbox.ts @@ -13,6 +13,8 @@ import {replaceFileName} from "../../editor/rename"; import {getDisplayName, movePathTo, pathPosix} from "../../util/pathName"; import {App} from "../../index"; import {getCloudURL} from "../../config/util/about"; +import {hasClosestByClassName} from "../../protyle/util/hasClosest"; +import {escapeHtml} from "../../util/escape"; export class Inbox extends Model { private element: Element; @@ -38,7 +40,7 @@ export class Inbox extends Model { - + @@ -58,15 +60,15 @@ export class Inbox extends Model { - + - + - + - + - +
@@ -76,7 +78,13 @@ export class Inbox extends Model { /// #endif const countElement = this.element.querySelector(".inboxSelectCount"); const detailsElement = this.element.querySelector(".inboxDetails"); - const selectAllElement = this.element.firstElementChild.querySelector("input"); + const selectAllElement = this.element.firstElementChild.querySelector('[data-type="selectall"]'); + this.element.lastElementChild.addEventListener("contextmenu", (event: MouseEvent) => { + const itemElement = hasClosestByClassName(event.target as Element, "b3-list-item") + if (itemElement) { + this.more(event, itemElement); + } + }) this.element.addEventListener("click", (event: MouseEvent) => { /// #if !MOBILE setPanelFocus(this.element); @@ -93,31 +101,37 @@ export class Inbox extends Model { event.preventDefault(); break; } else if (type === "selectall") { - if ((target as HTMLInputElement).checked) { + const useElement = target.querySelector("use") + if (useElement.getAttribute("xlink:href") === "#iconUncheck") { this.element.lastElementChild.querySelectorAll(".b3-list-item").forEach(item => { - item.querySelector("input").checked = true; + item.querySelector("use").setAttribute("xlink:href", "#iconCheck") this.selectIds.push(item.getAttribute("data-id")); this.selectIds = [...new Set(this.selectIds)]; }); + useElement.setAttribute("xlink:href", "#iconCheck") } else { this.element.lastElementChild.querySelectorAll(".b3-list-item").forEach(item => { - item.querySelector("input").checked = false; + item.querySelector("use").setAttribute("xlink:href", "#iconUncheck") this.selectIds.splice(this.selectIds.indexOf(item.getAttribute("data-id")), 1); }); + useElement.setAttribute("xlink:href", "#iconUncheck") } countElement.innerHTML = `${this.selectIds.length.toString()}/${this.pageCount.toString()}`; window.siyuan.menus.menu.remove(); event.stopPropagation(); break; } else if (type === "select") { - if ((target.firstElementChild.nextElementSibling as HTMLInputElement).checked) { + const useElement = target.querySelector("use") + if (useElement.getAttribute("xlink:href") === "#iconUncheck") { this.selectIds.push(target.parentElement.getAttribute("data-id")); this.selectIds = [...new Set(this.selectIds)]; + useElement.setAttribute("xlink:href", "#iconCheck") } else { this.selectIds.splice(this.selectIds.indexOf(target.parentElement.getAttribute("data-id")), 1); + useElement.setAttribute("xlink:href", "#iconUncheck") } 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; + selectAllElement.querySelector("use").setAttribute("xlink:href", this.element.lastElementChild.querySelectorAll('[*|href="#iconCheck"]').length === this.element.lastElementChild.querySelectorAll(".b3-list-item").length ? "#iconCheck" : "#iconUncheck"); window.siyuan.menus.menu.remove(); event.stopPropagation(); break; @@ -164,7 +178,7 @@ export class Inbox extends Model { } private back() { - this.element.firstElementChild.querySelector("input").classList.remove("fn__none"); + this.element.firstElementChild.querySelector('[data-type="selectall"]').classList.remove("fn__none"); this.element.firstElementChild.querySelector('[data-type="previous"]').classList.remove("fn__none"); this.element.firstElementChild.querySelector('[data-type="next"]').classList.remove("fn__none"); this.element.querySelector(".inboxDetails").classList.add("fn__none"); @@ -179,7 +193,7 @@ export class Inbox extends Model { `; } - return `
+ return `
${data.shorthandTitle} ${linkHTML} @@ -205,20 +219,39 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} /// #endif } - private more(event: MouseEvent) { + private genItemHTML(item: IInbox) { + return `
  • + + + + + ${item.shorthandTitle} + ${item.hCreated} +
    • ` + } + + private more(event: MouseEvent, itemElement?: HTMLElement) { const detailsElement = this.element.querySelector(".inboxDetails"); window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.append(new MenuItem({ label: window.siyuan.languages.refresh, icon: "iconRefresh", click: () => { - if (detailsElement.classList.contains("fn__none")) { + if (itemElement) { + fetchPost("/api/inbox/getShorthand", { + id: itemElement.dataset.id + }, (response) => { + this.data[response.data.oId] = response.data; + itemElement.outerHTML = this.genItemHTML(response.data); + }); + } else if (detailsElement.classList.contains("fn__none")) { this.currentPage = 1; this.update(); } else { fetchPost("/api/inbox/getShorthand", { id: detailsElement.getAttribute("data-id") }, (response) => { + this.data[response.data.oId] = response.data; detailsElement.innerHTML = this.genDetail(response.data); detailsElement.scrollTop = 0; }); @@ -226,7 +259,9 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} } }).element); let ids: string[] = []; - if (detailsElement.classList.contains("fn__none")) { + if (itemElement) { + ids = [itemElement.dataset.id]; + } else if (detailsElement.classList.contains("fn__none")) { ids = this.selectIds; } else { ids = [detailsElement.getAttribute("data-id")]; @@ -243,8 +278,14 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} label: window.siyuan.languages.remove, icon: "iconTrashcan", click: () => { - confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete + "?", () => { - if (detailsElement.classList.contains("fn__none")) { + let removeTitle = "" + ids.forEach((id, index) => { + removeTitle += "" + escapeHtml(this.data[id].shorthandTitle) + "" + (index === ids.length - 1 ? "" : "，") + }) + confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} ${removeTitle}？`, () => { + if (itemElement) { + this.remove(itemElement.dataset.id); + } else if (detailsElement.classList.contains("fn__none")) { this.remove(); } else { this.remove(detailsElement.getAttribute("data-id")); @@ -253,7 +294,6 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} } }).element); } - window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16}); } @@ -287,6 +327,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} fetchPost("/api/inbox/getShorthand", { id: item }, (response) => { + this.data[response.data.oId] = response.data; fetchPost("/api/filetree/createDoc", { notebook: toNotebook[0], path: pathPosix().join(getDisplayName(toPath[0], false, true), Lute.NewNodeID() + ".sy"), @@ -327,15 +368,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} } else { html = '"; @@ -358,7 +391,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} previousElement.removeAttribute("disabled"); } 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.firstElementChild.querySelector('[data-type="selectall"] use').setAttribute("xlink:href", (this.element.lastElementChild.querySelectorAll('[*|href="#iconCheck"]').length === selectCount && selectCount !== 0) ? "#iconCheck" : "#iconUncheck"); this.element.lastElementChild.scrollTop = 0; }); }