From 88fe8dcbe00ae5e54c44a0f124f849f870f45a54 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 23 Nov 2023 13:32:44 +1100
Subject: [PATCH] Show changes on popout button

---
 app/webpacker/controllers/popout_controller.js | 7 +++++++
 app/webpacker/css/admin/products_v3.scss       | 6 +++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/controllers/popout_controller.js b/app/webpacker/controllers/popout_controller.js
index 71ad3c0dfc..0e430ce1a9 100644
--- a/app/webpacker/controllers/popout_controller.js
+++ b/app/webpacker/controllers/popout_controller.js
@@ -42,7 +42,10 @@ export default class PopoutController extends Controller {
   close() {
     // Close if not already closed
     if (this.dialogTarget.style.display != "none") {
+      // Update button to represent any changes
       this.buttonTarget.innerText = this.#displayValue();
+      this.buttonTarget.classList.toggle("changed", this.#isChanged());
+
       this.dialogTarget.style.display = "none";
     }
   }
@@ -78,6 +81,10 @@ export default class PopoutController extends Controller {
     return values.filter(Boolean).join();
   }
 
+  #isChanged() {
+    return this.#enabledDisplayElements().some((element) => element.classList.contains("changed"));
+  }
+
   #enabledDisplayElements() {
     return this.displayElements.filter((element) => !element.disabled);
   }
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index 99f9612c20..937dcd2c11 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -300,9 +300,13 @@
           color: $color-txt-text;
           position: relative;
         }
+
+        &.changed {
+          border-color: $color-txt-changed-brd;
+        }
       }
 
-      &:hover:not(:active):not(:focus) {
+      &:hover:not(:active):not(:focus):not(.changed) {
         border-color: transparent;
       }