Fixed Settings layout (#7660)

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

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

@@ -86,7 +86,7 @@
       <div class="fs-title overflow-label"><Label label={integrationType.label} /></div>
     </div>
   </div>
-  <div class="content">
+  <div class="content scroll-divider-color">
     {#if integration && integration.value !== ''}
       {integration.value}
     {:else if integrationType.descriptionComponent}
@@ -135,7 +135,7 @@
     border-radius: 0.75rem;
   }
   .header {
-    margin: 1.5rem 1.5rem 1rem;
+    padding: 1rem;
     min-height: fit-content;
   }
   .icon {
@@ -144,6 +144,7 @@
     min-height: 2.25rem;
   }
   .content {
+    overflow-y: auto;
     flex-grow: 1;
     margin: 0 1.5rem 0.25rem;
     color: var(--theme-caption-color);
@@ -160,9 +161,7 @@
     justify-content: start;
     align-items: center;
     column-gap: 1rem;
-    padding: 1.5rem 1.75rem 1.25rem;
-    padding-top: 0.5rem;
-    height: 5.25rem;
+    padding: 0.5rem 1rem 1rem;
     mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
     overflow: hidden;
     border-radius: 0 0 1.25rem 1.25rem;

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

@@ -37,15 +37,16 @@
     showPopup,
     type AnyComponent,
     deviceOptionsStore as deviceInfo,
-    resizeObserver,
     deviceWidths
   } from '@hcengineering/ui'
-  import { closeWidget, NavFooter, openWidget, minimizeSidebar } from '@hcengineering/workbench-resources'
+  import { closeWidget, NavFooter, openWidget, minimizeSidebar, sidebarStore } from '@hcengineering/workbench-resources'
   import workbench from '@hcengineering/workbench'
   import { ComponentType, onDestroy, onMount } from 'svelte'
   import { clearSettingsStore, settingsStore, type SettingsStore } from '../store'
   import { Analytics } from '@hcengineering/analytics'
 
+  export let workbenchWidth: number = 0
+
   const client = getClient()
 
   let category: SettingsCategory | undefined
@@ -129,117 +130,123 @@
   }
   $: asideComponent = updatedStore($settingsStore)
   let moveASide: boolean = false
+  $: if (workbenchWidth < deviceWidths[3] && !moveASide) moveASide = true
+  else if (workbenchWidth >= deviceWidths[3] && moveASide) moveASide = false
+
   const widget = client.getModel().findAllSync(workbench.class.Widget, { _id: settingPlg.ids.SettingsWidget })[0]
