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

🎨 sort https://github.com/siyuan-note/siyuan/issues/7536

Browse source
This commit is contained in:
Vanessa 2023-07-03 12:39:39 +08:00
parent f7cc810e50
commit 1456bafae4
1 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -2,6 +2,7 @@ import {transaction} from "../../wysiwyg/transaction";
import {fetchPost} from "../../../util/fetch"; import {fetchPost} from "../../../util/fetch";
import {addCol} from "./addCol"; import {addCol} from "./addCol";
import {getColIconByType} from "./col"; import {getColIconByType} from "./col";
import {setPosition} from "../../../util/setPosition";
export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" = "config") => { export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" = "config") => {
let avMenuPanel = document.querySelector(".av__panel"); let avMenuPanel = document.querySelector(".av__panel");
@ -13,17 +14,20 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
const avId = blockElement.getAttribute("data-av-id"); const avId = blockElement.getAttribute("data-av-id");
fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
const data = response.data.av as IAV; const data = response.data.av as IAV;
const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
let html; let html;
if (type === "config") { if (type === "config") {
html = getConfigHTML(data, tabRect); html = getConfigHTML(data);
} else if (type === "properties") { } else if (type === "properties") {
html = getPropertiesHTML(data, tabRect); html = getPropertiesHTML(data);
} else if (type === "sorts") { } else if (type === "sorts") {
html = getSortsHTML(data, tabRect); html = getSortsHTML(data);
} }
document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">${html}</div>`); document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">${html}</div>`);
avMenuPanel = document.querySelector(".av__panel"); avMenuPanel = document.querySelector(".av__panel");
const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
setPosition(avMenuPanel.lastElementChild as HTMLElement, tabRect.right - avMenuPanel.lastElementChild.clientWidth, tabRect.bottom, tabRect.height);
avMenuPanel.addEventListener("click", (event) => { avMenuPanel.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
let target = event.target as HTMLElement; let target = event.target as HTMLElement;
@ -34,15 +38,15 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goConfig") { } else if (type === "goConfig") {
avMenuPanel.innerHTML = getConfigHTML(data, tabRect); avMenuPanel.innerHTML = getConfigHTML(data);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goProperties") { } else if (type === "goProperties") {
avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect); avMenuPanel.innerHTML = getPropertiesHTML(data);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goSorts") { } else if (type === "goSorts") {
avMenuPanel.innerHTML = getSortsHTML(data, tabRect); avMenuPanel.innerHTML = getSortsHTML(data);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSorts") { } else if (type === "removeSorts") {
@ -90,7 +94,7 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
}); });
if (doOperations.length > 0) { if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations); transaction(protyle, doOperations, undoOperations);
avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect); avMenuPanel.innerHTML = getPropertiesHTML(data);
} }
event.stopPropagation(); event.stopPropagation();
break; break;
@ -116,7 +120,7 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
}); });
if (doOperations.length > 0) { if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations); transaction(protyle, doOperations, undoOperations);
avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect); avMenuPanel.innerHTML = getPropertiesHTML(data);
} }
event.stopPropagation(); event.stopPropagation();
break; break;
@ -134,7 +138,7 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
data: false data: false
}]); }]);
data.columns.find((item: IAVColumn) => item.id === colId).hidden = true; data.columns.find((item: IAVColumn) => item.id === colId).hidden = true;
avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect); avMenuPanel.innerHTML = getPropertiesHTML(data);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "showCol") { } else if (type === "showCol") {
@ -151,7 +155,7 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
data: true data: true
}]); }]);
data.columns.find((item: IAVColumn) => item.id === colId).hidden = false; data.columns.find((item: IAVColumn) => item.id === colId).hidden = false;
avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect); avMenuPanel.innerHTML = getPropertiesHTML(data);
event.stopPropagation(); event.stopPropagation();
break; break;
} }
@ -161,9 +165,9 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
}); });
}; };
const getConfigHTML = (data: IAV, tabRect: DOMRect) => { const getConfigHTML = (data: IAV) => {
return `<div class="b3-dialog__scrim" data-type="close"></div> return `<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px"> <div class="b3-menu">
<button class="b3-menu__item" data-type="nobg"> <button class="b3-menu__item" data-type="nobg">
<span class="b3-menu__label">${window.siyuan.languages.config}</span> <span class="b3-menu__label">${window.siyuan.languages.config}</span>
<svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg> <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
@ -196,7 +200,7 @@ const getConfigHTML = (data: IAV, tabRect: DOMRect) => {
</div>`; </div>`;
}; };
const getSortsHTML = (data: IAV, tabRect: DOMRect) => { const getSortsHTML = (data: IAV) => {
let html = ""; let html = "";
const genSortItem = (id: string) => { const genSortItem = (id: string) => {
let sortHTML = '' let sortHTML = ''
@ -218,7 +222,7 @@ const getSortsHTML = (data: IAV, tabRect: DOMRect) => {
</button>`; </button>`;
}); });
return `<div class="b3-dialog__scrim" data-type="close"></div> return `<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px"> <div class="b3-menu">
<button class="b3-menu__item" data-type="nobg"> <button class="b3-menu__item" data-type="nobg">
<span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig"> <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
<svg><use xlink:href="#iconLeft"></use></svg> <svg><use xlink:href="#iconLeft"></use></svg>
@ -239,7 +243,7 @@ const getSortsHTML = (data: IAV, tabRect: DOMRect) => {
</div>`; </div>`;
} }
const getPropertiesHTML = (data: IAV, tabRect: DOMRect) => { const getPropertiesHTML = (data: IAV) => {
let showHTML = ""; let showHTML = "";
let hideHTML = ""; let hideHTML = "";
data.columns.forEach((item: IAVColumn) => { data.columns.forEach((item: IAVColumn) => {
@ -272,7 +276,7 @@ const getPropertiesHTML = (data: IAV, tabRect: DOMRect) => {
${hideHTML}`; ${hideHTML}`;
} }
return `<div class="b3-dialog__scrim" data-type="close"></div> return `<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px"> <div class="b3-menu">
<button class="b3-menu__item" data-type="nobg"> <button class="b3-menu__item" data-type="nobg">
<span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig"> <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
<svg><use xlink:href="#iconLeft"></use></svg> <svg><use xlink:href="#iconLeft"></use></svg>