From ddce6c4e8969ad5a69feb582cc6ab9a59274a07b Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Sun, 14 Jul 2024 14:13:57 -0400
Subject: [PATCH] clear QR Set color and bg adjustments

---
 .../extensions/quick-reply/html/settings.html |  3 +-
 .../quick-reply/src/QuickReplySet.js          |  4 ++-
 .../quick-reply/src/ui/SettingsUi.js          |  7 ++++
 .../scripts/extensions/quick-reply/style.css  | 34 ++++++++++++++-----
 .../scripts/extensions/quick-reply/style.less | 34 ++++++++++++++-----
 5 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/public/scripts/extensions/quick-reply/html/settings.html b/public/scripts/extensions/quick-reply/html/settings.html
index 7d186478d..793841bc8 100644
--- a/public/scripts/extensions/quick-reply/html/settings.html
+++ b/public/scripts/extensions/quick-reply/html/settings.html
@@ -60,8 +60,9 @@
 					<label class="flex-container" id="qr--injectInputContainer">
 						<input type="checkbox" id="qr--injectInput"> <span><span data-i18n="Inject user input automatically">Inject user input automatically</span> <small><span data-i18n="(if disabled, use ">(if disabled, use</span><code>{{input}}</code> <span data-i18n="macro for manual injection)">macro for manual injection)</span></small></span>
 					</label>
-					<div class="flex-container">
+					<div class="flex-container alignItemsCenter">
 						<toolcool-color-picker id="qr--color"></toolcool-color-picker>
+						<div class="menu_button" id="qr--colorClear">Clear</div>
 						<span data-i18n="Color">Color</span>
 					</div>
 					<label class="flex-container" id="qr--onlyBorderColorContainer">
diff --git a/public/scripts/extensions/quick-reply/src/QuickReplySet.js b/public/scripts/extensions/quick-reply/src/QuickReplySet.js
index 3a3d47958..3a9defc4a 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReplySet.js
+++ b/public/scripts/extensions/quick-reply/src/QuickReplySet.js
@@ -84,8 +84,9 @@ export class QuickReplySet {
         });
     }
     updateColor() {
-        if (this.color) {
+        if (this.color && this.color != 'transparent') {
             this.dom.style.setProperty('--qr--color', this.color);
+            this.dom.classList.add('qr--color');
             if (this.onlyBorderColor) {
                 this.dom.classList.add('qr--borderColor');
             } else {
@@ -93,6 +94,7 @@ export class QuickReplySet {
             }
         } else {
             this.dom.style.setProperty('--qr--color', 'transparent');
+            this.dom.classList.remove('qr--color');
             this.dom.classList.remove('qr--borderColor');
         }
     }
diff --git a/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js b/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
index e16cf3ed4..eb6f61940 100644
--- a/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
+++ b/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
@@ -173,6 +173,13 @@ export class SettingsUi {
             qrs.save();
             this.currentQrSet.updateColor();
         });
+        this.dom.querySelector('#qr--colorClear').addEventListener('click', (evt)=>{
+            const qrs = this.currentQrSet;
+            this.color.color = 'transparent';
+            qrs.color = 'transparent';
+            qrs.save();
+            this.currentQrSet.updateColor();
+        });
         this.onlyBorderColor = this.dom.querySelector('#qr--onlyBorderColor');
         this.onlyBorderColor.addEventListener('click', ()=>{
             const qrs = this.currentQrSet;
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index 98b267bea..579a16fe6 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -59,7 +59,6 @@
 #qr--bar > .qr--buttons,
 #qr--popout > .qr--body > .qr--buttons {
   --qr--color: transparent;
-  background-color: var(--qr--color);
   margin: 0;
   padding: 0;
   display: flex;
@@ -68,21 +67,40 @@
   gap: 5px;
   width: 100%;
 }
+#qr--bar > .qr--buttons.qr--color,
+#qr--popout > .qr--body > .qr--buttons.qr--color {
+  background-color: var(--qr--color);
+}
 #qr--bar > .qr--buttons.qr--borderColor,
 #qr--popout > .qr--body > .qr--buttons.qr--borderColor {
   background-color: transparent;
   border-left: 5px solid var(--qr--color);
   border-right: 5px solid var(--qr--color);
 }
+#qr--bar > .qr--buttons:has(.qr--buttons.qr--color),
+#qr--popout > .qr--body > .qr--buttons:has(.qr--buttons.qr--color) {
+  margin: 5px;
+}
 #qr--bar > .qr--buttons > .qr--buttons,
 #qr--popout > .qr--body > .qr--buttons > .qr--buttons {
   display: contents;
-  background-color: transparent;
 }
-#qr--bar > .qr--buttons > .qr--buttons:before,
-#qr--popout > .qr--body > .qr--buttons > .qr--buttons:before,
-#qr--bar > .qr--buttons > .qr--buttons:after,
-#qr--popout > .qr--body > .qr--buttons > .qr--buttons:after {
+#qr--bar > .qr--buttons > .qr--buttons.qr--color .qr--button:before,
+#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color .qr--button:before {
+  content: '';
+  background-color: var(--qr--color);
+  position: absolute;
+  inset: -5px;
+  z-index: -1;
+}
+#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor .qr--button:before,
+#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor .qr--button:before {
+  display: none;
+}
+#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:before,
+#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:before,
+#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:after,
+#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:after {
   content: '';
   width: 5px;
   background-color: var(--qr--color);
@@ -100,11 +118,11 @@
   align-items: center;
   justify-content: center;
   text-align: center;
+  position: relative;
 }
 #qr--bar > .qr--buttons .qr--button:hover,
 #qr--popout > .qr--body > .qr--buttons .qr--button:hover {
-  opacity: 1;
-  filter: brightness(1.2);
+  background-color: #4d4d4d;
 }
 #qr--bar > .qr--buttons .qr--button .qr--hidden,
 #qr--popout > .qr--body > .qr--buttons .qr--button .qr--hidden {
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index d21c6bb3d..42ea579ef 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/public/scripts/extensions/quick-reply/style.less
@@ -66,12 +66,17 @@
 #qr--popout>.qr--body {
     >.qr--buttons {
         --qr--color: transparent;
-        background-color: var(--qr--color);
+        &.qr--color {
+            background-color: var(--qr--color);
+        }
         &.qr--borderColor {
             background-color: transparent;
             border-left: 5px solid var(--qr--color);
             border-right: 5px solid var(--qr--color);
         }
+        &:has(.qr--buttons.qr--color) {
+            margin: 5px;
+        }
         margin: 0;
         padding: 0;
         display: flex;
@@ -82,11 +87,24 @@
 
         >.qr--buttons {
             display: contents;
-            background-color: transparent;
-            &:before, &:after {
-                content: '';
-                width: 5px;
-                background-color: var(--qr--color);
+            &.qr--color {
+                .qr--button:before {
+                    content: '';
+                    background-color: var(--qr--color);
+                    position: absolute;
+                    inset: -5px;
+                    z-index: -1;
+                }
+                &.qr--borderColor {
+                    .qr--button:before {
+                        display: none;
+                    }
+                    &:before, &:after {
+                        content: '';
+                        width: 5px;
+                        background-color: var(--qr--color);
+                    }
+                }
             }
         }
 
@@ -103,10 +121,10 @@
             align-items: center;
             justify-content: center;
             text-align: center;
+            position: relative;
 
             &:hover {
-                opacity: 1;
-                filter: brightness(1.2);
+                background-color: rgb(30% 30% 30%);
             }
 
             .qr--hidden {