starting palette implementation using creation wizard

src/css/dialogs-create-palette.css

@@ -0,0 +1,21 @@
+#dialog-container.create-palette {
+  width: 500px;
+  height: 200px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-left: -250px;
+}
+
+.show #dialog-container.create-palette {
+  margin-top: -100px;
+}
+
+.create-palette-method-item {
+  line-height : 24px;
+}
+
+.create-palette-method-item label{
+  margin-top: 3px;
+  margin-left: 5px;
+}

src/css/toolbox-palettes-list.css

@@ -1,6 +1,5 @@
 .palettes-list-select {
-  float:right;
+  max-width:120px;
-  max-width:90px;
   margin-top: 3px;
 }
 

src/index.html

@@ -67,7 +67,7 @@
 
   <div id="dialog-container-wrapper">
     <div id="dialog-container">
-      <iframe src="templates/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+      <iframe src="templates/dialogs/create-palette.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
       <iframe src="templates/dialogs/import-image.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
       <iframe src="templates/dialogs/browse-local.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
     </div>

src/js/controller/PalettesListController.js

@@ -20,11 +20,12 @@
     this.paletteColorTemplate_ = pskl.utils.Template.get('palette-color-template');
     this.colorListContainer_ = document.querySelector('.palettes-list-colors');
     this.colorPaletteSelect_ = document.querySelector('.palettes-list-select');
-    this.paletteListOptGroup_ = document.querySelector('.palettes-list-select-group');
+    this.createPaletteButton_ = document.querySelector('.create-palette-button');
 
     this.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
     this.colorListContainer_.addEventListener('mouseup', this.onColorContainerMouseup.bind(this));
     this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this));
+    this.createPaletteButton_.addEventListener('click', this.onCreatePaletteClick_.bind(this));
 
     $.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
     $.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
@@ -38,15 +39,15 @@
 
   ns.PalettesListController.prototype.fillPaletteList = function () {
     var palettes = [{
-      id : Constants.NO_PALETTE_ID,
+      id : Constants.CURRENT_COLORS_PALETTE_ID,
-      name : 'No palette'
+      name : 'Current colors'
     }];
     palettes = palettes.concat(this.retrievePalettes());
 
     var html = palettes.map(function (palette) {
       return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>', palette);
     }).join('');
-    this.paletteListOptGroup_.innerHTML = html;
+    this.colorPaletteSelect_.innerHTML = html;
   };
 
   ns.PalettesListController.prototype.fillColorListContainer = function () {
@@ -96,17 +97,13 @@
 
   ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
     var paletteId = this.colorPaletteSelect_.value;
-    if (paletteId === Constants.MANAGE_PALETTE_ID) {
+    pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
-      $.publish(Events.DIALOG_DISPLAY, 'manage-palettes');
-      this.selectPaletteFromUserSettings();
-    } else {
-      pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
-    }
-
     this.fillColorListContainer();
   };
 
-
+  ns.PalettesListController.prototype.onCreatePaletteClick_ = function (evt) {
+    $.publish(Events.DIALOG_DISPLAY, 'create-palette');
+  };
 
   ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
     event.preventDefault();

src/js/controller/dialogs/CreatePaletteController.js

@@ -0,0 +1,12 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+
+  ns.CreatePaletteController = function (piskelController) {
+  };
+
+  pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
+
+  ns.CreatePaletteController.prototype.init = function () {
+    this.superclass.init.call(this);
+  };
+})();

src/js/controller/dialogs/DialogsController.js

@@ -6,6 +6,10 @@
       template : 'templates/dialogs/manage-palettes.html',
       controller : ns.PaletteManagerController
     },
+    'create-palette' : {
+      template : 'templates/dialogs/create-palette.html',
+      controller : ns.CreatePaletteController
+    },
     'browse-local' : {
       template : 'templates/dialogs/browse-local.html',
       controller : ns.BrowseLocalController

src/piskel-script-list.js

@@ -100,9 +100,11 @@
   // Dialogs sub-controllers
   "js/controller/dialogs/AbstractDialogController.js",
   "js/controller/dialogs/PaletteManagerController.js",
+  "js/controller/dialogs/CreatePaletteController.js",
   "js/controller/dialogs/ImportImageController.js",
   "js/controller/dialogs/BrowseLocalController.js",
 
+
   // Dialogs controller
   "js/controller/dialogs/DialogsController.js",
 

src/piskel-style-list.js

@@ -15,6 +15,7 @@
   "css/dialogs-import-image.css",
   "css/dialogs-manage-palettes.css",
   "css/dialogs-browse-local.css",
+  "css/dialogs-create-palette.css",
   "css/toolbox.css",
   "css/toolbox-layers-list.css",
   "css/toolbox-palettes-list.css",

src/templates/dialogs/create-palette.html

@@ -0,0 +1,30 @@
+<div class="dialog-wrapper">
+  <h3 class="dialog-head">
+    Create palette
+    <span class="palette-manager-close dialog-close">X</span>
+  </h3>
+  <div style="padding:10px 20px; font-size:1.3em">
+    Select your creation method : 
+    <form action="">
+      <ul style="margin:10px 0" class="create-palette-method-list">
+        <li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-manual" value="manual" checked="checked"><label for="palette-creation-mode-manual">Manual</label></li>
+        <li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-import" value="import"><label for="palette-creation-mode-import">Import from existing file or image</label><br></li>
+        <li class="create-palette-method-item"><input type="radio" name="palette-creation-mode" id="palette-creation-mode-clone" value="clone"><label for="palette-creation-mode-clone">Clone existing palette</label>
+          <select class="palettes-list-select" style="margin:3px 0;">
+            <option value="current-colors">Current colors</option>
+          </select>
+        </li>
+      </ul>
+      <button class="button button-primary" style="float:right">Continue</button>
+      <button class="button" style="float:right">Cancel</button>
+    </form>
+  </div>
+  <script type="text/template" id="local-storage-item-template">
+    <tr class="local-piskel-item">
+      <td class="local-piskel-name">{{name}}</td>
+      <td class="local-piskel-save-date">{{date}}</td>
+      <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
+      <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
+    </tr>
+  </script>
+</div>

src/templates/palettes-list.html

@@ -1,13 +1,19 @@
 <div class="toolbox-container palettes-list-container">
-  <h3 class="toolbox-title palettes-title" style="overflow:hidden">
+  <h3 class="toolbox-title palettes-title" 
-    <span style="line-height:24px ">Palettes</span>
+      style="overflow: hidden;height: 36px;box-sizing: border-box;border-bottom: 1px solid #444;">
-    <select class="palettes-list-select">
+    <span style="line-height:20px ">Palettes</span>
-      <option value="__current-colors">Current colors</option>
+    <div 
-      <option value="__manage-palettes">Create custom palettes</option>
+      class="button button-primary create-palette-button" 
-      <optgroup class="palettes-list-select-group" label="Custom palettes">
+      title="Create new palette"
-      </optgroup>
+      rel="tooltip"
-    </select>
+      data-placement="top"
+      style="width:20px; height:20px; float:right; font-size:1.1em">+</div>
   </h3>
+  <div 
+    class="palettes-actions" 
+    style="background-color:#3f3f3f; border-bottom:#222; height:24px; padding:0 3px;">
+    <select class="palettes-list-select" style="margin:3px 0;"></select>
+  </div>
   <div class="palettes-list-colors"></div>
   <script type="text/template" id="palette-color-template">
     <div class="palettes-list-color" data-color="{{color}}" title="{{color}}">