hcengineering · haiodo · Nov 17, 2022 · Nov 16, 2022
diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
@@ -18,7 +18,7 @@
   import { Button, IconClose, Label, MiniToggle } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  import { deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
 
   export let label: IntlString
   export let labelProps: any | undefined = undefined
@@ -33,7 +33,14 @@
   let okProcessing = false
 </script>
 
-<form id={label} class="antiCard {$deviceInfo.isMobile ? 'mobile' : 'dialog'}" on:submit|preventDefault={() => {}}>
+<form
+  id={label}
+  class="antiCard {$deviceInfo.isMobile ? 'mobile' : 'dialog'}"
+  on:submit|preventDefault={() => {}}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
   <div class="antiCard-header">
     <div class="antiCard-header__title-wrap">
       {#if $$slots.header}

diff --git a/packages/presentation/src/components/ObjectPopup.svelte b/packages/presentation/src/components/ObjectPopup.svelte
@@ -26,9 +26,10 @@
     IconCheck,
     ListView,
     showPopup,
-    tooltip
+    tooltip,
+    resizeObserver
   } from '@hcengineering/ui'
-  import { afterUpdate, createEventDispatcher } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
   import presentation from '..'
   import { ObjectCreate } from '../types'
   import { createQuery, getClient } from '../utils'
@@ -158,8 +159,6 @@
     return obj
   }
 
-  afterUpdate(() => dispatch('changeContent'))
-
   let selectedDiv: HTMLElement | undefined
   let scrollDiv: HTMLElement | undefined
   let cHeight = 0
@@ -198,6 +197,9 @@
   class:plainContainer={!shadows}
   class:width-40={width === 'large'}
   on:keydown={onKeydown}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
 >
   <div class="header flex-between">
     <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />

diff --git a/packages/presentation/src/components/SpacesMultiPopup.svelte b/packages/presentation/src/components/SpacesMultiPopup.svelte
@@ -16,10 +16,8 @@
   import type { IntlString } from '@hcengineering/platform'
   import { translate } from '@hcengineering/platform'
   import { createEventDispatcher, onMount } from 'svelte'
-
   import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
-  import { tooltip, CheckBox } from '@hcengineering/ui'
-
+  import { tooltip, CheckBox, resizeObserver } from '@hcengineering/ui'
   import { createQuery } from '../utils'
   import presentation from '..'
   import SpaceInfo from './SpaceInfo.svelte'
@@ -91,7 +89,7 @@
   })
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header">
     <input bind:this={input} type="text" bind:value={searchQuery} placeholder={phTraslate} on:change />
   </div>

diff --git a/packages/presentation/src/components/UsersPopup.svelte b/packages/presentation/src/components/UsersPopup.svelte
@@ -13,7 +13,6 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher, afterUpdate } from 'svelte'
   import { Contact, getFirstName, Person } from '@hcengineering/contact'
   import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
   import type { Asset, IntlString } from '@hcengineering/platform'
@@ -51,10 +50,6 @@
           }
         }
       : undefined
-
-  const dispatch = createEventDispatcher()
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 <ObjectPopup
@@ -73,7 +68,7 @@
   create={_create}
   on:update
   on:close
-  on:changeContent={() => dispatch('changeContent')}
+  on:changeContent
 >
   <svelte:fragment slot="item" let:item={person}>
     <div class="flex flex-grow overflow-label">

diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
   import { IntlString } from '@hcengineering/platform'
   import presentation, { MessageViewer } from '@hcengineering/presentation'
-  import { ActionIcon, IconCheck, IconClose, IconEdit, IconSize, Label, ShowMore } from '@hcengineering/ui'
+  import {
+    ActionIcon,
+    IconCheck,
+    IconClose,
+    IconEdit,
+    IconSize,
+    Label,
+    ShowMore,
+    resizeObserver
+  } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import textEditorPlugin from '../plugin'
   import StyledTextEditor from './StyledTextEditor.svelte'
@@ -78,6 +87,9 @@
       textEditor?.focus()
     }
   }}
