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

app/src/assets/scss/base.scss

@@ -387,12 +387,11 @@ html {
 
 .switch-doc {
   max-height: 70vh;
-  max-width: 768px;
+  max-width: 100%;
   min-width: 426px;
 
   .b3-list:last-child {
     border-left: 1px solid var(--b3-theme-surface-lighter);
-    max-height: calc(70vh - 35px)
   }
 
   &__path {

app/src/assets/scss/business/_config.scss

@@ -4,7 +4,6 @@
     box-sizing: border-box;
     flex: 1;
     background-color: var(--b3-theme-background);
-    height: 90vh;
 
     .b3-label {
       padding: 16px 0;
@@ -19,7 +18,6 @@
       overflow: auto;
       padding: 8px 0;
       box-sizing: border-box;
-      height: 90vh;
 
       .b3-form__icon {
         margin: 0 8px 8px;

app/src/assets/scss/business/resize.scss

@@ -1,7 +1,4 @@
 .resize {
-  &__move {
-    height: 100%;
-  }
 
   &__rd,
   &__ld,

app/src/assets/scss/component/_dialog.scss

@@ -57,9 +57,18 @@
     border-bottom: 1px solid var(--b3-theme-surface-lighter);
   }
 
+  &__body {
+    overflow: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
   &__content {
     padding: 16px 24px;
     word-break: break-all;
+    flex: 1;
+    overflow: auto;
   }
 
   &__action {

app/src/boot/globalShortcut.ts

@@ -486,7 +486,7 @@ export const globalShortcut = (app: App) => {
             }
             let dockHtml = "";
             if (!isTabWindow) {
-                dockHtml = `<ul class="b3-list b3-list--background" style="max-height: calc(70vh - 35px);overflow: auto;width: 200px;">
+                dockHtml = `<ul class="b3-list b3-list--background" style="overflow: auto;width: 200px;">
 <li data-type="riffCard" data-index="0" class="b3-list-item${!tabHtml ? " b3-list-item--focus" : ""}">
     <svg class="b3-list-item__graphic"><use xlink:href="#iconRiffCard"></use></svg>
     <span class="b3-list-item__text">${window.siyuan.languages.riffCard}</span>
@@ -510,7 +510,7 @@ export const globalShortcut = (app: App) => {
                 title: window.siyuan.languages.switchTab,
                 content: `<div class="fn__flex-column switch-doc">
     <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
-    <div class="fn__flex">${dockHtml}
+    <div class="fn__flex" style="overflow:auto;">${dockHtml}
         <ul${!isTabWindow ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
     </div>
     <div class="switch-doc__path"></div>

app/src/boot/openChangelog.ts

@@ -11,7 +11,8 @@ export const openChangelog = () => {
         const dialog = new Dialog({
             title: `✨ ${window.siyuan.languages.whatsNewInSiYuan}`,
             width: isMobile() ? "92vw" : "768px",
-            content: `<div style="overflow:auto;height: ${isMobile() ? "80" : "70"}vh;" class="b3-dialog__content b3-typography b3-typography--default">${response.data.html}</div>`
+            height: isMobile() ? "80vh" : "70vh",
+            content: `<div style="overflow:auto;" class="b3-dialog__content b3-typography b3-typography--default">${response.data.html}</div>`
         });
         highlightRender(dialog.element);
     });

app/src/business/openRecentDocs.ts

@@ -24,7 +24,7 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__
         });
         let dockHtml = "";
         if (!isWindow()) {
-            dockHtml = `<ul class="b3-list b3-list--background" style="max-height: calc(70vh - 35px);overflow: auto;width: 200px;">
+            dockHtml = `<ul class="b3-list b3-list--background" style="overflow: auto;width: 200px;">
 <li data-type="riffCard" data-index="0" class="b3-list-item${!tabHtml ? " b3-list-item--focus" : ""}">
     <svg class="b3-list-item__graphic"><use xlink:href="#iconRiffCard"></use></svg>
     <span class="b3-list-item__text">${window.siyuan.languages.riffCard}</span>
@@ -43,7 +43,7 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__
             title: window.siyuan.languages.recentDocs,
             content: `<div class="fn__flex-column switch-doc">
     <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
-    <div class="fn__flex">${dockHtml}
+    <div class="fn__flex" style="overflow:auto;">${dockHtml}
         <ul${!isWindow() ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
     </div>
     <div class="switch-doc__path"></div>

app/src/card/openCard.ts

@@ -38,7 +38,7 @@ export const genCardHTML = (options: {
             <svg><use xlink:href="#iconRiffCard"></use></svg>
         </div>
         <span class="fn__space"></span>
-        <span class="fn__flex-1 fn__flex-center">${window.siyuan.languages.riffCard}</span>`}
+        <span class="fn__flex-1 fn__flex-center resize__move">${window.siyuan.languages.riffCard}</span>`}
         <span class="fn__space"></span>
         <div data-type="count" class="ft__on-surface ft__smaller fn__flex-center${options.blocks.length === 0 ? " fn__none" : ""}">1/${options.blocks.length}</span></div>
         <div class="fn__space"></div>

app/src/card/viewCards.ts

@@ -21,8 +21,7 @@ export const viewCards = (app: App, deckID: string, title: string, deckType: "Tr
         const dialog = new Dialog({
             content: `<div class="fn__flex-column" style="height: 100%">
     <div class="block__icons">
-        <span class="fn__flex-center">${escapeHtml(title)}</span>
+        <span class="fn__flex-1 fn__flex-center resize__move">${escapeHtml(title)}</span>
-        <div class="fn__flex-1"></div>
         <span class="fn__space"></span>
         <span data-type="previous" class="block__icon block__icon--show b3-tooltips b3-tooltips__ne" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
         <span class="fn__space"></span>

app/src/config/index.ts

@@ -125,6 +125,7 @@ export const openSetting = (app:App) => {
   <div class="config__tab-container fn__none" data-name="about"></div>
 </div>`,
         width: "90vw",
+        height: "90vh",
     });
 
     initConfigSearch(dialog.element, app);

app/src/config/util/snippets.ts

@@ -45,8 +45,8 @@ export const openSnippets = () => {
         });
         const dialog = new Dialog({
             width: "70vw",
-            content: `<div style="height: 60vh;" class="fn__flex-column">
+            height: "80vh",
-    <div class="layout-tab-bar fn__flex fn__flex-shrink" style="border-radius: 4px 4px 0 0">
+            content: `<div class="layout-tab-bar fn__flex fn__flex-shrink" style="border-radius: 4px 4px 0 0">
     <div data-type="css" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">CSS</span><span class="fn__flex-1"></span></div>
     <div data-type="js" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">JS</span><span class="fn__flex-1"></span></div>
 </div>
@@ -70,7 +70,6 @@ export const openSnippets = () => {
         </div>
     </div>
 </div>
-</div>
 <div class="b3-dialog__action">
     <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
     <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>

app/src/dialog/index.ts

@@ -26,10 +26,10 @@ export class Dialog {
 
         this.element.innerHTML = `<div class="b3-dialog">
 <div class="b3-dialog__scrim"${options.transparent ? 'style="background-color:transparent"' : ""}></div>
-<div class="b3-dialog__container" style="width:${options.width || "auto"}">
+<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>
   <div class="resize__move b3-dialog__header${options.title ? "" : " fn__none"}" onselectstart="return false;">${options.title || ""}</div>
-  <div style="height:${options.height || "auto"}">${options.content}</div>
+  <div class="b3-dialog__body">${options.content}</div>
   <div class="resize__rd"></div><div class="resize__ld"></div><div class="resize__lt"></div><div class="resize__rt"></div><div class="resize__r"></div><div class="resize__d"></div><div class="resize__t"></div><div class="resize__l"></div>
 </div></div>`;
 

app/src/dialog/moveResize.ts

@@ -4,10 +4,9 @@ import {Constants} from "../constants";
 export const moveResize = (element: HTMLElement, afterCB?: (type: string) => void) => {
     element.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
         let iconsElement = hasClosestByClassName(event.target, "resize__move");
-        let x = event.clientX - parseInt(element.style.left);
+        let x: number
-        let y = event.clientY - parseInt(element.style.top);
+        let y: number
-        const height = element.clientHeight;
+        const elementRect = element.getBoundingClientRect();
-        const width = element.clientWidth;
         if (!iconsElement) {
             x = event.clientX;
             y = event.clientY;
@@ -20,13 +19,24 @@ export const moveResize = (element: HTMLElement, afterCB?: (type: string) => voi
                 hasClosestByClassName(event.target, "resize__lt") ||
                 hasClosestByClassName(event.target, "resize__t");
 
+        } else {
+            x = event.clientX - elementRect.left;
+            y = event.clientY - elementRect.top;
         }
         if (!iconsElement) {
             return;
         }
+        const height = element.clientHeight;
+        const width = element.clientWidth;
         const type = iconsElement.className.split("resize__")[1].split(" ")[0];
         const documentSelf = document;
         element.style.userSelect = "none";
+        if (element.classList.contains("b3-dialog__container") && element.parentElement.style.display !== "block") {
+            element.parentElement.style.display = "block";
+            element.style.left = elementRect.left + "px";
+            element.style.top = elementRect.top + "px";
+            element.style.width = elementRect.width + "px";
+        }
 
         documentSelf.ondragstart = () => false;
 

app/src/menus/bookmark.ts

@@ -18,6 +18,7 @@ export const openBookmarkMenu = (element: HTMLElement, event: MouseEvent, bookma
     const id = element.getAttribute("data-node-id");
     if (!id && !window.siyuan.config.readonly) {
         window.siyuan.menus.menu.append(new MenuItem({
+            icon: "iconEdit",
             label: window.siyuan.languages.rename,
             click: () => {
                 const oldBookmark = element.querySelector(".b3-list-item__text").textContent;

app/src/menus/onGetnotebookconf.ts

@@ -21,7 +21,7 @@ export const onGetnotebookconf = (data: INotebookConf) => {
     const titleHTML = `<div class="fn__flex">${escapeHtml(data.name)}
 <div class="fn__space"></div>
 <button class="b3-button b3-button--small">${window.siyuan.languages.copy} ID</button></div>`;
-    const contentHTML = `<div style="max-height: 80vh;overflow: auto;">
+    const contentHTML = `<div class="b3-dialog__content" style="background-color: var(--b3-theme-background);">
 <div class="b3-label">
     ${window.siyuan.languages.fileTree12}
     <div class="fn__hr"></div>

app/src/mobile/util/initFramework.ts

@@ -66,7 +66,7 @@ export const initFramework = (app: App) => {
                     if (!bookmark) {
                         bookmark = new MobileBookmarks(app);
                     } else {
-                        backlink.update();
+                        bookmark.update();
                     }
                 } else if (type === "sidebar-tag-tab") {
                     if (!tag) {

app/src/protyle/export/util.ts

@@ -28,7 +28,7 @@ export const afterExport = (exportPath: string, msgId: string) => {
 export const exportImage = (id: string) => {
     const exportDialog = new Dialog({
         title: window.siyuan.languages.exportAsImage,
-        content: `<div class="b3-dialog__content" style="max-height: 70vh;overflow: auto;${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)">
+        content: `<div class="b3-dialog__content" style="${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)">
     <div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="export-img protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
     <div class="fn__hr--b"></div>
     <div class="fn__hr--b"></div>
@@ -45,6 +45,7 @@ export const exportImage = (id: string) => {
 </div>
  <div class="fn__loading"><img height="128px" width="128px" src="stage/loading-pure.svg"></div>`,
         width: isMobile() ? "92vw" : "990px",
+        height: "70vh"
     });
     const btnsElement = exportDialog.element.querySelectorAll(".b3-button");
     btnsElement[0].addEventListener("click", () => {
@@ -52,7 +53,7 @@ export const exportImage = (id: string) => {
     });
     btnsElement[1].addEventListener("click", () => {
         const msgId = showMessage(window.siyuan.languages.exporting, 0);
-        previewElement.parentElement.style.maxHeight = "none";
+        (exportDialog.element.querySelector(".b3-dialog__container") as HTMLElement).style.height = "";
         setStorageVal(Constants.LOCAL_EXPORTIMG, window.siyuan.storage[Constants.LOCAL_EXPORTIMG]);
         setTimeout(() => {
             addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {

app/src/search/menu.ts

@@ -10,7 +10,7 @@ import {setStorageVal} from "../protyle/util/compatibility";
 export const filterMenu = (config: ISearchOption, cb: () => void) => {
     const filterDialog = new Dialog({
         title: window.siyuan.languages.type,
-        content: `<div class="b3-dialog__content" style="height:calc(70vh - 45px);overflow: auto">
+        content: `<div class="b3-dialog__content">
     <label class="fn__flex b3-label">
         <svg class="ft__on-surface svg fn__flex-center"><use xlink:href="#iconMath"></use></svg>
         <span class="fn__space"></span>
@@ -125,6 +125,7 @@ export const filterMenu = (config: ISearchOption, cb: () => void) => {
     <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
 </div>`,
         width: isMobile() ? "92vw" : "520px",
+        height: "70vh",
     });
     const btnsElement = filterDialog.element.querySelectorAll(".b3-button");
     btnsElement[0].addEventListener("click", () => {

app/src/search/spread.ts

@@ -104,7 +104,7 @@ export const openSearch = async (options: {
         sort: localData.sort,
         types: Object.assign({}, localData.types),
         page:  options.key ? 1 : localData.page
-    }, dialog.element.querySelector(".b3-dialog__container").lastElementChild, () => {
+    }, dialog.element.querySelector(".b3-dialog__body"), () => {
         dialog.destroy({focus: "false"});
     });
     // 搜索面板层级需高于 201（.protyle-hint） 且小于205（.block__popover）

app/src/search/util.ts

@@ -88,7 +88,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
             <svg data-menu="true" class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
             <svg class="search__arrowdown"><use xlink:href="#iconDown"></use></svg>
         </span>
-        <input id="searchInput" style="padding-right: 60px" class="b3-text-field b3-text-field--text" placeholder="${window.siyuan.languages.showRecentUpdatedBlocks}">
+        <input id="searchInput" style="padding-right: 60px" class="b3-text-field b3-text-field--text resize__move" placeholder="${window.siyuan.languages.showRecentUpdatedBlocks}">
         <div id="searchHistoryList" data-close="false" class="fn__none b3-menu b3-list b3-list--background"></div>
         <div class="block__icons">
             <span id="searchReplace" aria-label="${window.siyuan.languages.replace}" class="block__icon b3-tooltips b3-tooltips__w">

app/src/util/mount.ts

@@ -36,7 +36,12 @@ export const newDailyNote = () => {
         return;
     }
     const localNotebookId = window.siyuan.storage[Constants.LOCAL_DAILYNOTEID];
-    if (localNotebookId && getNotebookName(localNotebookId) && !isMobile()) {
+    const localNotebookIsOpen = window.siyuan.notebooks.find((item) => {
+        if (item.id === localNotebookId && !item.closed) {
+            return true;
+        }
+    });
+    if (localNotebookId && localNotebookIsOpen && !isMobile()) {
         fetchPost("/api/filetree/createDailyNote", {
             notebook: localNotebookId,
             app: Constants.SIYUAN_APPID,

app/src/util/pathName.ts

@@ -142,20 +142,19 @@ export const movePathTo = (cb: (toPath: string[], toNotebook: string[]) => void,
     const dialog = new Dialog({
         title: `${title || window.siyuan.languages.move}
 <div style="max-height: 16px;overflow: auto;line-height: 14px;-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, #000 6px);padding-bottom: 4px;margin-bottom: -4px" class="ft__smaller ft__on-surface fn__hidescrollbar"></div>`,
-        content: `<div>
+        content: `<div class="b3-form__icon" style="margin: 8px">
-    <div class="b3-form__icon" style="margin: 8px">
     <svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
     <input class="b3-text-field fn__block b3-form__icon-input" value="" placeholder="${window.siyuan.languages.search}">
 </div>
-    <ul id="foldList" class="fn__none b3-list b3-list--background${isMobile() ? " b3-list--mobile" : ""}" style="height: 50vh;overflow: auto;position: relative"></ul>
+<ul id="foldList" class="fn__flex-1 fn__none b3-list b3-list--background${isMobile() ? " b3-list--mobile" : ""}" style="overflow: auto;position: relative"></ul>
-    <div id="foldTree" class="${isMobile() ? "b3-list--mobile" : ""}" style="height: 50vh;overflow: auto;position: relative"></div>
+<div id="foldTree" class="fn__flex-1${isMobile() ? " b3-list--mobile" : ""}" style="overflow: auto;position: relative"></div>
 <div class="fn__hr"></div>
-</div>
 <div class="b3-dialog__action">
     <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
     <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
 </div>`,
         width: isMobile() ? "92vw" : "50vw",
+        height: isMobile() ? "80vh" : "70vh",
         destroyCallback() {
             if (range) {
                 focusByRange(range);