Mobile UI fixes (#7109)

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

dev/prod/webpack.config.js

@@ -277,7 +277,7 @@ module.exports = [
   plugins: [
     new HtmlWebpackPlugin({
       meta: {
-        viewport: 'width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=1'
+        viewport: 'width=device-width, initial-scale=1'
       }
     }),
     ...(prod ? [new CompressionPlugin()] : []),

packages/theme/styles/common.scss

@@ -149,8 +149,7 @@
     width: 17.5rem;
   }
   &.right {
-    overflow: hidden;
+    border-radius: var(--medium-BorderRadius);
-    border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius);
   }
 }
 
@@ -162,7 +161,7 @@
     
     &:not(.right) {
       top: calc(var(--status-bar-height) + 1px);
-      height: calc(100% - var(--status-bar-height) - 1px);
+      height: calc(100% - var(--status-bar-height) - 2px);
       filter: drop-shadow(2px 0 5px rgba(0, 0, 0, .2));
 
       &.portrait { left: 0; }
@@ -171,12 +170,28 @@
     &.right {
       top: var(--status-bar-height);
       right: 0;
-      height: calc(100% - var(--status-bar-height) - 1px);
+      height: calc(100% - var(--status-bar-height));
       background-color: var(--theme-statusbar-color);
       filter: drop-shadow(-2px 0 5px rgba(0, 0, 0, .2));
     }
   }
 }
