Layers : add layer icon. Position buttons on top of list. Fix name generation issue

css/style.css

@@ -193,6 +193,10 @@ body {
   margin: 0;
   font-size : 18px;
   background : #222;
+  background-image: url('../img/layers.svg');
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  background-position: 95%; 
 }
 
 .layers-list {
@@ -213,7 +217,7 @@ body {
 
 .current-layer-item, .current-layer-item:hover {
   background : #333;
-  font-weight: bold;
+  color: gold;
 }
 
 .layers-button-container {
@@ -248,6 +252,7 @@ body {
 .layers-button:hover {
   text-decoration: none;
   background-color: #484848;
+  color: gold;
 }
 /** 
  * User messages 

img/layers.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="90"
+   height="87.886002"
+   id="svg3024">
+  <defs
+     id="defs3026" />
+  <metadata
+     id="metadata3029">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-266.63206,-597.79217)"
+     id="layer1">
+    <g
+       transform="translate(262.14286,465.21932)"
+       id="Captions" />
+    <g
+       id="g3825" />
+    <g
+       transform="translate(-0.51079959,126.51585)"
+       id="layer1-9"
+       style="fill:#ffffff;fill-opacity:1">
+      <g
+         transform="translate(262.14286,465.21932)"
+         id="Captions-4"
+         style="fill:#ffffff;fill-opacity:1" />
+      <g
+         id="g3825-8"
+         style="fill:#ffffff;fill-opacity:1">
+        <path
+           d="m 357.14286,556.72132 c 0,1.346 -1.097,2.441 -2.442,2.441 h -60.239 c -1.347,0 -2.441,-1.096 -2.441,-2.441 v -4.555 h 50.241 c 4.346,0 7.884,-3.539 7.884,-7.885 v -48.128 h 4.555 c 1.346,0 2.442,1.096 2.442,2.441 v 58.127 z"
+           id="path2989-8"
+           style="fill:#ffffff;fill-opacity:1" />
+        <path
+           d="m 279.58086,544.28132 v -4.555 h 6.997 2.722 2.721 37.803 c 4.346,0 7.884,-3.537 7.884,-7.883 v -35.69 -2.721 -2.721 -6.998 h 4.555 c 1.346,0 2.442,1.096 2.442,2.443 v 4.555 2.721 2.721 48.129 c 0,1.346 -1.097,2.443 -2.442,2.443 h -50.242 -2.721 -2.722 -4.555 c -1.347,0 -2.442,-1.098 -2.442,-2.444 z"
+           id="path2991-2"
+           style="fill:#ffffff;fill-opacity:1" />
+        <path
+           d="m 329.82386,471.27632 h -60.239 c -1.347,0 -2.442,1.093 -2.442,2.441 v 58.127 c 0,1.344 1.095,2.441 2.442,2.441 h 4.555 2.721 2.721 6.997 2.722 2.721 37.803 c 1.345,0 2.441,-1.098 2.441,-2.441 v -35.691 -2.721 -2.721 -6.998 -2.721 -2.721 -4.554 c -10e-4,-1.348 -1.098,-2.441 -2.442,-2.441 z"
+           id="path2993-4"
+           style="fill:#ffffff;fill-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>

js/app.js

@@ -13,7 +13,7 @@
       var size = this.readSizeFromURL_();
       var piskel = new pskl.model.Piskel(size.width, size.height, Constants.DEFAULT.FPS);
 
-      var layer = new pskl.model.Layer("Default layer");
+      var layer = new pskl.model.Layer("Layer 1");
       var frame = new pskl.model.Frame(size.width, size.height);
       layer.addFrame(frame);
 

js/controller/PiskelController.js

@@ -10,6 +10,8 @@
     this.currentLayerIndex = 0;
     this.currentFrameIndex = 0;
 
+    this.layerIdCounter = 0;
+
     $.publish(Events.FRAMESHEET_RESET);
     $.publish(Events.FRAME_SIZE_CHANGED);
   };
@@ -118,9 +120,18 @@
     }
   };
 
+  ns.PiskelController.prototype.generateLayerName_ = function () {
+    var name = "Layer " + this.layerIdCounter;
+    while (this.hasLayerForName_(name)) {
+      this.layerIdCounter++;
+      name = "Layer " + this.layerIdCounter;
+    }
+    return name;
+  };
+
   ns.PiskelController.prototype.createLayer = function (name) {
     if (!name) {
-      name = "Layer " + (this.getLayers().length + 1);
+      name = this.generateLayerName_();
     }
     if (!this.hasLayerForName_(name)) {
       var layer = new pskl.model.Layer(name);

js/controller/settings/GifExportController.js

@@ -7,10 +7,11 @@
   ns.GifExportController.prototype.init = function () {
     this.radioTemplate_ = pskl.utils.Template.get("export-gif-radio-template");
 
-    this.previewContainer = document.querySelectorAll(".export-gif-preview div")[0];
+    this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
+    this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
 
-    this.uploadForm = $("[name=gif-export-upload-form]");    
+    this.uploadFormJQ = $("[name=gif-export-upload-form]");    
-    this.uploadForm.submit(this.upload.bind(this));
+    this.uploadFormJQ.submit(this.upload.bind(this));
 
     this.initRadioElements_();
   };
@@ -23,20 +24,20 @@
 
     this.renderAsImageDataAnimatedGIF(dpi, fps, function (imageData) {
       this.updatePreview_(imageData);
-      this.previewContainer.classList.add("preview-upload-ongoing");
+      this.previewContainerEl.classList.add("preview-upload-ongoing");
       pskl.app.imageUploadService.upload(imageData, function (imageUrl) {
         this.updatePreview_(imageUrl);
-        this.previewContainer.classList.remove("preview-upload-ongoing");
+        this.previewContainerEl.classList.remove("preview-upload-ongoing");
       }.bind(this));
     }.bind(this));
   };
 
   ns.GifExportController.prototype.updatePreview_ = function (src) {
-    this.previewContainer.innerHTML = "<img style='max-width:240px;' src='"+src+"'/>";
+    this.previewContainerEl.innerHTML = "<img style='max-width:240px;' src='"+src+"'/>";
   };
 
   ns.GifExportController.prototype.getSelectedDpi_ = function () {
-    var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-dpi]"),
+    var radiosColl = this.uploadFormJQ.get(0).querySelectorAll("[name=gif-dpi]"),
         radios = Array.prototype.slice.call(radiosColl,0);
     var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
 
@@ -51,13 +52,14 @@
     var dpis = [
       [1],
       [5],
-      [10,true] //default
+      [10,true], //default
+      [20],
     ];
 
     for (var i = 0 ; i < dpis.length ; i++) {
       var dpi = dpis[i];
       var radio = this.createRadioForDpi_(dpi);
-      this.uploadForm.get(0).appendChild(radio);
+      this.radioGroupEl.appendChild(radio);
     }
   };
 

templates/layers.html

@@ -1,13 +1,13 @@
 <div class="layers-container">
   <h3 class="layers-title">Layers</h3>
-  <script type="text/template" id="layer-item-template">
-    <li class="layer-item" data-layer-name="{{layername}}">{{layername}}</li>
-  </script>
-  <ul class="layers-list"></ul>
   <div class="layers-button-container">
     <button class="layers-button" data-action="add"  >Add</button>
     <button class="layers-button" data-action="delete"  >Delete</button>
     <button class="layers-button" data-action="up"   >&#8593;</button>
     <button class="layers-button" data-action="down" >&#8595;</button>
   </div>
+  <script type="text/template" id="layer-item-template">
+    <li class="layer-item" data-layer-name="{{layername}}">{{layername}}</li>
+  </script>
+  <ul class="layers-list"></ul>
 </div>

templates/settings-export-gif.html

@@ -9,6 +9,7 @@
           <label style="display:block"><input type="radio" name="gif-dpi" value="{{value}}"/>
           {{label}}</label>
       </script>
+      <div class="gif-export-radio-group"></div>
       <input type="submit" class="export-gif-upload-button" value="Upload" />
     </form>
     <div class="export-gif-preview"><div></div></div>