diff --git a/css/style.css b/css/style.css
index c441c70c..83dab0e3 100644
--- a/css/style.css
+++ b/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
diff --git a/img/layers.svg b/img/layers.svg
new file mode 100644
index 00000000..34f46180
--- /dev/null
+++ b/img/layers.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/js/app.js b/js/app.js
index 3919d508..aa5a3c46 100644
--- a/js/app.js
+++ b/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);
diff --git a/js/controller/PiskelController.js b/js/controller/PiskelController.js
index faa6fcbf..20bae864 100644
--- a/js/controller/PiskelController.js
+++ b/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);
diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js
index 8b77ad32..bfbe4fed 100644
--- a/js/controller/settings/GifExportController.js
+++ b/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.uploadForm = $("[name=gif-export-upload-form]");
- this.uploadForm.submit(this.upload.bind(this));
+ this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
+ this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
+
+ this.uploadFormJQ = $("[name=gif-export-upload-form]");
+ 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 = "";
+ this.previewContainerEl.innerHTML = "
";
};
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);
}
};
diff --git a/templates/layers.html b/templates/layers.html
index 63ddf0a7..79a4493b 100644
--- a/templates/layers.html
+++ b/templates/layers.html
@@ -1,13 +1,13 @@