+@media (max-width: 480px) {
+  .mobile-theme {
+    .mobile-wrapper,
+    .antiPanel-navigator:not(.right) {
+      overflow: hidden;
+      border: 1px solid var(--theme-divider-color);
+      border-radius: var(--medium-BorderRadius);
+    }
+    .antiPanel-navigator:not(.right) {
+      top: var(--status-bar-height);
+      height: calc(100% - var(--status-bar-height));
+
+      .antiSeparator { display: none; }
+    }
+  }
+}
 .antiPanel-component {
   overflow: hidden;
   flex-direction: column;

packages/theme/styles/dialogs.scss

@@ -304,7 +304,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-width: 25rem;
+  min-width: 20rem;
   min-height: 0;
   background-color: var(--theme-popup-color);
   border-radius: .5rem;

packages/theme/styles/global.scss

@@ -147,7 +147,7 @@ body {
   height: var(--app-height);
   width: 100%;
   overflow: hidden;
-  touch-action: none;
+  // touch-action: none;
 
   @media print {
     overflow: visible !important;

packages/theme/styles/panel.scss

@@ -293,8 +293,6 @@
   min-width: 0;
   min-height: 0;
   border-radius: var(--small-focus-BorderRadius);
-  border-top-right-radius: 0;
-  border-bottom-right-radius:0 ;
 
   &:not(.rowContent) { flex-direction: column; }
   .panel-instance & {
@@ -590,5 +588,6 @@
   }
 }
 .popup.fullsize {
+  align-items: center;
   transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
 }

packages/ui/src/components/Dialog.svelte

@@ -16,7 +16,17 @@
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
   import { createEventDispatcher } from 'svelte'
-  import { Button, Label, IconClose, IconScale, IconScaleFull, resizeObserver, tooltip } from '..'
+  import {
+    Button,
+    Label,
+    IconClose,
+    IconScale,
+    IconScaleFull,
+    resizeObserver,
+    tooltip,
+    deviceOptionsStore as deviceInfo,
+    checkAdaptiveMatching
+  } from '..'
 
   export let label: IntlString | undefined = undefined
   export let isFullSize: boolean = false
@@ -25,6 +35,12 @@
   const dispatch = createEventDispatcher()
 
   let fullSize: boolean = false
+  let toggleFullSize: boolean = fullSize
+  $: needFullSize = checkAdaptiveMatching($deviceInfo.size, 'md')
+  $: if ((needFullSize && !fullSize) || (!needFullSize && (fullSize || toggleFullSize))) {
+    fullSize = toggleFullSize ? true : needFullSize
+    dispatch('fullsize', fullSize)
+  }
 </script>
 
 <form
@@ -47,20 +63,18 @@
       {#if $$slots.utils}
         <slot name="utils" />
       {/if}
-      {#if $$slots.utils && isFullSize}
+      {#if $$slots.utils && isFullSize && !needFullSize}
         <div class="buttons-divider" />
       {/if}
-      {#if isFullSize}
+      {#if isFullSize && !needFullSize}
         <Button
           focusIndex={100010}
           icon={fullSize ? IconScale : IconScaleFull}
           kind={'ghost'}
           size={'medium'}
           selected={fullSize}
-          on:click={() => {
+          id={'btnDialogFullScreen'}
-            fullSize = !fullSize
+          on:click={() => (toggleFullSize = !toggleFullSize)}
-            dispatch('fullsize')
-          }}
         />
       {/if}
     </div>

packages/ui/src/components/Header.svelte

@@ -38,8 +38,9 @@
   export let overflowExtra: boolean = false
   export let noPrint: boolean = false
   export let freezeBefore: boolean = false
-  export let doubleRowWidth = 768
+  export let doubleRowWidth: number = 768
   export let closeOnEscape: boolean = true
+  export let realWidth: number | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -78,6 +79,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   use:resizeObserver={(element) => {
+    realWidth = element.clientWidth
     if (!doubleRow && element.clientWidth <= doubleRowWidth) doubleRow = true
     else if (doubleRow && element.clientWidth > doubleRowWidth) doubleRow = false
   }}

packages/ui/src/components/PopupInstance.svelte

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { deviceOptionsStore as deviceInfo, resizeObserver, testing } from '..'
+  import { deviceOptionsStore as deviceInfo, resizeObserver, testing, checkAdaptiveMatching } from '..'
   import { CompAndProps, fitPopupElement, pin } from '../popups'
   import type { AnySvelteComponent, DeviceOptions, PopupAlignment, PopupOptions, PopupPositionElement } from '../types'
 
@@ -75,6 +75,7 @@
   }
 
   $: document.body.style.cursor = drag ? 'all-scroll' : 'default'
+  $: docSize = checkAdaptiveMatching($deviceInfo.size, 'md')
 
   function _update (result: any): void {
     if (onUpdate !== undefined) onUpdate(result)
@@ -247,9 +248,6 @@
     }
   }
 
-  $: if ($deviceInfo.docWidth <= 900 && !docSize) docSize = true
-  $: if ($deviceInfo.docWidth > 900 && docSize) docSize = false
-
   onMount(() => {
     windowSize.width = $deviceInfo.docWidth
     windowSize.height = $deviceInfo.docHeight
@@ -310,8 +308,9 @@
     on:close={(ev) => {
       _close(ev?.detail)
     }}
-    on:fullsize={() => {
+    on:fullsize={(ev) => {
-      fullSize = !fullSize
+      if (ev.detail === undefined) return
+      fullSize = ev.detail
       fitPopup(modalHTML, element, contentPanel)
     }}
     on:dock={() => {

packages/ui/src/components/Separator.svelte

@@ -518,6 +518,7 @@
 
   let checkElements: boolean = false
   const resizeDocument = (): void => {
+    if (checkFullWidth()) checkSizes()
     if (parentElement == null || checkElements || sState !== SeparatorState.NORMAL) return
     checkElements = true
     setTimeout(() => {

packages/ui/src/components/icons/ToDetails.svelte

@@ -0,0 +1,28 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.6,17.3H3.3c-.3,0-.7-.1-.9-.4-.2-.2-.4-.6-.4-.9s.1-.7.4-.9c.2-.2.6-.4.9-.4h7.3l-1.4-1.4c-.2-.2-.4-.6-.4-.9,0-.3.1-.7.4-.9.2-.2.6-.4.9-.4.3,0,.7.1.9.4l3.7,3.7c.1.1.2.3.3.4,0,.2,0,.3,0,.5s0,.3,0,.5c0,.2-.2.3-.3.4l-3.7,3.7c-.2.2-.6.4-.9.4-.3,0-.7-.1-.9-.4-.2-.2-.4-.6-.4-.9,0-.3.1-.7.3-.9l1.4-1.5Z"
+  />
+  <path
+    d="M26,4H6c-2.2,0-4,1.8-4,4v4c0,.6.4,1,1,1s1-.4,1-1v-4c0-1.1.9-2,2-2h14v20H6c-1.1,0-2-.9-2-2v-4c0-.6-.4-1-1-1s-1,.4-1,1v4c0,2.2,1.8,4,4,4h20c2.2,0,4-1.8,4-4V8c0-2.2-1.8-4-4-4Z"
+  />
+</svg>

packages/ui/src/components/internal/Root.svelte

@@ -151,7 +151,7 @@
 <svelte:window bind:innerWidth={docWidth} bind:innerHeight={docHeight} />
 
 <Theme>
-  <div id="ui-root">
+  <div id="ui-root" class:mobile-theme={isMobile}>
     <div class="antiStatusBar">
       <div class="flex-row-center h-full content-color gap-3 pl-4">
         {#if desktopPlatform}

packages/ui/src/index.ts

@@ -237,6 +237,7 @@ export { default as IconKeyShift } from './components/icons/KeyShift.svelte'
 export { default as IconFolderCollapsed } from './components/icons/FolderCollapsed.svelte'
 export { default as IconFolderExpanded } from './components/icons/FolderExpanded.svelte'
 export { default as IconCheckmark } from './components/icons/Checkmark.svelte'
+export { default as IconToDetails } from './components/icons/ToDetails.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'

packages/ui/src/popups.ts

@@ -366,10 +366,10 @@ export function fitPopupElement (
       show = false
     } else if (element === 'full' && contentPanel !== undefined) {
       const rect = contentPanel.getBoundingClientRect()
-      newProps.top = `${rect.top + 4}px`
+      newProps.top = `${rect.top + 1}px`
-      newProps.bottom = '4px'
+      newProps.bottom = '1px'
-      newProps.left = '4px'
+      newProps.left = '1px'
-      newProps.right = '4px'
+      newProps.right = '1px'
       show = true
     } else if (element === 'content' && contentPanel !== undefined) {
       const rect = contentPanel.getBoundingClientRect()

plugins/attachment-resources/src/components/PreviewPopupActions.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { Blob, Ref } from '@hcengineering/core'
   import { BlobMetadata } from '@hcengineering/presentation'
-  import { Button, closePopup, closeTooltip, IconDetailsFilled } from '@hcengineering/ui'
+  import { Button, closePopup, closeTooltip, IconToDetails } from '@hcengineering/ui'
   import workbench from '@hcengineering/workbench'
 
   import { openFilePreviewInSidebar } from '../utils'
@@ -28,7 +28,7 @@
 
 {#if file}
   <Button
-    icon={IconDetailsFilled}
+    icon={IconToDetails}
     kind="icon"
     on:click={() => {
       if (file === undefined) return

plugins/chunter-resources/src/components/ChannelHeader.svelte

@@ -20,7 +20,6 @@
   import { ActivityMessagesFilter, WithReferences } from '@hcengineering/activity'
   import contact from '@hcengineering/contact'
   import view from '@hcengineering/view'
-
   import Header from './Header.svelte'
   import chunter from '../plugin'
   import { getObjectIcon, getChannelName } from '../utils'
@@ -43,6 +42,7 @@
 
   let title: string | undefined = undefined
   let description: string | undefined = undefined
+  let realWidth: number
 
   $: void updateDescription(_id, _class, object)
 
@@ -82,10 +82,18 @@
   {withSearch}
   {canOpenInSidebar}
   {closeOnEscape}
+  bind:realWidth
   on:aside-toggled
   on:close
 >
   {#if object}
-    <PinnedMessages {_id} {_class} space={object.space} withRefs={(object.references ?? 0) > 0} on:select />
+    <PinnedMessages
+      {_id}
+      {_class}
+      space={object.space}
+      withRefs={(object.references ?? 0) > 0}
+      iconOnly={realWidth < 380}
+      on:select
+    />
   {/if}
 </Header>

plugins/chunter-resources/src/components/Header.svelte

@@ -24,7 +24,7 @@
     Header,
     HeaderAdaptive,
     IconSettings,
-    IconDetailsFilled
+    IconToDetails
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import view from '@hcengineering/view'
@@ -58,6 +58,7 @@
   export let hideActions: boolean = false
   export let canOpenInSidebar: boolean = false
   export let closeOnEscape: boolean = true
+  export let realWidth: number | undefined = undefined
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -74,6 +75,7 @@
   hideDescription={!description}
   adaptive={adaptive !== 'default' ? adaptive : withFilters ? 'freezeActions' : 'disabled'}
   {closeOnEscape}
+  bind:realWidth
   on:click
   on:close
 >
@@ -139,7 +141,7 @@
     <slot name="actions" {doubleRow} />
     {#if canOpenInSidebar}
       <Button
-        icon={IconDetailsFilled}
+        icon={IconToDetails}
         iconProps={{ size: 'small' }}
         kind={'icon'}
         showTooltip={{ label: workbench.string.OpenInSidebar }}

plugins/chunter-resources/src/components/PinnedMessages.svelte

@@ -13,13 +13,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { eventToHTMLElement, Label, ModernButton, showPopup, Icon } from '@hcengineering/ui'
+  import { eventToHTMLElement, Label, ModernButton, showPopup, Icon, ButtonIcon } from '@hcengineering/ui'
   import PinnedMessagesPopup from './PinnedMessagesPopup.svelte'
   import { createQuery } from '@hcengineering/presentation'
-  import activity, { ActivityMessage } from '@hcengineering/activity'
+  import activity from '@hcengineering/activity'
   import { Class, Doc, Ref, Space } from '@hcengineering/core'
   import view from '@hcengineering/view'
-  import { ThreadMessage } from '@hcengineering/chunter'
   import { createEventDispatcher } from 'svelte'
 
   import chunter from '../plugin'
@@ -28,7 +27,8 @@
   export let space: Ref<Space>
   export let _class: Ref<Class<Doc>>
   export let _id: Ref<Doc>
-  export let withRefs = false
+  export let withRefs: boolean = false
+  export let iconOnly: boolean = false
 
   const dispatch = createEventDispatcher()
   const pinnedQuery = createQuery()
@@ -85,8 +85,12 @@
 </script>
 
 {#if count > 0}
+  {#if iconOnly}
+    <ButtonIcon icon={view.icon.Pin} size={'small'} on:click={openMessagesPopup} />
+  {:else}
     <ModernButton size={'small'} on:click={openMessagesPopup}>
       <Icon icon={view.icon.Pin} size={'x-small'} />
       <span class="text-sm"><Label label={chunter.string.PinnedCount} params={{ count }} /></span>
     </ModernButton>
   {/if}
+{/if}

plugins/time-resources/src/components/PlanView.svelte

@@ -88,7 +88,11 @@
   <ToDosNavigator bind:mode bind:tag bind:currentDate />
   <Separator name={'time'} float={$deviceInfo.navigator.float} index={0} color={'var(--theme-divider-color)'} />
 {/if}
-<div class="flex-col w-full clear-mins" class:left-divider={!$deviceInfo.navigator.visible} bind:this={mainPanel}>
+<div
+  class="flex-col w-full clear-mins mobile-wrapper"
+  class:left-divider={!$deviceInfo.navigator.visible}
+  bind:this={mainPanel}
+>
   <ToDos {mode} {tag} bind:currentDate />
 </div>
 {#if visibleCalendar}

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import core, { getCurrentAccount, type Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { Scroller } from '@hcengineering/ui'
+  import { Scroller, resizeObserver } from '@hcengineering/ui'
   import { NavLink } from '@hcengineering/view-resources'
   import type { Application } from '@hcengineering/workbench'
   import workbench from '@hcengineering/workbench'
@@ -55,6 +55,7 @@
       gap={direction === 'horizontal' ? 'gap-1' : 'gapV-1'}
       horizontal={direction === 'horizontal'}
       contentDirection={direction}
+      align={direction === 'horizontal' ? 'center' : 'start'}
       buttons={'union'}
     >
       {#each topApps as app}

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

@@ -1055,7 +1055,11 @@
       border-radius: var(--medium-BorderRadius);
       pointer-events: none;
     }
-    .antiPanel-application {
+    .antiPanel-application.horizontal {
+      border-radius: 0 0 var(--medium-BorderRadius) var(--medium-BorderRadius);
+      border-top: none;
+    }
+    .antiPanel-application:not(.horizontal) {
       border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius);
       border-right: none;
     }

plugins/workbench-resources/src/components/sidebar/Sidebar.svelte

@@ -76,9 +76,10 @@
 
 <style lang="scss">
   .sidebar-container {
+    overflow: hidden;
     flex-direction: row;
     min-width: 25rem;
-    border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
+    border-radius: var(--medium-BorderRadius);
 
     &.mini:not(.float) {
       width: 3.5rem !important;

plugins/workbench-resources/src/sidebar.ts

@@ -15,7 +15,7 @@
 import { WorkbenchEvents, type Widget, type WidgetTab } from '@hcengineering/workbench'
 import { type Class, type Doc, getCurrentAccount, type Ref } from '@hcengineering/core'
 import { get, writable } from 'svelte/store'
-import { getCurrentLocation } from '@hcengineering/ui'
+import { getCurrentLocation, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 import { getResource } from '@hcengineering/platform'
 
 import { workspaceStore } from './utils'
@@ -252,6 +252,8 @@ export function createWidgetTab (widget: Widget, tab: WidgetTab, newTab = false)
     widgetsState,
     variant: SidebarVariant.EXPANDED
   })
+  const devInfo = get(deviceInfo)
+  if (devInfo.navigator.float && !devInfo.aside.visible) deviceInfo.set({ ...devInfo, aside: { visible: true } })
 }
 
 export function pinWidgetTab (widget: Widget, tabId: string): void {

tests/sanity/tests/documents/documents-content.spec.ts

@@ -199,8 +199,10 @@ test.describe('Content in the Documents tests', () => {
       await documentContentPage.addImageToDocument(page)
       const imageSrc = await documentContentPage.firstImageInDocument().getAttribute('src')
 
-      await test.step('User can open image in fullscreen on current page', async () => {
+      await test.step('User can open image on current page', async () => {
         await documentContentPage.clickImageFullscreenButton()
+        await expect(documentContentPage.imageInPopup()).toBeVisible()
+        await documentContentPage.fullscreenButton().click()
         await expect(documentContentPage.fullscreenImage()).toBeVisible()
         await documentContentPage.page.keyboard.press('Escape')
         await expect(documentContentPage.fullscreenImage()).toBeHidden()

tests/sanity/tests/model/documents/document-content-page.ts

@@ -23,6 +23,8 @@ export class DocumentContentPage extends CommonPage {
   readonly tooltipImageTools = (): Locator => this.page.locator('.tippy-box')
 
   readonly fullscreenImage = (): Locator => this.page.locator('.popup.fullsize img')
+  readonly fullscreenButton = (): Locator => this.page.locator('.popup #btnDialogFullScreen')
+  readonly imageInPopup = (): Locator => this.page.locator('.popup img')
 
   readonly proseTableColumnHandle = (col: number): Locator =>
     this.page.locator('table.proseTable').locator('tr').first().locator('td').nth(col).locator('div.table-col-handle')