From cc3186a683c1c347891d8f116d5f98af9aa29dcf Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Thu, 17 Nov 2022 11:01:10 +0530
Subject: [PATCH] Highlight the Save settings button when pressed

---
 ui/index.html             | 8 ++++----
 ui/media/css/main.css     | 3 +++
 ui/media/js/dnd.js        | 8 ++++----
 ui/media/js/parameters.js | 3 +++
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 81ab64be..9b04c9d0 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
     <link rel="stylesheet" href="/media/css/fonts.css?v=1">
     <link rel="stylesheet" href="/media/css/themes.css?v=3">
-    <link rel="stylesheet" href="/media/css/main.css?v=17">
+    <link rel="stylesheet" href="/media/css/main.css?v=18">
     <link rel="stylesheet" href="/media/css/auto-save.css?v=5">
     <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=4">
     <link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
@@ -328,15 +328,15 @@
 </div>
 </body>
 
-<script src="media/js/parameters.js?v=9"></script>
-<script src="media/js/plugins.js?v=1"></script>
 <script src="media/js/utils.js?v=6"></script>
+<script src="media/js/parameters.js?v=10"></script>
+<script src="media/js/plugins.js?v=1"></script>
 <script src="media/js/inpainting-editor.js?v=1"></script>
 <script src="media/js/image-modifiers.js?v=6"></script>
 <script src="media/js/auto-save.js?v=8"></script>
 <script src="media/js/main.js?v=23"></script>
 <script src="media/js/themes.js?v=4"></script>
-<script src="media/js/dnd.js?v=9"></script>
+<script src="media/js/dnd.js?v=10"></script>
 <script>
 async function init() {
     await initSettings()
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 4b09da6b..8b4feabb 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -898,6 +898,9 @@ input::file-selector-button {
 i.active {
     background: var(--accent-color);
 }
+.primaryButton.active {
+    background: hsl(var(--accent-hue), 100%, 50%);
+}
 #system-info {
     max-width: 800px;
     font-size: 10pt;
diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index f9914264..a9a93b02 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -432,8 +432,8 @@ function checkWriteToClipboardPermission (result) {
             event.stopPropagation()
             // Add css class 'active'
             copyIcon.classList.add('active')
-            // In 1000 ms remove the 'active' class
-            asyncDelay(1000).then(() => copyIcon.classList.remove('active'))
+            // In 350 ms remove the 'active' class
+            asyncDelay(350).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)) {
@@ -452,8 +452,8 @@ function checkWriteToClipboardPermission (result) {
             event.stopPropagation()
             // Add css class 'active'
             pasteIcon.classList.add('active')
-            // In 1000 ms remove the 'active' class
-            asyncDelay(1000).then(() => pasteIcon.classList.remove('active'))
+            // In 350 ms remove the 'active' class
+            asyncDelay(350).then(() => pasteIcon.classList.remove('active'))
             pasteFromClipboard()
         })
         resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)
diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js
index 77156dde..1aa87bf8 100644
--- a/ui/media/js/parameters.js
+++ b/ui/media/js/parameters.js
@@ -327,4 +327,7 @@ saveSettingsBtn.addEventListener('click', function() {
 		'update_branch': updateBranch,
 		'ui_open_browser_on_start': uiOpenBrowserOnStartField.checked
     })
+
+	saveSettingsBtn.classList.add('active')
+	asyncDelay(300).then(() => saveSettingsBtn.classList.remove('active'))
 })