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

app/src/assets/scss/mobile.scss

@@ -31,12 +31,55 @@
 
 .b3-list--mobile {
 
+  .counter {
+    line-height: 36px;
+    height: 36px;
+    font-size: 16px;
+    border-radius: 4px;
+  }
+
   & > .fn__flex-column {
     height: 100%;
   }
 
   .b3-list-item {
-    font-size: 16px;
+    font-size: 18px;
+    line-height: 36px;
+    padding: 4px;
+
+    &__icon {
+      font-size: 18px;
+      line-height: 36px;
+      height: auto;
+    }
+
+    &__graphic {
+      width: 20px;
+      height: 20px;
+      padding: 8px 4px;
+      line-height: 20px;
+      font-size: 20px;
+    }
+
+    &__toggle {
+      padding: 11px;
+      height: auto;
+    }
+
+    &__arrow {
+      height: 14px;
+      width: 14px;
+    }
+
+    &__action {
+      padding: 8px;
+      height: 20px;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
   }
 }
 
@@ -65,7 +108,7 @@
   background: var(--b3-theme-background);
 
   &--border {
-    border-bottom: 1px solid var(--b3-theme-surface-lighter);
+    border-bottom: .5px solid var(--b3-theme-background-light);
   }
 
   &--dark {
@@ -73,8 +116,8 @@
   }
 
   &__icon {
-    height: 18px;
+    height: 20px;
-    width: 18px;
+    width: 20px;
     padding: 8px;
     flex-shrink: 0;
     margin: 6px 4px;
@@ -97,11 +140,8 @@
     min-width: 1px;
     line-height: 30px;
     font-size: 17px;
-
+    padding: 0;
-    &:focus,
+    border: 0;
-    &:hover {
-      box-shadow: none;
-    }
   }
 
   &__search {

app/src/assets/template/mobile/index.tpl

@@ -14,7 +14,7 @@
     <svg id="toolbarFile" class="toolbar__icon">
         <use xlink:href="#iconMenu"></use>
     </svg>
-    <input class="toolbar__title b3-text-field fn__hidden" id="toolbarName">
+    <input class="toolbar__title fn__hidden" id="toolbarName">
     <svg id="toolbarSync" class="toolbar__icon fn__none">
         <use xlink:href="#iconCloudSucc"></use>
     </svg>

app/src/mobile/util/MobileFiles.ts

@@ -605,7 +605,7 @@ export class MobileFiles extends Model {
         }
         return `<li data-node-id="${item.id}" data-name="${Lute.EscapeHTMLStr(item.name)}" data-type="navigation-file" 
 class="b3-list-item" data-path="${item.path}">
-    <span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle${item.subFileCount === 0 ? " fn__hidden" : ""}">
+    <span style="padding-left: ${(item.path.split("/").length - 2) * 29 + 40}px" class="b3-list-item__toggle${item.subFileCount === 0 ? " fn__hidden" : ""}">
         <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
     </span>
     <span class="b3-list-item__icon">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>

app/src/mobile/util/initFramework.ts

@@ -29,7 +29,8 @@ export const initFramework = () => {
     let bookmark: MobileBookmarks;
     let tag: MobileTags;
     // 不能使用 getEventName，否则点击返回会展开右侧栏
-    sidebarElement.querySelector(".toolbar--border").addEventListener("click", (event: Event & {
+    const firstToolbarElement = sidebarElement.querySelector(".toolbar--border")
+    firstToolbarElement.addEventListener("click", (event: Event & {
         target: Element
     }) => {
         const svgElement = hasTopClosestByTag(event.target, "svg");
@@ -41,8 +42,11 @@ export const initFramework = () => {
             closePanel();
             return;
         }
-        sidebarElement.querySelectorAll(".toolbar--border svg").forEach(item => {
+        firstToolbarElement.querySelectorAll(".toolbar__icon").forEach(item => {
             const itemType = item.getAttribute("data-type");
+            if (!itemType) {
+                return;
+            }
             if (itemType === type) {
                 if (type === "sidebar-outline-tab") {
                     if (!outline) {
@@ -57,13 +61,13 @@ export const initFramework = () => {
                         backlink.update();
                     }
                 } else if (type === "sidebar-bookmark-tab") {
-                    if (!backlink) {
+                    if (!bookmark) {
                         bookmark = new MobileBookmarks();
                     } else {
                         backlink.update();
                     }
                 } else if (type === "sidebar-tag-tab") {
-                    if (!backlink) {
+                    if (!tag) {
                         tag = new MobileTags();
                     } else {
                         tag.update();

app/src/util/Tree.ts

@@ -74,6 +74,14 @@ export class Tree {
                 countHTML = `<span class="counter">${item.count}</span>`;
             }
             const hasChild = (item.children && item.children.length > 0) || (item.blocks && item.blocks.length > 0);
+            let style = "";
+            if (isMobile()) {
+                if (item.depth > 0) {
+                    style = `padding-left: ${(item.depth - 1) * 29 + 40}px`
+                }
+            } else {
+                style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`
+            }
             html += `<li class="b3-list-item" 
 ${(item.nodeType !== "NodeDocument" && item.type === "backlink") ? 'draggable="true" ' : ""}
 ${item.id ? 'data-node-id="' + item.id + '"' : ""} 
@@ -82,7 +90,7 @@ data-treetype="${item.type}"
 data-type="${item.nodeType}" 
 data-subtype="${item.subType}" 
 ${item.label ? "data-label='" + item.label + "'" : ""}>
-    <span style="padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px" class="b3-list-item__toggle${(item.type === "backlink" || hasChild) ? " b3-list-item__toggle--hl" : ""}${hasChild||item.type === "backlink" ? "" : " fn__hidden"}">
+    <span style="${style}" class="b3-list-item__toggle${(item.type === "backlink" || hasChild) ? " b3-list-item__toggle--hl" : ""}${hasChild || item.type === "backlink" ? "" : " fn__hidden"}">
         <svg data-id="${encodeURIComponent(item.name + item.depth)}" class="b3-list-item__arrow${hasChild ? " b3-list-item__arrow--open" : ""}"><use xlink:href="#iconRight"></use></svg>
     </span>
     ${iconHTML}
@@ -119,6 +127,14 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
             } else {
                 iconHTML = `<svg data-defids='["${item.defID}"]' class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type, item.subType)}"></use></svg>`;
             }
+            let style = "";
+            if (isMobile()) {
+                if (item.depth > 0) {
+                    style = `padding-left: ${(item.depth - 1) * 29 + 40}px`
+                }
+            } else {
+                style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`
+            }
             html += `<li ${type === "backlink" ? 'draggable="true"' : ""} 
 class="b3-list-item ${isMobile() ? "" : "b3-list-item--hide-action"}"  
 data-node-id="${item.id}" 
@@ -128,7 +144,7 @@ data-type="${item.type}"
 data-subtype="${item.subType}" 
 data-treetype="${type}"
 data-def-path="${item.defPath}">
-    <span style="padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px" class="b3-list-item__toggle${item.children ? " b3-list-item__toggle--hl" : ""}${item.children ? "" : " fn__hidden"}">
+    <span style="${style}" class="b3-list-item__toggle${item.children ? " b3-list-item__toggle--hl" : ""}${item.children ? "" : " fn__hidden"}">
         <svg data-id="${item.id}" class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
     </span>
     ${iconHTML}