From 809737908cb70b646233d1450289ff586eb02818 Mon Sep 17 00:00:00 2001
From: Zoee Silcock <mrzoee@gmail.com>
Date: Wed, 28 Dec 2016 15:32:57 +0100
Subject: [PATCH] Add a setting for changing the color format shown in the
 color picker

---
 src/css/settings-application.css                   |  3 ++-
 .../settings/ApplicationSettingsController.js      | 14 ++++++++++++++
 src/js/lib/spectrum/spectrum.js                    |  3 ++-
 src/js/utils/UserSettings.js                       |  4 +++-
 src/templates/settings/application.html            |  8 ++++++++
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/css/settings-application.css b/src/css/settings-application.css
index 341f08ff..5d0c9feb 100644
--- a/src/css/settings-application.css
+++ b/src/css/settings-application.css
@@ -54,7 +54,8 @@
   text-align: center;
 }
 
-.grid-width-select {
+.grid-width-select,
+.color-format-select {
   margin: 5px 5px 0 5px;
 }
 
diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js
index 92d6cd57..9c604a4f 100644
--- a/src/js/controller/settings/ApplicationSettingsController.js
+++ b/src/js/controller/settings/ApplicationSettingsController.js
@@ -39,6 +39,16 @@
     maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
     this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
 
+    // Color format
+    var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
+    var colorFormatSelect = document.querySelector('.color-format-select');
+    var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
+    if (selectedColorFormatOption) {
+      selectedColorFormatOption.setAttribute('selected', 'selected');
+    }
+
+    this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
+
     // Layer preview opacity
     var layerOpacityInput = document.querySelector('.layer-opacity-input');
     layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
@@ -63,6 +73,10 @@
     pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
   };
 
+  ns.ApplicationSettingsController.prototype.onColorFormatChange_ = function (evt) {
+    pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
+  };
+
   ns.ApplicationSettingsController.prototype.onSeamlessModeChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
   };
diff --git a/src/js/lib/spectrum/spectrum.js b/src/js/lib/spectrum/spectrum.js
index b60d3894..c0a65e78 100644
--- a/src/js/lib/spectrum/spectrum.js
+++ b/src/js/lib/spectrum/spectrum.js
@@ -671,7 +671,8 @@
 
             // Update the text entry input as it changes happen
             if (opts.showInput) {
-                textInput.val(realColor.toString(format));
+                var displayFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
+                textInput.val(realColor.toString(displayFormat));
             }
 
             if (opts.showPalette) {
diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js
index 0e79be1a..1bcb995c 100644
--- a/src/js/utils/UserSettings.js
+++ b/src/js/utils/UserSettings.js
@@ -17,6 +17,7 @@
     EXPORT_TAB: 'EXPORT_TAB',
     PEN_SIZE : 'PEN_SIZE',
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
+    COLOR_FORMAT: 'COLOR_FORMAT',
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'MAX_FPS' : 24,
@@ -39,7 +40,8 @@
         maintainRatio : true,
         resizeContent : false,
         origin : 'TOPLEFT'
-      }
+      },
+      COLOR_FORMAT: 'hex',
     },
 
     /**
diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html
index e9189c38..1318791c 100644
--- a/src/templates/settings/application.html
+++ b/src/templates/settings/application.html
@@ -58,6 +58,14 @@
         <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
       </div>
 
+      <div class="settings-item">
+        <label for="color-format">Color format</label>
+        <select id="color-format" class="color-format-select">
+          <option value="hex">Hex</option>
+          <option value="rgb">RGB</option>
+        </select>
+      </div>
+
       <input type="submit" class="button button-primary" value="Apply settings" />
     </div>
   </form>