+  use:resizeObserver={() => {
+    dispatch('changeSize')
+  }}
 >
   {#if label}
     <div class="label"><Label {label} /></div>

diff --git a/packages/ui/src/components/ColorPopup.svelte b/packages/ui/src/components/ColorPopup.svelte
@@ -18,6 +18,7 @@
   import { createEventDispatcher, onMount } from 'svelte'
   import { getPlatformColor } from '../colors'
   import ListView from './ListView.svelte'
+  import { resizeObserver } from '..'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
@@ -73,7 +74,13 @@
   })
 </script>
 
-<div class="selectPopup" on:keydown={onKeydown}>
+<div
+  class="selectPopup"
+  on:keydown={onKeydown}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
   {#if searchable}
     <div class="header">
       <input bind:this={input} type="text" bind:value={search} placeholder={phTraslate} on:input={() => {}} on:change />

diff --git a/packages/ui/src/components/DropdownLabelsPopup.svelte b/packages/ui/src/components/DropdownLabelsPopup.svelte
@@ -20,6 +20,7 @@
   import plugin from '../plugin'
   import CheckBox from './CheckBox.svelte'
   import ListView from './ListView.svelte'
+  import { resizeObserver } from '..'
 
   export let placeholder: IntlString = plugin.string.SearchDots
   export let items: DropdownTextItem[]
@@ -72,7 +73,13 @@
   }
 </script>
 
-<div class="selectPopup" on:keydown={onKeydown}>
+<div
+  class="selectPopup"
+  on:keydown={onKeydown}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
   <div class="header">
     <input
       bind:this={searchInput}

diff --git a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
@@ -17,6 +17,7 @@
   import type { DropdownIntlItem } from '../types'
   import CheckBox from './CheckBox.svelte'
   import Label from './Label.svelte'
+  import { resizeObserver } from '..'
 
   export let items: DropdownIntlItem[]
   export let selected: DropdownIntlItem['id'] | undefined = undefined
@@ -35,7 +36,7 @@
   }
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="scroll">
     <div class="box">
       {#each items as item, i}

diff --git a/packages/ui/src/components/DropdownPopup.svelte b/packages/ui/src/components/DropdownPopup.svelte
@@ -16,11 +16,11 @@
   import type { Asset, IntlString } from '@hcengineering/platform'
   import { translate } from '@hcengineering/platform'
   import { createEventDispatcher, onMount } from 'svelte'
-
   import type { AnySvelteComponent, ListItem } from '../types'
   import plugin from '../plugin'
   import Icon from './Icon.svelte'
   import ListView from './ListView.svelte'
+  import { resizeObserver } from '..'
 
   export let icon: Asset | AnySvelteComponent
   export let placeholder: IntlString = plugin.string.SearchDots
@@ -77,7 +77,7 @@
   }
 </script>
 
-<div class="selectPopup" on:keydown={onKeydown}>
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
   <div class="header">
     <input
       bind:this={searchInput}

diff --git a/packages/ui/src/components/DropdownRecordPopup.svelte b/packages/ui/src/components/DropdownRecordPopup.svelte
@@ -18,6 +18,7 @@
   import CheckBox from './CheckBox.svelte'
   import Label from './Label.svelte'
   import ListView from './ListView.svelte'
+  import { resizeObserver } from '..'
 
   export let items: Record<any, IntlString>
   export let selected: any | undefined = undefined
@@ -58,7 +59,7 @@
   }
 </script>
 
-<div class="selectPopup" on:keydown={onKeydown}>
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
   <div class="scroll">
     <div class="box">
       <ListView bind:this={list} count={objects.length} bind:selection>

diff --git a/packages/ui/src/components/ExpandCollapse.svelte b/packages/ui/src/components/ExpandCollapse.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <div class="root" style="height: {$tweenedHeight}px">
-  <div bind:offsetHeight={height} class="clear-mins">
+  <div bind:offsetHeight={height} class="flex-no-shrink clear-mins">
     <slot />
   </div>
 </div>
