From 81a62be38d4d74d665a9347b1b5c0f09a61d2b8a Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Wed, 2 Mar 2022 11:36:23 +0100
Subject: [PATCH] feat(front/CopyableText): add simple button mode

---
 .../views/components/CopyableText.svelte      | 68 +++++++++++++------
 1 file changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/assets/views/components/CopyableText.svelte b/src/assets/views/components/CopyableText.svelte
index 9b6ee3b..ca621c3 100644
--- a/src/assets/views/components/CopyableText.svelte
+++ b/src/assets/views/components/CopyableText.svelte
@@ -2,8 +2,9 @@
     import Icon from "../utils/Icon.svelte";
     import { fade } from "svelte/transition";
 
-    export let title: string;
+    export let title: string | undefined = undefined;
     export let content: string;
+    export let buttonMode: boolean = false;
 
     let contentNode: HTMLElement;
     let copiedOverlay: HTMLElement;
@@ -68,28 +69,53 @@
 				margin: 8px;
 			}
 		}
-
-        .copied-overlay {
-			position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-			height: 100%;
-            padding: 8px;
-
-            text-align: center;
-            background-color: var(--success);
-        }
 	}
+
+    .button-mode-button {
+		position: relative;
+    }
+
+	.copied-overlay {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		padding: 8px;
+
+		text-align: center;
+		background-color: var(--success);
+	}
+
+    .content.hidden {
+        pointer-events: none;
+        overflow: hidden;
+        width: 0;
+        height: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+    }
 </style>
 
 
-<div class="copyable-text panel">
-    <div class="title">{title}</div>
-    <div class="content" bind:this={contentNode} on:click={selectAll}>{content}</div>
-    <button class="bold copy-button" on:click={copy}><Icon name="copy"/></button>
+{#if buttonMode}
+    <div class="content hidden" bind:this={contentNode} on:click={selectAll}>{content}</div>
+    <button class="bold button-mode-button" on:click={copy} title="{content}">
+        <Icon name="copy"/>
 
-    {#if showCopiedOverlay}
-        <div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}>Copied!</div>
-    {/if}
-</div>
+        {#if showCopiedOverlay}
+            <div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}><Icon name="check"/></div>
+        {/if}
+    </button>
+{:else}
+    <div class="copyable-text panel">
+        <div class="title">{title}</div>
+        <div class="content" bind:this={contentNode} on:click={selectAll}>{content}</div>
+        <button class="bold copy-button" on:click={copy}><Icon name="copy"/></button>
+
+        {#if showCopiedOverlay}
+            <div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}>Copied!</div>
+        {/if}
+    </div>
+{/if}