Fix Navigator (#176)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

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>

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/>
+<TreeElement {icon} {title} {notifications} {selected} node/>

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>

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>

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')}}/>
+<TreeElement {icon} {title} {notifications} {selected} collapsed on:click={() => {dispatch('click')}}/>