Skip to content

Commit

Permalink
🎨 fix #8070
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Apr 22, 2023
1 parent a006070 commit e2b433f
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 119 deletions.
6 changes: 3 additions & 3 deletions app/src/assets/scss/business/_block.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@
padding: 0 8px;
display: flex;
align-items: center;
height: 42px;
min-height: 42px;
flex-shrink: 0;

&--menu {
Expand Down Expand Up @@ -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;
Expand Down
208 changes: 92 additions & 116 deletions app/src/layout/dock/Inbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,15 @@ export class Inbox extends Model {
</div>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<div class="fn__flex">
<input class="fn__flex-center toolbar__icon" data-type="selectall" type="checkbox">
<svg class="toolbar__icon" data-type="refresh"><use xlink:href='#iconRefresh'></use></svg>
<svg data-type="more" class="toolbar__icon fn__none"><use xlink:href='#iconMore'></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>
</div>
<div class="fn__flex fn__none">
<svg data-type="back" class="toolbar__icon"><use xlink:href='#iconLeft'></use></svg>
<svg data-type="refreshDetails" class="toolbar__icon"><use xlink:href='#iconRefresh'></use></svg>
<svg data-type="move" class="toolbar__icon"><use xlink:href='#iconMove'></use></svg>
<svg data-type="delete" class="toolbar__icon"><use xlink:href='#iconTrashcan'></use></svg>
</div>
<input class="toolbar__icon" data-type="selectall" type="checkbox">
<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>
</div>
<div class="fn__loading fn__none">
<img width="64px" src="/stage/loading-pure.svg"></div>
</div>
<div class="fn__flex-1 fn__none inboxDetails ft__breakword" style="padding: 4px"></div>
<div class="fn__flex-1 fn__none inboxDetails fn__flex-column" style="min-height: auto"></div>
<div class="fn__flex-1"></div>`;
/// #else
this.element.classList.add("fn__flex-column", "file-tree", "sy__inbox");
Expand All @@ -64,29 +58,20 @@ export class Inbox extends Model {
</div>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<div class="fn__flex">
<input class="fn__flex-center block__icon" data-type="selectall" type="checkbox">
<span class="fn__space"></span>
<span data-type="refresh" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href='#iconRefresh'></use></svg></span>
<span data-type="more" data-menu="true" class="block__icon b3-tooltips b3-tooltips__sw fn__none" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href='#iconMore'></use></svg></span>
<span class="fn__space"></span>
<span data-type="previous" class="block__icon b3-tooltips b3-tooltips__sw" 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__sw" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
</div>
<div class="fn__flex fn__none">
<span data-type="back" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.back}"><svg><use xlink:href='#iconLeft'></use></svg></span>
<span class="fn__space"></span>
<span data-type="refreshDetails" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href='#iconRefresh'></use></svg></span>
<span class="fn__space"></span>
<span data-type="move" data-menu="true" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.move}"><svg><use xlink:href='#iconMove'></use></svg></span>
<span class="fn__space"></span>
<span data-type="delete" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.remove}"><svg><use xlink:href='#iconTrashcan'></use></svg></span>
</div>
<input class="block__icon" data-type="selectall" type="checkbox">
<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 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 class="fn__space"></span>
<span data-type="min" class="block__icon b3-tooltips b3-tooltips__sw" 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="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>
</div>
<div class="fn__loading fn__none">
<img width="64px" src="/stage/loading-pure.svg"></div>
</div>
<div class="fn__flex-1 fn__none inboxDetails ft__breakword" style="padding: 8px"></div>
<div class="fn__flex-1 fn__none inboxDetails fn__flex-column" style="min-height: auto"></div>
<div class="fn__flex-1"></div>`;
/// #endif
const countElement = this.element.querySelector(".inboxSelectCount");
Expand All @@ -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");
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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 = `<h3 class="fn__ellipsis">${response.data.shorthandTitle}</h3>
<div class="fn__hr"></div>
<a href="${response.data.shorthandURL}" target="_blank">${response.data.shorthandURL}</a>
<div class="fn__hr"></div>
<div class="b3-typography b3-typography--default">
${(Lute.New()).MarkdownStr("", response.data.shorthandContent)}
</div>`;
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 = `<h3 class="fn__ellipsis">
${data.shorthandTitle}
</h3>
<div class="fn__hr"></div>
<a href="${data.shorthandURL}" target="_blank">${data.shorthandURL}</a>
<div class="fn__hr"></div>
<div class="b3-typography b3-typography--default">
${(Lute.New()).MarkdownStr("", data.shorthandContent)}
</div>`;
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;
Expand All @@ -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 = `<a href="${data.shorthandURL}" target="_blank">
<svg class="toolbar__icon" style="float: left"><use xlink:href="#iconLink"></use></svg>
</a>`;
}
return `<div class="toolbar toolbar--dark">
<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}
</div>
<div class="b3-typography b3-typography--default" style="padding: 0 8px 8px">
${(Lute.New()).MarkdownStr("", data.shorthandContent)}
</div>`;
/// #else
if (data.shorthandURL) {
linkHTML = `<span class="fn__space"></span><a href="${data.shorthandURL}" target="_blank" class="block__icon block__icon--show b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.link}">
<svg><use xlink:href="#iconLink"></use></svg>
</a>`;
}
return `<div class="block__icons">
<div class="block__logo fn__pointer fn__flex-1" data-type="back">
<svg><use xlink:href="#iconLeft"></use></svg><span class="ft__breakword">${data.shorthandTitle}</span>
</div>
${linkHTML}
</div>
<div class="b3-typography b3-typography--default" style="padding: 0 8px 8px">
${(Lute.New()).MarkdownStr("", data.shorthandContent)}
</div>`;
/// #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[] = [];
Expand All @@ -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"));
}
}
});
}
Expand All @@ -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);
Expand All @@ -312,7 +288,6 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
} else {
this.selectIds = [];
}
this.updateAction();
this.currentPage = 1;
this.update();
});
Expand All @@ -339,6 +314,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
}

private update() {
const loadingElement = this.element.querySelector(".fn__loading");
if (needSubscribe("")) {
this.element.lastElementChild.innerHTML = `<ul class="b3-list b3-list--background">
<li class="b3-list--empty">
Expand All @@ -348,15 +324,15 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
${window.siyuan.config.system.container === "ios" ? window.siyuan.languages._kernel[122] : window.siyuan.languages._kernel[29]}
</li>
</ul>`;
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 = '<ul class="b3-list b3-list--background"><li class="b3-list--empty">打开帮助文档搜索 <b>收集箱</b> 查看使用说明</li></ul>';
Expand Down

0 comments on commit e2b433f

Please sign in to comment.