Move and update ShowMore. Limits in CommentPresenter. (#690)

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

packages/ui/lang/en.json

@@ -4,6 +4,8 @@
     "Minutes": "{minutes, plural, =0 {less than a minute ago} =1 {a minute ago} other {# minutes ago}}",
     "Hours": "{hours, plural, =0 {less than an hour ago} =1 {an hour ago} other {# hours ago}}",
     "Days": "{days, plural, =0 {today} =1 {yesterday} other {# days ago}}",
-    "Clear": "Clear"
+    "Clear": "Clear",
+    "ShowMore": "Show more",
+    "ShowLess": "Show less"
   }
 }

packages/ui/src/components/ShowMore.svelte

@@ -15,11 +15,12 @@
 -->
 
 <script lang="ts">
-  import { Label } from '@anticrm/ui'
-  import activity from '@anticrm/activity'
+  import Label from './Label.svelte'
+  import ui from '..'
 
   export let limit: number = 240
   export let ignore: boolean = false
+  export let fixed: boolean = false
 
   let cHeight: number
   let bigger: boolean = false
@@ -37,11 +38,12 @@
     class="showMore-content"
     class:crop={!ignore && crop}
     class:full={bigger && !ignore && !crop}
+    style={(!ignore && crop) ? `max-height: ${limit}px;` : ''}
   ><slot /></div>
 
-  {#if !ignore && bigger}
+  {#if !ignore && bigger && !fixed}
     <div class="showMore" class:outter={cHeight > limit} on:click={toggle}>
-      <Label label={(cHeight > limit) ? activity.string.ShowLess : activity.string.ShowMore} />
+      <Label label={(cHeight > limit) ? ui.string.ShowLess : ui.string.ShowMore} />
     </div>
   {/if}
 </div>

packages/ui/src/index.ts

@@ -61,6 +61,7 @@ export { default as Link } from './components/Link.svelte'
 export { default as TimeSince } from './components/TimeSince.svelte'
 export { default as Dropdown } from './components/Dropdown.svelte'
 export { default as DumbDropdown } from './components/DumbDropdown.svelte'
+export { default as ShowMore } from './components/ShowMore.svelte'
 export { default as StatusesBar } from './components/StatusesBar.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'

packages/ui/src/plugin.ts

@@ -20,14 +20,16 @@ import { plugin } from '@anticrm/platform'
 /**
  * @public
  */
- export const uiId = 'ui' as Plugin
+export const uiId = 'ui' as Plugin
 
- export default plugin(uiId, {
-   string: {
-     Cancel: '' as IntlString,
-     Minutes: '' as IntlString,
-     Hours: '' as IntlString,
-     Days: '' as IntlString,
-     Clear: '' as IntlString
-   }
- })
+export default plugin(uiId, {
+  string: {
+    Cancel: '' as IntlString,
+    Minutes: '' as IntlString,
+    Hours: '' as IntlString,
+    Days: '' as IntlString,
+    Clear: '' as IntlString,
+    ShowMore: '' as IntlString,
+    ShowLess: '' as IntlString
+  }
+})

plugins/activity-assets/lang/en.json

@@ -3,8 +3,6 @@
     "Delete": "Delete",
     "Edit": "Edit",
     "Options": "Options",
-    "Edited": "edited",
-    "ShowMore": "Show more",
-    "ShowLess": "Show less"
+    "Edited": "edited"
   }
 }

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

@@ -31,12 +31,12 @@
     Label,
     Menu,
     showPopup,
-    TimeSince
+    TimeSince,
+    ShowMore
   } from '@anticrm/ui'
   import type { AttributeModel } from '@anticrm/view'
   import { buildModel, getActions, getObjectPresenter } from '@anticrm/view-resources'
   import { activityKey, ActivityKey, DisplayTx } from '../activity'
-  import ShowMore from './ShowMore.svelte'
 
   export let tx: DisplayTx
   export let viewlets: Map<ActivityKey, TxViewlet>

plugins/activity/src/index.ts

@@ -52,9 +52,7 @@ export default plugin(activityId, {
     Delete: '' as IntlString,
     Edit: '' as IntlString,
     Options: '' as IntlString,
-    Edited: '' as IntlString,
-    ShowMore: '' as IntlString,
-    ShowLess: '' as IntlString
+    Edited: '' as IntlString
   },
   icon: {
     Activity: '' as Asset

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

@@ -18,7 +18,7 @@
   import type { Comment } from '@anticrm/chunter'
   import { formatName } from '@anticrm/contact'
   import { Avatar, getClient, MessageViewer } from '@anticrm/presentation'
-  import { TimeSince } from '@anticrm/ui'
+  import { TimeSince, ShowMore } from '@anticrm/ui'
   import { getTime, getUser } from '../utils'
 
   export let value: Comment
@@ -39,9 +39,9 @@
       </div>
       <div class="content-trans-color ml-4"><TimeSince value={value.modifiedOn} /></div>
     </div>
-    <div class="comment-content">
+    <ShowMore limit={126} fixed>
       <MessageViewer message={value.message}/>
-    </div>
+    </ShowMore>
   </div>
 </div>
 
@@ -56,13 +56,13 @@
     align-items: baseline;
     margin-bottom: .25rem;
   }
-  .comment-content {
-    overflow: hidden;
-    visibility: visible;
-    display: -webkit-box;
-    -webkit-line-clamp: 7;
-    line-clamp: 7;
-    /* autoprefixer: ignore next */
-    -webkit-box-orient: vertical;
-  }
+  // .comment-content {
+  //   overflow: hidden;
+  //   visibility: visible;
+  //   display: -webkit-box;
+  //   -webkit-line-clamp: 7;
+  //   line-clamp: 7;
+  //   /* autoprefixer: ignore next */
+  //   -webkit-box-orient: vertical;
+  // }
 </style>