@@ -41,5 +41,6 @@
   .root {
     overflow: hidden;
     min-height: 0;
+    flex-shrink: 0;
   }
 </style>
diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte
@@ -13,7 +13,8 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
+  import { resizeObserver } from '..'
 
   export let selection: number = 0
   export let count: number
@@ -53,12 +54,16 @@
       r?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
     }
   }
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 {#if count}
-  <div class="list-container flex-col flex-grow" style:overflow={'auto'}>
+  <div
+    class="list-container flex-col flex-grow"
+    style:overflow={'auto'}
+    use:resizeObserver={() => {
+      dispatch('changeContent')
+    }}
+  >
     {#each Array(count) as _, row}
       <slot name="category" item={row} />
       <div
@@ -76,7 +81,7 @@
 
 <style lang="scss">
   .list-container {
-    border-radius: 0.25rem;
+    // border-radius: 0.25rem;
     user-select: none;
 
     .selection {

diff --git a/packages/ui/src/components/Menu.svelte b/packages/ui/src/components/Menu.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import { generateId, Ref, Doc } from '@hcengineering/core'
   import ui from '../plugin'
   import { closePopup, showPopup } from '../popups'
@@ -68,9 +68,6 @@
     }
   }
 
-  afterUpdate(() => {
-    dispatch('changeContent')
-  })
   onMount(() => {
     if (btns[0]) {
       btns[0].focus()
@@ -142,7 +139,9 @@
               bind:this={btns[i]}
               class="ap-menuItem flex-row-center withIcon w-full"
               class:hover={btns[i] === activeElement}
-              on:mouseover={(evt) => focusTarget(action, btns[i])}
+              on:mousemove={() => {
+                if (btns[i] !== activeElement) focusTarget(action, btns[i])
+              }}
               on:click|preventDefault|stopPropagation={(evt) => {
                 if (!action.inline) dispatch('close')
                 action.action(ctx, evt)
@@ -158,7 +157,9 @@
             bind:this={btns[i]}
             class="ap-menuItem antiPopup-submenu withIconHover"
             class:hover={btns[i] === activeElement}
-            on:mouseover={() => focusTarget(action, btns[i])}
+            on:mousemove={() => {
+              if (btns[i] !== activeElement) focusTarget(action, btns[i])
+            }}
             on:click={() => focusTarget(action, btns[i])}
           >
             {#if action.icon}
@@ -172,7 +173,9 @@
             bind:this={btns[i]}
             class="ap-menuItem flex-row-center withIcon"
             class:hover={btns[i] === activeElement}
-            on:mouseover={() => focusTarget(action, btns[i], action.isSubmenuRightClicking)}
+            on:mousemove={() => {
+              if (btns[i] !== activeElement) focusTarget(action, btns[i], action.isSubmenuRightClicking)
+            }}
             on:click={(evt) => {
               if (!action.inline) dispatch('close')
               action.action(ctx, evt)

diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate, onMount } from 'svelte'
+  import { onMount } from 'svelte'
   import { fitPopupElement } from '../popups'
   import type { AnyComponent, AnySvelteComponent, PopupAlignment, PopupOptions } from '../types'
   import { deviceOptionsStore as deviceInfo } from '..'
@@ -44,7 +44,8 @@
       height: '',
       maxWidth: '',
       maxHeight: '',
-      minWidth: ''
+      minWidth: '',
+      minHeight: ''
     },
     showOverlay: false,
     direction: 'bottom'
@@ -101,8 +102,6 @@
   onMount(() => fitPopup())
   $: if ($deviceInfo.docWidth <= 900 && !docSize) docSize = true
   $: if ($deviceInfo.docWidth > 900 && docSize) docSize = false
-
-  afterUpdate(() => fitPopup())
 </script>
 
 <svelte:window on:resize={fitPopup} on:keydown={handleKeydown} />
@@ -121,6 +120,7 @@
   style:max-width={options.props.maxWidth}
   style:max-height={options.props.maxHeight}
   style:min-width={options.props.minWidth}
+  style:min-height={options.props.minHeight}
   style:transform={options.props.transform}
 >
   <svelte:component