Fix autoscroll (#2622)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

packages/ui/src/components/Scroller.svelte

@@ -13,12 +13,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { beforeUpdate, afterUpdate, onDestroy, onMount, createEventDispatcher } from 'svelte'
-  import { resizeObserver } from '../resize'
   import { themeStore as themeOptions } from '@hcengineering/theme'
+  import { afterUpdate, beforeUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import { resizeObserver } from '../resize'
+  import { closeTooltip, tooltipstore } from '../tooltips'
   import type { FadeOptions } from '../types'
   import { defaultSP } from '../types'
-  import { closeTooltip, tooltipstore } from '../tooltips'
 
   export let padding: string | undefined = undefined
   export let autoscroll: boolean = false
@@ -27,7 +27,7 @@
   export let invertScroll: boolean = false
   export let horizontal: boolean = false
   export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
-  export let noStretch: boolean = false
+  export let noStretch: boolean = autoscroll
   export let divScroll: HTMLElement | undefined = undefined
 
   export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
@@ -237,6 +237,13 @@
     if (!isScrolling && horizontal) checkBarH()
   }
 
+  function checkAutoScroll () {
+    if (firstScroll && divHeight && divScroll) {
+      scrollDown()
+      firstScroll = false
+    }
+  }
+
   const scrollDown = (): void => {
     if (divScroll) divScroll.scrollTop = divScroll.scrollHeight - divHeight
   }
@@ -284,10 +291,6 @@
   onMount(() => {
     if (divScroll && divBox) {
       divScroll.addEventListener('scroll', checkFade)
-      if (autoscroll && scrolling) {
-        scrollDown()
-        firstScroll = false
-      }
       checkBar()
       if (horizontal) checkBarH()
     }
@@ -313,11 +316,6 @@
 
   let divHeight: number
   const _resize = (): void => checkFade()
-
-  let boxHeight: number
-  $: if (boxHeight) checkFade()
-  let boxWidth: number
-  $: if (boxWidth) checkFade()
 </script>
 
 <svelte:window on:resize={_resize} />
@@ -348,8 +346,8 @@
           : 'row'}
         style:height={contentDirection === 'vertical-reverse' ? 'max-content' : noStretch ? 'auto' : '100%'}
         use:resizeObserver={(element) => {
-          boxHeight = element.clientHeight
-          boxWidth = element.clientWidth
+          checkAutoScroll()
+          checkFade()
         }}
         on:dragover
         on:drop

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

@@ -24,7 +24,6 @@
     IconArrowRight,
     IconBlueCheck,
     IconClose,
-    IconEdit,
     registerFocus
   } from '@hcengineering/ui'
   import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
@@ -89,7 +88,7 @@
 
 <svelte:window on:resize={fitEditor} on:scroll={fitEditor} />
 <FocusHandler manager={mgr} />
-{#if editable && editable === true}
+{#if editable}
   <div class="editor-container {dir} buttons-group xsmall-gap">
     <div class="cover-channel" class:show class:copied={label === plugin.string.Copied} data-tooltip={lTraslate}>
       <input
@@ -180,17 +179,6 @@
       }}
       on:click={copyChannel}
     />
-    {#if editable && editable === true}
-      <Button
-        focusIndex={4}
-        kind={'transparent'}
-        size={'small'}
-        icon={IconEdit}
-        on:click={() => {
-          dispatch('update', 'edit')
-        }}
-      />
-    {/if}
     {#if openable}
       <Button
         focusIndex={5}

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

@@ -193,17 +193,7 @@
         },
         el,
         (result) => {
-          if (result != null) {
-            if (result === '') {
-              displayItems = dropItem(n)
-            } else {
-              if (result !== 'open') item.value = result
-            }
-            saveItems()
-            focusManager?.setFocusPos(focusIndex + 1 + n)
-          }
           if (result === undefined && item.value === '') displayItems = dropItem(n)
-          opened = undefined
           if (result === 'open') {
             if (item.action) {
               const doc = item.channel as Channel
@@ -211,7 +201,16 @@
             } else {
               dispatch('open', item)
             }
+          } else if (result != null) {
+            if (result === '') {
+              displayItems = dropItem(n)
+            } else {
+              item.value = result
+            }
+            saveItems()
+            focusManager?.setFocusPos(focusIndex + 1 + n)
           }
+          opened = undefined
         },
         (result) => {
           if (result != null) {

plugins/telegram-assets/lang/en.json

@@ -22,6 +22,7 @@
     "Telegram": "Telegram",
     "TelegramIntegrationDesc": "Use telegram integration",
     "Status": "Status",
-    "YouAnd": "You and"
+    "YouAnd": "You and",
+    "MessagesSelected": "messages selected"
   }
 }

plugins/telegram-assets/lang/ru.json

@@ -22,6 +22,7 @@
     "Telegram": "Telegram",
     "TelegramIntegrationDesc": "Подключить Telegram",
     "Status": "Статус",
-    "YouAnd": "Вы и"
+    "YouAnd": "Вы и",
+    "MessagesSelected": "сообщений выбрано"
   }
 }

plugins/telegram-resources/src/components/Chat.svelte

@@ -210,7 +210,6 @@
           </span>
         </div>
       </div>
-      <!-- You and {formatName(object.name)} -->
     </svelte:fragment>
     <svelte:fragment slot="utils">
       {#if integration === undefined}
@@ -250,7 +249,7 @@
     <div class="popupPanel-body__main-header ref-input" class:selectable>
       {#if selectable}
         <div class="flex-between">
-          <span>{selected.size} messages selected</span>
+          <span>{selected.size} <Label label={telegram.string.MessagesSelected} /></span>
           <div class="flex">
             <div>
               <Button label={telegram.string.Cancel} size={'medium'} on:click={clear} />

plugins/telegram-resources/src/plugin.ts

@@ -34,6 +34,7 @@ export default mergeIds(telegramId, telegram, {
     Cancel: '' as IntlString,
     Share: '' as IntlString,
     PublishSelected: '' as IntlString,
-    YouAnd: '' as IntlString
+    YouAnd: '' as IntlString,
+    MessagesSelected: '' as IntlString
   }
 })