TSK-840. Fixed focusing in the menu (#2770)

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

packages/theme/styles/common.scss

@@ -159,7 +159,6 @@
     color: var(--accent-color);
   }
 
-  &.bordered { border-color: var(--divider-color); }
   &:hover, &.hovered, &.selected {
     background-color: var(--menu-bg-select);
     .an-element__icon { color: var(--menu-icon-hover); }

plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte

@@ -25,6 +25,7 @@
   export let currentSpace: Ref<Space> | undefined
   export let currentSpecial: string | undefined
   export let getActions: Function
+  export let deselect: boolean = false
 </script>
 
 {#if model.specials}
@@ -35,7 +36,7 @@
           indent={'ml-4'}
           label={special.label}
           icon={special.icon}
-          selected={currentSpace === space._id && special.id === currentSpecial}
+          selected={deselect ? false : currentSpace === space._id && special.id === currentSpecial}
         />
       </NavLink>
     {/each}

plugins/view-resources/src/components/navigator/TreeElement.svelte

@@ -28,7 +28,6 @@
   export let parent = false
   export let collapsed = false
   export let selected = false
-  export let bordered = false
   export let bold = false
   export let actions: () => Promise<Action[]> = async () => []
   export let indent: 'default' | 'ml-2' | 'ml-4' | 'ml-8' = 'default'
@@ -48,7 +47,6 @@
 <div
   class="antiNav-element"
   class:selected
-  class:bordered
   class:hovered
   class:ml-2={indent === 'ml-2'}
   class:ml-4={indent === 'ml-4'}

plugins/view-resources/src/components/navigator/TreeItem.svelte

@@ -24,9 +24,8 @@
   export let notifications = 0
   export let actions: () => Promise<Action[]> = async () => []
   export let selected: boolean = false
-  export let bordered: boolean = false
   export let bold = false
   export let indent: 'default' | 'ml-2' | 'ml-4' | 'ml-8' = 'default'
 </script>
 
-<TreeElement {_id} {icon} {title} {notifications} {selected} {bordered} {actions} {bold} collapsed {indent} on:click />
+<TreeElement {_id} {icon} {title} {notifications} {selected} {actions} {bold} collapsed {indent} on:click />

plugins/workbench-resources/src/components/Navigator.svelte

@@ -134,6 +134,9 @@
   async function checkIsDisabled (special: SpecialNavModel) {
     return special.checkIsDisabled && (await (await getResource(special.checkIsDisabled))())
   }
+
+  let savedMenu: boolean = false
+  let menuSelection: boolean = false
 </script>
 
 {#if model}
@@ -141,14 +144,14 @@
     {#if model.specials}
       {#each specials as special, row}
         {#if row > 0 && specials[row].position !== specials[row - 1].position}
-          <TreeSeparator />
+          <TreeSeparator line />
         {/if}
         {#await checkIsDisabled(special) then disabled}
           <NavLink space={special.id} {disabled}>
             <SpecialElement
               label={special.label}
               icon={special.icon}
-              selected={special.id === currentSpecial}
+              selected={menuSelection ? false : special.id === currentSpecial}
               indent={'ml-2'}
               {disabled}
             />
@@ -157,13 +160,18 @@
       {/each}
     {/if}
 
-    {#if specials.length > 0}<TreeSeparator />{/if}
-    <SavedView {currentApplication} />
+    {#if specials.length > 0 && (starred.length > 0 || savedMenu)}<TreeSeparator line />{/if}
+    <SavedView
+      {currentApplication}
+      on:shown={(res) => (savedMenu = res.detail)}
+      on:select={(res) => (menuSelection = res.detail)}
+    />
     {#if starred.length}
       <StarredNav label={preference.string.Starred} spaces={starred} on:space {currentSpace} />
     {/if}
 
-    {#each model.spaces as m (m.label)}
+    {#each model.spaces as m, i (m.label)}
+      {#if (i === 0 && (specials.length > 0 || starred.length || savedMenu)) || i !== 0}<TreeSeparator line />{/if}
       <SpacesNav
         spaces={shownSpaces.filter((it) => hierarchy.isDerived(it._class, m.spaceClass))}
         {currentSpace}
@@ -171,6 +179,8 @@
         model={m}
         on:open
         {currentSpecial}
+        deselect={menuSelection}
+        separate
       />
     {/each}
     <div class="antiNav-space" />

plugins/workbench-resources/src/components/SavedView.svelte

@@ -2,7 +2,7 @@
   import { Doc, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import setting from '@hcengineering/setting'
-  import { Action, navigate } from '@hcengineering/ui'
+  import { Action, navigate, getCurrentLocation, location } from '@hcengineering/ui'
   import view, { FilteredView } from '@hcengineering/view'
   import {
     filterStore,
@@ -13,9 +13,11 @@
     TreeNode
   } from '@hcengineering/view-resources'
   import { Application } from '@hcengineering/workbench'
+  import { createEventDispatcher } from 'svelte'
 
   export let currentApplication: Application | undefined
 
+  const dispatch = createEventDispatcher()
   const client = getClient()
 
   const filteredViewsQuery = createQuery()
@@ -58,12 +60,26 @@
     navigate(fv.location)
     $filterStore = JSON.parse(fv.filters)
   }
+
+  let oldLocation: string = ''
+  $: loc = $location
+  const clearSelection = () => {
+    selectedId = selectedFW = undefined
+    oldLocation = getCurrentLocation().path.join()
+    dispatch('select', false)
+  }
+
   $: fs = $filterStore
-  $: if (Array.isArray(fs) && Array.isArray(filteredViews)) {
+  $: if (loc && Array.isArray(fs) && fs.length > 0 && Array.isArray(filteredViews)) {
     const filters = JSON.stringify(fs)
     selectedFW = filteredViews.filter((fv) => fv.filters === filters)
-    selectedId = selectedFW.length > 0 ? selectedFW[0]._id : undefined
-  } else selectedId = selectedFW = undefined
+    if (selectedFW.length > 0 && selectedFW[0].location.path.join() === loc.path.join()) {
+      selectedId = selectedFW[0]._id
+      oldLocation = selectedFW[0].location.path.join()
+      dispatch('select', true)
+    } else clearSelection()
+  } else clearSelection()
+  $: dispatch('shown', filteredViews !== undefined && filteredViews.length > 0)
 </script>
 
 {#if filteredViews && filteredViews.length > 0}
@@ -73,7 +89,7 @@
         _id={fv._id}
         title={fv.name}
         indent={'ml-2'}
-        bordered={selectedId === fv._id}
+        selected={selectedId === fv._id}
         on:click={() => load(fv)}
         actions={() => removeAction(fv)}
       />

plugins/workbench-resources/src/components/navigator/SpacesNav.svelte

@@ -40,12 +40,16 @@
   import { createEventDispatcher } from 'svelte'
   import plugin from '../../plugin'
   import { classIcon, getSpaceName } from '../../utils'
+  import TreeSeparator from './TreeSeparator.svelte'
 
   export let model: SpacesNavModel
   export let currentSpace: Ref<Space> | undefined
   export let spaces: Space[]
   export let currentSpecial: string | undefined
   export let hasSpaceBrowser: boolean = false
+  export let deselect: boolean = false
+  export let separate: boolean = false
+
   const client = getClient()
   const dispatch = createEventDispatcher()
 
@@ -120,10 +124,19 @@
 </script>
 
 <TreeNode label={model.label} parent actions={async () => getParentActions()} indent={'ml-2'}>
-  {#each spaces as space (space._id)}
+  {#each spaces as space, i (space._id)}
     {#await getObjectPresenter(client, space._class, { key: '' }) then presenter}
+      {#if separate && i !== 0}<TreeSeparator line />{/if}
       {#if model.specials && presenter}
-        <svelte:component this={presenter.presenter} {space} {model} {currentSpace} {currentSpecial} {getActions} />
+        <svelte:component
+          this={presenter.presenter}
+          {space}
+          {model}
+          {currentSpace}
+          {currentSpecial}
+          {getActions}
+          {deselect}
+        />
       {:else}
         <NavLink space={space._id}>
           {#await getSpaceName(client, space) then name}
@@ -132,7 +145,7 @@
               _id={space._id}
               title={name}
               icon={classIcon(client, space._class)}
-              selected={currentSpace === space._id}
+              selected={deselect ? false : currentSpace === space._id}
               actions={() => getActions(space)}
               bold={isChanged(space, $lastViews)}
             />

plugins/workbench-resources/src/components/navigator/TreeSeparator.svelte

@@ -12,5 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+<script lang="ts">
+  export let line: boolean = false
+  export let short: boolean = false
+</script>
 
-<div class="antiNav-divider" />
+<div class="antiNav-divider" class:line class:short />