From 5f55070fec9e8699b99c53f36e92b980a93d1d54 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Wed, 7 Jun 2023 14:00:34 +0200
Subject: [PATCH] Navigator ui revamp [SCI-8539][SCI-8467]

---
 .../stylesheets/application.tailwind.css      | 22 +++++++
 app/javascript/vue/navigation/navigator.vue   |  9 +--
 .../vue/navigation/navigator_item.vue         | 59 ++++++++++---------
 3 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 89e9e8083..961fb312d 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -11,3 +11,25 @@ html {
   border-style: solid;
   border-color: theme('borderColor.DEFAULT', currentColor);
 }
+
+.scroll-container .ps__rail-y{
+  background-color: var(--sn-white);
+  opacity: 1;
+}
+
+.scroll-container .ps__thumb-y{
+  background-color: var(--sn-grey);
+  opacity: 1;
+  right: 5px;
+}
+
+.scroll-container .ps__rail-x{
+  background-color: var(--sn-white);
+  opacity: 1;
+}
+
+.scroll-container .ps__thumb-x{
+  background-color: var(--sn-grey);
+  opacity: 1;
+  bottom: 5px;
+}
diff --git a/app/javascript/vue/navigation/navigator.vue b/app/javascript/vue/navigation/navigator.vue
index b762cc727..f3e59765b 100644
--- a/app/javascript/vue/navigation/navigator.vue
+++ b/app/javascript/vue/navigation/navigator.vue
@@ -1,19 +1,20 @@
 <template>
   <div class="w-[216px] ml-6 h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
-    <div class="px-3 py-2 flex items-center relative leading-4">
+    <div class="px-3 py-1.5 flex items-center relative leading-4">
       <i class="sn-icon sn-icon-navigator"></i>
-      <div class="font-bold text-base pl-2">
+      <div class="font-bold text-base pl-3">
         {{ i18n.t('navigator.title') }}
       </div>
-      <i @click="$emit('navigator:colapse')" class="sn-icon sn-icon-close ml-auto cursor-pointer absolute right-3 top-2"></i>
+      <i @click="$emit('navigator:colapse')" class="sn-icon sn-icon-close ml-auto cursor-pointer absolute right-2.5 top-1.5"></i>
     </div>
-    <perfect-scrollbar @ps-scroll-y="onScrollY" @ps-scroll-x="onScrollX" ref="scrollContainer" class="grow py-4 relative px-3">
+    <perfect-scrollbar @ps-scroll-y="onScrollY" @ps-scroll-x="onScrollX" ref="scrollContainer" class="grow py-2 relative px-4 scroll-container">
       <NavigatorItem v-for="item in sortedMenuItems"
                      :key="item.id"
                      :currentItemId="currentItemId"
                      :item="item"
                      :firstLevel="true"
                      :reloadCurrentLevel="reloadCurrentLevel"
+                     :paddingLeft="0"
                      :reloadChildrenLevel="reloadChildrenLevel"
                      :archived="archived" />
     </perfect-scrollbar>
diff --git a/app/javascript/vue/navigation/navigator_item.vue b/app/javascript/vue/navigation/navigator_item.vue
index dcd88b87a..4ba4e7f31 100644
--- a/app/javascript/vue/navigation/navigator_item.vue
+++ b/app/javascript/vue/navigation/navigator_item.vue
@@ -1,35 +1,39 @@
 <template>
-  <div class="text-sn-blue w-full flex justify-center flex-col"
-       :class="{ 'pl-6': !firstLevel }"
-       :navigator-item-id="item.id"
-  >
-    <div class="min-w-[190px] py-1.5 px-1 menu-item flex items-center whitespace-nowrap" :title="this.itemToolTip" :class="{ 'bg-sn-light-grey active': activeItem }">
-      <div class="w-6 h-6 flex justify-start shrink-0 mr-1.5">
-        <i v-if="hasChildren"
-          class="sn-icon cursor-pointer"
-          :class="{'sn-icon-right': !childrenExpanded, 'sn-icon-down': childrenExpanded }"
-          @click="toggleChildren"></i>
+  <div>
+    <div class="text-sn-blue w-full flex justify-center flex-col menu-item"
+        :class="{ 'bg-sn-super-light-blue active': activeItem }"
+        :style="{ 'padding-left': paddingLeft + 'px', 'min-width': (paddingLeft + 182) + 'px' }"
+        :navigator-item-id="item.id"
+    >
+      <div class="min-w-[182px] py-1.5 px-1 flex items-center whitespace-nowrap" :title="this.itemToolTip">
+        <div class="w-6 h-6 flex justify-start shrink-0 mr-2">
+          <i v-if="hasChildren"
+            class="sn-icon cursor-pointer"
+            :class="{'sn-icon-right': !childrenExpanded, 'sn-icon-down': childrenExpanded }"
+            @click="toggleChildren"></i>
+        </div>
+        <i v-if="itemIcon" class="mr-1" :class="itemIcon"></i>
+        <a :href="item.url"
+            class="text-ellipsis overflow-hidden hover:no-underline pr-3"
+            :class="{
+              'text-sn-science-blue-hover': (!item.archived && archived),
+              'no-hover': (!item.archived && archived)
+            }">
+          <template v-if="item.archived">(A)</template>
+          {{ item.name }}
+        </a>
       </div>
-      <i v-if="itemIcon" class="mr-1" :class="itemIcon"></i>
-      <a :href="item.url"
-          class="text-ellipsis overflow-hidden hover:no-underline pr-3"
-          :class="{
-            'text-sn-science-blue-hover': (!item.archived && archived),
-            'no-hover': (!item.archived && archived)
-          }">
-        <template v-if="item.archived">(A)</template>
-        {{ item.name }}
-      </a>
     </div>
     <div class="basis-full" :class="{'hidden': !childrenExpanded}">
       <NavigatorItem v-for="item in sortedMenuItems"
-                     @item:expand="treeExpand"
-                     :key="item.id"
-                     :currentItemId="currentItemId"
-                     :reloadCurrentLevel="reloadCurrentLevel"
-                     :reloadChildrenLevel="reloadChildrenLevel"
-                     :item="item"
-                     :archived="archived" />
+                    @item:expand="treeExpand"
+                    :key="item.id"
+                    :currentItemId="currentItemId"
+                    :paddingLeft="24 + paddingLeft"
+                    :reloadCurrentLevel="reloadCurrentLevel"
+                    :reloadChildrenLevel="reloadChildrenLevel"
+                    :item="item"
+                    :archived="archived" />
     </div>
   </div>
 </template>
@@ -45,6 +49,7 @@ export default {
     item: Object,
     currentItemId: String,
     archived: Boolean,
+    paddingLeft: Number,
     reloadCurrentLevel: Boolean,
     reloadChildrenLevel: Boolean
   },