From 53ce98c2b3f0bbfa761561192b4677f47daf45ed Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Thu, 3 Mar 2022 16:26:00 +0700
Subject: [PATCH] Fix contact info (#1087)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
Co-authored-by: Alexander Platov <sas_lord@mail.ru>
---
 .../ui/src/components/CircleButton.svelte     |  2 +-
 packages/ui/src/components/ShowMore.svelte    |  7 +--
 .../src/components/TxViewTx.svelte            | 32 +++++++-------
 .../src/components/Channels.svelte            |  8 +---
 .../src/components/ChannelsPresenter.svelte   |  2 +-
 .../src/components/ChannelsView.svelte        | 43 +++++++++++++------
 .../src/components/EditPerson.svelte          |  5 +--
 .../src/components/CandidateCard.svelte       |  2 +-
 8 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index 7b9cdf4941..d186de9976 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -25,7 +25,7 @@
   export let primary: boolean = false
 </script>
 
-<div class="flex-center icon-button icon-{size}" class:selected class:transparent class:primary on:click on:mousemove>
+<div class="flex-center icon-button icon-{size}" class:selected class:transparent class:primary on:click|stopPropagation on:mousemove>
   <div class="content">
     <Icon {icon} size={'full'} />
   </div>
diff --git a/packages/ui/src/components/ShowMore.svelte b/packages/ui/src/components/ShowMore.svelte
index e73b4042f0..aee27de8c0 100644
--- a/packages/ui/src/components/ShowMore.svelte
+++ b/packages/ui/src/components/ShowMore.svelte
@@ -42,7 +42,7 @@
   ><slot /></div>
 
   {#if !ignore && bigger && !fixed}
-    <div class="showMore" class:outter={cHeight > limit} on:click={toggle}>
+    <div class="showMore" on:click={toggle}>
       <Label label={(cHeight > limit) ? ui.string.ShowLess : ui.string.ShowMore} />
     </div>
   {/if}
@@ -76,10 +76,5 @@
     border-radius: 2.5rem;
     user-select: none;
     cursor: pointer;
-    
-    &.outter {
-      bottom: -2.75rem;
-      transform: translateX(-50%);
-    }
   }
 </style>
diff --git a/plugins/activity-resources/src/components/TxViewTx.svelte b/plugins/activity-resources/src/components/TxViewTx.svelte
index ecf4cc5b47..46735fb648 100644
--- a/plugins/activity-resources/src/components/TxViewTx.svelte
+++ b/plugins/activity-resources/src/components/TxViewTx.svelte
@@ -19,25 +19,25 @@
 
 {#each filterTx([tx, ...tx.txes], core.class.TxCreateDoc) as ctx, i}
   {#if i === 0}
-    <div class='mr-2'>
-      <IconAdd size={'small'} />
-    </div>
-  {/if}
-  {#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="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} />
+    {/if}
+  </div>
 {/each}
 {#each filterTx([tx, ...tx.txes], core.class.TxRemoveDoc) as ctx, i}
   {#if i === 0}
-    <div class='mr-2'>
-      <IconDelete size={'small'} />
-    </div>
-  {/if}
-  {#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="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}
+  </div>
 {/each}
diff --git a/plugins/contact-resources/src/components/Channels.svelte b/plugins/contact-resources/src/components/Channels.svelte
index c21db48b40..70561c7599 100644
--- a/plugins/contact-resources/src/components/Channels.svelte
+++ b/plugins/contact-resources/src/components/Channels.svelte
@@ -41,7 +41,7 @@
         }
       })}
   />
-  <span><Label label={presentation.string.AddSocialLinks} /></span>
+  <span class="ml-2"><Label label={presentation.string.AddSocialLinks} /></span>
 {:else}
   <ChannelsView value={channels} size={'small'} {integrations} on:click />
   <div class="ml-1">
@@ -58,9 +58,3 @@
     />
   </div>
 {/if}
-
-<style lang="scss">
-  span {
-    margin-left: 0.5rem;
-  }
-</style>
diff --git a/plugins/contact-resources/src/components/ChannelsPresenter.svelte b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
index 2ba7b234ed..972743f337 100644
--- a/plugins/contact-resources/src/components/ChannelsPresenter.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
@@ -37,4 +37,4 @@
   }
 </script>
 
-<ChannelsView {value} size={'small'} reverse on:click={click} />
+<ChannelsView {value} size={'small'} length={'short'} on:click={click} />
diff --git a/plugins/contact-resources/src/components/ChannelsView.svelte b/plugins/contact-resources/src/components/ChannelsView.svelte
index ff92115c7b..ee98ab90bc 100644
--- a/plugins/contact-resources/src/components/ChannelsView.svelte
+++ b/plugins/contact-resources/src/components/ChannelsView.svelte
@@ -26,6 +26,7 @@
 
   export let value: AttachedData<Channel>[] | Channel | null
   export let size: 'small' | 'medium' | 'large' | 'x-large' = 'large'
+  export let length: 'short' | 'full' = 'full'
   export let reverse: boolean = false
   export let integrations: Set<Ref<Doc>> = new Set<Ref<Doc>>()
   const notificationClient = NotificationClientImpl.getClient()
@@ -99,20 +100,36 @@
 
 <div
   bind:this={divHTML}
-  class="flex-row-center flex-wrap"
-  class:gap-1={size === 'small'}
-  class:gap-2={size !== 'small'}
+  class="channels {length}"
+  class:one={displayItems?.length === 1}
   class:reverse
+  class:small-gap={size === 'small'}
+  class:normal-gap={size !== 'small'}
 >
-  {#each displayItems as item}
-    <div
-      on:click|stopPropagation={() => {
-        dispatch('click', item)
-      }}
-    >
-      <Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
-        <CircleButton icon={item.icon} {size} primary={item.integration || item.notification} />
-      </Tooltip>
-    </div>
+  {#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>
   {/each}
 </div>
+<style lang="scss">
+  .channels {
+    display: grid;
+    &.one { display: block; }
+    &.short {
+      grid-template-columns: repeat(4, min-content);
+      grid-auto-rows: auto;
+    }
+    &.full { grid-auto-flow: column; }
+    &.reverse { grid-auto-flow: dense; }
+    &.small-gap { gap: .25rem; }
+    &.normal-gap { gap: .5rem; }
+  }
+</style>
\ No newline at end of file
diff --git a/plugins/contact-resources/src/components/EditPerson.svelte b/plugins/contact-resources/src/components/EditPerson.svelte
index 49473f5a60..f44d80f136 100644
--- a/plugins/contact-resources/src/components/EditPerson.svelte
+++ b/plugins/contact-resources/src/components/EditPerson.svelte
@@ -113,7 +113,7 @@
 
       <div class="separator" />
 
-      <div class="flex-between channels">
+      <div class="flex-between">
         <div class="flex-row-center">
           <ChannelsEditor attachedTo={object._id} attachedClass={object._class} {editable} {integrations} on:click />
         </div>
@@ -135,9 +135,6 @@
     font-size: 1.25rem;
     color: var(--theme-caption-color);
   }
-  .channels {
-    margin-top: 0.75rem;
-  }
   .location {
     margin-top: 0.25rem;
     font-size: 0.75rem;
diff --git a/plugins/recruit-resources/src/components/CandidateCard.svelte b/plugins/recruit-resources/src/components/CandidateCard.svelte
index c5a9a0d393..d6aa83dc40 100644
--- a/plugins/recruit-resources/src/components/CandidateCard.svelte
+++ b/plugins/recruit-resources/src/components/CandidateCard.svelte
@@ -53,7 +53,7 @@
         <Component is={attachment.component.AttachmentsPresenter} props={{ value: candidate, size: 'medium', showCounter: true }}/>
       </div>
       <div class='flex flex-grow'>
-        <ChannelsView value={channels} size={'small'} on:click />
+        <ChannelsView value={channels} size={'small'} length={'short'} on:click />
       </div>
     </div>
   {/if}