From 231ae9e165509e00a527a324d95099095ae2e556 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 30 Mar 2014 14:56:31 +0200 Subject: [PATCH] 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 | 6 ++++ src/js/Constants.js | 2 ++ src/js/controller/PalettesListController.js | 28 +++++++++++++------ .../dialogs/PaletteManagerController.js | 2 +- src/js/utils/UserSettings.js | 4 ++- src/js/utils/core.js | 2 +- src/templates/palettes-list.html | 9 ++---- 7 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/css/toolbox-palettes-list.css b/src/css/toolbox-palettes-list.css index 1f9d6d11..b1c9be62 100644 --- a/src/css/toolbox-palettes-list.css +++ b/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; diff --git a/src/js/Constants.js b/src/js/Constants.js index e1ec6c10..405565f7 100644 --- a/src/js/Constants.js +++ b/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', diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js index 54a95435..c2ffb3c4 100644 --- a/src/js/controller/PalettesListController.js +++ b/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) { diff --git a/src/js/controller/dialogs/PaletteManagerController.js b/src/js/controller/dialogs/PaletteManagerController.js index f9b7d4e9..8ae722c9 100644 --- a/src/js/controller/dialogs/PaletteManagerController.js +++ b/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') { diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 0c848734..59c6455f 100644 --- a/src/js/utils/UserSettings.js +++ b/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 }, /** diff --git a/src/js/utils/core.js b/src/js/utils/core.js index 88795c35..c37a7033 100644 --- a/src/js/utils/core.js +++ b/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); }; diff --git a/src/templates/palettes-list.html b/src/templates/palettes-list.html index 968ceeb1..d3c1e470 100644 --- a/src/templates/palettes-list.html +++ b/src/templates/palettes-list.html @@ -1,9 +1,8 @@

Palettes - + @@ -19,7 +18,3 @@

- -