Update AccountPopup (#2539)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/_layouts.scss

@@ -565,6 +565,7 @@ input.search {
 .min-w-8 { min-width: 2rem; }
 .min-w-9 { min-width: 2.25rem; }
 .min-w-80 { min-width: 20rem; }
+.min-w-168 { min-width: 42rem; }
 .min-w-min { min-width: min-content; }
 .min-h-0 { min-height: 0; }
 .min-h-2 { min-height: .5rem; }

packages/theme/styles/popups.scss

@@ -420,6 +420,7 @@
   display: flex;
   flex-direction: column;
   padding: .5rem;
+  min-width: 22rem;
   min-height: 22rem;
   background: var(--popup-bg-color);
   border-radius: .5rem;

packages/ui/src/components/Menu.svelte

@@ -26,6 +26,7 @@
   export let actions: Action[] = []
   export let ctx: any = undefined
   export let popupCategory: Ref<Doc> | undefined = undefined
+  export let addClass: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
   const btns: HTMLElement[] = []
@@ -113,7 +114,7 @@
 </script>
 
 <div
-  class="antiPopup"
+  class="antiPopup{addClass ? ` ${addClass}` : ''}"
   use:resizeObserver={() => {
     dispatch('changeContent')
   }}

packages/ui/src/popups.ts

@@ -255,19 +255,19 @@ export function fitPopupElement (
     } else if (element === 'account') {
       newProps.bottom = '2.75rem'
       newProps.left = '5rem'
-      newProps.minWidth = newProps.maxWidth = '42rem'
+      newProps.maxWidth = '42rem'
       newProps.maxHeight = 'calc(100vh - 5.5rem)'
       show = true
     } else if (element === 'account-portrait') {
       newProps.bottom = 'calc(var(--app-panel-width) + .75rem)'
       newProps.right = '.5rem'
-      newProps.minWidth = newProps.maxWidth = 'calc(100vw - 1rem)'
+      newProps.maxWidth = 'calc(100vw - 1rem)'
       newProps.maxHeight = 'calc(100vh - var(--app-panel-width) - 1.5rem)'
       show = true
     } else if (element === 'account-mobile') {
       newProps.bottom = '.5rem'
       newProps.left = 'calc(var(--app-panel-width) + .5rem)'
-      newProps.minWidth = newProps.maxWidth = 'calc(100vw - var(--app-panel-width) - 1rem)'
+      newProps.maxWidth = 'calc(100vw - var(--app-panel-width) - 1rem)'
       newProps.maxHeight = 'calc(100vh - 1rem)'
       show = true
     } else if (element === 'full' && contentPanel === undefined) {

plugins/calendar-resources/src/components/DocRemindersPopup.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { EmployeeAccount } from '@hcengineering/contact'
   import { Class, Doc, getCurrentAccount, Ref } from '@hcengineering/core'
-  import { Button, showPopup, Label, Scroller, IconAdd } from '@hcengineering/ui'
+  import { Button, showPopup, Label, Scroller, IconAdd, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import { Table } from '@hcengineering/view-resources'
   import calendar from '../plugin'
   import CreateReminder from './CreateReminder.svelte'
@@ -31,7 +31,7 @@
   const currentUser = getCurrentAccount() as EmployeeAccount
 </script>
 
-<div class="notifyPopup">
+<div class="notifyPopup" class:min-w-168={!$deviceInfo.isMobile}>
   <div class="header flex-between">
     <span class="fs-title overflow-label"><Label label={calendar.string.Reminders} /></span>
     <Button icon={IconAdd} size={'medium'} kind={'transparent'} on:click={(e) => click(e)} />

plugins/calendar-resources/src/components/RemindersPopup.svelte

@@ -17,7 +17,7 @@
   import { getCurrentAccount } from '@hcengineering/core'
   import { Table } from '@hcengineering/view-resources'
   import { createQuery } from '@hcengineering/presentation'
-  import { Label, Scroller } from '@hcengineering/ui'
+  import { Label, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import calendar from '../plugin'
 
   const currentUser = getCurrentAccount() as EmployeeAccount
@@ -29,7 +29,7 @@
   })
 </script>
 
-<div class="notifyPopup" class:justify-center={!remindersCount}>
+<div class="notifyPopup" class:justify-center={!remindersCount} class:min-w-168={!$deviceInfo.isMobile}>
   <div class="header">
     <span class="fs-title overflow-label"><Label label={calendar.string.Reminders} /></span>
   </div>

plugins/notification-resources/src/components/NotificationsPopup.svelte

@@ -20,7 +20,7 @@
   import core, { getCurrentAccount, WithLookup } from '@hcengineering/core'
   import { Notification, NotificationStatus } from '@hcengineering/notification'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, IconCheckAll, IconDelete, Scroller } from '@hcengineering/ui'
+  import { Button, IconCheckAll, IconDelete, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import Label from '@hcengineering/ui/src/components/Label.svelte'
   import notification from '../plugin'
   import NotificationView from './NotificationView.svelte'
@@ -77,7 +77,7 @@
   }
 </script>
 
-<div class="notifyPopup" class:justify-center={notifications.length === 0}>
+<div class="notifyPopup" class:justify-center={notifications.length === 0} class:min-w-168={!$deviceInfo.isMobile}>
   <div class="header flex-between">
     <span class="fs-title overflow-label"><Label label={notification.string.Notifications} /></span>
     {#if notifications.length > 0}

plugins/request-resources/src/components/RequestsPopup.svelte

@@ -17,7 +17,7 @@
   import { getCurrentAccount, Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Request, RequestStatus } from '@hcengineering/request'
-  import { Label, Scroller } from '@hcengineering/ui'
+  import { Label, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import request from '../plugin'
   import RequestView from './RequestView.svelte'
 
@@ -37,7 +37,7 @@
   )
 </script>
 
-<div class="notifyPopup" class:justify-center={requests.length === 0}>
+<div class="notifyPopup" class:justify-center={requests.length === 0} class:min-w-168={!$deviceInfo.isMobile}>
   <div class="header flex-between">
     <span class="fs-title overflow-label"><Label label={request.string.Requests} /></span>
   </div>

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

@@ -28,7 +28,8 @@
     setMetadataLocalStorage,
     showPopup,
     Menu,
-    locationToUrl
+    locationToUrl,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import HelpAndSupport from './HelpAndSupport.svelte'
@@ -168,9 +169,11 @@
     )
   }
   let menu: Menu
+  $: addClass = $deviceInfo.isMobile && $deviceInfo.isPortrait ? 'self-end' : undefined
 </script>
 
-<svelte:component this={Menu} bind:this={menu} {actions} on:close>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<svelte:component this={Menu} bind:this={menu} {actions} {addClass} on:close>
   <svelte:fragment slot="header">
     <div class="p-1 ml-2 overflow-label fs-bold caption-color">{getCurrentLocation().path[1]}</div>
     <div