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

app/appearance/langs/en_US.json

@@ -1,6 +1,5 @@
 {
   "exitFocus": "Exit focus",
-  "exitReadOnly": "Exit read-only",
   "pointExchangeSize": "Point Exchange",
   "panel": "Panel",
   "copyPath": "Copy Path",

app/appearance/langs/es_ES.json

@@ -1,6 +1,5 @@
 {
   "exitFocus": "Salir del enfoque",
-  "exitReadOnly": "Salir de solo lectura",
   "pointExchangeSize": "Intercambio de puntos",
   "panel": "Panel",
   "copyPath": "Copiar ruta",

app/appearance/langs/fr_FR.json

@@ -1,6 +1,5 @@
 {
   "exitFocus": "Quitter le focus",
-  "exitReadOnly": "Quitter en lecture seule",
   "pointExchangeSize": "Échange de points",
   "panel": "Panneau",
   "copyPath": "Copier le chemin",

app/appearance/langs/zh_CHT.json

@@ -1,6 +1,5 @@
 {
   "exitFocus": "退出聚焦",
-  "exitReadOnly": "退出只讀",
   "pointExchangeSize": "積分兌換",
   "panel": "面板",
   "copyPath": "複製路徑",

app/appearance/langs/zh_CN.json

@@ -1,6 +1,5 @@
 {
   "exitFocus": "退出聚焦",
-  "exitReadOnly": "退出只读",
   "pointExchangeSize": "积分兑换",
   "panel": "面板",
   "copyPath": "复制路径",

app/src/config/editor.ts

@@ -6,7 +6,6 @@ import {setPadding} from "../protyle/ui/initUI";
 import {reloadProtyle} from "../protyle/util/reload";
 import {disabledProtyle, enableProtyle} from "../protyle/util/onGet";
 import {updateHotkeyTip} from "../protyle/util/compatibility";
-import {updateTitle} from "../dialog/processSystem";
 
 export const editor = {
     element: undefined as Element,
@@ -17,13 +16,14 @@ export const editor = {
         }
         window.siyuan.config.editor.readOnly = readOnly;
         if (readOnly) {
+            target.classList.add("toolbar__item--active")
             target.setAttribute("aria-label", `${window.siyuan.languages.use} ${window.siyuan.languages.editMode} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}`);
             target.querySelector("use").setAttribute("xlink:href", "#iconPreview");
         } else {
+            target.classList.remove("toolbar__item--active")
             target.setAttribute("aria-label", `${window.siyuan.languages.use} ${window.siyuan.languages.editReadonly} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}`);
             target.querySelector("use").setAttribute("xlink:href", "#iconEdit");
         }
-        updateTitle(readOnly);
         fetchPost("/api/setting/setEditor", window.siyuan.config.editor, () => {
             const allModels = getAllModels();
             allModels.editor.forEach(editor => {

app/src/dialog/processSystem.ts

@@ -289,36 +289,7 @@ export const setTitle = (title: string, protyle?: IProtyle) => {
             return;
         }
         dragElement.setAttribute("title", title);
-        title = escapeHtml(title);
+        dragElement.innerHTML = escapeHtml(title);
-        if (protyle && protyle.disabled) {
-            title = `${title}<span class="fn__space"></span><button id="barExitReadOnly" class="b3-button b3-button--small b3-button--success">${window.siyuan.languages.exitReadOnly}</button>`;
-        }
-        if (protyle && protyle.block.showAll) {
-            title = `${title}<span class="fn__space"></span><button data-id="${protyle.model.headElement.getAttribute("data-id")}" id="barExitFocus" class="b3-button b3-button--small b3-button--info">${window.siyuan.languages.exitFocus}</button>`;
-        }
-        dragElement.innerHTML = title;
-    }
-};
-
-export const updateTitle = (readonly?: boolean, zoomIn?: boolean, zoomInId?: string) => {
-    const dragElement = document.getElementById("drag");
-    if (typeof readonly === "boolean") {
-        const barExitReadOnlyElement = dragElement.querySelector("#barExitReadOnly")
-        if (readonly && !barExitReadOnlyElement) {
-            dragElement.insertAdjacentHTML("beforeend", `<span class="fn__space"></span><button id="barExitReadOnly" class="b3-button b3-button--small b3-button--success">${window.siyuan.languages.exitReadOnly}</button>`)
-        } else if (!readonly && barExitReadOnlyElement) {
-            barExitReadOnlyElement.previousElementSibling.remove();
-            barExitReadOnlyElement.remove();
-        }
-    }
-    if (typeof zoomIn === "boolean") {
-        const barExitFocusElement = dragElement.querySelector("#barExitFocus")
-        if (zoomIn && !barExitFocusElement) {
-            dragElement.insertAdjacentHTML("beforeend", `<span class="fn__space"></span><button data-id="${zoomInId}" id="barExitFocus" class="b3-button b3-button--small b3-button--info">${window.siyuan.languages.exitFocus}</button>`)
-        } else if (!zoomIn && barExitFocusElement) {
-            barExitFocusElement.previousElementSibling.remove();
-            barExitFocusElement.remove();
-        }
     }
 };
 

app/src/menus/protyle.ts

@@ -46,7 +46,6 @@ import {exportAsset} from "./util";
 import {removeLink} from "../protyle/toolbar/Link";
 import {alignImgCenter, alignImgLeft} from "../protyle/wysiwyg/commonHotkey";
 import {getEnableHTML} from "../protyle/wysiwyg/removeEmbed";
-import {updateTitle} from "../dialog/processSystem";
 import {renameTag} from "../util/noRelyPCFunction";
 
 export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
@@ -466,6 +465,15 @@ export const zoomOut = (protyle: IProtyle, id: string, focusId?: string, isPushB
         if (isPushBack) {
             pushBack();
         }
+    } else {
+        const exitFocusElement =  protyle.breadcrumb.element.parentElement.querySelector('[data-type="exit-focus"]')
+        if (id === protyle.block.rootID) {
+            exitFocusElement.classList.add("fn__none")
+            exitFocusElement.nextElementSibling.classList.add("fn__none")
+        } else {
+            exitFocusElement.classList.remove("fn__none")
+            exitFocusElement.nextElementSibling.classList.remove("fn__none")
+        }
     }
     fetchPost("/api/filetree/getDoc", {
         id,
@@ -496,7 +504,6 @@ export const zoomOut = (protyle: IProtyle, id: string, focusId?: string, isPushB
         /// #if !MOBILE
         if (protyle.model) {
             updateBacklinkGraph(getAllModels(), protyle);
-            updateTitle(undefined, id !== protyle.block.rootID, protyle.model.parent.headElement.getAttribute("data-id"));
         }
         /// #endif
         if (callback) {

app/src/protyle/breadcrumb/index.ts

@@ -35,12 +35,15 @@ export class Breadcrumb {
     constructor(protyle: IProtyle) {
         const element = document.createElement("div");
         element.className = "protyle-breadcrumb";
+        const isFocus = protyle.options.action.includes(Constants.CB_GET_ALL)
         let html = `<div class="protyle-breadcrumb__bar"></div>
 <span class="protyle-breadcrumb__space"></span>
-<button class="b3-tooltips b3-tooltips__w block__icon fn__flex-center" style="opacity: 1;" data-menu="true" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href="#iconMore"></use></svg></button>`;
+<button class="block__icon block__icon--show ft__smaller fn__flex-center${isFocus ? "" : " fn__none"}" style="line-height: 14px" data-type="exit-focus">${window.siyuan.languages.exitFocus}</button>
+<span class="fn__space${isFocus ? "" : " fn__none"}"></span>
+<button class="b3-tooltips b3-tooltips__w block__icon block__icon--show fn__flex-center" data-menu="true" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href="#iconMore"></use></svg></button>`;
         if (protyle.options.render.breadcrumbContext) {
             html += `<span class="fn__space"></span>
-<div class="b3-tooltips b3-tooltips__w block__icon fn__flex-center" style="opacity: 1;" data-type="context" aria-label="${window.siyuan.languages.context}"><svg><use xlink:href="#iconAlignCenter"></use></svg></div>`;
+<div class="b3-tooltips b3-tooltips__w block__icon block__icon--show fn__flex-center" data-type="context" aria-label="${window.siyuan.languages.context}"><svg><use xlink:href="#iconAlignCenter"></use></svg></div>`;
         }
         element.innerHTML = html;
         this.element = element.firstElementChild as HTMLElement;
@@ -65,6 +68,10 @@ export class Breadcrumb {
                     });
                     event.preventDefault();
                     break;
+                } else if (target.getAttribute("data-type") === "exit-focus") {
+                    zoomOut(protyle, protyle.block.rootID);
+                    event.preventDefault();
+                    break
                 } else if (target.getAttribute("data-type") === "context") {
                     if (target.classList.contains("block__icon--active")) {
                         fetchPost("/api/filetree/getDoc", {

app/src/util/onGetConfig.ts

@@ -203,7 +203,7 @@ const initBar = () => {
 <div id="barSearch" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.globalSearch} ${updateHotkeyTip(window.siyuan.config.keymap.general.globalSearch.custom)}">
     <svg><use xlink:href="#iconSearch"></use></svg>
 </div>
-<div id="barReadonly" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.use} ${window.siyuan.config.editor.readOnly ? window.siyuan.languages.editMode : window.siyuan.languages.editReadonly} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}">
+<div id="barReadonly" class="toolbar__item b3-tooltips b3-tooltips__sw${window.siyuan.config.editor.readOnly ? " toolbar__item--active" : ""}" aria-label="${window.siyuan.languages.use} ${window.siyuan.config.editor.readOnly ? window.siyuan.languages.editMode : window.siyuan.languages.editReadonly} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}">
     <svg><use xlink:href="#icon${window.siyuan.config.editor.readOnly ? "Preview" : "Edit"}"></use></svg>
 </div>
 <div id="barMode" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.appearanceMode}">
@@ -217,17 +217,6 @@ const initBar = () => {
                 goBack();
                 event.stopPropagation();
                 break;
-            } else if (target.id === "barExitReadOnly") {
-                editor.setMode();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barExitFocus") {
-                const editor = (getInstanceById(target.getAttribute("data-id")) as Tab)?.model;
-                if (editor instanceof Editor) {
-                    zoomOut(editor.editor.protyle, editor.editor.protyle.block.rootID);
-                }
-                event.stopPropagation();
-                break;
             } else if (target.id === "barForward") {
                 goForward();
                 event.stopPropagation();