Update layout for comments in tooltip (#471)

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

packages/theme/styles/_layouts.scss

@@ -116,6 +116,10 @@ p:last-child { margin-block-end: 0; }
   align-items: center;
   flex-wrap: nowrap;
 }
+.flex-row-top {
+  display: flex;
+  align-items: flex-start;
+}
 .flex-row-reverse {
   display: flex;
   flex-direction: row-reverse;
@@ -138,6 +142,7 @@ p:last-child { margin-block-end: 0; }
   flex-direction: column;
   align-items: stretch;
 }
+.justify-between { justify-content: space-between; }
 
 .safari-gap-1 {
   & > * { margin-right: .25rem; }

packages/ui/src/components/TooltipInstance.svelte

@@ -138,7 +138,7 @@
 
 <style lang="scss">
   .header {
-    margin-bottom: 1.75rem;
+    margin-bottom: 1.5rem;
     font-weight: 500;
     font-size: 1rem;
     color: var(--theme-caption-color);
@@ -148,9 +148,9 @@
     position: fixed;
     display: flex;
     flex-direction: column;
-    padding: 1.75rem;
+    padding: 1.5rem;
     color: var(--theme-caption-color);
-    background-color: var(--theme-button-bg-hovered);
+    background-color: var(--theme-button-bg-focused);
     border: 1px solid var(--theme-button-border-enabled);
     border-radius: .75rem;
     user-select: none;

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
-</script>
-
-<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10,2.8C6,2.8,2.8,6,2.8,10S6,17.2,10,17.2h4.2c0.4,0,0.6,0,0.8,0c1.1-0.2,1.9-1,2.1-2c0-0.2,0-0.4,0-0.8V10 C17.2,6,14,2.8,10,2.8z M16.1,14.9c-0.1,0.6-0.6,1.1-1.2,1.2c-0.1,0-0.3,0-0.7,0H10c-3.4,0-6.2-2.8-6.2-6.2c0-3.4,2.8-6.2,6.2-6.2 s6.2,2.8,6.2,6.2v4.2C16.2,14.6,16.2,14.8,16.1,14.9z"/>
-  <path d="M12.5,8.7h-5C7.2,8.7,7,8.9,7,9.2s0.2,0.5,0.5,0.5h5c0.3,0,0.5-0.2,0.5-0.5S12.8,8.7,12.5,8.7z"/>
-  <path d="M12.5,12H10c-0.3,0-0.5,0.2-0.5,0.5S9.7,13,10,13h2.5c0.3,0,0.5-0.2,0.5-0.5S12.8,12,12.5,12z"/>
-</svg>

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

@@ -20,5 +20,5 @@
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8,16c-1.1,0-2.3-0.2-3.4-0.7C4.3,15.1,4,15,3.8,15c-0.2,0-0.6,0.1-0.9,0.2c-0.6,0.2-1.5,0.5-2.1-0.1 S0.5,13.7,0.8,13C0.9,12.7,1,12.4,1,12.2c0-0.2-0.1-0.4-0.2-0.8c-1.4-3-0.7-6.6,1.6-9C3.9,0.8,5.9,0,8,0c2.1,0,4.1,0.8,5.7,2.3 c3.1,3.1,3.1,8.2,0,11.3l0,0C12.1,15.2,10.1,16,8,16z M3.8,13.8c0.4,0,0.9,0.2,1.3,0.3c2.6,1.2,5.7,0.7,7.7-1.3 c2.6-2.6,2.6-6.9,0-9.6c-1.3-1.3-3-2-4.8-2c-1.8,0-3.5,0.7-4.8,2c-2,2-2.5,5.1-1.4,7.6c0.2,0.4,0.3,0.9,0.3,1.3 c0,0.4-0.2,0.9-0.3,1.3c-0.1,0.2-0.3,0.8-0.2,0.8c0.1,0.1,0.6-0.1,0.8-0.2C3,13.9,3.4,13.8,3.8,13.8z M13.2,13.2L13.2,13.2 L13.2,13.2z"/>
+  <path d="M13.7,2.3C12.2,0.8,10.1,0,8,0C5.9,0,3.9,0.8,2.3,2.3c-2.4,2.4-3,6-1.6,9C0.9,11.7,1,12,1,12.2 c0,0.2-0.1,0.6-0.2,0.9c-0.2,0.6-0.5,1.5,0.1,2.1c0.6,0.6,1.5,0.3,2.1,0.1C3.3,15.1,3.6,15,3.8,15c0.2,0,0.5,0.1,0.8,0.2 C5.7,15.8,6.8,16,8,16c2.1,0,4.1-0.8,5.7-2.3C16.8,10.5,16.8,5.5,13.7,2.3z M12.8,12.8c-2,2-5.1,2.5-7.7,1.3 c-0.4-0.2-0.8-0.3-1.3-0.3c-0.4,0-0.9,0.2-1.3,0.3c-0.2,0.1-0.8,0.3-0.8,0.2c-0.1-0.1,0.1-0.6,0.2-0.8c0.1-0.4,0.3-0.8,0.3-1.3 c0-0.4-0.2-0.9-0.3-1.3C0.7,8.3,1.2,5.2,3.2,3.2c1.3-1.3,3-2,4.8-2c1.8,0,3.5,0.7,4.8,2C15.4,5.9,15.4,10.1,12.8,12.8z"/>
 </svg>

packages/ui/src/index.ts

@@ -64,7 +64,6 @@ export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconClose } from './components/icons/Close.svelte'
 export { default as IconSearch } from './components/icons/Search.svelte'
 export { default as IconToDo } from './components/icons/ToDo.svelte'
-export { default as IconComments } from './components/icons/Comments.svelte'
 export { default as IconFolder } from './components/icons/Folder.svelte'
 export { default as IconMoreH } from './components/icons/MoreH.svelte'
 export { default as IconFile } from './components/icons/File.svelte'

plugins/chunter-assets/lang/en.json

@@ -11,6 +11,7 @@
     "MakePrivateDescription": "Only members can see it",
     "Channel": "Channel",
     "EditUpdate": "Save...",
-    "EditCancel": "Cancel"
+    "EditCancel": "Cancel",
+    "Comments" : "Comments"
   }
 }

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

