From ad8697d1819cadf5aa4730a0512eedb4747a3e7c Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 18 Jul 2024 11:01:19 +0000
Subject: [PATCH] fix: 01 tree (active, color, layout)

---
 src/pages/01_branch-management/MainPage.vue | 47 +++++++++++++++------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index b3d550b2..05aa18ee 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -561,7 +561,6 @@ watch(
           <q-splitter
             v-model="splitterModel"
             :limits="[0, 100]"
-            style="width: 100%"
             class="col"
             before-class="overflow-hidden"
             after-class="overflow-hidden"
@@ -610,13 +609,12 @@ watch(
                       label-key="name"
                       children-key="branch"
                       v-model:expanded="expandedTree"
-                      color="info"
-                      selected-color="primary"
+                      color="transparent"
                       style="color: var(--foreground)"
                     >
                       <template #default-header="{ node }">
                         <div
-                          class="column full-width"
+                          class="column full-width q-py-sm"
                           @click.stop="
                             () => {
                               if (
@@ -660,7 +658,18 @@ watch(
                           <div
                             class="row col items-center justify-between full-width no-wrap"
                           >
-                            <span>{{ node.name }}</span>
+                            <span
+                              :class="{
+                                'text-weight-bold': expandedTree[0] === node.id,
+                                'app-text-info': expandedTree[0] === node.id,
+                              }"
+                            >
+                              {{ node.name }}
+                              <div class="app-text-muted text-caption">
+                                {{ node.code }}
+                              </div>
+                            </span>
+
                             <div
                               class="row q-gutter-xs items-center no-wrap"
                               @click.stop
@@ -671,7 +680,8 @@ watch(
                                 @click.stop="
                                   triggerCreate('subBranch', node.id, node.code)
                                 "
-                                icon="mdi-file-plus-outline"
+                                icon="mdi-file-plus"
+                                class="app-text-muted-2"
                                 size="sm"
                                 dense
                                 round
@@ -681,6 +691,7 @@ watch(
                               <q-btn
                                 :id="`view-detail-btn-${node.name}`"
                                 icon="mdi-dots-vertical"
+                                class="app-text-muted-2"
                                 size="sm"
                                 dense
                                 round
@@ -832,10 +843,6 @@ watch(
                               </q-btn>
                             </div>
                           </div>
-
-                          <div class="row col items-center app-text-muted">
-                            {{ node.code }}
-                          </div>
                         </div>
                       </template>
                     </q-tree>
@@ -1745,14 +1752,28 @@ watch(
 }
 
 :deep(i.q-icon.mdi.mdi-play.q-tree__arrow) {
-  color: var(--foreground);
+  color: hsl(var(--text-mute));
 }
 
 :deep(.q-tree__node-header:before) {
-  color: var(--foreground);
+  color: hsl(var(--text-mute));
 }
 
 :deep(.q-tree__node-header.relative-position.row.no-wrap.items-center) {
-  padding-block: 8px;
+  padding-block: 0px;
+}
+
+:deep(.q-tree__node-header.relative-position.row.no-wrap.items-center):has(
+    i.q-icon.mdi.mdi-play.q-tree__arrow
+  ):hover {
+  background-color: hsla(var(--info-bg) / 0.1);
+}
+
+:deep(
+    .q-tree__node-header.relative-position.row.no-wrap.items-center.q-tree__node--link.q-hoverable.q-focusable:has(
+        i.q-icon.mdi.mdi-play.q-tree__arrow.q-tree__arrow--rotate
+      )
+  ) {
+  background-color: hsla(var(--info-bg) / 0.1);
 }
 </style>