From 8784a45da68bdfa9789ef92cb637bb243377caa1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 7 Jul 2022 18:45:05 +0200
Subject: [PATCH] feat: add hover to `Copy` component

---
 src/lib/components/copy.svelte                  | 12 +++++++-----
 src/lib/elements/table/cellText.svelte          |  7 ++++++-
 src/routes/console/[project]/users/index.svelte |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 0841f7792..e0cb9b248 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -2,14 +2,15 @@
     import { addNotification } from '$lib/stores/notifications';
 
     export let value: string;
+    let text = 'Copy ID';
 
     const copy = async () => {
         try {
             await navigator.clipboard.writeText(value);
-            addNotification({
-                message: 'Copied to clipboard.',
-                type: 'success'
-            });
+            text = 'Copied ID';
+            setTimeout(() => {
+                text = 'Copy ID';
+            }, 2000);
         } catch (error) {
             addNotification({
                 message: error.message,
@@ -19,6 +20,7 @@
     };
 </script>
 
-<span on:click|preventDefault={copy}>
+<span class="tooltip" on:mouseenter={() => (text = 'Copy ID')} on:click|preventDefault={copy}>
     <slot />
+    <span class="tooltip-popup is-block-end" role="tooltip"> {text} </span>
 </span>
diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
index bfc7c564e..1c2d567ab 100644
--- a/src/lib/elements/table/cellText.svelte
+++ b/src/lib/elements/table/cellText.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
     export let title: string;
+    export let showOverflow = false;
 </script>
 
-<div class="table-col is-main" data-title={title} role="cell">
+<div
+    class="table-col is-main"
+    class:u-overflow-visible={showOverflow}
+    data-title={title}
+    role="cell">
     <span class="text"><slot /></span>
 </div>
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index 3a25b529b..8c73294c4 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -94,7 +94,7 @@
                                 <Pill danger>Blocked</Pill>
                             {/if}
                         </TableCellText>
-                        <TableCellText title="ID">
+                        <TableCellText showOverflow title="ID">
                             <Copy value={user.$id}>
                                 <Pill button><i class="icon-duplicate" />User ID</Pill>
                             </Copy>