fix file explorer indent #88

subframe7536 · Mar 29, 2024 · 78aa88b · 78aa88b
1 parent b7a2778
commit 78aa88b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/style-settings/workspace.scss b/src/style-settings/workspace.scss
@@ -74,7 +74,7 @@ settings:
         default: true
     -
         id: explorer-nav-decoration
-        title: styled active nav item
+        title: styled active file
         description: reference from https://github.com/Akifyss/obsidian-border
         title.zh: 当前文件美化
         description.zh: 参考 https://github.com/Akifyss/obsidian-border
@@ -97,7 +97,7 @@ settings:
     -
         id: explorer-icon
         title: enable prefix icon
-        description: if the tree indent is weird, just collpase all the directory and restart Obsidian
+        description: if the tree indent is weird, please collpase all the directory and restart Obsidian
         title.zh: 开启前置图标
         description.zh: 如果缩进出现问题，请折叠全部文件夹并重启 Obsidian
         type: class-toggle

diff --git a/src/workspace/panel/file-explorer.scss b/src/workspace/panel/file-explorer.scss
@@ -61,7 +61,6 @@ body:not(.is-grabbing) :is(.nav-file-title.is-being-dragged, .nav-folder-title.i
 
     & > .nav-folder-title {
       position: absolute;
-      margin-left: var(--size-4-6);
       transform: translate(calc(-1 * var(--size-4-5)), calc(-1 * var(--size-4-10)));
       z-index: var(--layer-cover);
       color: var(--color-accent-2);
@@ -85,30 +84,24 @@ body.theme-dark.explorer-icon .is-active .nav-file-tag {
     .nav-folder {
 
       &-title {
-        padding-left: var(--size-4-1);
-
         &:hover {
           background-color: var(--folder-hover-color);
         }
 
         &-content {
-          padding-left: var(--size-4-6);
+          padding-left: var(--size-2-1);
         }
       }
 
       & > .nav-folder-children {
         transition: var(--animation);
-        --nav-item-children-padding-left: var(--nav-item-children-margin-left);
 
         &:hover {
           --nav-indentation-guide-color: var(--accent-inactive);
         }
       }
 
       &-collapse-indicator {
-        // margin-right: var(--size-4-2);
-        // padding-inline-end: var(--size-2-1);
-        margin-left: var(--size-4-1);
         cursor: pointer;
         height: fit-content;
 
@@ -118,8 +111,7 @@ body.theme-dark.explorer-icon .is-active .nav-file-tag {
           height: 1rem;
           background-color: var(--folder-color);
           display: inline-block;
-          margin-bottom: var(--size-4-1);
-          margin-left: calc(-1 * var(--size-2-3));
+          translate: 0 calc(-1 * var(--size-2-1));
           // add icon in icons.scss
         }
       }
@@ -132,22 +124,31 @@ body.theme-dark.explorer-icon .is-active .nav-file-tag {
     }
 
     .nav-file {
+      --nav-item-background-hover: hsl(var(--accent-h), calc(var(--accent-s) * 1.2), min(var(--accent-l) * 1.5, 90%), 50%);
+
       &-title {
-        padding-left: var(--size-4-1);
+        &-content {
+          padding-left: var(--size-2-1);
+        }
 
         &:not([data-path$='excalidraw.md']):not([data-path$='excalidraw'])::before {
           content: ' ';
+          position: absolute;
           width: 1rem;
           height: 1rem;
           opacity: 0.8;
-          margin-right: var(--size-2-3);
-          margin-left: var(--size-2-1);
           flex-shrink: 0;
-          transform: translateY(10%);
+          translate: calc(1px - var(--size-4-5)) 15%;
           background-color: var(--accent-active);
           // add icon in icons.scss
         }
 
+        &:is([data-path$='excalidraw.md'], [data-path$='excalidraw']) .nav-file-tag {
+          position: absolute;
+          translate: calc(-1 * var(--size-4-5));
+          top: var(--size-2-3);
+        }
+
         &.is-active:not(.is-selected) {
           color: var(--text-on-accent);