Merge pull request 'enter in color picker now sets the color' (#14) from fix-color-picker into main

Reviewed-on: #14

src/main/resources/META-INF/resources/vendor/color-picker.js

@@ -63,6 +63,7 @@ class ColorPicker extends HTMLElement {
 				.rgba-display-wrapper {
 					height: 100%;
 					padding: 1.25em;
+					text-align: center;
 				}
 				#rgba-display {
 					font-family: "Courier New", monospace;
@@ -72,11 +73,11 @@ class ColorPicker extends HTMLElement {
 					display: inline;
 					border: none;
 					border-radius: 0.2em;
-					margin-bottom: 2.5em;
 					letter-spacing: 0.1em;
-					width: 8em;
+					width: 5em;
 					max-width: 100%;
 					font-variant-numeric: tabular-nums;
+					text-align: center;
 				}
 				input[type=range] {
 					width: 100%;
@@ -132,13 +133,17 @@ class ColorPicker extends HTMLElement {
         this.lightnessInput = this.shadowRoot.getElementById( 'lightness' );
         this.colorPreview = this.shadowRoot.getElementById( 'color-preview' );
         this.rgbaDisplay = this.shadowRoot.getElementById( 'rgba-display' );
+        this.rgbaDisplay.onkeyup = (event) => {
+            if(event.keyCode === 13) {
+                this.setColor( this.rgbaDisplay.value );
+            }
+        }
 
         // Create a temporary canvas to read color values.
         let tempCanvas = document.createElement( 'canvas' );
         tempCanvas.height = 1;
         tempCanvas.width = 1;
         this.tempCanvasCTX = tempCanvas.getContext( '2d', { willReadFrequently: true } );
-
     }
 
 

src/main/resources/templates/pub/index.html

@@ -160,7 +160,11 @@
                 <option value="wooden">Wooden</option>
             </select>
             <br/>
-            <color-picker value="#cd72fe" id="themeColor"></color-picker><br/>
+            <color-picker id="themeColor"></color-picker><br/>
+            <button style="margin-bottom: 20px" onclick="saveDice()">Save</button><button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">?</button>
+            <div popover id="save-dice-hint" class="tooltip">
+                This saves your current theme and theme color for current Name
+            </div>
         </div><br/>
         <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
         <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
@@ -219,12 +223,15 @@
         }
     }
 
+    function saveDice() {
+        localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
+        localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
+    }
+
     let coll = document.getElementsByClassName("collapsible");
 
     for (let i = 0; i < coll.length; i++) {
         coll[i].addEventListener("click", function () {
-            localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
-            localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
             const content = this.nextElementSibling;
             if (content.style.display === "block") {
                 content.style.display = "none";