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

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

Browse source
This commit is contained in:
Vanessa 2023-07-03 12:49:35 +08:00
parent 67dfb7352c
commit fb85f7d36e
1 changed files with 99 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,9 +5,9 @@ import {getColIconByType} from "./col";
import {setPosition} from "../../../util/setPosition"; 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 avPanelElement = document.querySelector(".av__panel");
if (avMenuPanel) { if (avPanelElement) {
avMenuPanel.remove(); avPanelElement.remove();
return; return;
} }
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
@ -22,31 +22,38 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
} else if (type === "sorts") { } else if (type === "sorts") {
html = getSortsHTML(data); html = getSortsHTML(data);
} }
document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">${html}</div>`); document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">
<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu">${html}</div>
</div>`);
avMenuPanel = document.querySelector(".av__panel"); avPanelElement = document.querySelector(".av__panel");
const menuElement = avPanelElement.lastElementChild as HTMLElement;
const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect(); const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
setPosition(avMenuPanel.lastElementChild as HTMLElement, tabRect.right - avMenuPanel.lastElementChild.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
avMenuPanel.addEventListener("click", (event) => { avPanelElement.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
let target = event.target as HTMLElement; let target = event.target as HTMLElement;
while (target && !target.isSameNode(avMenuPanel)) { while (target && !target.isSameNode(avPanelElement)) {
const type = target.dataset.type; const type = target.dataset.type;
if (type === "close") { if (type === "close") {
avMenuPanel.remove(); avPanelElement.remove();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goConfig") { } else if (type === "goConfig") {
avMenuPanel.innerHTML = getConfigHTML(data); menuElement.innerHTML = getConfigHTML(data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goProperties") { } else if (type === "goProperties") {
avMenuPanel.innerHTML = getPropertiesHTML(data); menuElement.innerHTML = getPropertiesHTML(data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goSorts") { } else if (type === "goSorts") {
avMenuPanel.innerHTML = getSortsHTML(data); menuElement.innerHTML = getSortsHTML(data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSorts") { } else if (type === "removeSorts") {
@ -62,7 +69,7 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "newCol") { } else if (type === "newCol") {
avMenuPanel.remove(); avPanelElement.remove();
const addMenu = addCol(protyle, blockElement); const addMenu = addCol(protyle, blockElement);
addMenu.open({ addMenu.open({
x: tabRect.right, x: tabRect.right,
@ -94,7 +101,8 @@ 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); menuElement.innerHTML = getPropertiesHTML(data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
} }
event.stopPropagation(); event.stopPropagation();
break; break;
@ -120,7 +128,8 @@ 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); menuElement.innerHTML = getPropertiesHTML(data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
} }
event.stopPropagation(); event.stopPropagation();
break; break;
@ -138,7 +147,8 @@ 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); menuElement.innerHTML = getPropertiesHTML(data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "showCol") { } else if (type === "showCol") {
@ -155,7 +165,8 @@ 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); menuElement.innerHTML = getPropertiesHTML(data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} }
@ -166,9 +177,7 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
}; };
const getConfigHTML = (data: IAV) => { const getConfigHTML = (data: IAV) => {
return `<div class="b3-dialog__scrim" data-type="close"></div> return `<button class="b3-menu__item" data-type="nobg">
<div class="b3-menu">
<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>
</button> </button>
@ -196,8 +205,7 @@ const getConfigHTML = (data: IAV) => {
<span class="b3-menu__label">${window.siyuan.languages.pageCount}</span> <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
<span class="b3-menu__accelerator">50</span> <span class="b3-menu__accelerator">50</span>
<svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg> <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
</button> </button>`;
</div>`;
}; };
const getSortsHTML = (data: IAV) => { const getSortsHTML = (data: IAV) => {
@ -221,9 +229,7 @@ const getSortsHTML = (data: IAV) => {
<svg class="b3-menu__action" data-type="removeSort"><use xlink:href="#iconTrashcan"></use></svg> <svg class="b3-menu__action" data-type="removeSort"><use xlink:href="#iconTrashcan"></use></svg>
</button>`; </button>`;
}); });
return `<div class="b3-dialog__scrim" data-type="close"></div> return `<button class="b3-menu__item" data-type="nobg">
<div class="b3-menu">
<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>
</span> </span>
@ -239,8 +245,7 @@ const getSortsHTML = (data: IAV) => {
<button class="b3-menu__item${html ? "" : " fn__none"}" data-type="removeSorts"> <button class="b3-menu__item${html ? "" : " fn__none"}" data-type="removeSorts">
<svg class="b3-menu__icon"><use xlink:href="#iconTrashcan"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconTrashcan"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.delete}</span> <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
</button> </button>`;
</div>`;
} }
const getPropertiesHTML = (data: IAV) => { const getPropertiesHTML = (data: IAV) => {
@ -275,9 +280,7 @@ const getPropertiesHTML = (data: IAV) => {
</button> </button>
${hideHTML}`; ${hideHTML}`;
} }
return `<div class="b3-dialog__scrim" data-type="close"></div> return `<button class="b3-menu__item" data-type="nobg">
<div class="b3-menu">
<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>
</span> </span>
@ -301,6 +304,5 @@ ${hideHTML}`;
<button class="b3-menu__item" data-type="newCol"> <button class="b3-menu__item" data-type="newCol">
<svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.new}</span> <span class="b3-menu__label">${window.siyuan.languages.new}</span>
</button> </button>`;
</div>`;
}; };