Fix Activity text-overflow. (#1811)

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

packages/presentation/src/components/EditAvatarPopup.svelte

@@ -91,7 +91,7 @@
   }
 
   .root {
-    position: fixed;
+    position: absolute;
     top: 0;
     bottom: 0;
     left: 0;

packages/presentation/src/components/EditableAvatar.svelte

@@ -38,7 +38,7 @@
     } else {
       return inputRef.click()
     }
-    showPopup(EditAvatarPopup, { file }, undefined, (blob) => {
+    showPopup(EditAvatarPopup, { file }, 'full', (blob) => {
       if (blob === undefined) {
         return
       }

packages/theme/src/Theme.svelte

@@ -53,11 +53,16 @@
     }
   })
 
+  const setDocumentLanguage = (): void => {
+    document.documentElement.lang = currentLanguage
+  }
+
   onMount(() => {
     setRootColors(currentTheme)
     setRootFontSize(currentFontSize)
     setMetadata(platform.metadata.locale, currentLanguage)
     loadPluginStrings(currentLanguage)
+    setDocumentLanguage()
   })
 </script>
 

packages/theme/styles/_layouts.scss

@@ -94,6 +94,9 @@ p:first-child { margin-block-start: 0; } // First and last padding
 p:last-child { margin-block-end: 0; }
 
 .p-inline {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
   line-height: 150%;
   a {
     word-break: break-all;

packages/ui/src/components/PanelInstance.svelte

@@ -80,7 +80,7 @@
       if ((fullSize || docSize) && (props.element === 'float' || props.element === 'content')) {
         options = fitPopupElement(modalHTML, 'full')
         options.props.width = '100vw'
-        options.props.maxHeight = 'max-content'
+        options.props.maxHeight = '100vh'
         options.showOverlay = false
         modalHTML.classList.add('fullsize')
       } else {
@@ -142,6 +142,7 @@
       style:max-width={options.props.maxWidth}
       style:max-height={options.props.maxHeight}
       style:min-width={options.props.minWidth}
+      style:transform={options.props.transform}
     >
       <div class="panel-container" class:padding={props.element === 'content'}>
         <svelte:component

packages/ui/src/components/PopupInstance.svelte

@@ -70,6 +70,7 @@
     if (modalHTML) {
       if ((fullSize || docSize) && (element === 'float' || element === 'content')) {
         options = fitPopupElement(modalHTML, 'full')
+        options.props.maxHeight = '100vh'
         modalHTML.classList.add('fullsize')
       } else {
         options = fitPopupElement(modalHTML, element)
@@ -107,6 +108,7 @@
   style:max-width={options.props.maxWidth}
   style:max-height={options.props.maxHeight}
   style:min-width={options.props.minWidth}
+  style:transform={options.props.transform}
 >
   <svelte:component
     this={is}

packages/ui/src/components/Scroller.svelte

@@ -25,10 +25,8 @@
 
   let divScroll: HTMLElement
   let divBox: HTMLElement
-  let divBack: HTMLElement
   let divBar: HTMLElement
   let divTrack: HTMLElement
-  let isBack: boolean = false // ?
   let isScrolling: boolean = false
   let dY: number
   let belowContent: number | undefined = undefined
@@ -36,31 +34,6 @@
   let scrolling: boolean = autoscroll
   let firstScroll: boolean = autoscroll
 
-  const checkBack = (): void => {
-    if (divBox) {
-      const el = divBox.querySelector('.scroller-back')
-      if (el && divScroll) {
-        const rectScroll = divScroll.getBoundingClientRect()
-        const rectEl = el.getBoundingClientRect()
-        const bottom = document.body.clientHeight - rectScroll.bottom
-        let top = rectEl.top
-        if (top < rectScroll.top) top = rectScroll.top
-        if (top > rectScroll.bottom) top = rectScroll.top + rectScroll.height
-        divBack.style.left = rectScroll.left + 'px'
-        divBack.style.right = document.body.clientWidth - rectScroll.right + 'px'
-        divBack.style.top = top + 'px'
-        divBack.style.bottom = bottom + 'px'
-        divBack.style.height = 'auto'
-        divBack.style.width = 'auto'
-        divBack.style.visibility = 'visible'
-        isBack = true
-      } else {
-        divBack.style.visibility = 'hidden'
-        isBack = false
-      }
-    }
-  }
-
   const checkBar = (): void => {
     if (divBar && divScroll) {
       const proc = (divScroll.clientHeight / divScroll.scrollHeight) * 100
@@ -120,19 +93,20 @@
       else if (belowContent > 1) mask = 'top'
       else mask = 'none'
 
+      if (autoscroll) {
         if (scrolling && divScroll.scrollHeight - divScroll.clientHeight - divScroll.scrollTop > 10 && !firstScroll) {
           scrolling = false
         }
         if (!scrolling && belowContent && belowContent <= 10) scrolling = true
       }
-    checkBack()
+    }
     if (!isScrolling) checkBar()
   }
 
   const observer = new IntersectionObserver(() => checkFade(), { root: null, threshold: 0.1 })
 
   const scrollDown = (): void => {
-    divScroll.scrollTop = divScroll.scrollHeight
+    divScroll.scrollTop = divScroll.scrollHeight - divHeight
   }
   $: if (scrolling && belowContent && belowContent > 10) scrollDown()
   onMount(() => {
@@ -140,13 +114,12 @@
       divScroll.addEventListener('scroll', checkFade)
       const tempEl = divBox.querySelector('*') as HTMLElement
       if (tempEl) observer.observe(tempEl)
-      if (scrolling) {
+      if (autoscroll && scrolling) {
         scrollDown()
         firstScroll = false
       }
       checkFade()
     }
-    if (divBack) checkBack()
   })
   onDestroy(() => {
     if (divScroll) divScroll.removeEventListener('scroll', checkFade)
@@ -155,21 +128,20 @@
     if (divScroll && divBox) {
       const tempEl = divBox.querySelector('*') as HTMLElement
       if (tempEl) observer.observe(tempEl)
-      if (scrolling) scrollDown()
+      if (autoscroll && scrolling) scrollDown()
       checkFade()
     }
   })
 
-  let divWidth: number = 0
+  let divHeight: number
   const _resize = (): void => checkFade()
-  $: if (divWidth) _resize()
 </script>
 
 <svelte:window on:resize={_resize} />
 <div class="scroller-container" class:bottomStart>
   <div
     bind:this={divScroll}
-    bind:clientWidth={divWidth}
+    bind:clientHeight={divHeight}
     class="scroll relative"
     class:tableFade
     class:antiNav-topFade={mask === 'top'}
@@ -181,7 +153,6 @@
       <slot />
     </div>
   </div>
-  <div bind:this={divBack} class="back" />
   <div class="bar" class:hovered={isScrolling} bind:this={divBar} on:mousedown={onScrollStart} />
   <div class="track" class:hovered={isScrolling} bind:this={divTrack} />
 </div>
@@ -192,6 +163,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    min-width: 0;
     min-height: 0;
   }
   .scroll {
@@ -208,7 +180,6 @@
   .box {
     display: flex;
     flex-direction: column;
-    height: 100%;
   }
   .scroller-container.bottomStart {
     justify-content: flex-end;
@@ -269,14 +240,4 @@
       transition: none;
     }
   }
-
-  .back {
-    visibility: hidden;
-    position: fixed;
-    width: 0;
-    height: 0;
-    // background-color: red;
-    background-color: var(--body-color);
-    z-index: -1;
-  }
 </style>

packages/ui/src/components/ShowMore.svelte

@@ -33,7 +33,7 @@
   $: if (bigger && !ignore) crop = true
 </script>
 
-<div class="relative">
+<div class="relative clear-mins">
   <div
     bind:clientHeight={cHeight}
     class="showMore-content"
@@ -74,9 +74,9 @@
 
     word-wrap: none;
     font-size: 0.75rem;
-    color: var(--theme-caption-color);
+    color: var(--caption-color);
-    background: var(--theme-showmore-color);
+    background: var(--popup-bg-color);
-    border: 0.5px solid var(--theme-card-divider);
+    border: 0.5px solid var(--popup-divider);
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     border-radius: 2.5rem;
     user-select: none;
@@ -86,5 +86,8 @@
       bottom: -2.75rem;
       transform: translateX(-50%);
     }
+    &:hover {
+      background: var(--popup-bg-hover);
+    }
   }
 </style>

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

@@ -19,7 +19,18 @@
   import core, { AnyAttribute, Doc, getCurrentAccount, Ref } from '@anticrm/core'
   import { Asset, getResource } from '@anticrm/platform'
   import { getClient } from '@anticrm/presentation'
-  import { Component, Icon, IconEdit, IconMoreH, Label, Menu, ShowMore, showPopup, TimeSince } from '@anticrm/ui'
+  import {
+    Component,
+    Icon,
+    IconEdit,
+    IconMoreH,
+    Label,
+    Menu,
+    ShowMore,
+    showPopup,
+    TimeSince,
+    Button
+  } from '@anticrm/ui'
   import type { AttributeModel } from '@anticrm/view'
   import { getActions } from '@anticrm/view-resources'
   import { ActivityKey, DisplayTx } from '../activity'
@@ -122,7 +133,7 @@
       </div>
     {/if}
 
-    <div class="flex-grow flex-col">
+    <div class="flex-grow flex-col clear-mins">
       <div class="flex-between">
         <div class="flex-grow label">
           <div class="bold">
@@ -133,7 +144,7 @@
             {/if}
           </div>
           {#if viewlet && viewlet?.editable}
-            <div class="edited">
+            <div class="buttons-group small-gap">
               {#if viewlet.label}
                 <Label label={viewlet.label} params={viewlet.labelParams ?? {}} />
               {/if}
@@ -141,9 +152,13 @@
                 <Label label={activity.string.Edited} />
               {/if}
               {#if tx.tx.modifiedBy === getCurrentAccount()._id}
-                <div class="menuOptions" on:click={(ev) => showMenu(ev)}>
+                <Button
-                  <IconMoreH size={'medium'} />
+                  icon={IconMoreH}
-                </div>
+                  kind={'transparent'}
+                  shape={'circle'}
+                  size={'medium'}
+                  on:click={(ev) => showMenu(ev)}
+                />
               {/if}
             </div>
           {:else if viewlet && viewlet.label}
@@ -188,11 +203,11 @@
                     </div>
                   </div>
                 {:else}
-                  <span class="lower" class:flex-grow={hasMessageType}
+                  <span class="lower" class:flex-grow={hasMessageType}>
-                    ><Label label={activity.string.Changed} />
+                    <Label label={activity.string.Changed} />
                     <Label label={m.label} />
-                    <Label label={activity.string.To} /></span
+                    <Label label={activity.string.To} />
-                  >
+                  </span>
                   {#if hasMessageType}
                     <div class="time"><TimeSince value={tx.tx.modifiedOn} /></div>
                   {/if}
@@ -236,7 +251,7 @@
           {:else if viewlet && viewlet.display === 'inline' && viewlet.component}
             {#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
               <ShowMore ignore={edit}>
-                <div class="flex-row-center flex-grow flex-wrap">
+                <div class="flex-row-center flex-grow flex-wrap clear-mins">
                   <TxViewTx {tx} {onCancelEdit} {edit} {viewlet} />
                 </div>
               </ShowMore>
@@ -256,7 +271,7 @@
         <div class={viewlet.display}>
           <ShowMore ignore={edit}>
             {#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
-              <div class="flex-row-center flex-grow flex-wrap">
+              <div class="flex-row-center flex-grow flex-wrap clear-mins">
                 <TxViewTx {tx} {onCancelEdit} {edit} {viewlet} />
               </div>
             {:else if typeof viewlet.component === 'string'}
@@ -274,6 +289,7 @@
 <style lang="scss">
   .msgactivity-container {
     position: relative;
+    min-width: 0;
   }
 
   .showIcon {
@@ -317,12 +333,6 @@
     border-radius: 50%;
   }
 
-  .edited {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-  }
-
   .label {
     display: flex;
     align-items: center;
@@ -353,6 +363,8 @@
   .content {
     flex-shrink: 0;
     margin-top: 0.5rem;
+    min-width: 0;
+    min-height: 0;
   }
 
   .emphasized {

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

@@ -51,6 +51,7 @@
 <style lang="scss">
   .content {
     padding: 1rem;
+    min-width: 0;
     color: var(--accent-color);
     background: var(--theme-bg-accent-color);
     border: 1px solid var(--theme-bg-accent-color);

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

@@ -270,7 +270,7 @@
 
       .header {
         display: flex;
-        align-items: center;
+        align-items: baseline;
         font-weight: 500;
         font-size: 1rem;
         line-height: 150%;