From b2cb53fe5656074c1d75c4e224e5e7e03504b2f7 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 14 Jun 2020 17:34:01 +0200
Subject: [PATCH] Add copyable text

---
 assets/js/app.js           |  1 +
 assets/js/copyable_text.js | 12 ++++++++++++
 assets/sass/layout.scss    | 34 +++++++++++++++++++++++++++++++++-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/copyable_text.js

diff --git a/assets/js/app.js b/assets/js/app.js
index ce75569..2c4466c 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1,6 +1,7 @@
 import './external_links';
 import './message_icons';
 import './forms';
+import './copyable_text';
 
 import '../sass/app.scss';
 
diff --git a/assets/js/copyable_text.js b/assets/js/copyable_text.js
new file mode 100644
index 0000000..6501a1a
--- /dev/null
+++ b/assets/js/copyable_text.js
@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.copyable-text').forEach(el => {
+        const contentEl = el.querySelector('.content');
+        contentEl.addEventListener('click', () => {
+            window.getSelection().selectAllChildren(contentEl);
+        });
+        el.querySelector('.copy-button').addEventListener('click', () => {
+            window.getSelection().selectAllChildren(contentEl);
+            document.execCommand('copy');
+        });
+    });
+});
\ No newline at end of file
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 3e0d431..b1b1b95 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -540,4 +540,36 @@ button, .button {
 			margin: 8px;
 		}
 	}
-}
\ No newline at end of file
+}
+
+.copyable-text {
+	display: flex;
+	flex-direction: row;
+	margin: 8px;
+
+	background-color: darken($backgroundColor, 2%);
+	border-radius: 5px;
+	overflow: hidden;
+
+	.title {
+		padding: 8px;
+	}
+
+	.content {
+		flex-grow: 1;
+		overflow: hidden;
+		white-space: nowrap;
+		padding: 8px;
+	}
+
+	.copy-button {
+		margin: 0;
+		padding: 0;
+		border-radius: 0;
+
+		.feather {
+			--icon-size: 20px;
+			margin: 8px;
+		}
+	}
+}