diff --git a/src/css/dialogs/manage-palettes.css b/src/css/dialogs/manage-palettes.css index 07bddd6f..db112d88 100644 --- a/src/css/dialogs/manage-palettes.css +++ b/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; } \ No newline at end of file diff --git a/src/js/controller/dialogs/DialogsController.js b/src/js/controller/dialogs/DialogsController.js index ddb04e41..188f605e 100644 --- a/src/js/controller/dialogs/DialogsController.js +++ b/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) { diff --git a/src/js/controller/dialogs/PaletteManagerController.js b/src/js/controller/dialogs/PaletteManagerController.js index 33863eef..f9b7d4e9 100644 --- a/src/js/controller/dialogs/PaletteManagerController.js +++ b/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); diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js index 541febb7..d3cf5a5a 100644 --- a/src/js/service/keyboard/CheatsheetService.js +++ b/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'); diff --git a/src/js/service/keyboard/ShortcutService.js b/src/js/service/keyboard/ShortcutService.js index 8497dbbc..bd2aea39 100644 --- a/src/js/service/keyboard/ShortcutService.js +++ b/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; };