From a12e478e49d61afc93201c9bcc11c14206ef0161 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 2 Sep 2021 20:05:48 +0300
Subject: [PATCH] Add hovers on social links (#127)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ChannelsPresenter.svelte   | 94 +++++++++++++++++--
 .../src/components/icons/Copy.svelte          |  8 ++
 2 files changed, 92 insertions(+), 10 deletions(-)
 create mode 100644 plugins/contact-resources/src/components/icons/Copy.svelte

diff --git a/plugins/contact-resources/src/components/ChannelsPresenter.svelte b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
index b6aa036931..77b8d1c6dc 100644
--- a/plugins/contact-resources/src/components/ChannelsPresenter.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
@@ -21,6 +21,7 @@ import type { Channel, ChannelProvider } from '@anticrm/contact'
 import { getClient } from '@anticrm/presentation'
 
 import { Icon } from '@anticrm/ui'
+import IconCopy from './icons/Copy.svelte'
 
 import contact from '@anticrm/contact'
 
@@ -65,40 +66,113 @@ let displayItems: Item[] = []
 
 </script>
 
-<div class="container">
+<div class="container" on:click|stopPropagation={() => {}}>
   {#each displayItems as item}
-    <div class="circle">
+    <div class="circle list">
       <div class="icon"><Icon icon={item.icon} size={'small'}/></div>
     </div>
+    <div class="window">
+      <div class="circle circle-icon">
+        <div class="icon"><Icon icon={item.icon} size={'small'}/></div>
+      </div>
+      <div class="flex-grow flex-col caption-color">
+        <div class="overflow-label label">{item.label}</div>
+        <div class="overflow-label">{item.value}</div>
+      </div>
+      <div class="button" on:click|preventDefault={() => { alert('Copied: ' + item.value) }}>
+        <IconCopy size={'medium'}/>
+      </div>
+    </div>
   {/each}
 </div>
 
 <style lang="scss">
   .container {
+    position: relative;
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
 
     .circle {
+      position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 1.5rem;
-      height: 1.5rem;
       border: 1px solid var(--theme-bg-focused-color);
       border-radius: 50%;
       cursor: pointer;
 
       .icon {
-        // transform-origin: center center;
-        // transform: scale(.75);
+        transform-origin: center center;
+        transform: scale(.75);
         opacity: .4;
       }
-      &:hover {
-        border-color: var(--theme-bg-focused-border);
-        .icon { opacity: 1; }
+
+      &-icon {
+        margin-right: .75rem;
+        width: 2.25rem;
+        height: 2.25rem;
+
+        .icon {
+          transform: none;
+          opacity: 1;
+        }
       }
     }
-    .circle + .circle { margin-right: .25rem; }
+
+    .list {
+      margin-right: .25rem;
+      width: 1.5rem;
+      height: 1.5rem;
+
+      &:hover {
+        border-color: var(--theme-bg-focused-border);
+        z-index: 5;
+        .icon { opacity: 1; }
+        & + .window {
+          z-index: 4;
+          visibility: visible;
+        }
+        &::after { content: ''; }
+      }
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: -1rem;
+      }
+    }
+
+    .window {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      top: 2.25rem;
+      right: 0;
+      background-color: var(--theme-button-bg-focused);
+      border: 1px solid var(--theme-button-border-enabled);
+      border-radius: .75rem;
+      box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .2);
+      visibility: hidden;
+
+      &:hover {
+        z-index: 4;
+        visibility: visible;
+      }
+    }
+  }
+  .label {
+    font-weight: 500;
+    font-size: .75rem;
+  }
+  .button {
+    margin-left: 1.5rem;
+    opacity: .4;
+    cursor: pointer;
+    &:hover { opacity: 1; }
   }
 </style>
diff --git a/plugins/contact-resources/src/components/icons/Copy.svelte b/plugins/contact-resources/src/components/icons/Copy.svelte
new file mode 100644
index 0000000000..10398075dd
--- /dev/null
+++ b/plugins/contact-resources/src/components/icons/Copy.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M12,0H6.4C4.9,0,3.6,1.2,3.5,2.7C2.2,2.9,1.1,4.1,1.1,5.5v7.7C1.1,14.7,2.4,16,4,16h5.6c1.5,0,2.7-1.2,2.8-2.7 c1.4-0.2,2.4-1.4,2.4-2.8V2.9C14.9,1.3,13.6,0,12,0z M9.6,14.9H4c-0.9,0-1.7-0.8-1.7-1.7V5.5c0-0.8,0.5-1.4,1.2-1.6v6.7 c0,1.6,1.3,2.9,2.9,2.9h4.9C11.2,14.2,10.5,14.9,9.6,14.9z M13.7,10.5c0,0.9-0.8,1.7-1.7,1.7H6.4c-0.9,0-1.7-0.8-1.7-1.7V2.9 c0-0.9,0.8-1.7,1.7-1.7H12c0.9,0,1.7,0.8,1.7,1.7V10.5z"/>
+</svg>