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

🎨 fix https://github.com/siyuan-note/siyuan/issues/7602

Browse source
This commit is contained in:
Vanessa 2023-09-02 11:13:47 +08:00
parent 8d467c7df2
commit ee62729dc2
31 changed files with 32 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/src/assets/scss/base.scss
View file

@ -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;

2
app/src/assets/scss/business/_av.scss
View file

@ -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 {

5
app/src/assets/scss/business/_block.scss
View file

@ -17,11 +17,6 @@
&--open {
opacity: 1;
z-index: 205;
}
&--top.block__popover--open {
z-index: 206;
}
& > .block__icons {

1
app/src/assets/scss/business/_search.scss
View file

@ -61,6 +61,7 @@
top: 42px;
position: absolute;
left: 8px;
z-index: 1;
}
}

1
app/src/assets/scss/component/_dialog.scss
View file

@ -8,7 +8,6 @@
width: 100%;
height: 100%;
display: flex;
z-index: 305;
&--open {
.b3-dialog__scrim {

1
app/src/assets/scss/component/_menu.scss
View file

@ -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,

2
app/src/assets/scss/component/_snackbar.scss
View file

@ -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;

5
app/src/assets/scss/mobile.scss
View file

@ -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;

2
app/src/assets/scss/pdf/_pdf.scss
View file

@ -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;

2
app/src/assets/scss/protyle/_toolbar.scss
View file

@ -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;

8
app/src/block/Panel.ts
View file

@ -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;

2
app/src/dialog/index.ts
View file

@ -27,7 +27,7 @@ export class Dialog {
this.destroyCallback = options.destroyCallback;
this.element = document.createElement("div") as HTMLElement;
this.element.innerHTML = `<div class="b3-dialog">
this.element.innerHTML = `<div class="b3-dialog" style="z-index: ${++window.siyuan.zIndex};">
<div class="b3-dialog__scrim"${options.transparent ? 'style="background-color:transparent"' : ""}></div>
<div class="b3-dialog__container" style="width:${options.width || "auto"};height:${options.height || "auto"}">
<svg ${(isMobile() && options.title) ? 'style="top:0;right:0;"' : ""} class="b3-dialog__close${this.disableClose ? " fn__none" : ""}"><use xlink:href="#iconCloseRound"></use></svg>

10
app/src/dialog/processSystem.ts
View file

@ -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", '<div id="progress"></div>');
document.body.insertAdjacentHTML("beforeend", `<div id="progress" style="z-index: ${++window.siyuan.zIndex}"></div>`);
progressElement = document.getElementById("progress");
}
// code 0: 有进度；1: 无进度；2: 关闭
@ -295,8 +295,8 @@ export const progressLoading = (data: IWebSocketData) => {
return;
}
if (data.code === 0) {
progressElement.innerHTML = `<div class="b3-dialog__scrim" style="z-index:400;opacity: 1"></div>
<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:var(--b3-theme-on-surface);z-index:400;">
progressElement.innerHTML = `<div class="b3-dialog__scrim" style="opacity: 1"></div>
<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:var(--b3-theme-on-surface);">
<div style="text-align: right">${data.data.current}/${data.data.total}</div>
<div style="margin: 8px 0;height: 8px;border-radius: var(--b3-border-radius);overflow: hidden;background-color:#fff;"><div style="width: ${data.data.current / data.data.total * 100}%;transition: var(--b3-transition);background-color: var(--b3-theme-primary);height: 8px;"></div></div>
<div>${data.msg}</div>
@ -305,8 +305,8 @@ export const progressLoading = (data: IWebSocketData) => {
if (progressElement.lastElementChild) {
progressElement.lastElementChild.lastElementChild.innerHTML = data.msg;
} else {
progressElement.innerHTML = `<div class="b3-dialog__scrim" style="z-index:400;opacity: 1"></div>
<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:var(--b3-theme-on-surface);z-index:400;">
progressElement.innerHTML = `<div class="b3-dialog__scrim" style="opacity: 1"></div>
<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:var(--b3-theme-on-surface);">
<div style="margin: 8px 0;height: 8px;border-radius: var(--b3-border-radius);overflow: hidden;background-color:#fff;"><div style="background-color: var(--b3-theme-primary);height: 8px;background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);animation: stripMove 450ms linear infinite;background-size: 50px 50px;"></div></div>
<div>${data.msg}</div>
</div>`;

1
app/src/index.ts
View file

@ -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: [],

1
app/src/layout/dock/Inbox.ts
View file

@ -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) {

3
app/src/menus/Menu.ts
View file

@ -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});

1
app/src/menus/bookmark.ts
View file

@ -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});
};

1
app/src/menus/commonMenuItem.ts
View file

@ -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});
});

1
app/src/menus/tag.ts
View file

@ -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});
};

3
app/src/mobile/dock/MobileFiles.ts
View file

@ -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) {

1
app/src/mobile/dock/MobileTags.ts
View file

@ -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;

1
app/src/mobile/index.ts
View file

@ -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: {},

2
app/src/mobile/menu/search.ts
View file

@ -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();

1
app/src/mobile/util/keyboardToolbar.ts
View file

@ -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";

2
app/src/protyle/render/av/cell.ts
View file

@ -360,7 +360,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
return;
}
window.siyuan.menus.menu.remove();
document.body.insertAdjacentHTML("beforeend", `<div class="av__mask">
document.body.insertAdjacentHTML("beforeend", `<div class="av__mask" style="z-index: ${++window.siyuan.zIndex}">
${html}
</div>`);
const avMaskElement = document.querySelector(".av__mask");

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

@ -47,7 +47,7 @@ export const openMenuPanel = (options: {
html = getDateHTML(data.view, options.cellElements);
}
document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">
document.body.insertAdjacentHTML("beforeend", `<div class="av__panel" style="z-index: ${++window.siyuan.zIndex}">
<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu">${html}</div>
</div>`);

2
app/src/protyle/render/av/render.ts
View file

@ -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;

2
app/src/search/assets.ts
View file

@ -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();

2
app/src/search/spread.ts
View file

@ -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
};

3
app/src/types/index.d.ts vendored
View file

@ -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?: {

1
app/src/window/index.ts
View file

@ -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: [],