Fixed navigators and aSide behavior when the document size is small. (#…

…7613) Signed-off-by: Alexander Platov <[email protected]>
hcengineering · Jan 9, 2025 · 79f2ad8 · 79f2ad8
1 parent c9f5f46
commit 79f2ad8
Show file tree

Hide file tree

Showing 19 changed files with 210 additions and 256 deletions.
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
@@ -137,6 +137,7 @@
   --theme-navpanel-border: rgba(255, 255, 255, .1);
   --theme-navpanel-icons-color: #7F7F7F;
   --theme-navpanel-icons-divider: rgba(255, 255, 255, .11);
+  --theme-navpanel-shadow-mobile: drop-shadow(0 0 3px rgba(0, 0, 0, .5));
   --theme-comp-header-color: #1F1F2C;
   --theme-divider-color: rgba(255, 255, 255, .06);
   --theme-bg-divider-color: #282834;
@@ -395,6 +396,7 @@
   --theme-navpanel-border: rgba(0, 0, 0, .06);
   --theme-navpanel-icons-color: #7F7F7F;
   --theme-navpanel-icons-divider: rgba(0, 0, 0, .1);
+  --theme-navpanel-shadow-mobile: drop-shadow(0 0 2px rgba(0, 0, 0, .2));
   --theme-comp-header-color: #FBFBFC;
   --theme-divider-color: rgba(0, 0, 0, .06);
   --theme-bg-divider-color: #E3E3E5;

diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
@@ -141,14 +141,11 @@
 }
 .antiPanel-navigator {
   position: relative;
+  min-width: 12.5rem;
+  max-width: 22.5rem;
+  width: 17.5rem;
 
   &:not(.second) { background-color: var(--theme-navpanel-color); }
-  &:not(.right) {
-    min-width: 12.5rem;
-    max-width: 22.5rem;
-    width: 17.5rem;
-  }
-  &.right { border-radius: var(--medium-BorderRadius); }
   &.second.float {
     background-color: var(--theme-navpanel-color);
     filter: drop-shadow(2px 0 5px rgba(0, 0, 0, .2));
@@ -174,40 +171,41 @@
 
   &.fly:not(.second) {
     position: fixed;
+    top: calc(var(--status-bar-height) + 1px);
+    height: calc(100% - var(--status-bar-height) - 2px);
     background-color: var(--theme-navpanel-color);
     z-index: 450;
-
-    &:not(.right) {
-      top: calc(var(--status-bar-height) + 1px);
-      height: calc(100% - var(--status-bar-height) - 2px);
-      filter: drop-shadow(2px 0 5px rgba(0, 0, 0, .2));
+    filter: drop-shadow(2px 0 5px rgba(0, 0, 0, .2));
 
-      &.portrait { left: 0; }
-      &.landscape { left: var(--app-panel-width); }
-    }
-    &.right {
-      top: var(--status-bar-height);
-      right: 0;
-      height: calc(100% - var(--status-bar-height));
-      background-color: var(--theme-statusbar-color);
-      filter: drop-shadow(-2px 0 5px rgba(0, 0, 0, .2));
-    }
+    &.portrait { left: 0; }
+    &.landscape { left: var(--app-panel-width); }
   }
 }
 
 @media (max-width: 480px) {
   .mobile-theme {
     .mobile-wrapper,
-    .antiPanel-navigator:not(.right) {
+    .antiPanel-navigator {
       overflow: hidden;
       border: 1px solid var(--theme-divider-color);
       border-radius: var(--medium-BorderRadius);
     }
-    .antiPanel-navigator:not(.right) {
+    .antiPanel-navigator {
       top: var(--status-bar-height);
-      height: calc(100% - var(--status-bar-height));
+      height: calc(100% - var(--status-bar-height) - var(--app-panel-width));
 
       .antiSeparator { display: none; }
+      &.fly {
+        width: calc(100% - 3.5rem) !important;
+        filter: var(--theme-navpanel-shadow-mobile);
+      }
+      &.second.float.fly {
+        height: calc(100% - var(--status-bar-height) - var(--app-panel-width) - 3.5rem);
+      }
+      &.fly:not(.second) {
+        top: var(--status-bar-height);
+        height: calc(100% - var(--status-bar-height) - var(--app-panel-width));
+      }
     }
   }
 }

diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
@@ -93,9 +93,9 @@
                 top: 'var(--status-bar-height)',
                 bottom: '4.25rem',
                 left: '0',
-                right: '0',
-                width: '100%',
-                height: 'calc(100dvh - var(--status-bar-height) - 4.25rem)',
+                right: '3.5rem',
+                width: '',
+                height: 'calc(100dvh - var(--status-bar-height) - var(--app-panel-width))',
                 maxWidth: '100%',
                 maxHeight: '100%',
                 minWidth: '0'

diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
@@ -921,7 +921,6 @@
     border-radius: 0.125rem;
     box-shadow: 0 0 1px 1px var(--theme-overlay-color);
     opacity: 0;
-    z-index: 1;
     cursor: pointer;
 
     &.hovered {

diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
@@ -10,10 +10,7 @@
     IconArrowRight,
     checkMobile,
     deviceOptionsStore as deviceInfo,
-    checkAdaptiveMatching,
-    ButtonIcon,
-    IconDetailsFilled,
-    IconDetails
+    checkAdaptiveMatching
   } from '../../'
   import { desktopPlatform, getCurrentLocation, location, locationStorageKeyId, navigate } from '../../location'
   import uiPlugin from '../../plugin'
@@ -140,8 +137,6 @@
   updateDeviceSize()
 
   $: secondRow = checkAdaptiveMatching($deviceInfo.size, 'xs')
-  $: asideFloat = checkAdaptiveMatching($deviceInfo.size, 'sm')
-  $: asideOpen = $deviceInfo.aside.visible
   $: appsMini =
     $deviceInfo.isMobile &&
     (($deviceInfo.isPortrait && $deviceInfo.docWidth <= 480) ||
@@ -200,20 +195,6 @@
           {/if}
         </div>
         <div class="flex-row-reverse" style:-webkit-app-region={'no-drag'}>
-          {#if asideFloat && !secondRow}
-            <div class="antiHSpacer x2" />
-            <ButtonIcon
-              icon={asideOpen ? IconDetailsFilled : IconDetails}
-              iconProps={{ fill: 'var(--theme-dark-color)' }}
-              kind={'tertiary'}
-              size={'extra-small'}
-              hasMenu
-              pressed={$deviceInfo.aside.visible}
-              on:click={() => {
-                $deviceInfo.aside.visible = !$deviceInfo.aside.visible
-              }}
-            />
-          {/if}
           <div class="clock">
             <Clock />
           </div>
@@ -234,17 +215,6 @@
           </div>
           <div class="flex-row-center flex-gap-0-5">
             <RootBarExtension position="right" />
-            <ButtonIcon
-              icon={asideOpen ? IconDetailsFilled : IconDetails}
-              iconProps={{ fill: 'var(--theme-dark-color)' }}
-              kind={'tertiary'}
-              size={'extra-small'}
-              hasMenu
-              pressed={$deviceInfo.aside.visible}
-              on:click={() => {
-                $deviceInfo.aside.visible = !$deviceInfo.aside.visible
-              }}
-            />
           </div>
         </div>
       {/if}

diff --git a/packages/ui/src/resize.ts b/packages/ui/src/resize.ts
@@ -170,7 +170,7 @@ export const twoPanelsSeparators: DefSeparators = [
 ]
 
 export const mainSeparators: DefSeparators = [
-  { minSize: 30, size: 'auto', maxSize: 'auto' },
+  { minSize: 20, size: 'auto', maxSize: 'auto' },
   { minSize: 25, size: 30, maxSize: 80, float: 'sidebar' }
 ]
 

diff --git a/plugins/chunter-resources/src/components/chat/Chat.svelte b/plugins/chunter-resources/src/components/chat/Chat.svelte
@@ -175,7 +175,9 @@
       <div class="antiPanel-wrap__content hulyNavPanel-container">
         <ChatNavigator {object} {currentSpecial} on:select={handleChannelSelected} />
       </div>
-      <Separator name="chat" float={$deviceInfo.navigator.float ? 'navigator' : true} index={0} />
+      {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+        <Separator name="chat" float={$deviceInfo.navigator.float ? 'navigator' : true} index={0} />
+      {/if}
     </div>
     <Separator
       name="chat"

diff --git a/plugins/hr-resources/src/components/Schedule.svelte b/plugins/hr-resources/src/components/Schedule.svelte
@@ -34,7 +34,7 @@
     Breadcrumb,
     Switcher,
     defineSeparators,
-    workbenchSeparators,
+    twoPanelsSeparators,
     deviceOptionsStore as deviceInfo,
     tableToCSV,
     showPopup
@@ -180,7 +180,7 @@
   $: $deviceInfo.replacedPanel = replacedPanel
   onDestroy(() => ($deviceInfo.replacedPanel = undefined))
 
-  defineSeparators('workbench', workbenchSeparators)
+  defineSeparators('schedule', twoPanelsSeparators)
 </script>
 
 <div class="hulyPanels-container">
@@ -194,9 +194,8 @@
       }}
     />
     <Separator
-      name={'workbench'}
+      name={'schedule'}
       float={$deviceInfo.navigator.float}
-      disabledWhen={['panel-aside']}
       index={0}
       color={'transparent'}
       separatorSize={0}

diff --git a/plugins/hr-resources/src/components/sidebar/Sidebar.svelte b/plugins/hr-resources/src/components/sidebar/Sidebar.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
   import { Department } from '@hcengineering/hr'
-  import { Scroller, Separator } from '@hcengineering/ui'
+  import { Scroller, Separator, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import { TreeNode } from '@hcengineering/view-resources'
   import { NavFooter, NavHeader } from '@hcengineering/workbench-resources'
 
@@ -26,13 +26,14 @@
   export let department: Ref<Department>
   export let descendants: Map<Ref<Department>, Department[]>
   export let departmentById: Map<Ref<Department>, Department>
-  export let navFloat: boolean = false
-  export let appsDirection: 'horizontal' | 'vertical' = 'horizontal'
 
   const departments = [hr.ids.Head]
 </script>
 
-<div class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'} border-left">
+<div
+  class="antiPanel-navigator {$deviceInfo.navigator.direction === 'horizontal' ? 'portrait' : 'landscape'} border-left"
+  class:fly={$deviceInfo.navigator.float}
+>
   <div class="antiPanel-wrap__content hulyNavPanel-container">
     <NavHeader label={hr.string.HRApplication} />
 
@@ -50,10 +51,12 @@
 
     <NavFooter />
   </div>
-  <Separator
-    name={'workbench'}
-    float={navFloat ? 'navigator' : true}
-    index={0}
-    color={'var(--theme-navpanel-border)'}
-  />
+  {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+    <Separator
+      name={'schedule'}
+      float={$deviceInfo.navigator.float ? 'navigator' : true}
+      index={0}
+      color={'var(--theme-navpanel-border)'}
+    />
+  {/if}
 </div>
diff --git a/plugins/notification-resources/src/components/inbox/Inbox.svelte b/plugins/notification-resources/src/components/inbox/Inbox.svelte
@@ -429,7 +429,9 @@
           />
         </Scroller>
       </div>
-      <Separator name="inbox" float={$deviceInfo.navigator.float ? 'navigator' : true} index={0} />
+      {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+        <Separator name="inbox" float={$deviceInfo.navigator.float ? 'navigator' : true} index={0} />
+      {/if}
     </div>
     <Separator
       name="inbox"

diff --git a/plugins/time-resources/src/components/PlanView.svelte b/plugins/time-resources/src/components/PlanView.svelte
@@ -91,6 +91,7 @@
 <div
   class="flex-col w-full clear-mins mobile-wrapper"
   class:left-divider={!$deviceInfo.navigator.visible}
+  class:right-divider={!visibleCalendar}
   bind:this={mainPanel}
 >
   <ToDos {mode} {tag} bind:currentDate />

diff --git a/plugins/time-resources/src/components/ToDosNavigator.svelte b/plugins/time-resources/src/components/ToDosNavigator.svelte
@@ -205,13 +205,15 @@
     </Scroller>
     <NavFooter />
   </div>
-  <Separator
-    name={'time'}
-    float={$deviceInfo.navigator.float ? 'navigator' : true}
-    index={0}
-    disabledWhen={['panel-aside']}
-    color={'var(--theme-divider-color)'}
-  />
+  {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+    <Separator
+      name={'time'}
+      float={$deviceInfo.navigator.float ? 'navigator' : true}
+      index={0}
+      disabledWhen={['panel-aside']}
+      color={'var(--theme-divider-color)'}
+    />
+  {/if}
 </div>
 
 <style lang="scss">

diff --git a/plugins/time-resources/src/components/team/Team.svelte b/plugins/time-resources/src/components/team/Team.svelte
@@ -98,7 +98,6 @@
       name={'team'}
       float={$deviceInfo.navigator.float}
       index={0}
-      disabledWhen={['panel-aside']}
       color={'transparent'}
       separatorSize={0}
       short

diff --git a/plugins/time-resources/src/components/team/TeamNavigator.svelte b/plugins/time-resources/src/components/team/TeamNavigator.svelte
@@ -88,11 +88,12 @@
     </Scroller>
     <NavFooter />
   </div>
-  <Separator
-    name={'time'}
-    float={$deviceInfo.navigator.float ? 'navigator' : true}
-    index={1}
-    disabledWhen={['panel-aside']}
-    color={'var(--theme-divider-color)'}
-  />
+  {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+    <Separator
+      name={'time'}
+      float={$deviceInfo.navigator.float ? 'navigator' : true}
+      index={0}
+      color={'var(--theme-divider-color)'}
+    />
+  {/if}
 </div>
diff --git a/plugins/workbench-resources/src/components/ComponentNavigator.svelte b/plugins/workbench-resources/src/components/ComponentNavigator.svelte
@@ -156,12 +156,14 @@
           on:select={onSelected}
         />
       </div>
-      <Separator
-        name={'parentsNavigator'}
-        float={floatNavigator ? 'navigator' : true}
-        index={0}
-        color={'var(--theme-divider-color)'}
-      />
+      {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+        <Separator
+          name={'parentsNavigator'}
+          float={floatNavigator ? 'navigator' : true}
+          index={0}
+          color={'var(--theme-divider-color)'}
+        />
+      {/if}
     </div>
     <Separator name={'parentsNavigator'} float={floatNavigator} index={0} color={'var(--theme-divider-color)'} />
   {/if}