From 39d7d4d8c84781a4e37c72939a3de0b0b2f44dda Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 9 Apr 2014 23:24:25 +0200 Subject: [PATCH 1/2] Enhancement : Rename layers - added rename icon in layers list - mutualized CSS for edit icon between palette manager and layers list - new CSS file icons.css for actions/links/buttons using icons - layers are no longer retrieved by name, but by index --- src/css/dialogs-manage-palettes.css | 9 ++---- src/css/icons.css | 10 +++++++ src/css/toolbox-layers-list.css | 18 +++++++++++- src/js/controller/LayersListController.js | 29 ++++++++++++++----- src/js/controller/PiskelController.js | 10 ++++--- .../dialogs/PaletteManagerController.js | 2 +- src/js/model/Layer.js | 4 +++ src/piskel-style-list.js | 1 + src/templates/dialogs/manage-palettes.html | 2 +- src/templates/layers-list.html | 4 ++- 10 files changed, 66 insertions(+), 23 deletions(-) create mode 100644 src/css/icons.css diff --git a/src/css/dialogs-manage-palettes.css b/src/css/dialogs-manage-palettes.css index 94cc9031..3c0318fa 100644 --- a/src/css/dialogs-manage-palettes.css +++ b/src/css/dialogs-manage-palettes.css @@ -123,15 +123,10 @@ font-weight: bold; } -.palette-manager-details-head-edit-icon { - cursor: pointer; +.palette-manager-details-head .edit-icon { width: 24px; - height: 100%; - background: url('../img/tools/pen.png'); display: inline-block; - background-size: 20px; - background-repeat: no-repeat; - background-position: 50%; + background-size: 16px; } .palette-manager-details-head-actions { diff --git a/src/css/icons.css b/src/css/icons.css new file mode 100644 index 00000000..dc1ddc1e --- /dev/null +++ b/src/css/icons.css @@ -0,0 +1,10 @@ +.action-icon { + cursor: pointer; + height: 100%; + background-repeat: no-repeat; + background-position: 50%; +} + +.action-icon.edit-icon { + background-image: url('../img/tools/pen.png'); +} \ No newline at end of file diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css index 9be7c653..ae0892f0 100644 --- a/src/css/toolbox-layers-list.css +++ b/src/css/toolbox-layers-list.css @@ -19,11 +19,27 @@ .layer-item { height:24px; line-height: 24px; - padding : 0 10px; + padding : 0 0 0 10px; border-top: 1px solid #444; cursor : pointer; } +.layer-item .edit-icon { + float: right; + width: 30px; + background-size: 12px; + opacity: 0; + transition : opacity 0.2s; +} + +.layer-item:hover .edit-icon { + opacity : 0.6; +} + +.layer-item:hover .edit-icon:hover { + opacity : 1; +} + .layer-item:hover { background : #222; } diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js index ed8c7786..45c85480 100644 --- a/src/js/controller/LayersListController.js +++ b/src/js/controller/LayersListController.js @@ -23,24 +23,37 @@ layers.forEach(this.addLayerItem.bind(this)); }; - ns.LayersListController.prototype.addLayerItem = function (layer) { + ns.LayersListController.prototype.addLayerItem = function (layer, index) { + var isSelected = this.piskelController.getCurrentLayer() === layer; var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, { - layername : layer.getName() + 'layername' : layer.getName(), + 'layerindex' : index, + 'isselected:current-layer-item' : isSelected }); var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml); - if (this.piskelController.getCurrentLayer() === layer) { - layerItem.classList.add('current-layer-item'); - } this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild); }; ns.LayersListController.prototype.onClick_ = function (evt) { var el = evt.target || evt.srcElement; + var index; if (el.nodeName == 'BUTTON') { this.onButtonClick_(el); - } else if (el.nodeName == 'LI') { - var layerName = el.getAttribute('data-layer-name'); - this.piskelController.selectLayerByName(layerName); + } else if (el.classList.contains('layer-item')) { + index = el.dataset.layerIndex; + this.piskelController.setCurrentLayerIndex(index); + } else if (el.classList.contains('edit-icon')) { + index = el.parentNode.dataset.layerIndex; + var layer = this.piskelController.getLayerByIndex(index); + this.renameLayer_(layer); + } + }; + + ns.LayersListController.prototype.renameLayer_ = function (layer) { + var newName = window.prompt("Please enter the layer name", layer.getName()); + if (newName) { + layer.setName(newName); + this.renderLayerList_(); } }; diff --git a/src/js/controller/PiskelController.js b/src/js/controller/PiskelController.js index ab44d197..776f220a 100644 --- a/src/js/controller/PiskelController.js +++ b/src/js/controller/PiskelController.js @@ -161,10 +161,12 @@ } }; - ns.PiskelController.prototype.selectLayerByName = function (name) { - if (this.hasLayerForName_(name)) { - var layer = this.piskel.getLayersByName(name)[0]; - this.selectLayer(layer); + ns.PiskelController.prototype.getLayerByIndex = function (index) { + var layers = this.getLayers(); + if (layers[index]) { + return layers[index]; + } else { + return null; } }; diff --git a/src/js/controller/dialogs/PaletteManagerController.js b/src/js/controller/dialogs/PaletteManagerController.js index 9332f7b4..85e7a1ad 100644 --- a/src/js/controller/dialogs/PaletteManagerController.js +++ b/src/js/controller/dialogs/PaletteManagerController.js @@ -6,7 +6,7 @@ var SELECTED_CLASSNAME = 'selected'; var NEW_COLOR_CLASS = 'palette-manager-new-color'; var CLOSE_ICON_CLASS = 'palette-manager-delete-card'; - var EDIT_NAME_CLASS = 'palette-manager-details-head-edit-icon'; + var EDIT_NAME_CLASS = 'edit-icon'; ns.PaletteManagerController = function (piskelController) { this.piskelController = piskelController; diff --git a/src/js/model/Layer.js b/src/js/model/Layer.js index 3725622b..d55b602e 100644 --- a/src/js/model/Layer.js +++ b/src/js/model/Layer.js @@ -27,6 +27,10 @@ return this.name; }; + ns.Layer.prototype.setName = function (name) { + this.name = name; + }; + ns.Layer.prototype.getFrames = function () { return this.frames; }; diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index 40b7a651..1fd3b0b5 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -6,6 +6,7 @@ exports.styles = [ "css/forms.css", "css/settings.css", "css/tools.css", + "css/icons.css", "css/cheatsheet.css", "css/dialogs.css", "css/dialogs-manage-palettes.css", diff --git a/src/templates/dialogs/manage-palettes.html b/src/templates/dialogs/manage-palettes.html index 946a4f61..59cb296f 100644 --- a/src/templates/dialogs/manage-palettes.html +++ b/src/templates/dialogs/manage-palettes.html @@ -21,7 +21,7 @@ From dd4a544d7ab4777748e22ae8ef440d0e9f6f11eb Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 9 Apr 2014 23:38:35 +0200 Subject: [PATCH 2/2] Bug : current layer index was a string --- src/js/controller/LayersListController.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js index 45c85480..b3e2a76f 100644 --- a/src/js/controller/LayersListController.js +++ b/src/js/controller/LayersListController.js @@ -37,14 +37,14 @@ ns.LayersListController.prototype.onClick_ = function (evt) { var el = evt.target || evt.srcElement; var index; - if (el.nodeName == 'BUTTON') { + if (el.classList.contains('button')) { this.onButtonClick_(el); } else if (el.classList.contains('layer-item')) { index = el.dataset.layerIndex; - this.piskelController.setCurrentLayerIndex(index); + this.piskelController.setCurrentLayerIndex(parseInt(index, 10)); } else if (el.classList.contains('edit-icon')) { index = el.parentNode.dataset.layerIndex; - var layer = this.piskelController.getLayerByIndex(index); + var layer = this.piskelController.getLayerByIndex(parseInt(index, 10)); this.renameLayer_(layer); } };