Update Notifications layout (#2500)

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

packages/presentation/src/components/ObjectPopup.svelte

@@ -27,7 +27,8 @@
     ListView,
     showPopup,
     tooltip,
-    resizeObserver
+    resizeObserver,
+    deviceOptionsStore
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
@@ -206,7 +207,13 @@
   }}
 >
   <div class="header flex-between">
-    <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
+    <EditBox
+      kind={'search-style'}
+      focusIndex={1}
+      focus={!$deviceOptionsStore.isMobile}
+      bind:value={search}
+      {placeholder}
+    />
     {#if create !== undefined}
       <div class="mx-2">
         <Button

packages/presentation/src/components/ObjectSearchPopup.svelte

@@ -25,7 +25,8 @@
     IconSearch,
     Label,
     ListView,
-    resizeObserver
+    resizeObserver,
+    deviceOptionsStore
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '../plugin'
@@ -171,7 +172,7 @@
       {/each}
     </div>
     <EditBox
-      focus
+      focus={!$deviceOptionsStore.isMobile}
       icon={IconSearch}
       kind={'search-style'}
       focusIndex={0}

packages/presentation/src/components/SpacesMultiPopup.svelte

@@ -17,7 +17,7 @@
   import { translate } from '@hcengineering/platform'
   import { createEventDispatcher, onMount } from 'svelte'
   import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
-  import { tooltip, CheckBox, resizeObserver } from '@hcengineering/ui'
+  import { tooltip, CheckBox, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
   import { createQuery } from '../utils'
   import presentation from '..'
   import SpaceInfo from './SpaceInfo.svelte'
@@ -85,7 +85,7 @@
   }
 
   onMount(() => {
-    if (input) input.focus()
+    if (input && !$deviceOptionsStore.isMobile) input.focus()
   })
 </script>
 

packages/theme/styles/_layouts.scss

@@ -452,6 +452,7 @@ input.search {
 .pt-3 { padding-top: .75rem; }
 .pt-4 { padding-top: 1rem; }
 .pt-6 { padding-top: 1.5rem; }
+.pb-1 { padding-bottom: .25rem; }
 .pb-2 { padding-bottom: .5rem; }
 .pb-3 { padding-bottom: .75rem; }
 .pb-4 { padding-bottom: 1rem; }

packages/theme/styles/popups.scss

@@ -419,27 +419,30 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  width: max-content;
+  padding: .5rem;
-  height: max-content;
-  padding-bottom: 0.5rem;
-  min-width: 42rem;
-  max-width: 42rem;
-  height: 22rem;
   min-height: 22rem;
-  max-height: 22rem;
   background: var(--popup-bg-color);
-  border-radius: 0.5rem;
+  border-radius: .5rem;
   box-shadow: var(--popup-shadow);
 
   .header {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    padding: 0 1rem;
+    padding: 0 .75rem .5rem 1rem;
     height: 3rem;
-    border-bottom: 1px solid var(--popup-divider);
+    min-height: 0;
+  }
+  .space {
+    flex-shrink: 0;
+    height: .25rem;
+    &.x2 { height: .5rem; }
+    &.x3 { height: .75rem; }
   }
 }
+.notifyPopup .comment::after,
+.notifyPopup .mention::after { content: none !important; }
+.notifyPopup .content .mention { margin-top: 0 !important; }
 
 .helpAndSupportPopup {
   min-height: 100%;

packages/ui/src/components/Button.svelte

@@ -28,6 +28,7 @@
   export let size: ButtonSize = 'medium'
   export let shape: ButtonShape = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let iconProps: any | undefined = undefined
   export let justify: 'left' | 'center' = 'center'
   export let disabled: boolean = false
   export let loading: boolean = false
@@ -105,7 +106,7 @@
 >
   {#if icon && !loading}
     <div class="btn-icon pointer-events-none" class:resetIconSize>
-      <Icon bind:icon size={iconSize} />
+      <Icon bind:icon size={iconSize} {iconProps} />
     </div>
   {/if}
   {#if loading}

packages/ui/src/components/ColorPopup.svelte

@@ -18,7 +18,7 @@
   import { createEventDispatcher, onMount } from 'svelte'
   import { getPlatformColor } from '../colors'
   import ListView from './ListView.svelte'
-  import { resizeObserver } from '..'
+  import { resizeObserver, deviceOptionsStore } from '..'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
@@ -70,7 +70,7 @@
   }
   let input: HTMLElement
   onMount(() => {
-    if (input) input.focus()
+    if (input && !$deviceOptionsStore.isMobile) input.focus()
   })
 </script>
 

packages/ui/src/components/DropdownLabelsPopup.svelte

@@ -20,7 +20,7 @@
   import plugin from '../plugin'
   import CheckBox from './CheckBox.svelte'
   import ListView from './ListView.svelte'
-  import { resizeObserver } from '..'
+  import { resizeObserver, deviceOptionsStore } from '..'
 
   export let placeholder: IntlString = plugin.string.SearchDots
   export let items: DropdownTextItem[]
@@ -35,7 +35,7 @@
   let searchInput: HTMLInputElement
 
   onMount(() => {
-    if (searchInput) searchInput.focus()
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
   })
 
   let selection = 0

packages/ui/src/components/DropdownPopup.svelte

@@ -20,7 +20,7 @@
   import plugin from '../plugin'
   import Icon from './Icon.svelte'
   import ListView from './ListView.svelte'
-  import { resizeObserver } from '..'
+  import { resizeObserver, deviceOptionsStore } from '..'
 
   export let icon: Asset | AnySvelteComponent
   export let placeholder: IntlString = plugin.string.SearchDots
@@ -37,7 +37,7 @@
   let searchInput: HTMLInputElement
 
   onMount(() => {
-    if (searchInput) searchInput.focus()
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
   })
 
   let selection = 0

packages/ui/src/components/SelectPopup.svelte

@@ -23,7 +23,7 @@
   import Label from './Label.svelte'
   import ListView from './ListView.svelte'
   import type { AnySvelteComponent } from '../types'
-  import { resizeObserver } from '../resize'
+  import { resizeObserver, deviceOptionsStore } from '..'
 
   interface ValueType {
     id: number | string | null
@@ -132,7 +132,7 @@
       <EditBox
         kind={'search-style'}
         focusIndex={1}
-        focus
+        focus={!$deviceOptionsStore.isMobile}
         bind:value={search}
         {placeholder}
         {placeholderParam}

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      {fill}
+      d="M7.1,13.2c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1l-0.6-0.6c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1L7.1,13.2z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+    <path
+      {fill}
+      d="M22.5,6.5c-0.3-0.3-0.8-0.3-1.1,0L12,15.9l-0.1-0.1c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l0.6,0.6c0.3,0.3,0.8,0.3,1.1,0l10-10C22.8,7.2,22.8,6.8,22.5,6.5z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+    <path
+      {fill}
+      d="M17.5,6.5c-0.3-0.3-0.8-0.3-1.1,0L7,15.9l-4.5-4.5c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l5,5c0.3,0.3,0.8,0.3,1.1,0l10-10C17.8,7.2,17.8,6.8,17.5,6.5z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </g>
+</svg>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'currentColor'
+  export let fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

packages/ui/src/index.ts

@@ -124,6 +124,7 @@ export { default as IconEdit } from './components/icons/Edit.svelte'
 export { default as IconInfo } from './components/icons/Info.svelte'
 export { default as IconBlueCheck } from './components/icons/BlueCheck.svelte'
 export { default as IconCheck } from './components/icons/Check.svelte'
+export { default as IconCheckAll } from './components/icons/CheckAll.svelte'
 export { default as IconArrowLeft } from './components/icons/ArrowLeft.svelte'
 export { default as IconArrowRight } from './components/icons/ArrowRight.svelte'
 export { default as IconNavPrev } from './components/icons/NavPrev.svelte'

packages/ui/src/popups.ts

@@ -255,12 +255,21 @@ export function fitPopupElement (
     } else if (element === 'account') {
       newProps.bottom = '2.75rem'
       newProps.left = '5rem'
+      newProps.minWidth = 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.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.maxHeight = 'calc(100vh - 1rem)'
+      show = true
     } else if (element === 'full' && contentPanel === undefined) {
       newProps.top = '0'
       newProps.bottom = '0'

plugins/activity-resources/src/components/TxView.svelte

@@ -43,6 +43,7 @@
   export let showIcon: boolean = true
   export let isNew: boolean = false
   export let isNextNew: boolean = false
+  export let contentHidden: boolean = false
   // export let showDocument = false
 
   let ptx: DisplayTx | undefined
@@ -305,7 +306,7 @@
       </div>
 
       {#if viewlet && viewlet.component && viewlet.display !== 'inline'}
-        <div class="activity-content {viewlet.display}">
+        <div class="activity-content {viewlet.display}" class:contentHidden>
           <ShowMore ignore={edit}>
             {#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
               <div class="flex-row-center flex-grow flex-wrap clear-mins">
@@ -456,4 +457,21 @@
   .lower {
     text-transform: lowercase;
   }
+  .activity-content {
+    overflow: hidden;
+    visibility: visible;
+    max-height: max-content;
+    opacity: 1;
+    transition-property: max-height, opacity;
+    transition-timing-function: ease-in-out;
+    transition-duration: 0.15s;
+
+    &.contentHidden {
+      visibility: hidden;
+      padding: 0;
+      margin-top: -0.5rem;
+      max-height: 0;
+      opacity: 0;
+    }
+  }
 </style>

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

@@ -16,17 +16,33 @@
 <script lang="ts">
   import { AttachmentDocList } from '@hcengineering/attachment-resources'
   import type { Comment } from '@hcengineering/chunter'
+  import chunter from '@hcengineering/chunter'
   import { formatName } from '@hcengineering/contact'
   import { Avatar, getClient, MessageViewer } from '@hcengineering/presentation'
-  import { TimeSince, ShowMore } from '@hcengineering/ui'
+  import { TimeSince, ShowMore, Icon } from '@hcengineering/ui'
   import { getUser } from '../utils'
 
   export let value: Comment
+  export let inline: boolean = false
+  export let disableClick = false
 
   const client = getClient()
+
+  const cutId = (str: string): string => {
+    return str.slice(0, 4) + '...' + str.slice(-4)
+  }
 </script>
 
-<div class="flex-row-top">
+{#if inline}
+  <a class="flex-presenter inline-presenter" href="#{disableClick ? null : ''}">
+    <div class="icon">
+      <Icon icon={chunter.icon.Thread} size={'small'} />
+    </div>
+    <span class="label nowrap">Message</span>
+  </a>
+  &nbsp;<span class="content-dark-color">#{cutId(value._id.toString())}</span>
+{:else}
+  <div class="flex-row-top">
     <div class="avatar">
       <Avatar size={'medium'} />
     </div>
@@ -44,7 +60,8 @@
         <AttachmentDocList {value} />
       </ShowMore>
     </div>
-</div>
+  </div>
+{/if}
 
 <style lang="scss">
   .avatar {

plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte

@@ -62,7 +62,7 @@
       <svelte:component this={targetPresenter.presenter} value={target} />
     </div>
   {/if}
-  <span class="lower"><Label label={chunter.string.In} /></span>
+  <span style:text-transform={'lowercase'}><Label label={chunter.string.In} /></span>
   <div class="ml-2">
     <svelte:component this={presenter.presenter} value={doc} />
   </div>

plugins/contact-resources/src/components/EmployeePreviewPopup.svelte

@@ -2,7 +2,7 @@
   import { Employee, EmployeeAccount, formatName, Status } from '@hcengineering/contact'
   import { getCurrentAccount, Ref, Hierarchy, WithLookup } from '@hcengineering/core'
   import { Avatar, createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, getPanelURI, Label, showPopup } from '@hcengineering/ui'
+  import { Button, getPanelURI, Label, showPopup, resizeObserver } from '@hcengineering/ui'
   import EmployeeSetStatusPopup from './EmployeeSetStatusPopup.svelte'
   import contact from '../plugin'
   import EmployeeStatusPresenter from './EmployeeStatusPresenter.svelte'
@@ -55,7 +55,12 @@
   }
 </script>
 
-<div class="antiPopup p-4 flex-col">
+<div
+  class="antiPopup p-4 flex-col"
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
   {#if employee}
     <div class="flex-col-center pb-2">
       <Avatar size="x-large" avatar={employee?.avatar} />

plugins/notification-resources/package.json

@@ -40,6 +40,7 @@
     "@hcengineering/activity": "^0.6.0",
     "@hcengineering/contact": "^0.6.9",
     "@hcengineering/core": "^0.6.20",
-    "@hcengineering/view": "^0.6.2"
+    "@hcengineering/view": "^0.6.2",
+    "@hcengineering/view-resources": "^0.6.0"
   }
 }

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

@@ -16,11 +16,13 @@
 <script lang="ts">
   import { TxViewlet } from '@hcengineering/activity'
   import { ActivityKey, DisplayTx, newDisplayTx, TxView } from '@hcengineering/activity-resources'
-  import core, { Doc, TxCUD, TxProcessor, WithLookup } from '@hcengineering/core'
+  import core, { Doc, TxCUD, TxProcessor, WithLookup, Ref, Class } from '@hcengineering/core'
   import { Notification, NotificationStatus } from '@hcengineering/notification'
   import { getClient } from '@hcengineering/presentation'
-  import { ActionIcon, Component, getPlatformColor, IconBack, IconCheck, IconDelete } from '@hcengineering/ui'
+  import { Button, Component, getPlatformColor, IconBack, IconCheck, IconDelete } from '@hcengineering/ui'
+  import type { AnyComponent } from '@hcengineering/ui'
   import view from '@hcengineering/view'
+  import { getObjectPreview } from '@hcengineering/view-resources'
   import plugin from '../plugin'
 
   export let notification: WithLookup<Notification>
@@ -46,22 +48,33 @@
   }
 
   $: displayTx = getDisplayTx(notification)
+
+  let presenter: AnyComponent | undefined
+  let doc: Doc | undefined
+  let visible: boolean = false
+  async function updatePreviewPresenter (ref?: Ref<Class<Doc>>): Promise<void> {
+    presenter = ref !== undefined ? await getObjectPreview(client, ref) : undefined
+  }
+  $: if (displayTx) updatePreviewPresenter(displayTx.tx.objectClass)
+  $: if (presenter !== undefined && displayTx) {
+    client.findOne(displayTx.tx.objectClass, { _id: displayTx.tx.objectId }).then((res) => (doc = res))
+  }
 </script>
 
 {#if displayTx}
   {@const isNew = notification.status !== NotificationStatus.Read}
-  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="content">
-    <div class="flex-row">
-      <div class="bottom-divider mb-2">
-        <div class="flex-row-center mb-2 mt-2">
-          <div class="notify mr-4" style:color={isNew ? getPlatformColor(11) : '#555555'} />
   <div
-            class="flex-shrink"
+    class="content {isNew ? 'new' : 'readed'} with-document"
-            on:click={() => {
+    class:visible
+    style:--color={isNew ? getPlatformColor(11) : '#555555'}
+    on:click|preventDefault|stopPropagation={() => {
       changeState(notification, NotificationStatus.Read)
+      visible = !visible
     }}
   >
+    <div class="subheader">
+      <div class="flex-grow">
         <Component
           is={view.component.ObjectPresenter}
           props={{
@@ -72,46 +85,131 @@
           }}
         />
       </div>
-          <div class="flex flex-reverse flex-gap-3 flex-grow">
+      <div class="buttons-group xsmall-gap">
-            <ActionIcon
+        <Button
-              icon={IconDelete}
-              label={plugin.string.Remove}
-              size={'medium'}
-              action={() => {
-                client.remove(notification)
-              }}
-            />
-            <ActionIcon
           icon={isNew ? IconCheck : IconBack}
           iconProps={!isNew ? { kind: 'curve' } : {}}
-              label={plugin.string.MarkAsRead}
+          kind={'transparent'}
+          showTooltip={{ label: plugin.string.MarkAsRead }}
           size={'medium'}
-              action={() => {
+          on:click={() => {
+            if (!isNew && visible) visible = false
             changeState(notification, isNew ? NotificationStatus.Read : NotificationStatus.Notified)
           }}
         />
+        <Button
+          icon={IconDelete}
+          kind={'transparent'}
+          showTooltip={{ label: plugin.string.Remove }}
+          size={'medium'}
+          on:click={() => {
+            client.remove(notification)
+          }}
+        />
       </div>
     </div>
+    <TxView tx={displayTx} {viewlets} showIcon={false} contentHidden={!visible} />
+    {#if presenter && doc}
+      <div class="document-preview">
+        <Component is={presenter} props={{ object: doc }} />
       </div>
-      <TxView tx={displayTx} {viewlets} showIcon={false} />
+    {/if}
-    </div>
   </div>
 {/if}
 
 <style lang="scss">
   .content {
-    padding: 0.5rem;
+    position: relative;
-    border-radius: 0.5rem;
+    display: flex;
-    border: 1px solid transparent;
+    flex-direction: column;
+    padding: 0.5rem 0.75rem 0.75rem;
+    min-height: 0;
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.75rem;
+    transition-property: border-color, background-color, height;
+    transition-duration: 0.3s, 0.15s, 0.15s;
+    transition-timing-function: ease-in-out;
+
+    &:not(:last-child) {
+      margin-bottom: 0.75rem;
     }
-  .notify {
+    &.new {
+      background-color: var(--popup-bg-hover);
+    }
+    &.readed {
+      background-color: var(--body-accent);
+    }
+    &:hover {
+      border-color: var(--button-border-hover);
+    }
+    &.with-document {
+      cursor: pointer;
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: -0.25rem;
+        left: 1rem;
+        right: 1rem;
+        width: calc(100% - 2rem);
+        height: 0.75rem;
+        background-color: var(--body-accent);
+        border: 1px solid var(--divider-color);
+        border-radius: 0.5rem;
+        z-index: -1;
+        transition: bottom 0.15s ease-in-out;
+        box-shadow: var(--primary-shadow);
+      }
+      &:hover::before {
+        bottom: -0.4rem;
+      }
+      &.visible::before {
+        bottom: 0.25rem;
+      }
+    }
+
+    .subheader {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 0 0.5rem 1.75rem;
+      margin-bottom: 0.5rem;
+      min-height: 0;
+      border-bottom: 1px solid var(--divider-color);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0.5rem;
         width: 0.5rem;
         height: 0.5rem;
-    border-radius: 0.25rem;
+        background-color: var(--color);
-    outline: 1px solid transparent;
+        transform: translateY(calc(-50% - 0.25rem));
-    outline-offset: 2px;
+        border-radius: 50%;
-    transition: all 0.1s ease-in-out;
+      }
-    z-index: -1;
+    }
-    background-color: currentColor;
+    .document-preview {
+      overflow: hidden;
+      visibility: hidden;
+      margin-top: -0.5rem;
+      padding: 0;
+      max-height: 0;
+      background-color: var(--body-color);
+      border: 1px solid var(--divider-color);
+      border-radius: 0.5rem;
+      opacity: 0;
+      transition-property: margin-top, max-height, opacity;
+      transition-timing-function: ease-in-out;
+      transition-duration: 0.15s;
+    }
+    &.visible .document-preview {
+      visibility: visible;
+      margin-top: 0.5rem;
+      padding: 0.75rem 1rem;
+      max-height: max-content;
+      opacity: 1;
+    }
   }
 </style>

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 { ActionIcon, IconCheck, IconDelete, Scroller } from '@hcengineering/ui'
+  import { Button, IconCheckAll, IconDelete, Scroller } from '@hcengineering/ui'
   import Label from '@hcengineering/ui/src/components/Label.svelte'
   import notification from '../plugin'
   import NotificationView from './NotificationView.svelte'
@@ -80,29 +80,32 @@
 <div class="notifyPopup" class:justify-center={notifications.length === 0}>
   <div class="header flex-between">
     <span class="fs-title overflow-label"><Label label={notification.string.Notifications} /></span>
-    <div class="flex flex-gap-2">
+    {#if notifications.length > 0}
-      <ActionIcon
+      <div class="buttons-group xxsmall-gap">
-        icon={IconCheck}
+        <Button
-        label={notification.string.MarkAllAsRead}
+          icon={IconCheckAll}
+          kind={'list'}
+          showTooltip={{ label: notification.string.MarkAllAsRead }}
           size={'medium'}
-        action={markAsReadNotifications}
+          on:click={markAsReadNotifications}
         />
-      <ActionIcon
+        <Button
           icon={IconDelete}
-        label={notification.string.RemoveAll}
+          kind={'list'}
+          showTooltip={{ label: notification.string.RemoveAll }}
           size={'medium'}
-        action={deleteNotifications}
+          on:click={deleteNotifications}
         />
       </div>
+    {/if}
   </div>
   {#if notifications.length > 0}
-    <Scroller>
+    <Scroller padding={'0 .5rem'}>
-      <div class="px-2 clear-mins">
       {#each notifications as n}
         <NotificationView notification={n} {viewlets} />
       {/each}
-      </div>
     </Scroller>
+    <div class="space x3" />
   {:else}
     <div class="flex-grow flex-center">
       <Label label={notification.string.NoNotifications} />

plugins/tags-resources/src/components/TagsDropdownEditor.svelte

@@ -73,8 +73,6 @@
   async function removeTag (id: Ref<TagReference>): Promise<void> {
     dispatch('delete', id)
   }
-  $: console.log('[!!!] items: ', items)
-  $: console.log('[!!!] items - count: ', items.length)
 </script>
 
 <Button

plugins/tags-resources/src/components/TagsFilter.svelte

@@ -25,7 +25,8 @@
     Label,
     Loading,
     resizeObserver,
-    showPopup
+    showPopup,
+    deviceOptionsStore
   } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { FilterQuery } from '@hcengineering/view-resources'
@@ -80,7 +81,7 @@
   })
 
   onMount(() => {
-    if (searchInput) searchInput.focus()
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
   })
 
   const toggleGroup = (ev: MouseEvent): void => {

plugins/tags-resources/src/components/TagsPopup.svelte

@@ -27,7 +27,8 @@
     IconClose,
     Label,
     showPopup,
-    resizeObserver
+    resizeObserver,
+    deviceOptionsStore
   } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import tags from '../plugin'
@@ -98,7 +99,7 @@
     return ''
   }
   onMount(() => {
-    if (searchElement) searchElement.focus()
+    if (searchElement && !$deviceOptionsStore.isMobile) searchElement.focus()
   })
   const tagSort = (a: TagElement, b: TagElement) => {
     const r = (b.refCount ?? 0) - (a.refCount ?? 0)

plugins/templates-resources/src/components/TemplatePopup.svelte

@@ -17,7 +17,7 @@
   import { createQuery } from '@hcengineering/presentation'
   import { MessageTemplate } from '@hcengineering/templates'
   import { TextEditorHandler } from '@hcengineering/text-editor'
-  import { closePopup, EditWithIcon, IconSearch, Label } from '@hcengineering/ui'
+  import { closePopup, EditWithIcon, IconSearch, Label, deviceOptionsStore } from '@hcengineering/ui'
   import templates from '../plugin'
 
   export let editor: TextEditorHandler
@@ -67,7 +67,12 @@
 <svelte:window on:keydown={onKeyDown} />
 <div class="antiPopup template-popup">
   <div class="mt-4 mb-4">
-    <EditWithIcon icon={IconSearch} bind:value={query} placeholder={templates.string.SearchTemplate} />
+    <EditWithIcon
+      icon={IconSearch}
+      bind:value={query}
+      placeholder={templates.string.SearchTemplate}
+      focus={!$deviceOptionsStore.isMobile}
+    />
   </div>
   <Label label={templates.string.Suggested} />
   <div class="scroll mt-2">

plugins/tracker-resources/src/components/SpacesPopup.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { afterUpdate, createEventDispatcher } from 'svelte'
 
-  import ui, { Label, EditWithIcon, IconSearch } from '@hcengineering/ui'
+  import ui, { Label, EditWithIcon, IconSearch, deviceOptionsStore } from '@hcengineering/ui'
   import SpaceInfo from './SpaceInfo.svelte'
 
   import type { Ref, Class, Space, DocumentQuery } from '@hcengineering/core'
@@ -40,7 +40,12 @@
 <div class="antiPopup antiPopup-withHeader">
   <div class="ap-space" />
   <div class="ap-header">
-    <EditWithIcon icon={IconSearch} bind:value={search} placeholder={ui.string.SearchDots} focus />
+    <EditWithIcon
+      icon={IconSearch}
+      bind:value={search}
+      placeholder={ui.string.SearchDots}
+      focus={!$deviceOptionsStore.isMobile}
+    />
     <div class="ap-caption"><Label label={ui.string.Suggested} /></div>
   </div>
   <div class="ap-space" />

plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte

@@ -62,7 +62,7 @@
 
   const space = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
   const showCreateDialog = async () => {
-    showPopup(NewProject, { space, targetElement: null }, null)
+    showPopup(NewProject, { space, targetElement: null }, 'top')
   }
 
   const handleViewModeChanged = (newMode: ProjectsViewMode) => {

plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte

@@ -67,7 +67,7 @@
 
   const space = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
   const showCreateDialog = async () => {
-    showPopup(NewSprint, { space, targetElement: null }, null)
+    showPopup(NewSprint, { space, targetElement: null }, 'top')
   }
 
   const handleViewModeChanged = (newMode: SprintViewMode) => {

plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte

@@ -67,7 +67,7 @@
   $: if (docWidth > 900 && docSize) docSize = false
 
   const showCreateDialog = async () => {
-    showPopup(CreateIssueTemplate, { targetElement: null }, null)
+    showPopup(CreateIssueTemplate, { targetElement: null }, 'top')
   }
 </script>
 

plugins/view-resources/src/components/filter/ObjectFilter.svelte

@@ -18,7 +18,7 @@
   import presentation, { getClient } from '@hcengineering/presentation'
   import type { State } from '@hcengineering/task'
   import task from '@hcengineering/task'
-  import ui, { Button, CheckBox, Label, Loading, resizeObserver } from '@hcengineering/ui'
+  import ui, { Button, CheckBox, Label, Loading, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { createEventDispatcher, onMount } from 'svelte'
   import view from '../../plugin'
@@ -127,7 +127,7 @@
   })
 
   onMount(() => {
-    if (searchInput) searchInput.focus()
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
   })
 
   const dispatch = createEventDispatcher()

plugins/view-resources/src/index.ts

@@ -91,6 +91,7 @@ export {
   buildModel,
   getCollectionCounter,
   getObjectPresenter,
+  getObjectPreview,
   LoadingProps,
   setActiveViewletId,
   getActiveViewletId,