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

@@ -123,15 +123,10 @@
   font-weight: bold;
 }
 
-.palette-manager-details-head-edit-icon {
+.palette-manager-details-head .edit-icon {
-  cursor: pointer;
   width: 24px;
-  height: 100%;
-  background: url('../img/tools/pen.png');
   display: inline-block;
-  background-size: 20px;
+  background-size: 16px;
-  background-repeat: no-repeat;
-  background-position: 50%;
 }
 
 .palette-manager-details-head-actions {

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');
+}

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;
 }

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') {
+    } else if (el.classList.contains('layer-item')) {
-      var layerName = el.getAttribute('data-layer-name');
+      index = el.dataset.layerIndex;
-      this.piskelController.selectLayerByName(layerName);
+      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_();
     }
   };
 

src/js/controller/PiskelController.js

@@ -161,10 +161,12 @@
     }
   };
 
-  ns.PiskelController.prototype.selectLayerByName = function (name) {
+  ns.PiskelController.prototype.getLayerByIndex = function (index) {
-    if (this.hasLayerForName_(name)) {
+    var layers = this.getLayers();
-      var layer = this.piskel.getLayersByName(name)[0];
+    if (layers[index]) {
-      this.selectLayer(layer);
+      return layers[index];
+    } else {
+      return null;
     }
   };
 

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;

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;
   };

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",

src/templates/dialogs/manage-palettes.html

@@ -21,7 +21,7 @@
 
 <script type="text/template" id="palette-details-head-template">
   <span class="palette-manager-details-head-name">{{name}}</span>
-  <span class="palette-manager-details-head-edit-icon" title="edit name">&nbsp;</span>
+  <span class="action-icon edit-icon" title="edit name">&nbsp;</span>
   <div class="palette-manager-details-head-actions">
     <button class="palette-manager-palette-button button button-primary" {{save:disabled}} data-action="save" type="button">Save</button>
     <button class="palette-manager-palette-button button " {{revert:disabled}} data-action="revert" type="button">Revert</button>

src/templates/layers-list.html

@@ -7,7 +7,9 @@
     <button class="button toolbox-button layers-button-arrow" data-action="down" >&#8595;</button>
   </div>
   <script type="text/template" id="layer-item-template">
-    <li class="layer-item" data-layer-name="{{layername}}">{{layername}}</li>
+    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}
+      <span class="action-icon edit-icon" title="edit name">&nbsp;</span>
+    </li>
   </script>
   <ul class="layers-list"></ul>
 </div>