Merge pull request #599 from zoeesilcock/563-color-format-preference

Add a setting for changing the color format shown in the color picker

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;
 }
 

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);
   };

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) {

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',
     },
 
     /**

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>