diff --git a/app/src/assets/scss/business/_block.scss b/app/src/assets/scss/business/_block.scss index 07e40ca3c..19d763c15 100644 --- a/app/src/assets/scss/business/_block.scss +++ b/app/src/assets/scss/business/_block.scss @@ -134,7 +134,7 @@ padding: 0 8px; display: flex; align-items: center; - height: 42px; + min-height: 42px; flex-shrink: 0; &--menu { @@ -193,10 +193,10 @@ svg { height: 16px; width: 16px; - padding: 8px 4px 8px 0; + padding: 4px; + flex-shrink: 0; } - white-space: nowrap; margin-right: 8px; display: flex; align-items: center; diff --git a/app/src/layout/dock/Inbox.ts b/app/src/layout/dock/Inbox.ts index df698b0b1..f876890eb 100644 --- a/app/src/layout/dock/Inbox.ts +++ b/app/src/layout/dock/Inbox.ts @@ -38,21 +38,15 @@ export class Inbox extends Model { -
- - - - - -
-
- - - - -
+ + + + -
+
+
+ +
`; /// #else this.element.classList.add("fn__flex-column", "file-tree", "sy__inbox"); @@ -64,29 +58,20 @@ export class Inbox extends Model { -
- - - - - - - - -
-
- - - - - - - -
+ - + + + + + + + -
+
+
+ +
`; /// #endif const countElement = this.element.querySelector(".inboxSelectCount"); @@ -98,6 +83,10 @@ export class Inbox extends Model { /// #endif let target = event.target as HTMLElement; while (target && !target.isEqualNode(this.element)) { + if (target.tagName === "A") { + event.stopPropagation(); + break; + } const type = target.getAttribute("data-type"); if (type === "min") { getDockByType("inbox").toggleModel("inbox"); @@ -117,7 +106,6 @@ export class Inbox extends Model { 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; @@ -128,7 +116,6 @@ export class Inbox extends Model { } 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(); @@ -149,12 +136,6 @@ export class Inbox extends Model { 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(); @@ -165,60 +146,12 @@ export class Inbox extends Model { 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; - }); - 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); - } - }); - 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} -

-
-${data.shorthandURL} -
-
-${(Lute.New()).MarkdownStr("", data.shorthandContent)} -
`; + selectAllElement.classList.add("fn__none"); + this.element.firstElementChild.querySelector('[data-type="previous"]').classList.add("fn__none"); + this.element.firstElementChild.querySelector('[data-type="next"]').classList.add("fn__none"); + detailsElement.innerHTML = this.genDetail(data); detailsElement.setAttribute("data-id", data.oId); detailsElement.classList.remove("fn__none"); detailsElement.scrollTop = 0; @@ -236,31 +169,66 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} /// #endif } - private updateAction() { - if (this.selectIds.length === 0) { - this.element.querySelector('[data-type="refresh"]').classList.remove("fn__none"); - this.element.querySelector('[data-type="more"]').classList.add("fn__none"); - } else { - this.element.querySelector('[data-type="refresh"]').classList.add("fn__none"); - this.element.querySelector('[data-type="more"]').classList.remove("fn__none"); - } - } - 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.firstElementChild.querySelector("input").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"); this.element.lastElementChild.classList.remove("fn__none"); } + private genDetail(data:IInbox) { + let linkHTML = ""; + /// #if MOBILE + if (data.shorthandURL) { + linkHTML = ` + + `; + } + return `
+ + ${data.shorthandTitle} + ${linkHTML} +
+
+${(Lute.New()).MarkdownStr("", data.shorthandContent)} +
`; + /// #else + if (data.shorthandURL) { + linkHTML = ` + + `; + } + return `
+ + ${linkHTML} +
+
+${(Lute.New()).MarkdownStr("", data.shorthandContent)} +
`; + /// #endif + } + private more(event: MouseEvent) { + 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: () => { - this.currentPage = 1; - this.update(); + if (detailsElement.classList.contains("fn__none")) { + this.currentPage = 1; + this.update(); + } else { + fetchPost("/api/inbox/getShorthand", { + id: detailsElement.getAttribute("data-id") + }, (response) => { + detailsElement.innerHTML = this.genDetail(response.data); + detailsElement.scrollTop = 0; + }); + } } }).element); const submenu: IMenu[] = []; @@ -270,7 +238,11 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} iconHTML: `${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_NOTE, false, "b3-menu__icon", true)}`, label: escapeHtml(item.name), click: () => { - this.move(item.id); + if (detailsElement.classList.contains("fn__none")) { + this.move(item.id); + } else { + this.move(item.id, detailsElement.getAttribute("data-id")); + } } }); } @@ -285,7 +257,11 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} icon: "iconTrashcan", click: () => { confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete + "?", () => { - this.remove(); + if (detailsElement.classList.contains("fn__none")) { + this.remove(); + } else { + this.remove(detailsElement.getAttribute("data-id")); + } }); } }).element); @@ -312,7 +288,6 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} } else { this.selectIds = []; } - this.updateAction(); this.currentPage = 1; this.update(); }); @@ -339,6 +314,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} } private update() { + const loadingElement = this.element.querySelector(".fn__loading"); if (needSubscribe("")) { this.element.lastElementChild.innerHTML = ``; + loadingElement.classList.add("fn__none"); return; } - const refreshElement = this.element.querySelector(`[data-type="refresh"]${isMobile() ? "" : " svg"}`); - if (refreshElement.classList.contains("fn__rotate")) { + if (!loadingElement.classList.contains("fn__none")) { return; } - refreshElement.classList.add("fn__rotate"); + loadingElement.classList.remove("fn__none"); fetchPost("/api/inbox/getShorthands", {page: this.currentPage}, (response) => { - refreshElement.classList.remove("fn__rotate"); + loadingElement.classList.add("fn__none"); let html = ""; if (response.data.data.shorthands.length === 0) { html = '';