Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-23 18:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 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
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; width: 8px;
display: inline-block; display: inline-block;
flex-shrink: 0; flex-shrink: 0;
&--small {
width: 4px;
display: inline-block;
flex-shrink: 0;
}
} }
&__hr { &__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 {getDisplayName, movePathTo, pathPosix} from "../../util/pathName";
import {App} from "../../index"; import {App} from "../../index";
import {getCloudURL} from "../../config/util/about"; import {getCloudURL} from "../../config/util/about";
import {hasClosestByClassName} from "../../protyle/util/hasClosest";
import {escapeHtml} from "../../util/escape";
export class Inbox extends Model { export class Inbox extends Model {
private element: Element; private element: Element;
@ -38,7 +40,7 @@ export class Inbox extends Model {
</div> </div>
<span class="fn__flex-1"></span> <span class="fn__flex-1"></span>
<span class="fn__space"></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="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="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> <svg data-type="more" class="toolbar__icon"><use xlink:href='#iconMore'></use></svg>
@ -58,15 +60,15 @@ export class Inbox extends Model {
</div> </div>
<span class="fn__flex-1"></span> <span class="fn__flex-1"></span>
<span class="fn__space"></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 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 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 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 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>
<div class="fn__loading fn__none"> <div class="fn__loading fn__none">
<img width="64px" src="/stage/loading-pure.svg"></div> <img width="64px" src="/stage/loading-pure.svg"></div>
@ -76,7 +78,13 @@ export class Inbox extends Model {
/// #endif /// #endif
const countElement = this.element.querySelector(".inboxSelectCount"); const countElement = this.element.querySelector(".inboxSelectCount");
const detailsElement = this.element.querySelector(".inboxDetails"); 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) => { this.element.addEventListener("click", (event: MouseEvent) => {
/// #if !MOBILE /// #if !MOBILE
setPanelFocus(this.element); setPanelFocus(this.element);
@ -93,31 +101,37 @@ export class Inbox extends Model {
event.preventDefault(); event.preventDefault();
break; break;
} else if (type === "selectall") { } 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 => { 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.push(item.getAttribute("data-id"));
this.selectIds = [...new Set(this.selectIds)]; this.selectIds = [...new Set(this.selectIds)];
}); });
useElement.setAttribute("xlink:href", "#iconCheck")
} else { } else {
this.element.lastElementChild.querySelectorAll(".b3-list-item").forEach(item => { 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); 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()}`; countElement.innerHTML = `${this.selectIds.length.toString()}/${this.pageCount.toString()}`;
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "select") { } 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.push(target.parentElement.getAttribute("data-id"));
this.selectIds = [...new Set(this.selectIds)]; this.selectIds = [...new Set(this.selectIds)];
useElement.setAttribute("xlink:href", "#iconCheck")
} else { } else {
this.selectIds.splice(this.selectIds.indexOf(target.parentElement.getAttribute("data-id")), 1); 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()}`; 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(); window.siyuan.menus.menu.remove();
event.stopPropagation(); event.stopPropagation();
break; break;
@ -164,7 +178,7 @@ export class Inbox extends Model {
} }
private back() { 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="previous"]').classList.remove("fn__none");
this.element.firstElementChild.querySelector('[data-type="next"]').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.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> <svg class="toolbar__icon" style="float: left"><use xlink:href="#iconLink"></use></svg>
</a>`; </a>`;
} }
return `<div class="toolbar toolbar--dark"> return `<div class="toolbar">
<svg data-type="back" class="toolbar__icon"><use xlink:href="#iconLeft"></use></svg> <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> <span data-type="back" class="toolbar__text fn__flex-1">${data.shorthandTitle}</span>
${linkHTML} ${linkHTML}
@ -205,20 +219,39 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
/// #endif /// #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"); const detailsElement = this.element.querySelector(".inboxDetails");
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.refresh, label: window.siyuan.languages.refresh,
icon: "iconRefresh", icon: "iconRefresh",
click: () => { 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.currentPage = 1;
this.update(); this.update();
} else { } else {
fetchPost("/api/inbox/getShorthand", { fetchPost("/api/inbox/getShorthand", {
id: detailsElement.getAttribute("data-id") id: detailsElement.getAttribute("data-id")
}, (response) => { }, (response) => {
this.data[response.data.oId] = response.data;
detailsElement.innerHTML = this.genDetail(response.data); detailsElement.innerHTML = this.genDetail(response.data);
detailsElement.scrollTop = 0; detailsElement.scrollTop = 0;
}); });
@ -226,7 +259,9 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
} }
}).element); }).element);
let ids: string[] = []; 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; ids = this.selectIds;
} else { } else {
ids = [detailsElement.getAttribute("data-id")]; ids = [detailsElement.getAttribute("data-id")];
@ -243,8 +278,14 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
label: window.siyuan.languages.remove, label: window.siyuan.languages.remove,
icon: "iconTrashcan", icon: "iconTrashcan",
click: () => { click: () => {
confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete + "?", () => { let removeTitle = ""
if (detailsElement.classList.contains("fn__none")) { 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(); this.remove();
} else { } else {
this.remove(detailsElement.getAttribute("data-id")); this.remove(detailsElement.getAttribute("data-id"));
@ -253,7 +294,6 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
} }
}).element); }).element);
} }
window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16}); 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", { fetchPost("/api/inbox/getShorthand", {
id: item id: item
}, (response) => { }, (response) => {
this.data[response.data.oId] = response.data;
fetchPost("/api/filetree/createDoc", { fetchPost("/api/filetree/createDoc", {
notebook: toNotebook[0], notebook: toNotebook[0],
path: pathPosix().join(getDisplayName(toPath[0], false, true), Lute.NewNodeID() + ".sy"), path: pathPosix().join(getDisplayName(toPath[0], false, true), Lute.NewNodeID() + ".sy"),
@ -327,15 +368,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
} else { } else {
html = '<ul style="padding: 8px 0" class="b3-list b3-list--background">'; html = '<ul style="padding: 8px 0" class="b3-list b3-list--background">';
response.data.data.shorthands.forEach((item: IInbox) => { response.data.data.shorthands.forEach((item: IInbox) => {
html += `<li style="padding-left: 0" data-id="${item.oId}" class="b3-list-item"> html += this.genItemHTML(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>`;
this.data[item.oId] = item; this.data[item.oId] = item;
}); });
html += "</ul>"; html += "</ul>";
@ -358,7 +391,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
previousElement.removeAttribute("disabled"); previousElement.removeAttribute("disabled");
} }
const selectCount = this.element.lastElementChild.querySelectorAll(".b3-list-item").length; 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; this.element.lastElementChild.scrollTop = 0;
}); });
} }