From aedf3b295cef5c8737cf8434ca90c4dae774b4e0 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 26 Dec 2019 16:40:52 +0800
Subject: [PATCH] fix: align submodule items in tree

---
 src/components/Node.tsx |  6 +++++-
 src/content.less        | 24 +++++++++++++++++-------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/Node.tsx b/src/components/Node.tsx
index b0d1187..5ee3532 100644
--- a/src/components/Node.tsx
+++ b/src/components/Node.tsx
@@ -85,7 +85,11 @@ const NodeItemIcon = React.memo(function NodeItemIcon({
   if (icons === 'native') return <Icon type={getIconType(node)} />
   return (
     <>
-      <Icon placeholder={node.type !== 'tree'} type={getIconType(node)} />
+      <Icon
+        className={'node-item-type-icon'}
+        placeholder={node.type !== 'tree'}
+        type={getIconType(node)}
+      />
       {node.type === 'commit' ? (
         <Icon type={getIconType(node)} />
       ) : (
diff --git a/src/content.less b/src/content.less
index 81f6ee7..3ab52fe 100644
--- a/src/content.less
+++ b/src/content.less
@@ -358,12 +358,25 @@
             transition: all 0.5s ease;
             white-space: nowrap;
 
-            &-icon {
+            .icon-size() {
               width: 16px;
               height: 16px;
+            }
+
+            &-type-icon {
+              margin-right: 4px;
+              .icon-size();
+
+              & + .octicon-wrapper,
+              & + .node-item-icon {
+                margin-right: 6px;
+              }
+            }
+
+            &-icon {
+              .icon-size();
               object-fit: contain;
               vertical-align: text-bottom;
-              padding-left: 4px;
               box-sizing: content-box;
 
               &.dim {
@@ -379,12 +392,9 @@
             .node-item-label {
               overflow: hidden;
               text-overflow: ellipsis;
-
-              .node-item-name {
-                padding-left: 6px;
-              }
             }
-            .node-item:hover .node-item-name {
+
+            &:hover .node-item-name {
               text-decoration: underline;
             }