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

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", `<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();
-        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 `<div class="b3-dialog__scrim" data-type="close"></div>
- <div class="b3-menu">
-    <button class="b3-menu__item" data-type="nobg">
+    return `<button class="b3-menu__item" data-type="nobg">
     <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>
-    </button>
-    <button class="b3-menu__separator"></button>
-    <button class="b3-menu__item" data-type="goProperties">
+</button>
+<button class="b3-menu__separator"></button>
+<button class="b3-menu__item" data-type="goProperties">
     <svg class="b3-menu__icon"></svg>
     <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
     <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}/${data.columns.length}</span>
     <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-    </button>
-    <button class="b3-menu__item">
+</button>
+<button class="b3-menu__item">
     <svg class="b3-menu__icon"><use xlink:href="#iconFilter"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.filter}</span>
     <span class="b3-menu__accelerator">${data.filters.length}</span>
     <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-    </button>
-    <button class="b3-menu__item" data-type="goSorts">
+</button>
+<button class="b3-menu__item" data-type="goSorts">
     <svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.sort}</span>
     <span class="b3-menu__accelerator">${data.sorts.length}</span>
     <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-    </button>
-    <button class="b3-menu__item">
+</button>
+<button class="b3-menu__item">
     <svg class="b3-menu__icon"></svg>
     <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
     <span class="b3-menu__accelerator">50</span>
     <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-    </button>
-</div>`;
+</button>`;
 };
 
 const getSortsHTML = (data: IAV) => {
@@ -221,26 +229,23 @@ const getSortsHTML = (data: IAV) => {
     <svg class="b3-menu__action" data-type="removeSort"><use xlink:href="#iconTrashcan"></use></svg>
 </button>`;
     });
-    return `<div class="b3-dialog__scrim" data-type="close"></div>
- <div class="b3-menu">
-    <button class="b3-menu__item" data-type="nobg">
+    return `<button class="b3-menu__item" data-type="nobg">
     <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
         <svg><use xlink:href="#iconLeft"></use></svg>
     </span>
     <span class="b3-menu__label ft__center">${window.siyuan.languages.sort}</span>
     <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
-    </button>
-    <button class="b3-menu__separator"></button>
-    ${html}
-    <button class="b3-menu__item" data-type="addSort">
+</button>
+<button class="b3-menu__separator"></button>
+${html}
+<button class="b3-menu__item" data-type="addSort">
     <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.new}</span>
-    </button>
-    <button class="b3-menu__item${html ? "" : " fn__none"}" data-type="removeSorts">
+</button>
+<button class="b3-menu__item${html ? "" : " fn__none"}" data-type="removeSorts">
     <svg class="b3-menu__icon"><use xlink:href="#iconTrashcan"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
-    </button>
-</div>`;
+</button>`;
 }
 
 const getPropertiesHTML = (data: IAV) => {
@@ -275,17 +280,15 @@ const getPropertiesHTML = (data: IAV) => {
 </button>
 ${hideHTML}`;
     }
-    return `<div class="b3-dialog__scrim" data-type="close"></div>
- <div class="b3-menu">
-    <button class="b3-menu__item" data-type="nobg">
+    return `<button class="b3-menu__item" data-type="nobg">
     <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
         <svg><use xlink:href="#iconLeft"></use></svg>
     </span>
     <span class="b3-menu__label ft__center">${window.siyuan.languages.attr}</span>
     <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
-    </button>
-    <button class="b3-menu__separator"></button>
-    <button class="b3-menu__item" data-type="nobg">
+</button>
+<button class="b3-menu__separator"></button>
+<button class="b3-menu__item" data-type="nobg">
     <span class="b3-menu__label">
         ${window.siyuan.languages.showCol} 
     </span>
@@ -294,13 +297,12 @@ ${hideHTML}`;
         <span class="fn__space"></span>
         <svg><use xlink:href="#iconEyeoff"></use></svg>
     </span>
-    </button>
-    ${showHTML}
-    ${hideHTML}
-    <button class="b3-menu__separator"></button>
-    <button class="b3-menu__item" data-type="newCol">
+</button>
+${showHTML}
+${hideHTML}
+<button class="b3-menu__separator"></button>
+<button class="b3-menu__item" data-type="newCol">
     <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.new}</span>
-    </button>
-</div>`;
+</button>`;
 };