Mobile layout fixes (#7077)

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

plugins/love-resources/src/components/ControlBar.svelte

@@ -28,7 +28,8 @@
     getCurrentLocation,
     showPopup,
     type AnySvelteComponent,
-    type CompAndProps
+    type CompAndProps,
+    resizeObserver
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import plugin from '../plugin'
@@ -51,6 +52,7 @@
   import CamSettingPopup from './CamSettingPopup.svelte'
   import MicSettingPopup from './MicSettingPopup.svelte'
   import RoomAccessPopup from './RoomAccessPopup.svelte'
+  import { afterUpdate } from 'svelte'
 
   export let room: Room
   export let fullScreen: boolean = false
@@ -59,6 +61,11 @@
   const allowShare: boolean = true
   let allowLeave: boolean = false
   let popup: CompAndProps | undefined = undefined
+  let grow: HTMLElement
+  let leftPanel: HTMLElement
+  let leftPanelSize: number = 0
+  let noLabel: boolean = false
+  let combinePanel: boolean = false
 
   $: allowCam = $currentRoom?.type === RoomType.Video
   $: allowLeave = $myInfo?.room !== ($myOffice?._id ?? plugin.ids.Reception)
@@ -149,9 +156,22 @@
 
   const camKeys = client.getModel().findAllSync(view.class.Action, { _id: plugin.action.ToggleVideo })?.[0]?.keyBinding
   const micKeys = client.getModel().findAllSync(view.class.Action, { _id: plugin.action.ToggleMic })?.[0]?.keyBinding
+
+  const checkBar = (): void => {
+    if (grow === undefined || leftPanel === undefined) return
+    if (!noLabel && leftPanel.clientWidth > leftPanelSize) leftPanelSize = leftPanel.clientWidth
+    if (grow.clientWidth - 16 < leftPanel.clientWidth && !noLabel && !combinePanel) noLabel = true
+    else if (grow.clientWidth - 16 < leftPanel.clientWidth && noLabel && !combinePanel) combinePanel = true
+    else if (grow.clientWidth * 2 - 32 > leftPanel.clientWidth && noLabel && combinePanel) combinePanel = false
+    else if (grow.clientWidth - 32 >= leftPanelSize && noLabel && !combinePanel) noLabel = false
+  }
+  afterUpdate(() => {
+    checkBar()
+  })
 </script>
 
-<div class="bar w-full flex-center flex-gap-2 flex-no-shrink">
+<div class="bar w-full flex-center flex-gap-2 flex-no-shrink" class:combinePanel use:resizeObserver={checkBar}>
+  <div bind:this={grow} class="flex-grow" />
   {#if room._id !== plugin.ids.Reception}
     <ModernButton
       icon={roomAccessIcon[room.access]}
@@ -205,7 +225,7 @@
       />
     {/if}
   {/if}
-  <div class="bar__left-panel flex-gap-2 flex-center">
+  <div bind:this={leftPanel} class="bar__left-panel flex-gap-2 flex-center">
     {#if $isConnected}
       <ModernButton
         icon={$isFullScreen ? love.icon.ExitFullScreen : love.icon.FullScreen}
@@ -232,7 +252,7 @@
     {#if allowLeave}
       <ModernButton
         icon={plugin.icon.LeaveRoom}
-        label={plugin.string.LeaveRoom}
+        label={noLabel ? undefined : plugin.string.LeaveRoom}
         tooltip={{ label: plugin.string.LeaveRoom, direction: 'top' }}
         kind={'negative'}
         size={'large'}
@@ -240,6 +260,7 @@
       />
     {/if}
   </div>
+  <div class="flex-grow" />
   {#if popup && fullScreen}
     <PopupInstance
       is={popup.is}
@@ -259,6 +280,7 @@
 
 <style lang="scss">
   .bar {
+    overflow-x: auto;
     position: relative;
     padding: 1rem;
     border-top: 1px solid var(--theme-divider-color);
@@ -270,5 +292,9 @@
       right: 1rem;
       height: 100%;
     }
+
+    &.combinePanel .bar__left-panel {
+      position: static;
+    }
   }
 </style>

plugins/love-resources/src/components/Room.svelte

@@ -17,7 +17,7 @@
   import { personByIdStore } from '@hcengineering/contact-resources'
   import { Room as TypeRoom } from '@hcengineering/love'
   import { getMetadata } from '@hcengineering/platform'
-  import { Label, Loading, resizeObserver } from '@hcengineering/ui'
+  import { Label, Loading, resizeObserver, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import {
     LocalParticipant,
     LocalTrackPublication,
@@ -333,7 +333,7 @@
   $: if (((document.fullscreenElement && !$isFullScreen) || $isFullScreen) && roomEl) toggleFullscreen()
 </script>
 
-<div bind:this={roomEl} class="flex-col-center w-full h-full" class:theme-dark={$isFullScreen}>
+<div bind:this={roomEl} class="flex-col-center w-full h-full right-navpanel-border" class:theme-dark={$isFullScreen}>
   {#if $isConnected && !$isCurrentInstanceConnected}
     <div class="flex justify-center error h-full w-full clear-mins">
       <Label label={love.string.AnotherWindowError} />
@@ -345,7 +345,13 @@
   {:else if loading}
     <Loading />
   {/if}
-  <div class="room-container" class:sharing={$screenSharing} class:many={columns > 3} class:hidden={loading}>
+  <div
+    class="room-container"
+    class:sharing={$screenSharing}
+    class:many={columns > 3}
+    class:hidden={loading}
+    class:mobile={$deviceInfo.isMobile}
+  >
     <div class="screenContainer">
       <video class="screen" bind:this={screen}></video>
     </div>
@@ -452,6 +458,15 @@
         gap: 0.5rem;
       }
     }
+
+    &.mobile {
+      padding: var(--spacing-0_5);
+
+      &:not(.sharing) .videoGrid,
+      &.sharing {
+        gap: var(--spacing-0_5);
+      }
+    }
   }
   .hidden {
     display: none;

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

@@ -647,6 +647,18 @@
   const checkOnHide = (): void => {
     if ($deviceInfo.navigator.visible && $deviceInfo.docWidth <= 1024) $deviceInfo.navigator.visible = false
   }
+  let oldNavVisible: boolean = $deviceInfo.navigator.visible
+  let oldASideVisible: boolean = $deviceInfo.aside.visible
+  $: if (oldNavVisible !== $deviceInfo.navigator.visible || oldASideVisible !== $deviceInfo.aside.visible) {
+    if ($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.navigator.float) {
+      if ($deviceInfo.navigator.visible && $deviceInfo.aside.visible) {
+        if (oldNavVisible) $deviceInfo.navigator.visible = false
+        else $deviceInfo.aside.visible = false
+      }
+    }
+    oldNavVisible = $deviceInfo.navigator.visible
+    oldASideVisible = $deviceInfo.aside.visible
+  }
   $: $deviceInfo.navigator.direction = $deviceInfo.isMobile && $deviceInfo.isPortrait ? 'horizontal' : 'vertical'
   let appsMini: boolean
   $: appsMini =

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

@@ -57,23 +57,25 @@
       </div>
     </div>
   {:else if !mini}
-    <ScrollerBar bind:scroller padding={'.25rem 0'}>
+    <div class="flex-row-center gap-1 py-1 overflow-x-auto">
       {#each $tabsStore as tab (tab._id)}
         <WorkbenchTabPresenter {tab} />
       {/each}
-    </ScrollerBar>
+    </div>
   {:else if selectedTab !== undefined}
     <WorkbenchTabPresenter tab={selectedTab} />
-    <ButtonIcon
-      bind:element
-      icon={IconMoreH}
-      iconProps={{ fill: 'var(--theme-dark-color)' }}
-      size={'extra-small'}
-      kind={'tertiary'}
-      hasMenu
-      {pressed}
-      on:click={showTabs}
-    />
+    {#if $tabsStore.length > 1}
+      <ButtonIcon
+        bind:element
+        icon={IconMoreH}
+        iconProps={{ fill: 'var(--theme-dark-color)' }}
+        size={'extra-small'}
+        kind={'tertiary'}
+        hasMenu
+        {pressed}
+        on:click={showTabs}
+      />
+    {/if}
   {/if}
   {#if !popup}
     <ButtonIcon