github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-15 16:41:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 https://github.com/siyuan-note/siyuan/issues/9776

Browse Source
This commit is contained in:
Vanessa 2023-11-29 10:32:15 +08:00
parent 84b7b0aa8b
commit fb65b99a0f
2 changed files with 69 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/assets/scss/util/_function.scss
View File

@ -12,6 +12,12 @@
width: 8px;
display: inline-block;
flex-shrink: 0;
&--small {
width: 4px;
display: inline-block;
flex-shrink: 0;
}
}
&__hr {

93
app/src/layout/dock/Inbox.ts
View File

@ -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 {
</div>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<input class="toolbar__icon" data-type="selectall" type="checkbox">
<span data-type="selectall" class="block__icon"><svg><use xlink:href="#iconUncheck"></use></svg></span>
<svg data-type="previous" disabled="disabled" class="toolbar__icon"><use xlink:href='#iconLeft'></use></svg>
<svg data-type="next" disabled="disabled" class="toolbar__icon"><use xlink:href='#iconRight'></use></svg>
<svg data-type="more" class="toolbar__icon"><use xlink:href='#iconMore'></use></svg>
@ -58,15 +60,15 @@ export class Inbox extends Model {
</div>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<input class="block__icon" data-type="selectall" type="checkbox">
<span data-type="selectall" class="block__icon"><svg><use xlink:href="#iconUncheck"></use></svg></span>
<span class="fn__space"></span>
<span data-type="previous" class="block__icon b3-tooltips b3-tooltips__w" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
<span data-type="previous" class="block__icon b3-tooltips b3-tooltips__w" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href="#iconLeft"></use></svg></span>
<span class="fn__space"></span>
<span data-type="next" class="block__icon b3-tooltips b3-tooltips__w" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
<span data-type="next" class="block__icon b3-tooltips b3-tooltips__w" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href="#iconRight"></use></svg></span>
<span class="fn__space"></span>
<span data-type="more" data-menu="true" class="block__icon b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href='#iconMore'></use></svg></span>
<span data-type="more" data-menu="true" class="block__icon b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href="#iconMore"></use></svg></span>
<span class="fn__space"></span>
<span data-type="min" class="block__icon b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
<span data-type="min" class="block__icon b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href="#iconMin"></use></svg></span>
</div>
<div class="fn__loading fn__none">
<img width="64px" src="/stage/loading-pure.svg"></div>
@ -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 {
<svg class="toolbar__icon" style="float: left"><use xlink:href="#iconLink"></use></svg>
</a>`;
}
return `<div class="toolbar toolbar--dark">
return `<div class="toolbar">
<svg data-type="back" class="toolbar__icon"><use xlink:href="#iconLeft"></use></svg>
<span data-type="back" class="toolbar__text fn__flex-1">${data.shorthandTitle}</span>
${linkHTML}
@ -205,20 +219,39 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
/// #endif
}
private more(event: MouseEvent) {
private genItemHTML(item: IInbox) {
return `<li style="padding-left: 0" data-id="${item.oId}" class="b3-list-item">
<span data-type="select" class="b3-list-item__action">
<svg><use xlink:href="#icon${this.selectIds.includes(item.oId) ? "Check" : "Uncheck"}"></use></svg>
</span>
<span class="fn__space--small"></span>
<span class="b3-list-item__text" title="${item.shorthandTitle}${item.shorthandTitle === item.shorthandDesc ? "" : "\n" + item.shorthandDesc}">${item.shorthandTitle}</span>
<span class="b3-list-item__meta">${item.hCreated}</span>
</li>`
}
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 += "<b>" + escapeHtml(this.data[id].shorthandTitle) + "</b>" + (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 = '<ul style="padding: 8px 0" class="b3-list b3-list--background">';
response.data.data.shorthands.forEach((item: IInbox) => {
html += `<li style="padding-left: 0" data-id="${item.oId}" class="b3-list-item">
<label data-type="select" class="fn__flex">
<span class="fn__space"></span>
<input class="fn__flex-center" type="checkbox"${this.selectIds.includes(item.oId) ? " checked" : ""}>
<span class="fn__space"></span>
</label>
<span class="b3-list-item__text" title="${item.shorthandTitle}${item.shorthandTitle === item.shorthandDesc ? "" : "\n" + item.shorthandDesc}">${item.shorthandTitle}</span>
<span class="b3-list-item__meta">${item.hCreated}</span>
</li>`;
html += this.genItemHTML(item);
this.data[item.oId] = item;
});
html += "</ul>";
@ -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;
});
}