Feature : color palette

- Fixed : manager UI is redrawn after save
- the Selected palette is saved as a user preference
- default background is now the dark one
- the selected palette is not reset after closing palette manager

src/css/toolbox-palettes-list.css

@@ -1,6 +1,12 @@
 .palettes-list-container {
 }
 
+.palettes-list-select {
+  float:right;
+  max-width:90px;
+  margin-top: 3px;
+}
+
 .palettes-title {
   background-size: 22px;
   background-repeat: no-repeat;

src/js/Constants.js

@@ -19,6 +19,8 @@ var Constants = {
   DEFAULT_PEN_COLOR : '#000000',
   TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)',
 
+  NO_PALETTE_ID : '__no-palette',
+
   // Used for Spectrum input
   PREFERRED_COLOR_FORMAT : 'rgb',
 

src/js/controller/PalettesListController.js

@@ -1,8 +1,6 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
-  var NO_PALETTE_ID = '__no-palette';
-
   ns.PalettesListController = function () {
 
   };
@@ -10,8 +8,8 @@
   ns.PalettesListController.prototype.init = function () {
     this.paletteColorTemplate_ = pskl.utils.Template.get('palette-color-template');
     this.colorListContainer_ = document.querySelector('.palettes-list-colors');
-    this.colorPaletteSelect_ = document.querySelector('.palette-picker');
-    this.paletteListOptGroup_ = document.querySelector('.palette-picker-group');
+    this.colorPaletteSelect_ = document.querySelector('.palettes-list-select');
+    this.paletteListOptGroup_ = document.querySelector('.palettes-list-select-group');
 
     this.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
     this.colorListContainer_.addEventListener('mouseup', this.onColorContainerMouseup.bind(this));
@@ -22,12 +20,13 @@
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'secondary'));
 
     this.fillPaletteList();
+    this.selectPaletteFromUserSettings();
     this.fillColorListContainer();
   };
 
   ns.PalettesListController.prototype.fillPaletteList = function () {
     var palettes = [{
-      id : NO_PALETTE_ID,
+      id : Constants.NO_PALETTE_ID,
       name : 'No palette'
     }];
     palettes = palettes.concat(this.retrievePalettes());
@@ -58,17 +57,28 @@
     return palette;
   };
 
+  ns.PalettesListController.prototype.selectPalette = function (paletteId) {
+    this.colorPaletteSelect_.value = paletteId;
+  };
+
+  ns.PalettesListController.prototype.selectPaletteFromUserSettings = function () {
+    this.selectPalette(pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE));
+  };
+
   ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
     var paletteId = this.colorPaletteSelect_.value;
     if (paletteId === '__manage-palettes') {
-      console.log('DISPLAY DIALOG');
       $.publish(Events.DIALOG_DISPLAY, 'manage-palettes');
-      this.colorPaletteSelect_.value = NO_PALETTE_ID;
+      this.selectPaletteFromUserSettings();
+    } else {
+      pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
     }
-    
+
     this.fillColorListContainer();
   };
 
+
+
   ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
     event.preventDefault();
   };
@@ -109,6 +119,8 @@
 
   ns.PalettesListController.prototype.onPaletteListUpdated = function () {
     this.fillPaletteList();
+    this.selectPaletteFromUserSettings();
+    this.fillColorListContainer();
   };
 
   ns.PalettesListController.prototype.getPaletteById = function (paletteId, palettes) {

src/js/controller/dialogs/PaletteManagerController.js

@@ -173,7 +173,7 @@
     } else if (target.classList.contains('palette-manager-palette-button')) {
       var action = target.dataset.action;
       if (action === 'save') {
-        this.savePalette(this.getSelectedPalette().id);
+        this.savePaletteAndRedraw(this.getSelectedPalette().id);
       } else if (action === 'revert') {
         this.revertChanges();
       } else if (action === 'delete') {

src/js/utils/UserSettings.js

@@ -4,10 +4,12 @@
   ns.UserSettings = {
     GRID_WIDTH : 'GRID_WIDTH',
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
+    SELECTED_PALETTE : 'SELECTED_PALETTE',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
-      'CANVAS_BACKGROUND' : 'medium-canvas-background'
+      'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
+      'SELECTED_PALETTE' : Constants.NO_PALETTE_ID
     },
 
     /**

src/js/utils/core.js

@@ -37,7 +37,7 @@ if (typeof Function.prototype.bind !== "function") {
     if (r > 255 || g > 255 || b > 255) {
       throw "Invalid color component";
     }
-    
+
     return ((r << 16) | (g << 8) | b).toString(16);
   };
 

src/templates/palettes-list.html

@@ -1,9 +1,8 @@
 <div class="toolbox-container palettes-list-container">
   <h3 class="toolbox-title palettes-title" style="overflow:hidden">
     <span style="line-height:24px ">Palettes</span>
-    <select class="palette-picker" style="float:right; max-width:90px;">
-      <optgroup class="palette-picker-group" label="Available palettes">
-        <option value="__no-palette">No palette</option>
+    <select class="palettes-list-select">
+      <optgroup class="palettes-list-select-group" label="Available palettes">
       </optgroup>
       <optgroup label="Admin">
         <option value="__manage-palettes">Create and Manage palettes</option>
@@ -19,7 +18,3 @@
     <div data-color="{{color}}" style="background:{{color}}"></div>
   </div>
 </script>
-
-<script type="text/template" id="no-palette-selected-template">
-  <div class="palette-not-selected">No palette selected</div>
-</script>