@@ -31,18 +31,12 @@
 
 </script>
 
-<div class="content">
-  {#each comments as comment}
-    <div class="item">
-      <CommentPresenter value={comment} />
-    </div>
-  {/each}
-</div>
+{#each comments as comment}
+  <div class="item">
+    <CommentPresenter value={comment} />
+  </div>
+{/each}
 
 <style lang="scss">
-  .content {
-    .item + .item {
-      margin-top: 1.75rem;
-    }
-  }
+  .item + .item { margin-top: 1.25rem; }
 </style>

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

@@ -18,6 +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 { getTime, getUser } from '../utils'
 
   export let value: Comment
@@ -25,52 +26,40 @@
   const client = getClient()
 </script>
 
-<div class="container">
-  <div class="avatar"><Avatar size={'medium'} /></div>
-  <div class="message">
-    <div class="header flex-between">
-      {#await getUser(client, value.modifiedBy) then user}
-        {#if user}{formatName(user.name)}{/if}
-      {/await}
-      <span>{getTime(value.modifiedOn)}</span>
+<div class="flex-row-top">
+  <div class="avatar">
+    <Avatar size={'medium'} />
+  </div>
+  <div class="flex-col">
+    <div class="flex-row-top justify-between mb-1">
+      <div class="fs-title">
+        {#await getUser(client, value.modifiedBy) then user}
+          {#if user}{formatName(user.name)}{/if}
+        {/await}
+      </div>
+      <div class="content-trans-color"><TimeSince value={value.modifiedOn} /></div>
+    </div>
+    <div class="content-color">
+      <MessageViewer message={value.message}/>
     </div>
-    <div class="text"><MessageViewer message={value.message}/></div>
   </div>
 </div>
 
 <style lang="scss">
-  .container {
-    display: flex;
-
-    .avatar { min-width: 2.25rem; }
-
-    .message {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      margin-left: 1.1rem;
-
-      .header {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 150%;
-        color: var(--theme-caption-color);
-        margin-bottom: .2rem;
-
-        span {
-          margin-left: .5rem;
-          font-weight: 400;
-          font-size: .875rem;
-          line-height: 1.125rem;
-          opacity: .4;
-        }
-      }
-      .text {
-        line-height: 150%;
-        max-width: 20rem;
-
-        :global(p) { margin: 0; }
-      }
+    .avatar {
+      margin-right: 1rem;
+      min-width: 2.25rem;
     }
-  }
+
+    // .message {
+    //   display: flex;
+    //   flex-direction: column;
+    //   width: 100%;
+    //   .text {
+    //     line-height: 150%;
+    //     max-width: 20rem;
+
+    //     :global(p) { margin: 0; }
+    //   }
+    // }
 </style>

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

@@ -16,17 +16,17 @@
 
 <script lang="ts">
   import type { Doc } from '@anticrm/core'
-  import { Tooltip, IconComments } from '@anticrm/ui'
+  import { Tooltip, IconThread } from '@anticrm/ui'
   import CommentPopup from './CommentPopup.svelte'
+  import chunter from '@anticrm/chunter'
 
   export let value: Doc & { comments?: number }
-
 </script>
 
 {#if value.comments && value.comments > 0}
-  <Tooltip label={'Comments (' + value.comments + ')'} component={CommentPopup} props={{ objectId: value._id }}>
+  <Tooltip label={chunter.string.Comments} component={CommentPopup} props={{ objectId: value._id }}>
     <div class="sm-tool-icon">
-      <span class="icon"><IconComments size="small"/></span>{value.comments}
+      <span class="icon"><IconThread size="small"/></span>{value.comments}
     </div>
   </Tooltip>
 {/if}

plugins/chunter-resources/src/plugin.ts

@@ -36,6 +36,6 @@ export default mergeIds(chunterId, chunter, {
     ChannelName: '' as IntlString,
     ChannelDescription: '' as IntlString,
     MakePrivate: '' as IntlString,
-    MakePrivateDescription: '' as IntlString,
+    MakePrivateDescription: '' as IntlString
   }
 })

plugins/chunter/src/index.ts

@@ -78,6 +78,7 @@ export default plugin(chunterId, {
   },
   string: {
     EditUpdate: '' as IntlString,
-    EditCancel: '' as IntlString
+    EditCancel: '' as IntlString,
+    Comments: '' as IntlString
   }
 })