diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 073fc7171..9ae9caeb4 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -5,9 +5,9 @@ import {getColIconByType} from "./col";
import {setPosition} from "../../../util/setPosition";
export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" = "config") => {
- let avMenuPanel = document.querySelector(".av__panel");
- if (avMenuPanel) {
- avMenuPanel.remove();
+ let avPanelElement = document.querySelector(".av__panel");
+ if (avPanelElement) {
+ avPanelElement.remove();
return;
}
window.siyuan.menus.menu.remove();
@@ -22,31 +22,38 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
} else if (type === "sorts") {
html = getSortsHTML(data);
}
- document.body.insertAdjacentHTML("beforeend", `${html}
`);
+ document.body.insertAdjacentHTML("beforeend", ``);
- avMenuPanel = document.querySelector(".av__panel");
+ avPanelElement = document.querySelector(".av__panel");
+ const menuElement = avPanelElement.lastElementChild as HTMLElement;
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();
let target = event.target as HTMLElement;
- while (target && !target.isSameNode(avMenuPanel)) {
+ while (target && !target.isSameNode(avPanelElement)) {
const type = target.dataset.type;
if (type === "close") {
- avMenuPanel.remove();
+ avPanelElement.remove();
event.stopPropagation();
break;
} else if (type === "goConfig") {
- avMenuPanel.innerHTML = getConfigHTML(data);
+ menuElement.innerHTML = getConfigHTML(data);
+ setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation();
break;
} else if (type === "goProperties") {
- avMenuPanel.innerHTML = getPropertiesHTML(data);
+ menuElement.innerHTML = getPropertiesHTML(data);
+ setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation();
break;
} else if (type === "goSorts") {
- avMenuPanel.innerHTML = getSortsHTML(data);
+ menuElement.innerHTML = getSortsHTML(data);
+ setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation();
break;
} else if (type === "removeSorts") {
@@ -62,7 +69,7 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
event.stopPropagation();
break;
} else if (type === "newCol") {
- avMenuPanel.remove();
+ avPanelElement.remove();
const addMenu = addCol(protyle, blockElement);
addMenu.open({
x: tabRect.right,
@@ -94,7 +101,8 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
});
if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations);
- avMenuPanel.innerHTML = getPropertiesHTML(data);
+ menuElement.innerHTML = getPropertiesHTML(data);
+ setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
}
event.stopPropagation();
break;
@@ -120,7 +128,8 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
});
if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations);
- avMenuPanel.innerHTML = getPropertiesHTML(data);
+ menuElement.innerHTML = getPropertiesHTML(data);
+ setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
}
event.stopPropagation();
break;
@@ -138,7 +147,8 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
data: false
}]);
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();
break;
} else if (type === "showCol") {
@@ -155,7 +165,8 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
data: true
}]);
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();
break;
}
@@ -166,38 +177,35 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
};
const getConfigHTML = (data: IAV) => {
- return `
- `;
+ return `
+
+
+
+
+`;
};
const getSortsHTML = (data: IAV) => {
@@ -221,26 +229,23 @@ const getSortsHTML = (data: IAV) => {
`;
});
- return `
- `;
+ return `
+
+${html}
+
+`;
}
const getPropertiesHTML = (data: IAV) => {
@@ -275,32 +280,29 @@ const getPropertiesHTML = (data: IAV) => {
${hideHTML}`;
}
- return `
- `;
+ return `
+
+
+${showHTML}
+${hideHTML}
+
+`;
};