Fix contact info (#1087)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
Co-authored-by: Alexander Platov <sas_lord@mail.ru>

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>

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>

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'>
+    <div class="mr-1"><IconAdd size={'small'} /></div>
-      <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'>
+    <div class="mr-1"><IconDelete size={'small'} /></div>
-      <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}

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>

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} />

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="channels {length}"
-  class:gap-1={size === 'small'}
+  class:one={displayItems?.length === 1}
-  class:gap-2={size !== 'small'}
   class:reverse
+  class:small-gap={size === 'small'}
+  class:normal-gap={size !== 'small'}
 >
-  {#each displayItems as item}
+  {#each displayItems as item,i}
-    <div
+    <Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
-      on:click|stopPropagation={() => {
+      <CircleButton
+        icon={item.icon}
+        {size}
+        primary={item.integration || item.notification}
+        on:click={() => {
           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}
 </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>

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;

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}