From 0e81bdeebc38ff7404ae3ed8ff9d8b3ea51cbb14 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 9 Sep 2021 23:23:51 +0300
Subject: [PATCH] Fix Navigator (#176)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../CreateApplicationPresenter.svelte         |  1 +
 .../src/components/navigator/ListItem.svelte  |  3 ++-
 .../src/components/navigator/SpacesNav.svelte |  4 +++-
 .../components/navigator/TreeElement.svelte   | 20 +++++++++----------
 .../src/components/navigator/TreeItem.svelte  |  3 ++-
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/plugins/recruit-resources/src/components/CreateApplicationPresenter.svelte b/plugins/recruit-resources/src/components/CreateApplicationPresenter.svelte
index c3b4f175b2..df2cbb20cc 100644
--- a/plugins/recruit-resources/src/components/CreateApplicationPresenter.svelte
+++ b/plugins/recruit-resources/src/components/CreateApplicationPresenter.svelte
@@ -41,5 +41,6 @@
     background-color: var(--theme-bg-accent-color);
     border: 1px solid var(--theme-bg-accent-color);
     border-radius: .5rem;
+    cursor: pointer;
   }
 </style>
diff --git a/plugins/workbench-resources/src/components/navigator/ListItem.svelte b/plugins/workbench-resources/src/components/navigator/ListItem.svelte
index a534eefed2..27e464f75f 100644
--- a/plugins/workbench-resources/src/components/navigator/ListItem.svelte
+++ b/plugins/workbench-resources/src/components/navigator/ListItem.svelte
@@ -20,7 +20,8 @@
   export let icon: Asset
   export let title: string
   export let notifications = 0
+  export let selected: boolean = false
 
 </script>
 
-<TreeElement {icon} {title} {notifications} node/>
\ No newline at end of file
+<TreeElement {icon} {title} {notifications} {selected} node/>
\ No newline at end of file
diff --git a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
index 1baf7183cc..430cefa3a4 100644
--- a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
@@ -35,6 +35,7 @@
   const client = getClient()
   const query = createQuery()
   let spaces: Space[] = []
+  let selected: Ref<Space> | undefined = undefined
 
   $: query.query(model.spaceClass, {}, result => { spaces = result })
 
@@ -47,6 +48,7 @@
   }
 
   function selectSpace(id: Ref<Space>) {
+    selected = id
     const loc = getCurrentLocation()
     loc.path[2] = id
     loc.path.length = 3
@@ -57,7 +59,7 @@
 <div>
   <TreeNode label={model.label} actions={[addSpace]}>
     {#each spaces as space}
-      <TreeItem title={space.name} icon={classIcon(client, space._class)} on:click={() => { selectSpace(space._id) }}/>
+      <TreeItem title={space.name} icon={classIcon(client, space._class)} selected={selected === space._id} on:click={() => { selectSpace(space._id) }}/>
     {/each}
   </TreeNode>
 </div>
diff --git a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
index 5592a1ef17..cee9147b8f 100644
--- a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
+++ b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
@@ -28,12 +28,13 @@
   export let notifications = 0
   export let node = false
   export let collapsed = false
+  export let selected = false
   export let actions: Action[] = []
 
   const dispatch = createEventDispatcher()
 </script>
 
-<div class="container"
+<div class="container" class:selected
   on:click|stopPropagation={() => {
     if (node && !icon) collapsed = !collapsed
     dispatch('click')
@@ -58,10 +59,8 @@
     <div class="counter">{notifications}</div>
   {/if}
 </div>
-{#if node && !icon}
-  <div class="dropbox" class:hidden={collapsed}>
-    <slot/>
-  </div>
+{#if node && !icon && !collapsed}
+  <div class="dropbox"><slot/></div>
 {/if}
 
 <style lang="scss">
@@ -111,16 +110,15 @@
         visibility: visible;
       }
     }
+    
+    &.selected {
+      background-color: var(--theme-menu-selection);
+      &:hover { background-color: var(--theme-button-bg-enabled); }
+    }
   }
 
   .dropbox {
     height: auto;
     margin-bottom: .5rem;
-    visibility: visible;
-
-    &.hidden {
-      height: auto;
-      visibility: hidden;
-    }
   }
 </style>
\ No newline at end of file
diff --git a/plugins/workbench-resources/src/components/navigator/TreeItem.svelte b/plugins/workbench-resources/src/components/navigator/TreeItem.svelte
index 778c8218cb..253bb1b574 100644
--- a/plugins/workbench-resources/src/components/navigator/TreeItem.svelte
+++ b/plugins/workbench-resources/src/components/navigator/TreeItem.svelte
@@ -21,9 +21,10 @@
   export let icon: Asset
   export let title: string
   export let notifications = 0
+  export let selected: boolean = false
 
   const dispatch = createEventDispatcher()
 
 </script>
 
-<TreeElement {icon} {title} {notifications} collapsed on:click={() => {dispatch('click')}}/>
\ No newline at end of file
+<TreeElement {icon} {title} {notifications} {selected} collapsed on:click={() => {dispatch('click')}}/>
\ No newline at end of file