-  $: if (moveASide && asideComponent != null) {
+  $: if (moveASide && asideComponent != null && $sidebarStore.widget !== widget._id) {
     openWidget(widget, { component: asideComponent, ...asideProps }, { active: true, openedByUser: true })
     $deviceInfo.aside.visible = true
-  } else if ((moveASide && asideComponent == null) || (!moveASide && asideComponent != null)) {
+  } else if (moveASide && asideComponent == null && $sidebarStore.widget === widget._id) {
     closeWidget(widget._id)
     minimizeSidebar()
+  } else if (!moveASide && asideComponent != null && $sidebarStore.widget === widget._id) {
+    closeWidget(widget._id)
   }
 
+  let replacedPanel: HTMLElement
+  $: $deviceInfo.replacedPanel = replacedPanel
+  onDestroy(() => ($deviceInfo.replacedPanel = undefined))
+
   defineSeparators('setting', settingsSeparators)
 </script>
 
-<div
-  class="hulyPanels-container"
-  use:resizeObserver={(el) => {
-    if (el.clientWidth < deviceWidths[2] && !moveASide) moveASide = true
-    else if (el.clientWidth >= deviceWidths[2] && moveASide) moveASide = false
-  }}
->
-  {#if $deviceInfo.navigator.visible}
-    <div
-      class="antiPanel-navigator {$deviceInfo.navigator.direction === 'horizontal'
-        ? 'portrait'
-        : 'landscape'} border-left"
-      class:border-right={category?.component === undefined}
-      class:fly={$deviceInfo.navigator.float}
-    >
-      <div class="antiPanel-wrap__content hulyNavPanel-container">
-        <div class="hulyNavPanel-header">
-          <Label label={setting.string.Settings} />
-        </div>
+{#if $deviceInfo.navigator.visible}
+  <div
+    class="antiPanel-navigator {$deviceInfo.navigator.direction === 'horizontal'
+      ? 'portrait'
+      : 'landscape'} border-left"
+    class:border-right={category?.component === undefined}
+    class:fly={$deviceInfo.navigator.float}
+  >
+    <div class="antiPanel-wrap__content hulyNavPanel-container">
+      <div class="hulyNavPanel-header">
+        <Label label={setting.string.Settings} />
+      </div>
 
-        <Scroller shrink>
-          {#each categories as _category}
-            {#if _category.extraComponents?.navigation && (_category.expandable ?? _category._id === setting.ids.Setting)}
-              <NavGroup
-                _id={_category._id}
-                label={_category.label}
-                categoryName={_category.name}
-                highlighted={_category.name === categoryId}
-                tools={_category.extraComponents?.tools}
-              >
-                <Component
-                  is={_category.extraComponents?.navigation}
-                  props={{
-                    kind: 'navigation',
-                    categoryName: _category.name
-                  }}
-                />
-              </NavGroup>
-            {:else}
-              <NavItem
-                icon={_category.icon}
-                label={_category.label}
-                selected={_category.name === categoryId}
-                on:click={() => {
-                  selectCategory(_category.name)
+      <Scroller shrink>
+        {#each categories as _category}
+          {#if _category.extraComponents?.navigation && (_category.expandable ?? _category._id === setting.ids.Setting)}
+            <NavGroup
+              _id={_category._id}
+              label={_category.label}
+              categoryName={_category.name}
+              highlighted={_category.name === categoryId}
+              tools={_category.extraComponents?.tools}
+            >
+              <Component
+                is={_category.extraComponents?.navigation}
+                props={{
+                  kind: 'navigation',
+                  categoryName: _category.name
                 }}
               />
-            {/if}
-          {/each}
-        </Scroller>
-
-        <NavFooter split>
-          <NavItem
-            icon={setting.icon.SelectWorkspace}
-            label={setting.string.SelectWorkspace}
-            on:click={selectWorkspace}
-          />
-          {#if hasAccountRole(account, AccountRole.User)}
+            </NavGroup>
+          {:else}
             <NavItem
-              icon={setting.icon.InviteWorkspace}
-              label={setting.string.InviteWorkspace}
-              on:click={inviteWorkspace}
+              icon={_category.icon}
+              label={_category.label}
+              selected={_category.name === categoryId}
+              on:click={() => {
+                selectCategory(_category.name)
+              }}
             />
           {/if}
-          <NavItem icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut} />
-        </NavFooter>
-      </div>
-      <Separator
-        name={'setting'}
-        float={$deviceInfo.navigator.float ? 'navigator' : true}
-        index={0}
-        color={'transparent'}
-      />
+        {/each}
+      </Scroller>
+
+      <NavFooter split>
+        <NavItem
+          icon={setting.icon.SelectWorkspace}
+          label={setting.string.SelectWorkspace}
+          on:click={selectWorkspace}
+        />
+        {#if hasAccountRole(account, AccountRole.User)}
+          <NavItem
+            icon={setting.icon.InviteWorkspace}
+            label={setting.string.InviteWorkspace}
+            on:click={inviteWorkspace}
+          />
+        {/if}
+        <NavItem icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut} />
+      </NavFooter>
     </div>
     <Separator
       name={'setting'}
-      float={$deviceInfo.navigator.float}
+      float={$deviceInfo.navigator.float ? 'navigator' : true}
       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' }} />
-    {/if}
   </div>
-  {#if asideComponent != null && !moveASide}
-    <Separator name={'setting'} index={1} color={'transparent'} separatorSize={0} short />
-    <div class="hulySidePanel-container">
-      {#key asideProps}
-        {#if typeof asideComponent === 'string'}
-          <Component is={asideComponent} props={{ ...asideProps }} />
-        {:else}
-          <svelte:component this={asideComponent} {...asideProps} />
-        {/if}
-      {/key}
-    </div>
+  <Separator
+    name={'setting'}
+    float={$deviceInfo.navigator.float}
+    index={0}
+    color={'transparent'}
+    separatorSize={0}
+    short
+  />
+{/if}
+
+<div
+  bind:this={replacedPanel}
+  class="antiPanel-component filledNav"
+  class:border-right={category?.component === undefined}
+  style:flex-direction={'row'}
+>
+  {#if category}
+    <Component is={category.component} props={{ kind: 'content' }} />
   {/if}
 </div>
+{#if asideComponent != null && !moveASide}
+  <Separator name={'setting'} index={1} color={'transparent'} separatorSize={0} short />
+  <div class="hulySidePanel-container">
+    {#key asideProps}
+      {#if typeof asideComponent === 'string'}
+        <Component is={asideComponent} props={{ ...asideProps }} />
+      {:else}
+        <svelte:component this={asideComponent} {...asideProps} />
+      {/if}
+    {/key}
+  </div>
+{/if}

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

@@ -985,7 +985,8 @@
             <Component
               is={currentApplication.component}
               props={{
-                currentSpace
+                currentSpace,
+                workbenchWidth
               }}
             />
           {:else if specialComponent}
@@ -996,7 +997,8 @@
                 ...specialComponent.componentProps,
                 currentSpace,
                 space: currentSpace,
-                navigationModel: specialComponent?.navigationModel
+                navigationModel: specialComponent?.navigationModel,
+                workbenchWidth
               }}
               on:action={(e) => {
                 if (e?.detail) {
@@ -1007,7 +1009,10 @@
               }}
             />
           {:else if currentView?.component !== undefined}
-            <Component is={currentView.component} props={{ ...currentView.componentProps, currentView }} />
+            <Component
+              is={currentView.component}
+              props={{ ...currentView.componentProps, currentView, workbenchWidth }}
+            />
           {:else if $accessDeniedStore}
             <div class="flex-center h-full">
               <h2><Label label={workbench.string.AccessDenied} /></h2>