From e561e4de0b11ba75518b0d521647c6dfbc3e49dc Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Mon, 14 Nov 2022 01:58:24 +0100
Subject: [PATCH] Visual feedback for the copy and paste icons

---
 ui/media/css/main.css | 4 ++++
 ui/media/js/dnd.js    | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 2c1b1473..1e726709 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -887,3 +887,7 @@ input::file-selector-button {
     margin-bottom: 15px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
 }
+
+i.active {
+    background: var(--accent-color);
+}
diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index ca6ec2f4..1a1c115d 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -430,6 +430,10 @@ function checkWriteToClipboardPermission (result) {
         copyIcon.innerHTML = `<span class="simple-tooltip right">Copy Image Settings</span>`
         copyIcon.addEventListener('click', (event) => {
             event.stopPropagation()
+	    // Add css class 'active'
+	    copyIcon.classList.add('active')
+	    // In 1000 ms remove the 'active' class
+	    asyncDelay(1000).then(() => copyIcon.classList.remove('active'))
             const uiState = readUI()
             TASK_REQ_NO_EXPORT.forEach((key) => delete uiState.reqBody[key])
             if (uiState.reqBody.init_image && !IMAGE_REGEX.test(uiState.reqBody.init_image)) {
@@ -446,6 +450,10 @@ function checkWriteToClipboardPermission (result) {
         pasteIcon.innerHTML = `<span class="simple-tooltip right">Paste Image Settings</span>`
         pasteIcon.addEventListener('click', (event) => {
             event.stopPropagation()
+	    // Add css class 'active'
+	    pasteIcon.classList.add('active')
+	    // In 1000 ms remove the 'active' class
+	    asyncDelay(1000).then(() => pasteIcon.classList.remove('active'))
             pasteFromClipboard()
         })
         resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)