Feature : palette color manager

- implemented save all functionality
- minor css update

src/css/dialogs/manage-palettes.css

@@ -68,12 +68,15 @@
 }
 
 .palette-manager-list li {
-  padding-left:10px;
-  font-size: 1.4em;
   height: 48px;
   line-height: 48px;
+  padding-left:10px;
+
+  font-size: 1.4em;
+
   box-sizing: border-box;
   -moz-box-sizing: border-box;
+
   border-bottom: 1px solid #666;
   cursor:pointer;
 }
@@ -157,6 +160,12 @@
   display: inline-block;
   position: relative;
   margin: 20px 0 20px 20px;
+  box-shadow: 0 0 0px 0px gold;
+  transition: box-shadow 0.3s;
+}
+
+.palette-manager-color-card:hover {
+  box-shadow: 0 0 4px 1px gold;
 }
 
 .palette-manager-delete-card {
@@ -206,7 +215,7 @@
 }
 
 .palette-manager-color-details {
-  color : #888;
+  color : #666;
   background: #eee;
   height: 60px;
   padding-left: 5px;
@@ -214,4 +223,5 @@
 
 .palette-manager-color-details li{
   line-height: 20px;
+  font-weight: bold;
 }

src/js/controller/dialogs/DialogsController.js

@@ -18,7 +18,8 @@
     this.dialogWrapper_ = document.getElementById('dialog-container-wrapper');
     $.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this));
     $.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this));
-    pskl.app.shortcutService.addShortcut('M', this.onDialogDisplayEvent_.bind(this, null, 'manage-palettes'));
+
+    pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'manage-palettes'));
   };
 
   ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, dialogId) {

src/js/controller/dialogs/PaletteManagerController.js

@@ -20,6 +20,7 @@
     this.paletteBody = document.querySelector('.palette-manager-details-body');
     this.paletteHead = document.querySelector('.palette-manager-details-head');
     this.createButton = document.querySelector('.palette-manager-actions-button[data-action="create"]');
+    this.saveAllButton = document.querySelector('.palette-manager-actions-button[data-action="save-all"]');
     this.closeButton = document.querySelector('.palette-manager-close');
 
     this.colorCardTemplate = pskl.utils.Template.get('palette-color-card-template');
@@ -32,6 +33,7 @@
     this.paletteBody.addEventListener('click', this.delegatedPaletteBodyClick.bind(this));
     this.paletteHead.addEventListener('click', this.delegatedPaletteHeadClick.bind(this));
     this.createButton.addEventListener('click', this.createPalette.bind(this));
+    this.saveAllButton.addEventListener('click', this.saveAll.bind(this));
     this.closeButton.addEventListener('click', this.closeDialog.bind(this));
 
     // Init markup
@@ -137,7 +139,7 @@
   ns.PaletteManagerController.prototype.initPaletteDetailsEvents = function () {
     // New Card click event
     var newCard = this.paletteBody.querySelector('.' + NEW_COLOR_CLASS);
-    newCard.addEventListener('click', this.addColorInSelectedPalette.bind(this, '#FFFFFF'));
+    newCard.addEventListener('click', this.onNewCardClick.bind(this));
 
     if (this.palettes.length < 2) {
       var deleteButton = this.paletteHead.querySelector('.palette-manager-palette-button[data-action="delete"]');
@@ -145,6 +147,17 @@
     }
   };
 
+  ns.PaletteManagerController.prototype.onNewCardClick = function () {
+    var color;
+    var palette = this.getSelectedPalette();
+    if (palette && palette.colors.length > 0) {
+      color = palette.colors[palette.colors.length-1];
+    } else {
+      color = '#FFFFFF';
+    }
+    this.addColorInSelectedPalette(color);
+  };
+
   ns.PaletteManagerController.prototype.delegatedPaletteBodyClick = function (event) {
     var target = event.target;
     if (target.classList.contains(CLOSE_ICON_CLASS)) {
@@ -216,12 +229,12 @@
   };
 
   ns.PaletteManagerController.prototype.renameSelectedPalette = function () {
-    var selectedPalette = this.getSelectedPalette();
-    var name = window.prompt('Please enter a new name for palette "' + selectedPalette.name + '"');
+    var palette = this.getSelectedPalette();
+    var name = window.prompt('Please enter a new name for palette "' + palette.name + '"', palette.name);
     if (name) {
-      selectedPalette.name = name;
+      palette.name = name;
       this.createPaletteListMarkup();
-      this.selectPalette(selectedPalette.id);
+      this.selectPalette(palette.id);
     }
   };
 
@@ -302,6 +315,15 @@
     }
   };
 
+  ns.PaletteManagerController.prototype.saveAll = function () {
+    this.palettes.forEach(function (palette) {
+      this.savePalette(palette.id);
+    }.bind(this));
+
+    this.createPaletteListMarkup();
+    this.selectPalette(this.getSelectedPalette().id);
+  };
+
   ns.PaletteManagerController.prototype.savePalette = function (paletteId) {
     var palette = this.getPaletteById(paletteId, this.palettes);
     var originalPalette = this.getPaletteById(paletteId, this.originalPalettes);
@@ -313,6 +335,10 @@
     }
 
     this.persistToLocalStorage();
+  };
+
+  ns.PaletteManagerController.prototype.savePaletteAndRedraw = function (paletteId) {
+    this.savePalette(paletteId);
 
     this.createPaletteListMarkup();
     this.selectPalette(this.getSelectedPalette().id);

src/js/service/keyboard/CheatsheetService.js

@@ -100,7 +100,8 @@
       this.toDescriptor_('￬', 'Select next frame'), /* ASCII for down-arrow */
       this.toDescriptor_('N', 'Create new frame'),
       this.toDescriptor_('shift + N', 'Duplicate selected frame'),
-      this.toDescriptor_('shift + ?', 'Open/Close this popup')
+      this.toDescriptor_('shift + ?', 'Open/Close this popup'),
+      this.toDescriptor_('alt + P', 'Open the Palette Manager')
     ];
 
     this.initMarkupAbstract_(descriptors, '.cheatsheet-misc-shortcuts');

src/js/service/keyboard/ShortcutService.js

@@ -47,6 +47,9 @@
     } else if (key.indexOf('shift+') === 0) {
       meta = 'shift';
       key = key.replace('shift+', '');
+    } else if (key.indexOf('alt+') === 0) {
+      meta = 'alt';
+      key = key.replace('alt+', '');
     }
     return {meta : meta, key : key};
   };
@@ -68,6 +71,8 @@
           cb = keyShortcuts.ctrl;
         } else if (this.isShiftKeyPressed_(evt)) {
           cb = keyShortcuts.shift;
+        } else if (this.isAltKeyPressed_(evt)) {
+          cb = keyShortcuts.alt;
         } else {
           cb = keyShortcuts.normal;
         }
@@ -93,6 +98,10 @@
     return evt.shiftKey;
   };
 
+  ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) {
+    return evt.altKey;
+  };
+
   ns.ShortcutService.prototype.isMac_ = function () {
     return navigator.appVersion.indexOf("Mac") != -1;
   };