diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index 93bc1b6de..4b52e7775 100644 --- a/app/src/assets/scss/base.scss +++ b/app/src/assets/scss/base.scss @@ -37,50 +37,17 @@ /* .status: 2 -// 需小于 .block__popover -// 需小于 ctrl+p https://github.com/siyuan-note/siyuan/issues/7174 .protyle-util: 4 -// 引用提示需小于 .block__popover -.protyle-hint: 201 +.protyle-hint: 5 -// 需小于 .block__popover https://github.com/siyuan-note/siyuan/issues/3515 -// 需大于 .protyle-hint https://github.com/siyuan-note/siyuan/pull/7247 -ctrl+p 搜索: 202 +#menu & .side-panel: 6 -// 需小于 .b3-menu 悬浮窗点击更多 -// 需小于 .b3-dialog https://ld246.com/article/1637204682648 -.block__popover: 205 -.block__popover--top: 206 +#windowControls: 999998 -// 需小于 .b3-menu -.av__panel: 209 +.b3-snackbar: 999999 -// 需大于 .block__popover -.b3-menu: 210 - -// 需小于 .b3-dialog 关于中的锁屏密码设置 -#menu & .side-panel: 220 - -// 需小于 #windowControls -// 需大于 .protyle-util https://github.com/siyuan-note/siyuan/issues/5069 -.b3-dialog: 305 - -// 需大于 mobile .status、.b3-dialog -.keyboard: 306 - -// 历史中切换笔记本需临时大于 .b3-dialog https://github.com/siyuan-note/siyuan/issues/5107 -// 移动端排序和菜单需临时大于 .side-panel https://github.com/siyuan-note/siyuan/issues/5254 -.b3-menu: 310 - -.av__mask: 320 - -// 需大于 .b3-dialog -progressLoading: 400 - -#windowControls: 502 - -.b3-snackbar: 503 +.b3-tooltips: 1000000 */ html { @@ -151,7 +118,7 @@ html { #windowControls { top: 0; - z-index: 502; + z-index: 999998; right: 0; position: relative; margin-left: 2px; diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index a6cf98dc1..08e1db3c1 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -47,7 +47,6 @@ &__mask { position: fixed; - z-index: 320; top: 0; bottom: 0; right: 0; @@ -264,7 +263,6 @@ } &__panel { - z-index: 209; position: relative; .b3-menu { diff --git a/app/src/assets/scss/business/_block.scss b/app/src/assets/scss/business/_block.scss index adef37d00..76e8c45a9 100644 --- a/app/src/assets/scss/business/_block.scss +++ b/app/src/assets/scss/business/_block.scss @@ -17,11 +17,6 @@ &--open { opacity: 1; - z-index: 205; - } - - &--top.block__popover--open { - z-index: 206; } & > .block__icons { diff --git a/app/src/assets/scss/business/_search.scss b/app/src/assets/scss/business/_search.scss index 0a542ad80..bb0c8ede6 100644 --- a/app/src/assets/scss/business/_search.scss +++ b/app/src/assets/scss/business/_search.scss @@ -61,6 +61,7 @@ top: 42px; position: absolute; left: 8px; + z-index: 1; } } diff --git a/app/src/assets/scss/component/_dialog.scss b/app/src/assets/scss/component/_dialog.scss index cf764f26b..957752813 100644 --- a/app/src/assets/scss/component/_dialog.scss +++ b/app/src/assets/scss/component/_dialog.scss @@ -8,7 +8,6 @@ width: 100%; height: 100%; display: flex; - z-index: 305; &--open { .b3-dialog__scrim { diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss index 536b30880..d4315d0bf 100644 --- a/app/src/assets/scss/component/_menu.scss +++ b/app/src/assets/scss/component/_menu.scss @@ -5,7 +5,6 @@ border: 1px solid var(--b3-theme-surface-lighter); background-color: var(--b3-menu-background); padding: 8px 0; - z-index: 210; box-sizing: border-box; &::-webkit-scrollbar, diff --git a/app/src/assets/scss/component/_snackbar.scss b/app/src/assets/scss/component/_snackbar.scss index 29942496e..117473b4b 100644 --- a/app/src/assets/scss/component/_snackbar.scss +++ b/app/src/assets/scss/component/_snackbar.scss @@ -12,7 +12,7 @@ position: fixed; right: 12px; top: 22px; - z-index: 503; + z-index: 999999; max-height: calc(100vh - 32px); display: flex; flex-direction: column; diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index 702aff4f3..3bb1a0b3c 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -156,7 +156,7 @@ background-color: var(--b3-theme-surface); height: 100vh; width: 100vw; - z-index: 220; + z-index: 6; transform: translateX(-100vw); transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms; @@ -239,7 +239,7 @@ } #menu { - z-index: 220; + z-index: 6; transform: translateX(100vw); top: 0; @@ -261,7 +261,6 @@ box-sizing: border-box; height: 42px; background: var(--b3-theme-background); - z-index: 306; display: flex; border-top: 1px solid var(--b3-theme-surface-lighter); overflow: hidden; diff --git a/app/src/assets/scss/pdf/_pdf.scss b/app/src/assets/scss/pdf/_pdf.scss index e1638fb29..05a7b6c01 100644 --- a/app/src/assets/scss/pdf/_pdf.scss +++ b/app/src/assets/scss/pdf/_pdf.scss @@ -321,6 +321,7 @@ align-items: center; flex-wrap: wrap; overflow: initial; + z-index: 1; #findInput { width: 120px; @@ -337,6 +338,7 @@ top: 36px; overflow: auto; -webkit-overflow-scrolling: touch; + z-index: 1; .b3-menu__items { max-height: 60vh; diff --git a/app/src/assets/scss/protyle/_toolbar.scss b/app/src/assets/scss/protyle/_toolbar.scss index 10ee60669..ab0980674 100644 --- a/app/src/assets/scss/protyle/_toolbar.scss +++ b/app/src/assets/scss/protyle/_toolbar.scss @@ -52,7 +52,7 @@ box-shadow: var(--b3-dialog-shadow); border: 1px solid var(--b3-theme-surface-lighter); background-color: var(--b3-menu-background); - z-index: 201; + z-index: 5; overflow: auto; max-height: 402px; box-sizing: border-box; diff --git a/app/src/block/Panel.ts b/app/src/block/Panel.ts index 01c8f61fb..13ea77223 100644 --- a/app/src/block/Panel.ts +++ b/app/src/block/Panel.ts @@ -49,7 +49,8 @@ export class BlockPanel { this.isBacklink = options.isBacklink; this.element = document.createElement("div"); - this.element.classList.add("block__popover", "block__popover--top"); + this.element.style.zIndex = (++window.siyuan.zIndex).toString(); + this.element.classList.add("block__popover"); const parentElement = hasClosestByClassName(this.targetElement, "block__popover", true); let level = 1; @@ -95,11 +96,8 @@ export class BlockPanel { } }); this.element.addEventListener("click", (event) => { - document.querySelectorAll(".block__popover--top").forEach(item => { - item.classList.remove("block__popover--top"); - }); if (this.element && window.siyuan.blockPanels.length > 1) { - this.element.classList.add("block__popover--top"); + this.element.style.zIndex = (++window.siyuan.zIndex).toString(); } let target = event.target as HTMLElement; diff --git a/app/src/dialog/index.ts b/app/src/dialog/index.ts index eff784626..3cec6e63b 100644 --- a/app/src/dialog/index.ts +++ b/app/src/dialog/index.ts @@ -27,7 +27,7 @@ export class Dialog { this.destroyCallback = options.destroyCallback; this.element = document.createElement("div") as HTMLElement; - this.element.innerHTML = `
+ this.element.innerHTML = `
diff --git a/app/src/dialog/processSystem.ts b/app/src/dialog/processSystem.ts index 1076c0c4a..5a180c3a8 100644 --- a/app/src/dialog/processSystem.ts +++ b/app/src/dialog/processSystem.ts @@ -286,7 +286,7 @@ export const progressStatus = (data: IWebSocketData) => { export const progressLoading = (data: IWebSocketData) => { let progressElement = document.getElementById("progress"); if (!progressElement) { - document.body.insertAdjacentHTML("beforeend", '
'); + document.body.insertAdjacentHTML("beforeend", `
`); progressElement = document.getElementById("progress"); } // code 0: 有进度;1: 无进度;2: 关闭 @@ -295,8 +295,8 @@ export const progressLoading = (data: IWebSocketData) => { return; } if (data.code === 0) { - progressElement.innerHTML = `
-
+ progressElement.innerHTML = `
+
${data.data.current}/${data.data.total}
${data.msg}
@@ -305,8 +305,8 @@ export const progressLoading = (data: IWebSocketData) => { if (progressElement.lastElementChild) { progressElement.lastElementChild.lastElementChild.innerHTML = data.msg; } else { - progressElement.innerHTML = `
-
+ progressElement.innerHTML = `
+
${data.msg}
`; diff --git a/app/src/index.ts b/app/src/index.ts index 4ff051a7e..cc190280d 100644 --- a/app/src/index.ts +++ b/app/src/index.ts @@ -40,6 +40,7 @@ export class App { addScript(`${Constants.PROTYLE_CDN}/js/protyle-html.js?v=${Constants.SIYUAN_VERSION}`, "protyleWcHtmlScript"); addBaseURL(); window.siyuan = { + zIndex: 10, transactions: [], reqIds: {}, backStack: [], diff --git a/app/src/layout/dock/Inbox.ts b/app/src/layout/dock/Inbox.ts index 99c315c96..4780b1538 100644 --- a/app/src/layout/dock/Inbox.ts +++ b/app/src/layout/dock/Inbox.ts @@ -254,7 +254,6 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)} } window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16}); - window.siyuan.menus.menu.element.style.zIndex = "221"; // 移动端被右侧栏遮挡 } private remove(id?: string) { diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts index 26514402c..1cef4a7a7 100644 --- a/app/src/menus/Menu.ts +++ b/app/src/menus/Menu.ts @@ -134,13 +134,14 @@ export class Menu { } else { window.addEventListener(this.wheelEvent, this.preventDefault, {passive: false}); } - + this.element.style.zIndex = (++window.siyuan.zIndex).toString(); this.element.classList.remove("fn__none"); setPosition(this.element, options.x - (isLeft ? window.siyuan.menus.menu.element.clientWidth : 0), options.y, options.h, options.w); } public fullscreen(position: "bottom" | "all" = "all") { this.element.classList.add("b3-menu--fullscreen"); + this.element.style.zIndex = (++window.siyuan.zIndex).toString(); this.element.firstElementChild.classList.remove("fn__none"); this.element.classList.remove("fn__none"); window.addEventListener("touchmove", this.preventDefault, {passive: false}); diff --git a/app/src/menus/bookmark.ts b/app/src/menus/bookmark.ts index 87a30c841..bdbcc3981 100644 --- a/app/src/menus/bookmark.ts +++ b/app/src/menus/bookmark.ts @@ -88,6 +88,5 @@ export const openBookmarkMenu = (element: HTMLElement, event: MouseEvent, bookma }).element); } window.siyuan.menus.menu.element.setAttribute("data-name", "bookmarkMenu"); - window.siyuan.menus.menu.element.style.zIndex = "221"; // 移动端被右侧栏遮挡 window.siyuan.menus.menu.popup({x: event.clientX - 11, y: event.clientY + 11, h: 22, w: 12}); }; diff --git a/app/src/menus/commonMenuItem.ts b/app/src/menus/commonMenuItem.ts index d538e4b99..5efb163a0 100644 --- a/app/src/menus/commonMenuItem.ts +++ b/app/src/menus/commonMenuItem.ts @@ -290,7 +290,6 @@ export const openFileAttr = (attrs: IObject, focusName = "bookmark") => { }).element); }); } - window.siyuan.menus.menu.element.style.zIndex = "310"; window.siyuan.menus.menu.element.classList.add("b3-menu--list"); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16, w: 16}); }); diff --git a/app/src/menus/tag.ts b/app/src/menus/tag.ts index 492a6d451..b5bb1b397 100644 --- a/app/src/menus/tag.ts +++ b/app/src/menus/tag.ts @@ -28,6 +28,5 @@ export const openTagMenu = (element: HTMLElement, event: MouseEvent, labelName: } }).element); window.siyuan.menus.menu.element.setAttribute("data-name", "tagMenu"); - window.siyuan.menus.menu.element.style.zIndex = "221"; // 移动端被右侧栏遮挡 window.siyuan.menus.menu.popup({x: event.clientX - 11, y: event.clientY + 11, h: 22, w: 12}); }; diff --git a/app/src/mobile/dock/MobileFiles.ts b/app/src/mobile/dock/MobileFiles.ts index f54dd85d3..4599907bc 100644 --- a/app/src/mobile/dock/MobileFiles.ts +++ b/app/src/mobile/dock/MobileFiles.ts @@ -183,13 +183,11 @@ export class MobileFiles extends Model { } else if (type === "more-root") { initNavigationMenu(app, target.parentElement); window.siyuan.menus.menu.fullscreen("bottom"); - window.siyuan.menus.menu.element.style.zIndex = "310"; } } if (type === "more-file") { initFileMenu(app, notebookId, pathString, target.parentElement); window.siyuan.menus.menu.fullscreen("bottom"); - window.siyuan.menus.menu.element.style.zIndex = "310"; } } event.preventDefault(); @@ -239,7 +237,6 @@ export class MobileFiles extends Model { window.siyuan.menus.menu.append(new MenuItem(item).element); }); window.siyuan.menus.menu.fullscreen("bottom"); - window.siyuan.menus.menu.element.style.zIndex = "310"; } private genNotebook(item: INotebook) { diff --git a/app/src/mobile/dock/MobileTags.ts b/app/src/mobile/dock/MobileTags.ts index d489070a1..4d40917dc 100644 --- a/app/src/mobile/dock/MobileTags.ts +++ b/app/src/mobile/dock/MobileTags.ts @@ -126,7 +126,6 @@ export class MobileTags { }, }).element); window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); - window.siyuan.menus.menu.element.style.zIndex = "310"; event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/mobile/index.ts b/app/src/mobile/index.ts index c7293a2d4..faaf6a81a 100644 --- a/app/src/mobile/index.ts +++ b/app/src/mobile/index.ts @@ -35,6 +35,7 @@ class App { addScript(`${Constants.PROTYLE_CDN}/js/protyle-html.js?v=${Constants.SIYUAN_VERSION}`, "protyleWcHtmlScript"); addBaseURL(); window.siyuan = { + zIndex: 10, notebooks: [], transactions: [], reqIds: {}, diff --git a/app/src/mobile/menu/search.ts b/app/src/mobile/menu/search.ts index 9a3769584..e45648adb 100644 --- a/app/src/mobile/menu/search.ts +++ b/app/src/mobile/menu/search.ts @@ -467,7 +467,6 @@ const initSearchEvent = (app: App, element: Element, config: ISearchOption) => { } }, config); }); - window.siyuan.menus.menu.element.style.zIndex = "220"; window.siyuan.menus.menu.fullscreen(); event.stopPropagation(); event.preventDefault(); @@ -484,7 +483,6 @@ const initSearchEvent = (app: App, element: Element, config: ISearchOption) => { config.page = 1; updateSearchResult(config, element, true); }); - window.siyuan.menus.menu.element.style.zIndex = "220"; window.siyuan.menus.menu.fullscreen(); event.stopPropagation(); event.preventDefault(); diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts index f0f9d013e..5b8afb8db 100644 --- a/app/src/mobile/util/keyboardToolbar.ts +++ b/app/src/mobile/util/keyboardToolbar.ts @@ -391,6 +391,7 @@ export const showKeyboardToolbar = () => { return; } toolbarElement.classList.remove("fn__none"); + toolbarElement.style.zIndex = (++window.siyuan.zIndex).toString(); const modelElement = document.getElementById("model"); if (modelElement.style.transform === "translateY(0px)") { modelElement.style.paddingBottom = "42px"; diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index ed5bd7c53..8ed2b6a85 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -360,7 +360,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => { return; } window.siyuan.menus.menu.remove(); - document.body.insertAdjacentHTML("beforeend", `
+ document.body.insertAdjacentHTML("beforeend", `
${html}
`); const avMaskElement = document.querySelector(".av__mask"); diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 71589d650..0e4c0bdd9 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -47,7 +47,7 @@ export const openMenuPanel = (options: { html = getDateHTML(data.view, options.cellElements); } - document.body.insertAdjacentHTML("beforeend", `
+ document.body.insertAdjacentHTML("beforeend", `
${html}
`); diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 941eeece3..c8772034a 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -363,7 +363,6 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes x: datetRect.left, y: datetRect.bottom }); - window.siyuan.menus.menu.element.style.zIndex = "400"; event.stopPropagation(); event.preventDefault(); return; @@ -438,7 +437,6 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes x: mSelecttRect.left, y: mSelecttRect.bottom }); - window.siyuan.menus.menu.element.style.zIndex = "400"; event.stopPropagation(); event.preventDefault(); return; diff --git a/app/src/search/assets.ts b/app/src/search/assets.ts index 3d3708041..147273da9 100644 --- a/app/src/search/assets.ts +++ b/app/src/search/assets.ts @@ -390,7 +390,6 @@ export const assetMethodMenu = (target: HTMLElement, cb: () => void) => { } }).element); /// #if MOBILE - window.siyuan.menus.menu.element.style.zIndex = "221"; window.siyuan.menus.menu.fullscreen(); /// #else const rect = target.getBoundingClientRect(); @@ -541,7 +540,6 @@ export const assetMoreMenu = (target: Element, element: Element, cb: () => void) }, }).element); /// #if MOBILE - window.siyuan.menus.menu.element.style.zIndex = "221"; window.siyuan.menus.menu.fullscreen(); /// #else const rect = target.getBoundingClientRect(); diff --git a/app/src/search/spread.ts b/app/src/search/spread.ts index 32e7fd831..cfc25beab 100644 --- a/app/src/search/spread.ts +++ b/app/src/search/spread.ts @@ -108,6 +108,4 @@ export const openSearch = async (options: { }, dialog.element.querySelector(".b3-dialog__body"), () => { dialog.destroy({focus: "false"}); }); - // 搜索面板层级需高于 201(.protyle-hint) 且小于205(.block__popover) - dialog.element.firstElementChild.setAttribute("style", "z-index:202"); // https://github.com/siyuan-note/siyuan/issues/3515 }; diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index 12d9793e7..de5517286 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -46,7 +46,7 @@ type TEventBus = "ws-main" | "open-menu-av" | "open-menu-content" | "open-menu-breadcrumbmore" | "open-siyuan-url-plugin" | "open-siyuan-url-block" | "input-search" | - "loaded-protyle" | "loaded-protyle-dynamic"| + "loaded-protyle" | "loaded-protyle-dynamic" | "destroy-protyle" type TAVCol = "text" @@ -268,6 +268,7 @@ interface INotebook { } interface ISiyuan { + zIndex: number storage?: { [key: string]: any }, printWin?: import("electron").BrowserWindow transactions?: { diff --git a/app/src/window/index.ts b/app/src/window/index.ts index 7c4400b4d..e153c97c1 100644 --- a/app/src/window/index.ts +++ b/app/src/window/index.ts @@ -30,6 +30,7 @@ class App { addScript(`${Constants.PROTYLE_CDN}/js/protyle-html.js?v=${Constants.SIYUAN_VERSION}`, "protyleWcHtmlScript"); addBaseURL(); window.siyuan = { + zIndex: 10, transactions: [], reqIds: {}, backStack: [],