initial

css/tools.css

@@ -19,8 +19,10 @@
 .tool-icon.selected {
   cursor: default;
   background-color: #444;
-  border: 1px gold solid;
+  border: 3px solid gold;
-  margin: 0;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  background-position: 9px 9px;
 }
 
 .tool-icon:hover {
@@ -64,7 +66,6 @@
 
 .tool-icon.tool-move {
   background-image: url(../img/tools/hand.png);
-  background-position: 12px 12px;
   background-size: 24px 24px;
 }
 
@@ -74,13 +75,16 @@
   background-size: 24px 20px;
 }
 
+.tool-icon.tool-rectangle.selected, .tool-icon.tool-rectangle-select.selected {
+  background-position: 9px 11px;
+}
+
 .tool-icon.tool-shape-select {
   background-image: url(../img/tools/magicwand.png);
 }
 
 .tool-icon.tool-colorpicker {
   background-image: url(../img/tools/eyedropper.png);
-  background-position: 12px 12px;
   background-size: 23px 23px;
 }
 

index.html

@@ -53,6 +53,7 @@
             <iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
           </div>
         </div>
       </div>

js/app.js

@@ -15,6 +15,7 @@
 
       var size = this.readSizeFromURL_();
       var piskel = new pskl.model.Piskel(size.width, size.height);
+      piskel.setDescriptor("New Piskel", "Some text ...");
 
       var layer = new pskl.model.Layer("Layer 1");
       var frame = new pskl.model.Frame(size.width, size.height);

js/controller/settings/SaveController.js

@@ -0,0 +1,18 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+
+  ns.SaveController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  /**
+   * @public
+   */
+  ns.SaveController.prototype.init = function () {
+    this.titleInput = document.getElementById("save-title");
+    this.descriptionInput = document.getElementById("save-description");
+
+    this.titleInput.value = this.piskelController.piskel.getDescriptor().name;
+    this.descriptionInput.value = this.piskelController.piskel.getDescriptor().description;
+  };
+})();

js/controller/settings/SettingsController.js

@@ -13,6 +13,10 @@
     'import' : {
       template : 'templates/settings/import.html',
       controller : ns.ImportController
+    },
+    'save' : {
+      template : 'templates/settings/save.html',
+      controller : ns.SaveController
     }
   };
 

js/model/Piskel.js

@@ -5,6 +5,8 @@
    * @constructor
    * @param {Number} width
    * @param {Number} height
+   * @param {String} name
+   * @param {String} description
    */
   ns.Piskel = function (width, height) {
     if (width && height) {
@@ -16,6 +18,8 @@
 
       /** @type {Number} */
       this.height = height;
+
+      this.descriptor = null;
     } else {
       throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ",");
     }
@@ -96,4 +100,15 @@
     this.layers.splice(index, 1);
   };
 
+  ns.Piskel.prototype.getDescriptor = function () {
+    return this.descriptor;
+  };
+
+  ns.Piskel.prototype.setDescriptor = function (name, desc) {
+    this.descriptor = {
+      name : name,
+      description : desc
+    };
+  };
+
 })();

piskel-script-list.js

@@ -69,6 +69,7 @@ exports.scripts = [
   // Settings sub-controllers
   "js/controller/settings/ApplicationSettingsController.js",
   "js/controller/settings/GifExportController.js",
+  "js/controller/settings/SaveController.js",
   "js/controller/settings/ImportController.js",
   // Settings controller
   "js/controller/settings/SettingsController.js",

templates/settings.html

@@ -1,4 +1,11 @@
 <div class="vertical-centerer">
+  <div
+    data-setting="save"
+    class="tool-icon save-icon"
+    title="Save to gallery"
+    rel="tooltip" data-placement="left" >
+  </div>
+
   <div
     data-setting="user"
     class="tool-icon gear-icon"
@@ -13,20 +20,6 @@
     rel="tooltip" data-placement="left">
   </div>
 
-<!--   <a
-    class="tool-icon gallery-icon"
-    title="Visit gallery"
-    href="http://juliandescottes.github.io/piskel-website/"
-    rel="tooltip" data-placement="left" target="_blank">
-  </a> -->
-
-  <div
-    class="tool-icon save-icon"
-    title="Save to gallery"
-    onclick="pskl.app.storeSheet()"
-    rel="tooltip" data-placement="left" >
-  </div>
-
   <div
     data-setting="gif"
     class="tool-icon upload-cloud-icon"

templates/settings/save.html

@@ -0,0 +1,16 @@
+<div class="settings-section">
+  <div class="settings-title">Save</div>
+  <div class="settings-item">
+    <form action="" method="POST" name="save-form">
+      <div class="row">
+        <label>Title : </label>
+      </div>
+      <input id="save-title" type="text" style="width :100%;"/>
+      <div class="row">
+        <label>Description :</label>
+      </div>
+      <textarea id="save-description" style="width :100%;"></textarea>
+      <input type="submit" class="button button-primary gif-upload-button" value="Save" />
+    </form>
+  </div>
+</div>