From 4c8b2278d54e8438e006a28b8161b815aab89fd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A2=96=E9=80=B8?=
 <49649786+Zuoqiu-Yingyi@users.noreply.github.com>
Date: Thu, 16 Mar 2023 09:15:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BD=BF=E7=94=A8=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=8E=9F=E7=94=9F=20Emoji=20=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E4=B8=8D=E4=B8=80=E8=87=B4=E9=97=AE=E9=A2=98=20(#7668)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :art: 修复使用系统默认图标时图标宽度与自定义图标不一致问题

* :art: 修复 emoji 选择菜单中图标不等宽问题

* :art: 调整移动端样式
---
 app/src/assets/scss/component/_list.scss | 5 +++--
 app/src/assets/scss/component/_menu.scss | 4 +++-
 app/src/layout/dock/Files.ts             | 2 +-
 app/src/mobile/util/MobileFiles.ts       | 2 +-
 app/src/util/Tree.ts                     | 4 ++--
 app/src/util/pathName.ts                 | 2 +-
 6 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss
index 75a17a36a..c61f238ad 100644
--- a/app/src/assets/scss/component/_list.scss
+++ b/app/src/assets/scss/component/_list.scss
@@ -113,7 +113,7 @@
     &__icon {
       svg, img {
         float: left;
-        margin: 3px 0;
+        margin: 0 -2px 0 2px;
         height: 16px;
         width: 16px;
         color: var(--b3-theme-on-surface);
@@ -125,8 +125,9 @@
       margin-right: 4px;
       line-height: 22px;
       height: 22px;
+      width: 16px;
       transition: var(--b3-transition);
-      padding: 0 4px;
+      padding: 0 6px 0 2px;
       flex-shrink: 0;
 
       &:hover {
diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss
index ef4958848..f74493f8b 100644
--- a/app/src/assets/scss/component/_menu.scss
+++ b/app/src/assets/scss/component/_menu.scss
@@ -262,7 +262,8 @@
     font-family: var(--b3-font-family-emoji);
     text-align: center;
     height: 28px;
-    padding: 2px 4px;
+    width: 32px;
+    padding: 2px 8px 2px 0;
     cursor: pointer;
     display: inline-block;
     transition: var(--b3-transition);
@@ -275,6 +276,7 @@
       height: 24px;
       display: block;
       width: 24px;
+      padding: 0 -4px 0 4px;
     }
 
     &--current,
diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts
index 43f9d57b4..5ca5bf66e 100644
--- a/app/src/layout/dock/Files.ts
+++ b/app/src/layout/dock/Files.ts
@@ -956,7 +956,7 @@ export class Files extends Model {
 data-node-id="${item.id}" data-name="${Lute.EscapeHTMLStr(item.name)}" draggable="true" data-count="${item.subFileCount}" 
 data-type="navigation-file" 
 class="b3-list-item b3-list-item--hide-action" data-path="${item.path}">
-    <span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
+    <span style="padding-left: ${(item.path.split("/").length - 2) * 14 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
         <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
     </span>
     <span class="b3-list-item__icon b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.changeIcon}">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>
diff --git a/app/src/mobile/util/MobileFiles.ts b/app/src/mobile/util/MobileFiles.ts
index 9b89e87a3..3baf3931e 100644
--- a/app/src/mobile/util/MobileFiles.ts
+++ b/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) * 16 + 22}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>
diff --git a/app/src/util/Tree.ts b/app/src/util/Tree.ts
index 59729968b..34f01ed22 100644
--- a/app/src/util/Tree.ts
+++ b/app/src/util/Tree.ts
@@ -82,7 +82,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="padding-left: ${(item.depth - 1) * 14 + 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"}">
         <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}
@@ -128,7 +128,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="padding-left: ${(item.depth - 1) * 14 + 22}px;margin-right: 2px" 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}
diff --git a/app/src/util/pathName.ts b/app/src/util/pathName.ts
index 4b71c734d..b258f76b6 100644
--- a/app/src/util/pathName.ts
+++ b/app/src/util/pathName.ts
@@ -425,7 +425,7 @@ const getLeaf = (liElement: HTMLElement) => {
             }
             fileHTML += `<li title="${getDisplayName(item.name, true, true)} ${item.hSize}${item.bookmark ? "\n" + window.siyuan.languages.bookmark + " " + item.bookmark : ""}${item.name1 ? "\n" + window.siyuan.languages.name + " " + item.name1 : ""}${item.alias ? "\n" + window.siyuan.languages.alias + " " + item.alias : ""}${item.memo ? "\n" + window.siyuan.languages.memo + " " + item.memo : ""}${item.subFileCount !== 0 ? window.siyuan.languages.includeSubFile.replace("x", item.subFileCount) : ""}\n${window.siyuan.languages.modifiedAt} ${item.hMtime}\n${window.siyuan.languages.createdAt} ${item.hCtime}" 
 data-box="${notebookId}" 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 b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
+    <span style="padding-left: ${(item.path.split("/").length - 2) * 14 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
         <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
     </span>
     ${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER), false, "b3-list-item__graphic", true)}