Comments fix (#423)

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

packages/ui/src/components/TooltipInstance.svelte

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

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

@@ -16,17 +16,33 @@
 
 <script lang="ts">
   import { Ref, Doc, SortingOrder } from '@anticrm/core'
-  import { Table } from '@anticrm/view-resources'
 
-  import chunter from '@anticrm/chunter'
+  import chunter, { Comment } from '@anticrm/chunter'
+  import { createQuery } from '@anticrm/presentation'
+  import CommentPresenter from './CommentPresenter.svelte'
 
   export let objectId: Ref<Doc>
 
+    let comments: Comment[] = []
+    const query = createQuery()
+    $: query.query(chunter.class.Comment, { attachedTo: objectId }, (res) => {
+      comments = res
+    }, { limit: 3, sort: { modifiedOn: SortingOrder.Descending }})
+
 </script>
 
-<Table 
-  _class={chunter.class.Comment}
-  config={['']}
-  options={ { limit: 3, sort: { modifiedOn: SortingOrder.Descending }} }
-  query={ { attachedTo: objectId } }
-/>
+<div class="content">
+  {#each comments as comment}
+    <div class="item">
+      <CommentPresenter value={comment} />
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .content {
+    .item + .item {
+      margin-top: 1.75rem;
+    }
+  }
+</style>

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

@@ -28,7 +28,7 @@
 <div class="container">
   <div class="avatar"><Avatar size={'medium'} /></div>
   <div class="message">
-    <div class="header">
+    <div class="header flex-between">
       {#await getUser(client, value.modifiedBy) then user}
         {#if user}{formatName(user.name)}{/if}
       {/await}
@@ -48,14 +48,14 @@
       display: flex;
       flex-direction: column;
       width: 100%;
-      margin-left: 1rem;
+      margin-left: 1.1rem;
 
       .header {
         font-weight: 500;
         font-size: 1rem;
         line-height: 150%;
         color: var(--theme-caption-color);
-        margin-bottom: .25rem;
+        margin-bottom: .2rem;
 
         span {
           margin-left: .5rem;
@@ -67,6 +67,9 @@
       }
       .text {
         line-height: 150%;
+        max-width: 20rem;
+
+        :global(p) { margin: 0; }
       }
     }
   }