Fixed Navigator visibility (#5842)

* Fixed Navigator visibility

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

* Clean Workbench

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

---------

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

plugins/setting-resources/src/components/ClassSetting.svelte

@@ -13,7 +13,6 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
   import core, { Class, Doc, Obj, Ref, isOwnerOrMaintainer } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
@@ -48,10 +47,8 @@
   | undefined = undefined
   export let withoutHeader = false
   export let useOfClassAttributes = true
-  export let visibleNav: boolean = true
 
   const canEdit = isOwnerOrMaintainer()
-  const dispatch = createEventDispatcher()
 
   const loc = getLocation()
   const client = getClient()
@@ -105,7 +102,7 @@
 
 <div class="hulyComponent">
   {#if !withoutHeader}
-    <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+    <Header>
       <Breadcrumb icon={setting.icon.Clazz} label={setting.string.ClassSetting} size={'large'} isCurrent />
     </Header>
   {/if}

plugins/setting-resources/src/components/Configure.svelte

@@ -13,16 +13,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
   import { PluginConfiguration } from '@hcengineering/core'
   import { configurationStore, getClient } from '@hcengineering/presentation'
   import { Button, Icon, IconInfo, Label, Header, Breadcrumb, Scroller } from '@hcengineering/ui'
   import setting from '../plugin'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
-
   const client = getClient()
 
   async function change (config: PluginConfiguration, value: boolean): Promise<void> {
@@ -33,7 +28,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+  <Header>
     <Breadcrumb icon={setting.icon.Setting} label={setting.string.Configuration} size={'large'} isCurrent />
   </Header>
   <div class="hulyComponent-content__column content">

plugins/setting-resources/src/components/EnumSetting.svelte

@@ -31,14 +31,9 @@
     showPopup
   } from '@hcengineering/ui'
   import { showMenu } from '@hcengineering/view-resources'
-  import { createEventDispatcher } from 'svelte'
   import setting from '../plugin'
   import EnumValues from './EnumValues.svelte'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
-
   const query = createQuery()
 
   let enums: Enum[] = []
@@ -60,7 +55,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+  <Header>
     <Breadcrumb icon={setting.icon.Enums} label={setting.string.Enums} size={'large'} isCurrent />
     <svelte:fragment slot="actions">
       <ModernButton

plugins/setting-resources/src/components/Integrations.svelte

@@ -13,7 +13,6 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
   import { Ref, getCurrentAccount } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import type { Integration, IntegrationType } from '@hcengineering/setting'
@@ -21,10 +20,6 @@
   import { Header, Breadcrumb } from '@hcengineering/ui'
   import PluginCard from './PluginCard.svelte'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
-
   const accountId = getCurrentAccount()._id
   const typeQuery = createQuery()
   const integrationQuery = createQuery()
@@ -45,7 +40,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+  <Header>
     <Breadcrumb icon={setting.icon.Integrations} label={setting.string.Integrations} size={'large'} isCurrent />
   </Header>
   <div class="ac-body__cards-container">

plugins/setting-resources/src/components/InviteSetting.svelte

@@ -13,16 +13,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
   import login from '@hcengineering/login'
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import setting, { InviteSettings } from '@hcengineering/setting'
   import { Button, EditBox, MiniToggle, Header, Breadcrumb } from '@hcengineering/ui'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
-
   const client = getClient()
   let expTime: number = 48
   let mask: string = ''
@@ -61,7 +56,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+  <Header>
     <Breadcrumb icon={setting.icon.InviteSettings} label={setting.string.InviteSettings} size={'large'} isCurrent />
   </Header>
   <div class="form">

plugins/setting-resources/src/components/Owners.svelte

@@ -18,12 +18,8 @@
   import { AccountRole, getCurrentAccount, hasAccountRole } from '@hcengineering/core'
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import { Breadcrumb, DropdownIntlItem, DropdownLabelsIntl, EditBox, Header, Scroller } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
   import setting from '../plugin'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
   const client = getClient()
   const query = createQuery()
   const currentAccount = getCurrentAccount()
@@ -50,7 +46,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+  <Header>
     <Breadcrumb icon={setting.icon.Owners} label={setting.string.Owners} size={'large'} isCurrent />
     <EditBox kind={'search-style'} focusIndex={1} bind:value={search} placeholder={presentation.string.Search} />
   </Header>

plugins/setting-resources/src/components/Password.svelte

@@ -19,14 +19,9 @@
   import presentation from '@hcengineering/presentation'
   import setting from '@hcengineering/setting'
   import { Breadcrumb, Button, EditBox, Header, Icon, Label } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
   import plugin from '../plugin'
   import Error from './icons/Error.svelte'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
-
   let oldPassword: string = ''
   let password: string = ''
   let password2: string = ''
@@ -62,7 +57,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+  <Header>
     <Breadcrumb icon={setting.icon.Password} label={setting.string.ChangePassword} size={'large'} isCurrent />
   </Header>
   <div class="flex-row-stretch flex-grow p-10">

plugins/setting-resources/src/components/Profile.svelte

@@ -20,13 +20,9 @@
   import { getResource } from '@hcengineering/platform'
   import { AttributeEditor, MessageBox, getClient } from '@hcengineering/presentation'
   import { Breadcrumb, Button, EditBox, FocusHandler, Header, createFocusManager, showPopup } from '@hcengineering/ui'
-  import { createEventDispatcher, onDestroy } from 'svelte'
+  import { onDestroy } from 'svelte'
   import setting from '../plugin'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
-
   const client = getClient()
 
   let avatarEditor: EditableAvatar
@@ -87,7 +83,7 @@
 <FocusHandler {manager} />
 
 <div class="hulyComponent">
-  <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+  <Header>
     <Breadcrumb icon={setting.icon.AccountSettings} label={setting.string.AccountSettings} size={'large'} isCurrent />
   </Header>
   <div class="ac-body p-10">

plugins/setting-resources/src/components/Settings.svelte

@@ -34,16 +34,13 @@
     setMetadataLocalStorage,
     settingsSeparators,
     showPopup,
-    type AnyComponent
+    type AnyComponent,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import { NavFooter } from '@hcengineering/workbench-resources'
   import { ComponentType, onDestroy } from 'svelte'
   import { clearSettingsStore, settingsStore, type SettingsStore } from '../store'
 
-  export let visibleNav: boolean = true
-  export let navFloat: boolean = false
-  export let appsDirection: 'vertical' | 'horizontal' = 'horizontal'
-
   let category: SettingsCategory | undefined
   let categoryId: string = ''
 
@@ -121,9 +118,11 @@
 </script>
 
 <div class="hulyPanels-container">
-  {#if visibleNav}
+  {#if $deviceInfo.navigator.visible}
     <div
-      class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'} border-left"
+      class="antiPanel-navigator {$deviceInfo.navigator.direction === 'horizontal'
+        ? 'portrait'
+        : 'landscape'} border-left"
       class:border-right={category?.component === undefined}
     >
       <div class="antiPanel-wrap__content hulyNavPanel-container">
@@ -178,21 +177,26 @@
           <NavItem icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut} />
         </NavFooter>
       </div>
-      <Separator name={'setting'} float={navFloat ? 'navigator' : true} index={0} color={'transparent'} />
+      <Separator
+        name={'setting'}
+        float={$deviceInfo.navigator.float ? 'navigator' : true}
+        index={0}
+        color={'transparent'}
+      />
     </div>
-    <Separator name={'setting'} float={navFloat} index={0} color={'transparent'} separatorSize={0} short />
+    <Separator
+      name={'setting'}
+      float={$deviceInfo.navigator.float}
+      index={0}
+      color={'transparent'}
+      separatorSize={0}
+      short
+    />
   {/if}
 
   <div class="antiPanel-component filledNav" style:flex-direction={'row'}>
     {#if category}
-      <Component
-        is={category.component}
-        props={{
-          kind: 'content',
-          visibleNav
-        }}
-        on:change={(event) => (visibleNav = event.detail)}
-      />
+      <Component is={category.component} props={{ kind: 'content' }} />
     {/if}
   </div>
   {#if asideComponent != null}

plugins/setting-resources/src/components/Spaces.svelte

@@ -13,19 +13,15 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
-  import { Header, Breadcrumb, Label } from '@hcengineering/ui'
+  import { Header, Breadcrumb } from '@hcengineering/ui'
   import core, { Account, Ref, Role, RolesAssignment, SpaceType, TypedSpace, WithLookup } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { AccountArrayEditor } from '@hcengineering/contact-resources'
 
   import setting from '../plugin'
 
-  export let visibleNav: boolean = true
-
   const client = getClient()
   const hierarchy = client.getHierarchy()
-  const dispatch = createEventDispatcher()
 
   let space: TypedSpace
   let spaceType: WithLookup<SpaceType>
@@ -81,7 +77,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+  <Header>
     <Breadcrumb icon={setting.icon.Views} label={setting.string.Spaces} size="large" isCurrent />
   </Header>
   <div class="hulyComponent-content__column content">

plugins/setting-resources/src/components/WorkspaceSetting.svelte

@@ -19,12 +19,8 @@
   import { getClient } from '@hcengineering/presentation'
   import { WorkspaceSetting } from '@hcengineering/setting'
   import { FocusHandler, Label, createFocusManager } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
   import setting from '../plugin'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
   let workspaceSettings: WorkspaceSetting | undefined = undefined
 
   const client = getClient()

plugins/setting-resources/src/components/WorkspaceSettings.svelte

@@ -30,7 +30,6 @@
 
   export let kind: 'navigation' | 'content' | undefined
   export let categoryName: string
-  export let visibleNav: boolean = true
 
   let category: SettingsCategory | undefined
   let categoryId: string = ''
@@ -98,5 +97,5 @@
 {:else if kind === 'content' && !category}
   <div class="hulyComponent" />
 {:else if category}
-  <Component is={category.component} props={{ kind: 'content', visibleNav }} on:change />
+  <Component is={category.component} props={{ kind: 'content' }} on:change />
 {/if}

plugins/setting-resources/src/components/spaceTypes/ManageSpaceTypeContent.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher, onDestroy } from 'svelte'
+  import { onDestroy } from 'svelte'
   import core, {
     Class,
     Doc,
@@ -47,9 +47,6 @@
   import SpaceTypeEditorComponent from './editor/SpaceTypeEditor.svelte'
   import { clearSettingsStore } from '../../store'
 
-  export let visibleNav: boolean = true
-
-  const dispatch = createEventDispatcher()
   const client = getClient()
   const hierarchy = client.getHierarchy()
   const canEdit = isOwnerOrMaintainer()
@@ -143,7 +140,7 @@
   }}
 >
   {#if type !== undefined && descriptor !== undefined}
-    <Header minimize={!visibleNav} on:resize={(event) => dispatch('change', event.detail)}>
+    <Header>
       {#if canEdit}
         <ButtonIcon
           icon={IconCopy}