Fix TxView collections (#1111)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

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

@@ -239,7 +239,7 @@
 
       {#if viewlet && viewlet.component && viewlet.display !== 'inline'}
         <div class={viewlet.display}>
-          <ShowMore ignore={viewlet.display !== 'content' || edit}>
+          <ShowMore ignore={edit}>
             {#if tx.collectionAttribute !== undefined && tx.txes.length > 0}
               <div class="flex-row-center flex-grow flex-wrap">
                 <TxViewTx {tx} {onCancelEdit} {edit} {viewlet}/>

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

@@ -17,27 +17,35 @@
   }
 </script>
 
-{#each filterTx([tx, ...tx.txes], core.class.TxCreateDoc) as ctx, i}
-  {#if i === 0}
-    <div class="mr-1"><IconAdd size={'small'} /></div>
-  {/if}
-  <div class="mr-1">
-    {#if typeof viewlet?.component === 'string'}
-      <Component is={viewlet?.component} props={getProps(getDTxProps(ctx), edit)} on:close={onCancelEdit} />
-    {:else}
-      <svelte:component this={viewlet?.component} {...getProps(getDTxProps(ctx), edit)} on:close={onCancelEdit} />
+<div class="flex-row-center flex-grow flex-wrap content">
+  {#each filterTx([tx, ...tx.txes], core.class.TxCreateDoc) as ctx, i}
+    {#if i === 0}
+      <div class="mr-1"><IconAdd size={'small'} /></div>
     {/if}
-  </div>
-{/each}
-{#each filterTx([tx, ...tx.txes], core.class.TxRemoveDoc) as ctx, i}
-  {#if i === 0}
-    <div class="mr-1"><IconDelete size={'small'} /></div>
-  {/if}
-  <div class="mr-1">
-    {#if typeof viewlet?.component === 'string'}
-      <Component is={viewlet?.component} props={getProps(getDTxProps(ctx), edit)} on:close={onCancelEdit} />
-    {:else}
-      <svelte:component this={viewlet?.component} {...getProps(getDTxProps(ctx), edit)} on:close={onCancelEdit} />
+      {#if typeof viewlet?.component === 'string'}
+        <Component is={viewlet?.component} props={getProps(getDTxProps(ctx), edit)} on:close={onCancelEdit} />
+      {:else}
+        <svelte:component this={viewlet?.component} {...getProps(getDTxProps(ctx), edit)} on:close={onCancelEdit} />
+      {/if}
+  {/each}
+  {#each filterTx([tx, ...tx.txes], core.class.TxRemoveDoc) as ctx, i}
+    {#if i === 0}
+      <div class="mr-1"><IconDelete size={'small'} /></div>
     {/if}
-  </div>
-{/each}
+      {#if typeof viewlet?.component === 'string'}
+        <Component is={viewlet?.component} props={getProps(getDTxProps(ctx), edit)} on:close={onCancelEdit} />
+      {:else}
+        <svelte:component this={viewlet?.component} {...getProps(getDTxProps(ctx), edit)} on:close={onCancelEdit} />
+      {/if}
+  {/each}
+</div>
+
+<style lang="scss">
+  .content {
+    padding: 1rem;
+    color: var(--theme-caption-color);
+    background: var(--theme-bg-accent-color);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: 0.75rem;
+  }
+</style>

plugins/activity-resources/src/components/utils.ts

@@ -16,7 +16,8 @@ export type TxDisplayViewlet =
 async function createPseudoViewlet (
   client: TxOperations,
   dtx: DisplayTx,
-  label: IntlString
+  label: IntlString,
+  display: 'inline' | 'content' | 'emphasized' = 'inline'
 ): Promise<TxDisplayViewlet> {
   const doc = dtx.doc
   if (doc === undefined) {
@@ -36,7 +37,7 @@ async function createPseudoViewlet (
   const presenter = await getObjectPresenter(client, doc._class, { key: 'doc-presenter' })
   if (presenter !== undefined) {
     return {
-      display: 'inline',
+      display,
       icon: docClass.icon ?? activity.icon.Activity,
       label: label,
       labelParams: { _class: trLabel, collection: dtx.collectionAttribute?.label !== undefined ? await translate(dtx.collectionAttribute?.label, {}) : '' },
@@ -90,7 +91,7 @@ async function checkInlineViewlets (
 ): Promise<{ viewlet: TxDisplayViewlet, model: AttributeModel[] }> {
   if (dtx.collectionAttribute !== undefined && dtx.txes.length > 0) {
     // Check if we have a class presenter we could have a pseudo viewlet based on class presenter.
-    viewlet = await createPseudoViewlet(client, dtx, activity.string.CollectionUpdated)
+    viewlet = await createPseudoViewlet(client, dtx, activity.string.CollectionUpdated, 'content')
   } else if (dtx.tx._class === core.class.TxCreateDoc) {
     // Check if we have a class presenter we could have a pseudo viewlet based on class presenter.
     viewlet = await createPseudoViewlet(client, dtx, activity.string.DocCreated)

plugins/contact-resources/src/components/ChannelsView.svelte

@@ -103,20 +103,20 @@
   class="channels {length}"
   class:one={displayItems?.length === 1}
   class:reverse
-  class:small-gap={size === 'small'}
-  class:normal-gap={size !== 'small'}
 >
   {#each displayItems as item,i}
-    <Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
-      <CircleButton
-        icon={item.icon}
-        {size}
-        primary={item.integration || item.notification}
-        on:click={() => {
-          dispatch('click', item)
-        }}
-      />
-    </Tooltip>
+    <div class='channel-item'>
+        <Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
+          <CircleButton
+          icon={item.icon}
+          {size}
+          primary={item.integration || item.notification}
+          on:click={() => {
+            dispatch('click', item)
+          }}
+        />
+      </Tooltip>
+    </div>
   {/each}
 </div>
 <style lang="scss">
@@ -131,5 +131,9 @@
     &.reverse { grid-auto-flow: dense; }
     &.small-gap { gap: .25rem; }
     &.normal-gap { gap: .5rem; }
+
+    .channel-item {
+      margin: 0.125rem;
+    }
   }
 </style>

plugins/tags-resources/src/components/TagsEditor.svelte

@@ -17,7 +17,7 @@
   import { translate } from '@anticrm/platform'
   import { KeyedAttribute } from '@anticrm/presentation'
   import { TagElement, TagReference } from '@anticrm/tags'
-  import { CircleButton, IconAdd, IconClose, Label, showPopup, Tooltip } from '@anticrm/ui'
+  import { CircleButton, IconAdd, IconClose, Label, ShowMore, showPopup, Tooltip } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tags from '../plugin'
   import TagItem from './TagItem.svelte'
@@ -74,34 +74,36 @@
       </div>
     </div>
   {/if}
-  <div class:tags-container={showTitle} class:mt-4={showTitle}>
-    <div class="flex flex-reverse">
-      <div class="ml-4">
-        <Tooltip label={tags.string.AddTagTooltip} props={{ word: keyLabel }}>
-          <CircleButton icon={IconAdd} size={'small'} selected on:click={addTag} />
-        </Tooltip>
-      </div>
-      <div class="tag-items">
-        {#if items.length === 0}
+  <ShowMore ignore={!showTitle}>
+    <div class:tags-container={showTitle} class:mt-4={showTitle}>
+      <div class="flex flex-reverse">
+        <div class="ml-4">
+          <Tooltip label={tags.string.AddTagTooltip} props={{ word: keyLabel }}>
+            <CircleButton icon={IconAdd} size={'small'} selected on:click={addTag} />
+          </Tooltip>
+        </div>
+        <div class="tag-items" class:tag-items-scroll={!showTitle}>
+          {#if items.length === 0}
           {#if keyLabel}
-            <div class="flex flex-grow title-center">
-              <Label label={tags.string.NoItems} params={{ word: keyLabel }} />
-            </div>
+          <div class="flex flex-grow title-center">
+            <Label label={tags.string.NoItems} params={{ word: keyLabel }} />
+          </div>
           {/if}
-        {/if}
-        {#each items as tag}
+          {/if}
+          {#each items as tag}
           <TagItem
-            {tag}
-            element={elements.get(tag.tag)}
-            action={IconClose}
-            on:action={() => {
-              removeTag(tag._id)
-            }}
+          {tag}
+          element={elements.get(tag.tag)}
+          action={IconClose}
+          on:action={() => {
+            removeTag(tag._id)
+          }}
           />
-        {/each}
+          {/each}
+        </div>
       </div>
     </div>
-  </div>
+  </ShowMore>
 </div>
 
 <style lang="scss">
@@ -122,6 +124,8 @@
     flex-grow: 1;
     display: flex;
     flex-wrap: wrap;
+  }
+  .tag-items-scroll {
     overflow-y: scroll;
     max-height: 10rem;
   }