add QR set colors

public/scripts/extensions/quick-reply/html/settings.html

@@ -60,6 +60,13 @@
 					<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">
+						<toolcool-color-picker id="qr--color"></toolcool-color-picker>
+						<span data-i18n="Color">Color</span>
+					</div>
+					<label class="flex-container" id="qr--onlyBorderColorContainer">
+						<input type="checkbox" id="qr--onlyBorderColor"> <span data-i18n="Only apply color to border">Only apply color to border</span>
+					</label>
 				</div>
 				<div id="qr--set-qrList" class="qr--qrList"></div>
 				<div class="qr--set-qrListActions">

public/scripts/extensions/quick-reply/src/QuickReplySet.js

@@ -31,6 +31,8 @@ export class QuickReplySet {
     /**@type {boolean}*/ disableSend = false;
     /**@type {boolean}*/ placeBeforeInput = false;
     /**@type {boolean}*/ injectInput = false;
+    /**@type {string}*/ color = 'transparent';
+    /**@type {boolean}*/ onlyBorderColor = false;
     /**@type {QuickReply[]}*/ qrList = [];
 
     /**@type {number}*/ idIndex = 0;
@@ -66,6 +68,7 @@ export class QuickReplySet {
             const root = document.createElement('div'); {
                 this.dom = root;
                 root.classList.add('qr--buttons');
+                this.updateColor();
                 this.qrList.filter(qr=>!qr.isHidden).forEach(qr=>{
                     root.append(qr.render());
                 });
@@ -80,6 +83,19 @@ export class QuickReplySet {
             this.dom.append(qr.render());
         });
     }
+    updateColor() {
+        if (this.color) {
+            this.dom.style.setProperty('--qr--color', this.color);
+            if (this.onlyBorderColor) {
+                this.dom.classList.add('qr--borderColor');
+            } else {
+                this.dom.classList.remove('qr--borderColor');
+            }
+        } else {
+            this.dom.style.setProperty('--qr--color', 'transparent');
+            this.dom.classList.remove('qr--borderColor');
+        }
+    }
 
 
 
@@ -337,6 +353,8 @@ export class QuickReplySet {
             disableSend: this.disableSend,
             placeBeforeInput: this.placeBeforeInput,
             injectInput: this.injectInput,
+            color: this.color,
+            onlyBorderColor: this.onlyBorderColor,
             qrList: this.qrList,
             idIndex: this.idIndex,
         };

public/scripts/extensions/quick-reply/src/ui/SettingsUi.js

@@ -23,6 +23,8 @@ export class SettingsUi {
     /**@type {HTMLInputElement}*/ disableSend;
     /**@type {HTMLInputElement}*/ placeBeforeInput;
     /**@type {HTMLInputElement}*/ injectInput;
+    /**@type {HTMLInputElement}*/ color;
+    /**@type {HTMLInputElement}*/ onlyBorderColor;
     /**@type {HTMLSelectElement}*/ currentSet;
 
 
@@ -164,6 +166,20 @@ export class SettingsUi {
             qrs.injectInput = this.injectInput.checked;
             qrs.save();
         });
+        this.color = this.dom.querySelector('#qr--color');
+        this.color.addEventListener('change', (evt)=>{
+            const qrs = this.currentQrSet;
+            qrs.color = evt.detail.rgb;
+            qrs.save();
+            this.currentQrSet.updateColor();
+        });
+        this.onlyBorderColor = this.dom.querySelector('#qr--onlyBorderColor');
+        this.onlyBorderColor.addEventListener('click', ()=>{
+            const qrs = this.currentQrSet;
+            qrs.onlyBorderColor = this.onlyBorderColor.checked;
+            qrs.save();
+            this.currentQrSet.updateColor();
+        });
         this.onQrSetChange();
     }
     onQrSetChange() {
@@ -171,6 +187,8 @@ export class SettingsUi {
         this.disableSend.checked = this.currentQrSet.disableSend;
         this.placeBeforeInput.checked = this.currentQrSet.placeBeforeInput;
         this.injectInput.checked = this.currentQrSet.injectInput;
+        this.color.color = this.currentQrSet.color;
+        this.onlyBorderColor.checked = this.currentQrSet.onlyBorderColor;
         this.qrList.innerHTML = '';
         const qrsDom = this.currentQrSet.renderSettings();
         this.qrList.append(qrsDom);

public/scripts/extensions/quick-reply/style.css

@@ -58,6 +58,8 @@
 }
 #qr--bar > .qr--buttons,
 #qr--popout > .qr--body > .qr--buttons {
+  --qr--color: transparent;
+  background-color: var(--qr--color);
   margin: 0;
   padding: 0;
   display: flex;
@@ -66,6 +68,12 @@
   gap: 5px;
   width: 100%;
 }
+#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 > .qr--buttons,
 #qr--popout > .qr--body > .qr--buttons > .qr--buttons {
   display: contents;

public/scripts/extensions/quick-reply/style.less

@@ -65,6 +65,13 @@
 #qr--bar,
 #qr--popout>.qr--body {
     >.qr--buttons {
+        --qr--color: transparent;
+        background-color: var(--qr--color);
+        &.qr--borderColor {
+            background-color: transparent;
+            border-left: 5px solid var(--qr--color);
+            border-right: 5px solid var(--qr--color);
+        }
         margin: 0;
         padding: 0;
         display: flex;