From 11d4157b527c2411eca7d34a45df3fb54ec81158 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Wed, 5 Mar 2025 10:28:05 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/14283 --- app/src/assets/scss/component/_menu.scss | 4 ++ app/src/menus/protyle.ts | 82 +++++++++++------------- 2 files changed, 42 insertions(+), 44 deletions(-) diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss index ebf052bff..5619dfd9d 100644 --- a/app/src/assets/scss/component/_menu.scss +++ b/app/src/assets/scss/component/_menu.scss @@ -47,6 +47,10 @@ display: flex; flex-direction: column; + & .b3-menu__submenu .b3-menu__submenu { + top: 0; + } + .b3-menu { &__submenu { top: 48px; diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index bc34880b9..8dafc8694 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -105,7 +105,7 @@ export const assetMenu = (protyle: IProtyle, position: IPosition, callback?: (ur menu.addItem({ iconHTML: "", type: "readonly", - label: `
+ label: `
@@ -222,11 +222,7 @@ export const fileAnnotationRefMenu = (protyle: IProtyle, refElement: HTMLElement id: "idAndAnchor", iconHTML: "", type: "readonly", - label: `
ID
- -
-
${window.siyuan.languages.anchor}
-`, + label: `
ID
${window.siyuan.languages.anchor}
`, bind(menuItemElement) { menuItemElement.style.maxWidth = "none"; anchorElement = menuItemElement.querySelectorAll(".b3-text-field")[1] as HTMLInputElement; @@ -317,13 +313,16 @@ export const fileAnnotationRefMenu = (protyle: IProtyle, refElement: HTMLElement separatorPosition: "top", }); } - + /// #if MOBILE + window.siyuan.menus.menu.fullscreen(); + /// #else const rect = refElement.getBoundingClientRect(); window.siyuan.menus.menu.popup({ x: rect.left, y: rect.top + 26, h: 26 }); + /// #endif const popoverElement = hasTopClosestByClassName(protyle.element, "block__popover", true); window.siyuan.menus.menu.element.setAttribute("data-from", popoverElement ? popoverElement.dataset.level + "popover" : "app"); anchorElement.select(); @@ -677,12 +676,16 @@ export const refMenu = (protyle: IProtyle, element: HTMLElement) => { }); } + /// #if MOBILE + window.siyuan.menus.menu.fullscreen(); + /// #else const rect = element.getBoundingClientRect(); window.siyuan.menus.menu.popup({ x: rect.left, y: rect.top + 26, h: 26 }); + /// #endif const popoverElement = hasTopClosestByClassName(protyle.element, "block__popover", true); window.siyuan.menus.menu.data = element; window.siyuan.menus.menu.element.setAttribute("data-from", popoverElement ? popoverElement.dataset.level + "popover" : "app"); @@ -1073,26 +1076,19 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme -
- -
-
+
${window.siyuan.languages.title} -
- -
-
+
${window.siyuan.languages.tooltipText} -
-`, +
`, bind(element) { element.style.maxWidth = "none"; const textElements = element.querySelectorAll("textarea"); @@ -1211,7 +1207,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme id: "ocrResult", iconHTML: "", type: "readonly", - label: ``, + label: ``, bind(element) { element.style.maxWidth = "none"; fetchPost("/api/asset/getImageOCRText", { @@ -1262,9 +1258,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme id: "widthInput", iconHTML: "", type: "readonly", - label: `
-px -
`, + label: `
px
`, bind(element) { const inputElement = element.querySelector("input"); inputElement.addEventListener("input", () => { @@ -1298,9 +1292,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme id: "widthDrag", iconHTML: "", type: "readonly", - label: `
- -1 || imgElement.parentElement.style.width.endsWith("vw")) ? parseInt(imgElement.parentElement.style.width.replace("calc(", "")) : 0}" class="b3-slider fn__block" max="100" min="1" step="1" type="range"> -
`, + label: `
-1 || imgElement.parentElement.style.width.endsWith("vw")) ? parseInt(imgElement.parentElement.style.width.replace("calc(", "")) : 0}" class="b3-slider fn__block" max="100" min="1" step="1" type="range">
`, bind(element) { rangeElement = element.querySelector("input"); rangeElement.addEventListener("input", () => { @@ -1331,9 +1323,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme id: "heightInput", iconHTML: "", type: "readonly", - label: `
-px -
`, + label: `
px
`, bind(element) { const inputElement = element.querySelector("input"); inputElement.addEventListener("input", () => { @@ -1367,9 +1357,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme id: "heightDrag", iconHTML: "", type: "readonly", - label: `
- -
`, + label: `
`, bind(element) { rangeHeightElement = element.querySelector("input"); rangeHeightElement.addEventListener("input", () => { @@ -1413,8 +1401,11 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme separatorPosition: "top", }); } - + /// #if MOBILE + window.siyuan.menus.menu.fullscreen(); + /// #else window.siyuan.menus.menu.popup({x: position.clientX, y: position.clientY}); + /// #endif const popoverElement = hasTopClosestByClassName(protyle.element, "block__popover", true); window.siyuan.menus.menu.element.setAttribute("data-from", popoverElement ? popoverElement.dataset.level + "popover" : "app"); if (!protyle.disabled) { @@ -1462,26 +1453,20 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText -
- -
-
+
${window.siyuan.languages.anchor} -
- -
-
+
${window.siyuan.languages.title} -
-`, +
`, bind(element) { element.style.maxWidth = "none"; inputElements = element.querySelectorAll("textarea"); @@ -1682,12 +1667,17 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText separatorPosition: "top", }); } + /// #if MOBILE + window.siyuan.menus.menu.fullscreen(); + /// #else const rect = linkElement.getBoundingClientRect(); window.siyuan.menus.menu.popup({ x: rect.left, y: rect.top + 26, h: 26 }); + /// #endif + const popoverElement = hasTopClosestByClassName(protyle.element, "block__popover", true); window.siyuan.menus.menu.element.setAttribute("data-from", popoverElement ? popoverElement.dataset.level + "popover" : "app"); if (protyle.disabled) { @@ -1735,7 +1725,7 @@ export const tagMenu = (protyle: IProtyle, tagElement: HTMLElement) => { id: "tag", iconHTML: "", type: "readonly", - label: ``, + label: ``, bind(element) { const inputElement = element.querySelector("input"); inputElement.value = tagElement.textContent.replace(Constants.ZWSP, ""); @@ -1865,12 +1855,16 @@ export const tagMenu = (protyle: IProtyle, tagElement: HTMLElement) => { }); } + /// #if MOBILE + window.siyuan.menus.menu.fullscreen(); + /// #else const rect = tagElement.getBoundingClientRect(); window.siyuan.menus.menu.popup({ x: rect.left, y: rect.top + 26, h: 26 }); + /// #endif const popoverElement = hasTopClosestByClassName(protyle.element, "block__popover", true); window.siyuan.menus.menu.element.setAttribute("data-from", popoverElement ? popoverElement.dataset.level + "popover" : "app"); window.siyuan.menus.menu.element.querySelector("input").select(); @@ -1968,7 +1962,7 @@ export const iframeMenu = (protyle: IProtyle, nodeElement: Element) => { id: "asset", iconHTML: "", type: "readonly", - label: ``, + label: ``, bind(element) { element.style.maxWidth = "none"; element.querySelector("textarea").addEventListener("change", (event) => { @@ -2039,7 +2033,7 @@ export const videoMenu = (protyle: IProtyle, nodeElement: Element, type: string) id: "asset", iconHTML: "", type: "readonly", - label: ``, + label: ``, bind(element) { element.style.maxWidth = "none"; element.querySelector("textarea").addEventListener("change", (event) => {