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

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
2026-09-13 21:27:46 +02:00 · 2025-01-09 15:24:11 +07:00
parent c9f5f4656c
commit 79f2ad8e2d
19 changed files with 210 additions and 256 deletions
@@ -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}
@@ -126,7 +126,6 @@
  import { get } from 'svelte/store'

  const HIDE_NAVIGATOR = 720
-  const HIDE_ASIDE = 680 // sm
  const FLOAT_ASIDE = 1024 // lg
  let contentPanel: HTMLElement

@@ -650,7 +649,6 @@
    $deviceInfo.aside.float = false
    $deviceInfo.aside.visible = !hiddenAside
  }
-  $: expandedFloatASide = $deviceInfo.docWidth <= FLOAT_ASIDE && $deviceInfo.docWidth > HIDE_ASIDE
  const checkOnHide = (): void => {
    if ($deviceInfo.navigator.visible && $deviceInfo.navigator.float) $deviceInfo.navigator.visible = false
  }
@@ -780,10 +778,7 @@
      <path d="M15.8,17.5h1.8v-0.4C17,17.4,16.4,17.5,15.8,17.5z" />
    </clipPath>
  </svg>
-  <div
-    class="workbench-container"
-    style:flex-direction={$deviceInfo.navigator.direction === 'horizontal' ? 'column-reverse' : 'row'}
-  >
+  <div class="workbench-container apps-{$deviceInfo.navigator.direction}">
    <div
      class="antiPanel-application {$deviceInfo.navigator.direction} no-print"
      class:lastDivider={!$deviceInfo.navigator.visible}
@@ -910,134 +905,125 @@
        application: currentApplication?._id
      }}
    />
