Homogeneize layout, drop palette

src/css/dialogs-create-palette.css

@@ -65,8 +65,11 @@
 }
 
 .colors-list {
-  overflow : auto;
-  width : 280px;
+  overflow: auto;
+  width: 280px;
+  box-sizing: border-box;
+  height: 100%;
+  padding-bottom: 10px;
 }
 
 .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{

src/css/icons.css

@@ -5,10 +5,20 @@
   background-position: 50%;
 }
 
-.action-icon.edit-icon {
+.edit-icon {
   background-image: url('../img/tools/pen.png');
+  background-repeat: no-repeat;
 }
 
-.action-icon.merge-icon {
+.merge-icon {
   background-image: url('../img/merge-icon.png');
+  background-repeat: no-repeat;
+}
+
+.plus-icon {
+  font-size:15px;
+  text-align:center;
+}
+
+.delete-icon {
 }

src/css/toolbox-layers-list.css

@@ -5,18 +5,21 @@
 .layers-list-container {
 }
 
-.layers-title {
+/*.layers-title {
   background-image: url('../img/layers.svg');
   background-size: 22px;
   background-repeat: no-repeat;
   background-position: 97%;
+}*/
+
+.layers-title {
   position: relative;
 }
 
 .layers-toggle-preview {
   position: absolute;
   top: 0.3em;
-  right: 2em;
+  right: 0.5em;
 
   color: #999;
   font-size: 1.3em;
@@ -60,16 +63,6 @@
   opacity : 1;
 }
 
-.layer-item .edit-icon {
-  width: 25px;
-  background-size: 12px;
-}
-
-.layer-item .merge-icon {
-  width: 18px;
-  background-size: 16px;
-}
-
 .layer-item:last-child .merge-icon {
   display : none;
 }
@@ -87,4 +80,29 @@
 .layers-button-arrow {
   font-family : 'Lucida Grande', Calibri;
   padding : 2px 6px 0 6px;
+}
+
+.layers-button-container {
+  overflow : hidden;
+}
+
+.layers-button {
+  margin: 0;
+  width: 16.66667%;
+  float : left;
+}
+
+/* @override */
+.layers-button-container .layers-button {
+  border-left-width: 0;
+}
+
+.layers-button:last-child {
+  border-right-width: 0;
+}
+
+.layers-button-container .merge-icon,
+.layers-button-container .edit-icon {
+  background-size : 15px;
+  background-position : 50%;
 }

src/css/toolbox-palettes-list.css

@@ -60,23 +60,43 @@
   border-left-color: transparent;
 }
 
-.palette-action {
-  width : 18px;
-  height : 18px;
-  line-height : 16px;
-
-  text-align:center;
-  float : right;
-  font-size : 12px;
-  border: 1px solid gold;
-  border-radius : 2px;
-  box-sizing : border-box;
-  margin : 3px 3px 3px 0;
-
-  cursor : pointer;
-  transition : color 0.3s;
+.palettes-list-actions {
+  background-color: #3f3f3f;
+  border-bottom-color: #222;
+  height: 24px;
+  padding: 0;
+  overflow: hidden;
 }
 
-.palette-action:hover {
-  color : gold;
+.palettes-list-button {
+  margin: 0;
+  width: 36px;
+  float: left;
+}
+
+.palettes-list-select {
+  float: left;
+  width: 66.66667%;
+  height: 100%;
+
+  margin: 0;
+  padding: 0 5px 0 5px;
+
+  background: #3f3f3f;
+
+  border-style : solid;
+  border-top-color: #666;
+  border-bottom-color: #222;
+  border-width: 1px 0 1px 0;
+
+  color: white;
+}
+
+.palettes-list-select:focus {
+  outline:none;
+}
+
+.palettes-list-actions .edit-icon {
+  background-size : 15px;
+  background-position : 50%;
 }

src/css/toolbox.css

@@ -14,23 +14,4 @@
   margin: 0;
   font-size: 15px;
   background: #222;
-}
-
-.toolbox-button-container {
-  overflow : hidden;
-}
-
-.toolbox-button {
-  margin: 0;
-  width: 25%;
-  float : left;
-}
-
-/* @override */
-.button.toolbox-button {
-  border-left-width: 0;
-}
-
-.toolbox-button:last-child {
-  border-right-width: 0;
 }

src/js/app.js

@@ -40,6 +40,7 @@
 
       this.paletteImportService = new pskl.service.palette.PaletteImportService();
       this.paletteService = new pskl.service.palette.PaletteService();
+      this.paletteService.addDynamicPalette(new pskl.service.palette.CurrentColorsPalette());
 
       this.paletteController = new pskl.controller.PaletteController();
       this.paletteController.init();

src/js/controller/PalettesListController.js

@@ -24,15 +24,14 @@
     this.colorPaletteSelect_ = document.querySelector('.palettes-list-select');
 
     var createPaletteButton_ = document.querySelector('.create-palette-button');
-    var paletteActions = document.querySelector('.palette-actions');
+    var editPaletteButton_ = document.querySelector('.edit-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));
 
     createPaletteButton_.addEventListener('click', this.onCreatePaletteClick_.bind(this));
-    paletteActions.addEventListener('click', this.onPaletteActionsClick_.bind(this));
-
+    editPaletteButton_.addEventListener('click', this.onEditPaletteClick_.bind(this));
 
     $.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
     $.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
@@ -46,11 +45,7 @@
   };
 
   ns.PalettesListController.prototype.fillPaletteList = function () {
-    var palettes = [{
-      id : Constants.CURRENT_COLORS_PALETTE_ID,
-      name : 'Current colors'
-    }];
-    palettes = palettes.concat(this.paletteService.getPalettes());
+    var palettes = this.paletteService.getPalettes();
 
     var html = palettes.map(function (palette) {
       return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>', palette);
@@ -79,13 +74,9 @@
   ns.PalettesListController.prototype.getSelectedPaletteColors_ = function () {
     var colors = [];
     var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE);
-    if (paletteId === Constants.CURRENT_COLORS_PALETTE_ID) {
-      colors = this.usedColorService.getCurrentColors();
-    } else {
-      var palette = this.paletteService.getPaletteById(paletteId);
-      if (palette) {
-        colors = palette.colors;
-      }
+    var palette = this.paletteService.getPaletteById(paletteId);
+    if (palette) {
+      colors = palette.getColors();
     }
 
     if (colors.length > Constants.MAX_CURRENT_COLORS_DISPLAYED) {
@@ -120,18 +111,7 @@
     $.publish(Events.DIALOG_DISPLAY, 'create-palette');
   };
 
-  ns.PalettesListController.prototype.onPaletteActionsClick_ = function (evt) {
-    var classList = evt.target.classList;
-    if (classList.contains('palette-action-edit')) {
-      this.editSelectedPalette_();
-    } else if (classList.contains('palette-action-delete')) {
-      this.deleteSelectedPalette_();
-    } else if (classList.contains('palette-action-download')) {
-      this.downloadSelectedPalette_();
-    }
-  };
-
-  ns.PalettesListController.prototype.editSelectedPalette_ = function () {
+  ns.PalettesListController.prototype.onEditPaletteClick_ = function (evt) {
     var paletteId = this.colorPaletteSelect_.value;
     $.publish(Events.DIALOG_DISPLAY, {
       dialogId : 'create-palette',
@@ -139,28 +119,6 @@
     });
   };
 
-  ns.PalettesListController.prototype.deleteSelectedPalette_ = function () {
-    var paletteId = this.colorPaletteSelect_.value;
-    var palette = this.paletteService.getPaletteById(paletteId);
-    if (window.confirm('Are you sure you want to delete palette ' + palette.name)) {
-      this.paletteService.deletePaletteById(palette.id);
-      this.selectPalette(Constants.CURRENT_COLORS_PALETTE_ID);
-    }
-  };
-
-  ns.PalettesListController.prototype.downloadSelectedPalette_ = function () {
-    // getSelectedPalette
-    var paletteId = this.colorPaletteSelect_.value;
-    var palette = this.paletteService.getPaletteById(paletteId);
-
-    var paletteWriter = new pskl.service.palette.PaletteGplWriter(palette);
-    var paletteAsString = paletteWriter.write();
-
-    pskl.utils.BlobUtils.stringToBlob(paletteAsString, function(blob) {
-      pskl.utils.FileUtils.downloadAsFile(blob, palette.name + '.gpl');
-    }.bind(this), "application/json");
-  };
-
   ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
     event.preventDefault();
   };

src/js/controller/dialogs/AbstractDialogController.js

@@ -16,4 +16,11 @@
     $.publish(Events.DIALOG_HIDE);
   };
 
+  ns.AbstractDialogController.prototype.setTitle = function (title) {
+    var dialogHead = document.querySelector('.dialog-head');
+    if (dialogHead) {
+      dialogHead.innerText = title;
+    }
+  };
+
 })();

src/js/controller/dialogs/CreatePaletteController.js

@@ -1,11 +1,6 @@
 (function () {
   var ns = $.namespace('pskl.controller.dialogs');
 
-  var MODE = {
-    CREATE : 'CREATE',
-    EDIT : 'EDIT'
-  };
-
   ns.CreatePaletteController = function (piskelController) {
     this.paletteService = pskl.app.paletteService;
     this.paletteImportService = pskl.app.paletteImportService;
@@ -23,34 +18,50 @@
     this.hiddenFileInput = document.querySelector('.create-palette-import-input');
     this.nameInput = document.querySelector('input[name="palette-name"]');
 
-    var submitButton = document.querySelector('.create-palette-submit');
-    var cloneButton = document.querySelector('.create-palette-clone');
-    var cancelButton = document.querySelector('.create-palette-cancel');
+    var buttonsContainer = document.querySelector('.create-palette-actions');
+    var deleteButton = document.querySelector('.create-palette-delete');
+    var downloadButton = document.querySelector('.create-palette-download-button');
     var importFileButton = document.querySelector('.create-palette-import-button');
 
     this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
     this.nameInput.addEventListener('input', this.onNameInputChange_.bind(this));
     this.hiddenFileInput.addEventListener('change', this.onFileInputChange_.bind(this));
 
-    submitButton.addEventListener('click', this.onSubmitButtonClick_.bind(this));
-    cloneButton.addEventListener('click', this.onCloneButtonClick_.bind(this));
-    cancelButton.addEventListener('click', this.closeDialog.bind(this));
+    buttonsContainer.addEventListener('click', this.onButtonClick_.bind(this));
+    downloadButton.addEventListener('click', this.onDownloadButtonClick_.bind(this));
     importFileButton.addEventListener('click', this.onImportFileButtonClick_.bind(this));
 
+    $('.colors-list').sortable({
+      placeholder: 'colors-list-drop-proxy',
+      update: this.onColorDrop_.bind(this),
+      items: '.create-palette-color'
+    });
+
     var colorPickerContainer = document.querySelector('.color-picker-container');
     this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(colorPickerContainer, this.onColorUpdated_.bind(this));
     this.hslRgbColorPicker.init();
 
     var palette;
-    if (paletteId) {
+    var isCurrentColorsPalette = paletteId == Constants.CURRENT_COLORS_PALETTE_ID;
+    if (paletteId && !isCurrentColorsPalette) {
       var paletteObject = this.paletteService.getPaletteById(paletteId);
       palette = pskl.model.Palette.fromObject(paletteObject);
       importFileButton.style.display = 'none';
-      this.mode = MODE.EDIT;
+      this.setTitle('Edit Palette');
     } else {
-      palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'New palette', ['#000000']);
-      cloneButton.style.display = 'none';
-      this.mode = MODE.CREATE;
+      if (isCurrentColorsPalette) {
+        var currentColorsPalette = this.paletteService.getPaletteById(Constants.CURRENT_COLORS_PALETTE_ID);
+        var colors = currentColorsPalette.getColors();
+        if (!colors.length) {
+          colors = ['#000000'];
+        }
+        palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'Current colors clone', colors);
+      } else {
+        palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'New palette', ['#000000']);
+      }
+      downloadButton.style.display = 'none';
+      deleteButton.style.display = 'none';
+      this.setTitle('Create Palette');
     }
 
     this.setPalette_(palette);
@@ -119,16 +130,20 @@
     this.selectColor_(this.palette.size()-1);
   };
 
-  ns.CreatePaletteController.prototype.onSubmitButtonClick_ = function (evt) {
-    this.saveAndSelectPalette_(this.palette);
-    this.closeDialog();
-  };
-
-  ns.CreatePaletteController.prototype.onCloneButtonClick_ = function (evt) {
-    var uuid = pskl.utils.Uuid.generate();
-    var palette = new pskl.model.Palette(uuid, this.palette.name, this.palette.colors);
-    this.saveAndSelectPalette_(palette);
-    this.closeDialog();
+  ns.CreatePaletteController.prototype.onButtonClick_ = function (evt) {
+    var target = evt.target;
+    if (target.dataset.action === 'submit') {
+      this.saveAndSelectPalette_(this.palette);
+      this.closeDialog();
+    } else if (target.dataset.action === 'cancel') {
+      this.closeDialog();
+    } else if (target.dataset.action === 'delete') {
+      if (window.confirm('Are you sure you want to delete palette ' + this.palette.name)) {
+        this.paletteService.deletePaletteById(this.palette.id);
+        pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, Constants.CURRENT_COLORS_PALETTE_ID);
+        this.closeDialog();
+      }
+    }
   };
 
   ns.CreatePaletteController.prototype.saveAndSelectPalette_ = function (palette) {
@@ -136,6 +151,15 @@
     pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
   };
 
+  ns.CreatePaletteController.prototype.onDownloadButtonClick_ = function () {
+    var paletteWriter = new pskl.service.palette.PaletteGplWriter(this.palette);
+    var paletteAsString = paletteWriter.write();
+
+    pskl.utils.BlobUtils.stringToBlob(paletteAsString, function(blob) {
+      pskl.utils.FileUtils.downloadAsFile(blob, this.palette.name + '.gpl');
+    }.bind(this), "application/json");
+  };
+
   ns.CreatePaletteController.prototype.onImportFileButtonClick_ = function () {
     this.hiddenFileInput.click();
   };
@@ -164,13 +188,13 @@
   ns.CreatePaletteController.prototype.refresh_ = function () {
     var html = "";
     var tpl = pskl.utils.Template.get('create-palette-color-template');
-    var colors = this.palette.colors;
+    var colors = this.palette.getColors();
 
     colors.forEach(function (color, index) {
       var isSelected = (index === this.selectedIndex);
 
       html += pskl.utils.Template.replace(tpl, {
-        color:color, index:index,
+        'color':color, index:index,
         ':selected':isSelected,
         ':light-color':this.isLight_(color)
       });
@@ -179,12 +203,6 @@
     html += '<li class="create-palette-new-color">+</li>';
 
     this.colorsList.innerHTML = html;
-
-    $('.colors-list').sortable({
-      placeholder: 'colors-list-drop-proxy',
-      update: this.onDrop_.bind(this),
-      items: '.create-palette-color'
-    });
   };
 
   ns.CreatePaletteController.prototype.isLight_ = function (color) {
@@ -193,7 +211,7 @@
   };
 
 
-  ns.CreatePaletteController.prototype.onDrop_ = function (evt, drop) {
+  ns.CreatePaletteController.prototype.onColorDrop_ = function (evt, drop) {
     var colorElement = drop.item.get(0);
 
     var oldIndex = parseInt(colorElement.dataset.paletteIndex, 10);

src/js/controller/widgets/ColorsListController.js

@@ -0,0 +1,8 @@
+(function () {
+  var ns = $.namespace('pskl.controller.widgets');
+
+  ns.ColorsListController = function (container) {
+    this.container = container;
+    this.colorsList = this.container.querySelector('.colors-list');
+  };
+})();

src/js/model/Palette.js

@@ -12,6 +12,10 @@
     return new ns.Palette(paletteObj.id, paletteObj.name, colors);
   };
 
+  ns.Palette.prototype.getColors = function () {
+    return this.colors;
+  };
+
   ns.Palette.prototype.get = function (index) {
     return this.colors[index];
   };

src/js/service/FileDropperService.js

@@ -31,14 +31,27 @@
     for (var i = 0; i < files.length ; i++) {
       var file = files[i];
       var isImage = file.type.indexOf('image') === 0;
+      var isPiskel = /\.piskel$/i.test(file.name);
+      var isPalette = /\.(gpl|txt)$/i.test(file.name);
       if (isImage) {
         this.readImageFile_(file);
-      } else if (/\.piskel$/i.test(file.name)) {
+      } else if (isPiskel) {
         pskl.utils.PiskelFileUtils.loadFromFile(file, this.onPiskelFileLoaded_);
+      } else if (isPalette) {
+        pskl.app.paletteImportService.read(file, this.onPaletteLoaded_.bind(this));
       }
     }
   };
 
+  ns.FileDropperService.prototype.readImageFile_ = function (imageFile) {
+    pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
+  };
+
+  ns.FileDropperService.prototype.onPaletteLoaded_ = function (palette) {
+    pskl.app.paletteService.savePalette(palette);
+    pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
+  };
+
   ns.FileDropperService.prototype.onPiskelFileLoaded_ = function (piskel, descriptor, fps) {
     if (window.confirm('This will replace your current animation')) {
       piskel.setDescriptor(descriptor);
@@ -47,10 +60,6 @@
     }
   };
 
-  ns.FileDropperService.prototype.readImageFile_ = function (imageFile) {
-    pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
-  };
-
   ns.FileDropperService.prototype.processImageSource_ = function (imageSource) {
     this.importedImage_ = new Image();
     this.importedImage_.onload = this.onImageLoaded_.bind(this);

src/js/service/palette/CurrentColorsPalette.js

@@ -0,0 +1,12 @@
+(function () {
+  var ns = $.namespace('pskl.service.palette');
+
+  ns.CurrentColorsPalette = function () {
+    this.name = 'Current colors';
+    this.id = Constants.CURRENT_COLORS_PALETTE_ID;
+  };
+
+  ns.CurrentColorsPalette.prototype.getColors = function () {
+    return pskl.app.currentColorsService.getCurrentColors();
+  };
+})();

src/js/service/palette/PaletteGplReader.js

@@ -1,7 +1,7 @@
 (function () {
   var ns = $.namespace('pskl.service.palette');
 
-  var RE_COLOR_LINE = /^(\d{1,3}\s+)(\d{1,3}\s+)(\d{1,3}\s+)/;
+  var RE_COLOR_LINE = /^(\s*\d{1,3})(\s*\d{1,3})(\s*\d{1,3})/;
   var RE_EXTRACT_NAME = /^name\s*\:\s*(.*)$/i;
 
   ns.PaletteGplReader = function (file, onSuccess, onError) {

src/js/service/palette/PaletteGplWriter.js

@@ -1,10 +1,8 @@
 (function () {
   var ns = $.namespace('pskl.service.palette');
 
-  ns.PaletteGplWriter = function (palette, onSuccess, onError) {
+  ns.PaletteGplWriter = function (palette) {
     this.palette = palette;
-    this.onSuccess = onSuccess;
-    this.onError = onError;
   };
 
   ns.PaletteGplWriter.prototype.write = function () {
@@ -13,7 +11,7 @@
     lines.push('Name: ' + this.palette.name);
     lines.push('Columns: 0');
     lines.push('#');
-    this.palette.colors.forEach(function (color) {
+    this.palette.getColors().forEach(function (color) {
       lines.push(this.writeColorLine(color));
     }.bind(this));
     lines.push('\r\n');
@@ -35,24 +33,8 @@
 
   ns.PaletteGplWriter.prototype.padString = function (str, size) {
     str = str.toString();
-    for (var i = 0 ; i < size-str.length ; i++) {
-      str = ' ' + str;
-    }
-    return str;
+    var pad = (new Array(1+size-str.length)).join(' ');
+    return pad + str;
   };
 
 })();
-
-// GIMP Palette
-// Name: Fabric_jeans
-// Columns: 0
-// #
-// 194 198 201 Untitled
-// 173 180 194 Untitled
-// 123 126 145 Untitled
-//  91 136 195 Untitled
-//  41  52  74 Untitled
-//  20  25  37 Untitled
-// 164 156 145 Untitled
-// 103  92  82 Untitled
-//  87  58 107 Untitled

src/js/service/palette/PaletteService.js

@@ -2,13 +2,18 @@
   var ns = $.namespace('pskl.service.palette');
 
   ns.PaletteService = function () {
-    this.palettes = [];
+    this.dynamicPalettes = [];
     this.localStorageService = window.localStorage;
   };
 
   ns.PaletteService.prototype.getPalettes = function () {
     var palettesString = this.localStorageService.getItem('piskel.palettes');
-    return JSON.parse(palettesString) || [];
+    var palettes = JSON.parse(palettesString) || [];
+    palettes = palettes.map(function (palette) {
+      return pskl.model.Palette.fromObject(palette);
+    });
+
+    return this.dynamicPalettes.concat(palettes);
   };
 
   ns.PaletteService.prototype.getPaletteById = function (paletteId) {
@@ -32,6 +37,10 @@
     window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
   };
 
+  ns.PaletteService.prototype.addDynamicPalette = function (palette) {
+    this.dynamicPalettes.push(palette);
+  };
+
   ns.PaletteService.prototype.deletePaletteById = function (id) {
     var palettes = this.getPalettes();
     var filteredPalettes = palettes.filter(function (palette) {
@@ -42,6 +51,9 @@
   };
 
   ns.PaletteService.prototype.savePalettes_ = function (palettes) {
+    palettes = palettes.filter(function (palette) {
+      return palette instanceof pskl.model.Palette;
+    });
     this.localStorageService.setItem('piskel.palettes', JSON.stringify(palettes));
     $.publish(Events.PALETTE_LIST_UPDATED);
   };

src/piskel-script-list.js

@@ -119,6 +119,7 @@
   "js/service/BackupService.js",
   "js/service/BeforeUnloadService.js",
   "js/service/HistoryService.js",
+  "js/service/palette/CurrentColorsPalette.js",
   "js/service/palette/PaletteService.js",
   "js/service/palette/PaletteTxtReader.js",
   "js/service/palette/PaletteGplReader.js",

src/templates/dialogs/create-palette.html

@@ -12,6 +12,10 @@
             type="button"
             rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
             class="button  button-primary create-palette-import-button">Import from file</button>
+          <button
+            type="button"
+            rel="tooltip" data-placement="right" title="Download the palette as a GPL file"
+            class="button  button-primary create-palette-download-button">Download as file</button>
           <input style="display:none"
             class="create-palette-import-input"
             type="file" value="file" accept="*"/>
@@ -56,9 +60,10 @@
         </div>
       </div>
       <div class="create-palette-actions">
-        <button type="button" name="create-palette-cancel" class="button create-palette-cancel">Cancel</button>
-        <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button>
-        <button type="button" name="create-palette-submit" class="button button-primary create-palette-submit">Save</button>
+        <button type="button" name="create-palette-cancel" data-action="cancel" class="button create-palette-cancel">Cancel</button>
+        <button type="button" name="create-palette-delete" data-action="delete" class="button button-primary create-palette-delete">Delete</button>
+        <!-- <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button> -->
+        <button type="button" name="create-palette-submit" data-action="submit" class="button button-primary create-palette-submit">Save</button>
       </div>
   </div>
 

src/templates/layers-list.html

@@ -5,17 +5,25 @@
          data-placement="top"
          class="layers-toggle-preview piskel-icon-eye"></div>
   </h3>
-  <div class="toolbox-button-container layers-button-container">
-    <button class="button toolbox-button" data-action="add"  >Add</button>
-    <button class="button toolbox-button" data-action="delete"  >Delete</button>
-    <button class="button toolbox-button layers-button-arrow" data-action="up"   >&#8593;</button>
-    <button class="button toolbox-button layers-button-arrow" data-action="down" >&#8595;</button>
+  <div class="layers-button-container">
+    <button class="button layers-button plus-icon" data-action="add"  >+</button>
+    <button class="button layers-button" data-action="delete"  >x</button>
+    <button class="button layers-button layers-button-arrow" data-action="up"   >&#8593;</button>
+    <button class="button layers-button layers-button-arrow" data-action="down" >&#8595;</button>
+    <button
+      class="button layers-button merge-icon" data-action="merge"
+      title="Merge with layer below" rel="tooltip" data-placement="top" ></button>
+    <button
+      class="button layers-button edit-icon" data-action="edit"
+      title="Edit layer name" rel="tooltip" data-placement="top"></button>
   </div>
+  <script type="text/template" id="layer-button-template">
+    <button
+      class="button layers-button {{class}}" data-action="{{action}}"
+      title="{{tooltip}}" rel="tooltip" data-placement="top"  >{{text}}</button>
+  </script>
   <script type="text/template" id="layer-item-template">
-    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}
-      <span class="action-icon edit-icon" title="Edit layer name" rel="tooltip" data-placement="top">&nbsp;</span>
-      <span class="action-icon merge-icon" title="Merge with layer below" rel="tooltip" data-placement="top">&nbsp;</span>
-    </li>
+    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}</li>
   </script>
   <ul class="layers-list"></ul>
 </div>

src/templates/palettes-list.html

@@ -2,29 +2,15 @@
   <h3 class="toolbox-title palettes-title"
       style="overflow: hidden;height: 36px;box-sizing: border-box;border-bottom: 1px solid #444;">
     <span style="line-height:20px ">Palettes</span>
-    <div
-      class="button button-primary create-palette-button"
-      title="Create new palette"
-      rel="tooltip"
-      data-placement="top"
-      style="width:20px; height:20px; float:right; font-size:1.1em">+</div>
   </h3>
-  <div
-    class="palette-actions"
-    style="background-color:#3f3f3f; border-bottom:#222; height:24px; padding:0 3px;">
-    <select class="palettes-list-select" style="margin:3px 0;"></select>
-    <div class="palette-action palette-action-download"
-      title="Download palette"
-      rel="tooltip"
-      data-placement="top">dl</div>
-    <div class="palette-action palette-action-delete"
-      title="Delete palette"
-      rel="tooltip"
-      data-placement="top">d</div>
-    <div class="palette-action palette-action-edit"
-      title="Edit palette"
-      rel="tooltip"
-      data-placement="top">e</div>
+  <div class="palettes-list-actions">
+    <button
+      class="button palettes-list-button create-palette-button plus-icon" data-action="add"
+      title="Create a new palette" rel="tooltip" data-placement="top" >+</button>
+    <select class="palettes-list-select"></select>
+    <button
+      class="button palettes-list-button edit-palette-button edit-icon" data-action="edit"
+      title="Manage this palette" rel="tooltip" data-placement="top"></button>
   </div>
   <div class="palettes-list-colors"></div>
   <script type="text/template" id="palette-color-template">

test/js/service/palette/PaletteServiceTest.js

@@ -73,7 +73,7 @@ describe("Palette Service", function() {
     expect(retrievedPalette.id).toBe(paletteId);
     expect(retrievedPalette.name).toBe(paletteName);
 
-    var colors = retrievedPalette.colors;
+    var colors = retrievedPalette.getColors();
     expect(Array.isArray(colors)).toBe(true);
     expect(colors.length).toBe(1);
 
@@ -97,7 +97,7 @@ describe("Palette Service", function() {
     expect(palettes.length).toBe(1);
 
     var retrievedPalette = paletteService.getPaletteById(paletteId);
-    var color = retrievedPalette.colors[0];
+    var color = retrievedPalette.get(0);
     expect(color).toBe(paletteColor2);
   });