From 5754db419e02f0aff71708ff1315528d61ad6939 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Mon, 30 Sep 2024 16:54:50 +0700
Subject: [PATCH] refactor: tree styling

---
 src/components/shared/TreeView.vue | 75 ++++++++++++++----------------
 1 file changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/components/shared/TreeView.vue b/src/components/shared/TreeView.vue
index 7e599df7..d3be7650 100644
--- a/src/components/shared/TreeView.vue
+++ b/src/components/shared/TreeView.vue
@@ -71,19 +71,11 @@ function toggleExpand(node: Node, ancestor?: []) {
   <div
     class="tree-container"
     :class="{
-      'q-pl-lg': level && level > 0,
+      'q-pl-xl': level && level > 0,
       'last-children': level && level === maxLevel,
     }"
   >
-    <div
-      v-for="(node, i) in nodes"
-      class="tree-item"
-      :class="{
-        'q-pt-sm': level !== 0 && level !== maxLevel && i !== 0,
-        'q-pt-xs': level === maxLevel && i === 0,
-      }"
-      :key="i"
-    >
+    <div v-for="(node, i) in nodes" class="tree-item" :key="i">
       <slot
         v-if="$slots['item']"
         name="item"
@@ -98,29 +90,31 @@ function toggleExpand(node: Node, ancestor?: []) {
             () => (selectable ? $emit('select', node) : toggleExpand(node))
           "
         >
-          <div
-            v-if="level !== maxLevel"
-            class="q-mr-md"
-            :style="`color: ${
-              !node.displayDropIcon &&
-              (!node.children || node.children.length === 0)
-                ? 'transparent'
-                : $q.dark.isActive
-                  ? 'var(--gray-7)'
-                  : 'var(--gray-4)'
-            }`"
-          >
-            <q-icon
-              name="mdi-chevron-down-circle"
-              size="sm"
-              :style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
-              @click.stop="
+          <div style="width: var(--size-6); margin-right: var(--size-1)">
+            <div
+              v-if="level !== maxLevel"
+              class="q-mr-md"
+              :style="`color: ${
                 !node.displayDropIcon &&
                 (!node.children || node.children.length === 0)
-                  ? $emit('select', node)
-                  : toggleExpand(node)
-              "
-            />
+                  ? 'transparent'
+                  : $q.dark.isActive
+                    ? 'var(--gray-7)'
+                    : 'var(--gray-4)'
+              }`"
+            >
+              <q-icon
+                name="mdi-chevron-down-circle"
+                size="sm"
+                :style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
+                @click.stop="
+                  !node.displayDropIcon &&
+                  (!node.children || node.children.length === 0)
+                    ? $emit('select', node)
+                    : toggleExpand(node)
+                "
+              />
+            </div>
           </div>
 
           <label
@@ -131,6 +125,7 @@ function toggleExpand(node: Node, ancestor?: []) {
             <input
               type="checkbox"
               v-model="node.checked"
+              :style="`accent-color: var(--blue-7)`"
               @click="toggleCheck(node)"
             />
           </label>
@@ -161,10 +156,12 @@ function toggleExpand(node: Node, ancestor?: []) {
           </div>
         </div>
       </template>
-      <q-separator v-if="!level" class="q-mt-sm"></q-separator>
 
       <transition name="slide">
-        <div v-if="node.opened && node.children && node.children.length > 0">
+        <div
+          v-if="node.opened && node.children && node.children.length > 0"
+          class="tree-children"
+        >
           <TreeView
             :iconSize
             :hideCheckBox
@@ -220,16 +217,16 @@ function toggleExpand(node: Node, ancestor?: []) {
   display: flex;
   flex-direction: column;
   user-select: none;
-  gap: 8px;
+  gap: var(--size-2);
 
   & .tree-item {
     & .item__content {
       border: solid 1px transparent;
+      border-radius: var(--radius-2);
       padding: 0.1rem 0.5rem;
 
       &:hover {
         background: hsla(0 0% 0% / 0.1);
-        border-radius: var(--radius-2);
       }
     }
 
@@ -254,6 +251,10 @@ function toggleExpand(node: Node, ancestor?: []) {
       color: hsla(var(--text-mute-2));
     }
 
+    & .tree-children {
+      padding-top: var(--size-2);
+    }
+
     & .active {
       border-radius: var(--radius-2);
       border: solid 1px hsl(var(--info-bg));
@@ -262,10 +263,6 @@ function toggleExpand(node: Node, ancestor?: []) {
   }
 }
 
-.last-children {
-  margin-left: 50px;
-}
-
 .slide-enter-active {
   transition: all 0.1s ease-out;
 }