-    <div
-      class="workbench-container inner"
-      class:rounded={$sidebarStore.variant === SidebarVariant.EXPANDED}
-      use:resizeObserver={(element) => {
-        workbenchWidth = element.clientWidth
-        checkWorkbenchWidth()
-      }}
-    >
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      {#if $deviceInfo.navigator.float && $deviceInfo.navigator.visible}
-        <div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
-      {/if}
-      {#if mainNavigator}
-        <div
-          class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
-            ? 'portrait'
-            : 'landscape'} border-left"
-          class:fly={$deviceInfo.navigator.float}
-        >
-          <div class="antiPanel-wrap__content hulyNavPanel-container">
-            {#if currentApplication}
-              <NavHeader label={currentApplication.label} />
-              {#if currentApplication.navHeaderComponent}
-                <Component
-                  is={currentApplication.navHeaderComponent}
-                  props={{
-                    currentSpace,
-                    currentSpecial,
-                    currentFragment
-                  }}
-                  shrink
-                />
+    <div class="flex-row-center w-full h-full">
+      <div
+        class="workbench-container inner"
+        class:rounded={$sidebarStore.variant === SidebarVariant.EXPANDED}
+        use:resizeObserver={(element) => {
+          workbenchWidth = element.clientWidth
+          checkWorkbenchWidth()
+        }}
+      >
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        {#if $deviceInfo.navigator.float && $deviceInfo.navigator.visible}
+          <div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
+        {/if}
+        {#if mainNavigator}
+          <div
+            class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
+              ? 'portrait'
+              : 'landscape'} border-left"
+            class:fly={$deviceInfo.navigator.float}
+          >
+            <div class="antiPanel-wrap__content hulyNavPanel-container">
+              {#if currentApplication}
+                <NavHeader label={currentApplication.label} />
+                {#if currentApplication.navHeaderComponent}
+                  <Component
+                    is={currentApplication.navHeaderComponent}
+                    props={{
+                      currentSpace,
+                      currentSpecial,
+                      currentFragment
+                    }}
+                    shrink
+                  />
+                {/if}
              {/if}
+              <Navigator
+                {currentSpace}
+                {currentSpecial}
+                {currentFragment}
+                model={navigatorModel}
+                {currentApplication}
+                on:open={checkOnHide}
+              />
+              <NavFooter>
+                {#if currentApplication && currentApplication.navFooterComponent}
+                  <Component is={currentApplication.navFooterComponent} props={{ currentSpace }} />
+                {/if}
+              </NavFooter>
+            </div>
+            {#if !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+              <Separator
+                name={'workbench'}
+                float={$deviceInfo.navigator.float ? 'navigator' : true}
+                index={0}
+                color={'var(--theme-navpanel-border)'}
+              />
            {/if}
-            <Navigator
-              {currentSpace}
-              {currentSpecial}
-              {currentFragment}
-              model={navigatorModel}
-              {currentApplication}
-              on:open={checkOnHide}
-            />
-            <NavFooter>
-              {#if currentApplication && currentApplication.navFooterComponent}
-                <Component is={currentApplication.navFooterComponent} props={{ currentSpace }} />
-              {/if}
-            </NavFooter>
          </div>
          <Separator
            name={'workbench'}
-            float={$deviceInfo.navigator.float ? 'navigator' : true}
+            float={$deviceInfo.navigator.float}
            index={0}
-            color={'var(--theme-navpanel-border)'}
+            color={'transparent'}
+            separatorSize={0}
+            short
          />
-        </div>
-        <Separator
-          name={'workbench'}
-          float={$deviceInfo.navigator.float}
-          index={0}
-          color={'transparent'}
-          separatorSize={0}
-          short
-        />
-      {/if}
-      <div
-        bind:this={contentPanel}
-        class={navigatorModel === undefined ? 'hulyPanels-container' : 'hulyComponent overflow-hidden'}
-        class:straighteningCorners={expandedFloatASide && $sidebarStore.variant === SidebarVariant.EXPANDED}
-        data-id={'contentPanel'}
-      >
-        {#if currentApplication && currentApplication.component}
-          <Component
-            is={currentApplication.component}
-            props={{
-              currentSpace
-            }}
-          />
-        {:else if specialComponent}
-          <Component
-            is={specialComponent.component}
-            props={{
-              model: navigatorModel,
-              ...specialComponent.componentProps,
-              currentSpace,
-              space: currentSpace,
-              navigationModel: specialComponent?.navigationModel
-            }}
-            on:action={(e) => {
-              if (e?.detail) {
-                const loc = getCurrentLocation()
-                loc.query = { ...loc.query, ...e.detail }
-                navigate(loc)
-              }
-            }}
-          />
-        {:else if currentView?.component !== undefined}
-          <Component is={currentView.component} props={{ ...currentView.componentProps, currentView }} />
-        {:else if $accessDeniedStore}
-          <div class="flex-center h-full">
-            <h2><Label label={workbench.string.AccessDenied} /></h2>
-          </div>
-        {:else}
-          <SpaceView {currentSpace} {currentView} {createItemDialog} {createItemLabel} />
        {/if}
+        <div
+          bind:this={contentPanel}
+          class={navigatorModel === undefined ? 'hulyPanels-container' : 'hulyComponent overflow-hidden'}
+          class:straighteningCorners={$deviceInfo.aside.float &&
+            $sidebarStore.variant === SidebarVariant.EXPANDED &&
+            !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
+          data-id={'contentPanel'}
+        >
+          {#if currentApplication && currentApplication.component}
+            <Component
+              is={currentApplication.component}
+              props={{
+                currentSpace
+              }}
+            />
+          {:else if specialComponent}
+            <Component
+              is={specialComponent.component}
+              props={{
+                model: navigatorModel,
+                ...specialComponent.componentProps,
+                currentSpace,
+                space: currentSpace,
+                navigationModel: specialComponent?.navigationModel
+              }}
+              on:action={(e) => {
+                if (e?.detail) {
+                  const loc = getCurrentLocation()
+                  loc.query = { ...loc.query, ...e.detail }
+                  navigate(loc)
+                }
+              }}
+            />
+          {:else if currentView?.component !== undefined}
+            <Component is={currentView.component} props={{ ...currentView.componentProps, currentView }} />
+          {:else if $accessDeniedStore}
+            <div class="flex-center h-full">
+              <h2><Label label={workbench.string.AccessDenied} /></h2>
+            </div>
+          {:else}
+            <SpaceView {currentSpace} {currentView} {createItemDialog} {createItemLabel} />
+          {/if}
+        </div>
      </div>
-    </div>
-    {#if $deviceInfo.docWidth > HIDE_ASIDE}
-      {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !expandedFloatASide}
+      {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !$deviceInfo.aside.float}
        <Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
      {/if}
-      <WidgetsBar expandedFloat={expandedFloatASide} />
-    {/if}
+      <WidgetsBar />
+    </div>
  </div>
  <Dock />
-  {#if $deviceInfo.docWidth <= HIDE_ASIDE}
-    <div
-      class="antiPanel-navigator right fly no-print {$deviceInfo.navigator.direction === 'horizontal'
-        ? 'portrait'
-        : 'landscape'}"
-      style:display={$deviceInfo.aside.visible ? 'flex' : 'none'}
-    >
-      <Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short float={'sidebar'} />
-      <div class="antiPanel-wrap__content hulyNavPanel-container">
-        <WidgetsBar />
-      </div>
-    </div>
-  {/if}
  <div bind:this={cover} class="cover" />
  <TooltipInstance />
  <PanelInstance bind:this={panelInstance} contentPanel={elementPanel}>
@@ -1067,6 +1053,9 @@
    background-color: var(--theme-panel-color);
    touch-action: none;

+    &.apps-horizontal {
+      flex-direction: column-reverse;
+    }
    &.inner {
      background-color: var(--theme-navpanel-color);

@@ -24,8 +24,6 @@
  import SidebarMini from './SidebarMini.svelte'
  import SidebarExpanded from './SidebarExpanded.svelte'

-  export let expandedFloat: boolean = false
-
  const client = getClient()

  const widgets = client.getModel().findAllSync(workbench.class.Widget, {})
@@ -63,17 +61,11 @@
  })
 </script>

-<div
-  id="sidebar"
-  class="antiPanel-application vertical sidebar-container"
-  class:mini={mini || expandedFloat}
-  class:expandedFloat
-  class:float={$deviceInfo.aside.float && !expandedFloat}
->
+<div id="sidebar" class="antiPanel-application vertical sidebar-container" class:mini={mini || $deviceInfo.aside.float}>
  {#if mini}
    <SidebarMini {widgets} {preferences} />
  {:else if $sidebarStore.variant === SidebarVariant.EXPANDED}
-    <SidebarExpanded {widgets} {preferences} float={expandedFloat} />
+    <SidebarExpanded {widgets} {preferences} />
  {/if}
 </div>

@@ -84,33 +76,23 @@
    min-width: 25rem;
    border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;

-    &.mini:not(.float) {
+    &.mini {
+      justify-content: flex-end;
      width: calc(3.5rem + 1px) !important;
      min-width: calc(3.5rem + 1px) !important;
      max-width: calc(3.5rem + 1px) !important;
    }
-    &.mini.float {
-      justify-content: flex-end;
-    }
-    &.float > :global(.sidebar-content) {
-      border-top: none;
-    }
  }
  @media (max-width: 1024px) {
    .sidebar-container {
      width: 100%;
-
-      &:not(.expandedFloat) {
-        border-radius: var(--medium-BorderRadius);
-      }
-      &.expandedFloat {
-        border-left-color: transparent;
-      }
+      border-left-color: transparent;
    }
  }
-  @media (max-width: 680px) {
-    .sidebar-container {
-      border: 1px solid var(--theme-navpanel-divider);
+  @media (max-width: 480px) {
+    :global(.mobile-theme) .sidebar-container {
+      border-right: none;
+      border-bottom-right-radius: 0 !important;
    }
  }
 </style>
@@ -23,7 +23,8 @@
    Header,
    Breadcrumbs,
    getCurrentLocation,
-    Separator
+    Separator,
+    deviceOptionsStore as deviceInfo
  } from '@hcengineering/ui'
  import { onDestroy, onMount } from 'svelte'

@@ -33,7 +34,6 @@

  export let widgets: Widget[] = []
  export let preferences: WidgetPreference[] = []
-  export let float: boolean = false

  let widgetId: Ref<Widget> | undefined = undefined
  let widget: Widget | undefined = undefined
@@ -54,6 +54,7 @@
  $: if ($sidebarStore.widget === undefined) {
    sidebarStore.update((s) => ({ ...s, variant: SidebarVariant.MINI }))
  }
+  $: float = $deviceInfo.aside.float

  function closeWrongTabs (loc: Location): void {
    if (widget === undefined) return
@@ -99,7 +100,7 @@
 </script>

 <div class="sidebar-wrap__content" class:float>
-  {#if float}
+  {#if float && !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
    <Separator name={'main'} index={0} color={'var(--theme-navpanel-border)'} float={'sidebar'} />
  {/if}
  <div class="sidebar-content">
@@ -149,7 +150,7 @@
    />
  {/if}
 </div>
-<WidgetsBar {widgets} {preferences} selected={widgetId} expandedFloat={float} />
+<WidgetsBar {widgets} {preferences} selected={widgetId} />

 <style lang="scss">
  .sidebar-wrap__content,
@@ -172,12 +173,16 @@
      right: 3.5rem;
      border-top-color: var(--theme-divider-color);
      border-bottom: 1px solid var(--theme-divider-color);
-      z-index: 491;
+      z-index: 440;
      filter: drop-shadow(-2px 0 5px rgba(0, 0, 0, 0.2));
-    }

-    @media (max-width: 680px) {
-      border-top: none;
+      :global(.mobile-theme) & {
+        overflow: hidden;
+        height: calc(100% - var(--app-panel-width));
+        border: 1px solid var(--theme-divider-color);
+        border-radius: var(--medium-BorderRadius);
+        filter: var(--theme-navpanel-shadow-mobile);
+      }
    }
  }
  .sidebar-content {
@@ -24,7 +24,6 @@
  export let widgets: Widget[] = []
  export let preferences: WidgetPreference[] = []
  export let selected: Ref<Widget> | undefined = undefined
-  export let expandedFloat: boolean = false

  function handleAddWidget (): void {
    showPopup(AddWidgetsPopup, { widgets })
@@ -32,8 +31,7 @@

  function handleSelectWidget (widget: Widget): void {
    if (selected === widget._id) {
-      if ($deviceInfo.aside.float && !expandedFloat) $deviceInfo.aside.visible = false
-      else minimizeSidebar(true)
+      minimizeSidebar(true)
    } else {
      openWidget(widget, $sidebarStore.widgetsState.get(widget._id)?.data, { active: true, openedByUser: true })
    }