Mobile UI fixes (#7109)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
hcengineering · Nov 6, 2024 · dc82933 · dc82933
1 parent 4483711
commit dc82933
Show file tree

Hide file tree

Showing 24 changed files with 137 additions and 48 deletions.
diff --git a/dev/prod/webpack.config.js b/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()] : []),

diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
@@ -149,8 +149,7 @@
     width: 17.5rem;
   }
   &.right {
-    overflow: hidden;
-    border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius);
+    border-radius: 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;

diff --git a/packages/theme/styles/dialogs.scss b/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;

diff --git a/packages/theme/styles/global.scss b/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;

diff --git a/packages/theme/styles/panel.scss b/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;
 }
diff --git a/packages/ui/src/components/Dialog.svelte b/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={() => {
-            fullSize = !fullSize
-            dispatch('fullsize')
-          }}
+          id={'btnDialogFullScreen'}
+          on:click={() => (toggleFullSize = !toggleFullSize)}
         />
       {/if}
     </div>

diff --git a/packages/ui/src/components/Header.svelte b/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
   }}

diff --git a/packages/ui/src/components/PopupInstance.svelte b/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={() => {
-      fullSize = !fullSize
+    on:fullsize={(ev) => {
+      if (ev.detail === undefined) return
+      fullSize = ev.detail
       fitPopup(modalHTML, element, contentPanel)
     }}
     on:dock={() => {

diff --git a/packages/ui/src/components/Separator.svelte b/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(() => {

diff --git a/packages/ui/src/components/icons/ToDetails.svelte b/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>
diff --git a/packages/ui/src/components/internal/Root.svelte b/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&qu
F987
ot;>
         {#if desktopPlatform}

diff --git a/packages/ui/src/index.ts b/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'

diff --git a/packages/ui/src/popups.ts b/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.bottom = '4px'
-      newProps.left = '4px'
-      newProps.right = '4px'
+      newProps.top = `${rect.top + 1}px`
+      newProps.bottom = '1px'
+      newProps.left = '1px'
+      newProps.right = '1px'
       show = true
     } else if (element === 'content' && contentPanel !== undefined) {
       const rect = contentPanel.getBoundingClientRect()

diff --git a/plugins/attachment-resources/src/components/PreviewPopupActions.svelte b/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

diff --git a/plugins/chunter-resources/src/components/ChannelHeader.svelte b/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>
diff --git a/plugins/chunter-resources/src/components/Header.svelte b/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 }}