Fix Activity and ScrollBox components. Gap in Dialog footer. (#57)

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

packages/ui/src/components/Dialog.svelte

@@ -34,15 +34,15 @@
 <div class="dialog-container">
   <form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
     <div class="flex-between header">
-      <div class="title"><Label {label}/></div>
-      <div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'}/></div>
+      <div class="title"><Label {label} /></div>
+      <div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'} /></div>
     </div>
     <div class="content">
-      <ScrollBox vertical gap={0}><slot/></ScrollBox>
+      <ScrollBox vertical stretch><slot /></ScrollBox>
     </div>
     <div class="footer">
-      <Button label={okLabel} primary/>
-      <Button label={'Cancel'} on:click={() => { dispatch('close') }}/>
+      <Button label={'Cancel'} on:click={() => { dispatch('close') }} />
+      <Button label={okLabel} primary />
     </div>
   </form>
 </div>
@@ -55,14 +55,14 @@
     flex-direction: row-reverse;
     width: 100vw;
     min-height: 100vh;
-    height: 100vh;
+    max-height: 100vh;
 
     .dialog {
       display: flex;
       flex-direction: column;
-      width: auto;
+      width: 45rem;
       min-height: 100vh;
-      height: 100vh;
+      max-height: 100vh;
       background-color: var(--theme-bg-color);
       border-radius: 1.875rem 0 0 1.875rem;
       box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
@@ -90,21 +90,22 @@
 
       .content {
         flex-shrink: 0;
-        width: 40rem;
+        flex-grow: 1;
         margin: 0 2.5rem;
-        height: calc(100vh - 10.5rem);
+        height: fit-content;
       }
 
       .footer {
-        display: flex;
-        overflow: hidden;
-        flex-direction: row-reverse;
-        align-items: center;
         flex-shrink: 0;
-        gap: .75rem;
+        display: grid;
+        grid-auto-flow: column;
+        justify-content: end;
+        align-items: center;
+        column-gap: .75rem;
         padding: 0 2.5rem;
         height: 6rem;
         mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
+        overflow: hidden;
       }
     }
   }

packages/ui/src/components/ScrollBox.svelte

@@ -14,14 +14,14 @@
 -->
 
 <script lang="ts">
-  export let gap: number = .75
   export let vertical: boolean = false
   export let stretch: boolean = false
   export let bothScroll: boolean = false
+  export let noShift: boolean = false
 </script>
 
-<div class="scroll" class:vertical={vertical} class:bothScroll={bothScroll}>
-  <div class="box" class:stretch={stretch} style="gap: {gap}rem">
+<div class="scroll" class:vertical class:bothScroll class:noShift>
+  <div class="box" class:stretch>
     <slot/>
   </div>
 </div>
@@ -38,10 +38,8 @@
 
     .box {
       position: absolute;
-      display: grid;
-      grid-auto-flow: column;
+      display: flex;
       padding: 0 0 .375rem 0;
-      gap: 1.5rem;
       top: 0;
       left: 0;
       width: auto;
@@ -56,7 +54,7 @@
       overflow-x: hidden;
       overflow-y: auto;
       .box {
-        grid-auto-flow: row;
+        flex-direction: column;
         padding: 0 .5rem 0 .5rem;
         width: 100%;
         height: auto;
@@ -73,5 +71,10 @@
         padding: 0 .375rem .375rem 0;
       }
     }
+
+    &.noShift {
+      margin: 0;
+      .box { padding: 0; }
+    }
   }
 </style>

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

@@ -20,9 +20,8 @@ import type { Doc, Ref, Space } from '@anticrm/core'
 import type { Comment } from '@anticrm/chunter'
 import { ReferenceInput } from '@anticrm/text-editor'
 import { createQuery, getClient } from '@anticrm/presentation'
-import { Section, IconComments, Grid } from '@anticrm/ui'
+import { ScrollBox, Grid } from '@anticrm/ui'
 
-import Bookmark from './icons/Bookmark.svelte'
 import Backlink from './Backlink.svelte'
 
 import chunter from '@anticrm/chunter'
@@ -45,13 +44,32 @@ function onMessage(event: CustomEvent) {
 }
 </script>
 
-<Section icon={IconComments} label={'Comments'}>
-  <Grid column={1} rowGap={1.5}>
-    {#if comments}
-      {#each comments as comment}
-        <Backlink {comment} />
-      {/each}
-    {/if}
-    <ReferenceInput on:message={onMessage}/>
-  </Grid>
-</Section>
+<div class="container">
+  <div class="msg-board">
+    <ScrollBox vertical stretch noShift>
+      {#if comments}
+        <Grid column={1} rowGap={1.5}>
+          {#each comments as comment}
+            <Backlink {comment} />
+          {/each}
+        </Grid>
+      {/if}
+    </ScrollBox>
+  </div>
+  <ReferenceInput on:message={onMessage}/>
+</div>
+
+<style lang="scss">
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+
+    .msg-board {
+      margin-bottom: 1.5em;
+      min-height: 2rem;
+      height: 100%;
+    }
+  }
+</style>