Fix save/upload buttons UX

- new look and feel
- upload for png spritesheet & animated gif
- remove host code (window.open) from spritesheetRenderer

css/tools.css

@@ -185,19 +185,29 @@
 /*
  * Framesheet level actions:
  */
-.tool-icon.tool-save {
+.tool-icon.save-icon {
-  background-image: url(../img/actions/save.png);
+  background-image: url(../img/save.png);
+  background-position: 6px 6px;
+  background-size: 36px 36px;
 }
 
-.tool-icon.tool-export {
+.tool-icon.upload-cloud-icon {
-  background-image: url(../img/actions/image-export.png);
+  background-image: url(../img/cloud_export.png);
+  background-position: 4px 0px;
+  background-size: 36px 36px;
+  position: relative;
 }
 
-.tool-icon.tool-upload {
+.upload-cloud-icon .label {
-  background-image: url(../img/actions/image-upload.png);
+  position: absolute;
+  left: 0;
+  bottom: 4px;
+  right: 0;
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #fff;
 }
 
-
 .tool-icon.tool-add-frame {
   background-image: url(../img/actions/add.png);
 }

index.html

@@ -74,14 +74,16 @@
       </div>
 
       <div class="application-actions">
-        <ul>
+        <div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></div>
-          <!-- TODO: Remove that from here or change CSS class naming since
+        <div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="bottom" >
-            they are framesheet level actions, not tools --> 
+          <span class="label">GIF</span>
-          <li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></li>
+        </div>
-          <li class="tool-icon tool-export" data-tool-id="tool-export" title="Export to PNG framesheet" onclick="piskel.exportToPNG()" rel="tooltip" data-placement="bottom" ></li>
+        <div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="bottom" >
-          <li class="tool-icon tool-upload" data-tool-id="tool-upload" title="Export to animated GIF" onclick="piskel.uploadAsGIF()" rel="tooltip" data-placement="bottom" ></li>
+          <span class="label">PNG</span>
-          <li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></li>
+        </div>
-        </ul>
+        
+
+        <div class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></div>
       </div>
     </div>
   </div>

js/piskel.js

@@ -167,41 +167,42 @@ $.namespace("pskl");
       return false;
     },
 
-    /**
+    uploadToScreenletstore : function(imageData) {
-     * Open new window with spritesheet as PNG
-     */
-    exportToPNG : function () {
-      (new pskl.rendering.SpritesheetRenderer(frameSheet)).render();
-    },
-
-    uploadAsGIF : function () {
-      var encoder = new GIFEncoder(),
-          dpi = 10;
-      encoder.setRepeat(0);
-      var fps = piskel.animationController.fps;
-      encoder.setDelay(1000/fps);
-      
-      encoder.start();
-      encoder.setSize(frameSheet.getWidth() * dpi, frameSheet.getHeight() * dpi);
-      for (var i = 0 ; i < frameSheet.frames.length ; i++) {
-        var frame = frameSheet.frames[i];
-        var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
-        encoder.addFrame(renderer.render());
-      }
-      encoder.finish();
-
-      var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
       var xhr = new XMLHttpRequest();
       var formData = new FormData();
       formData.append('data', imageData);
       xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true);
+      var cloudURL;
+      var that = this;
       xhr.onload = function(e) {
         if (this.status == 200) {
-          var baseUrl = window.open("http://screenletstore.appspot.com/img/" + this.responseText);
+          cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText;
+          that.openWindow(cloudURL);
         }
       };
 
       xhr.send(formData);
+    },
+
+    uploadAsAnimatedGIF : function () {
+      var fps = piskel.animationController.fps;
+      var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps);
+      this.uploadToScreenletstore(imageData);
+    },
+
+    uploadAsSpritesheetPNG : function () {
+      var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataSpritesheetPNG();
+      this.uploadToScreenletstore(imageData);
+    },
+
+    openWindow: function(url) {
+      var options = [
+        "dialog=yes", "scrollbars=no", "status=no",
+        "width=" + frameSheet.getWidth() * frameSheet.getFrameCount(),
+        "height=" + frameSheet.getHeight()
+      ].join(",");
+
+      window.open(url, "piskel-export", options);
     }
   };
 

js/rendering/SpritesheetRenderer.js

@@ -6,18 +6,34 @@
 		this.framesheet = framesheet;
 	};
 
-	/**
+	ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () {
-	 * Will open a new window displaying the spritesheet as a png 
-	 */
-	ns.SpritesheetRenderer.prototype.render = function () {
 		var canvas = this.createCanvas_();
 		for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
 			var frame = this.framesheet.getFrameByIndex(i);
 			this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
 		}
-		this.openCanvasAsPNGInWindow_(canvas);
+		return canvas.toDataURL("image/png")
 	};
 
+	ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) {
+		var encoder = new GIFEncoder(), dpi = 10;
+        encoder.setRepeat(0);
+      	encoder.setDelay(1000/fps);
+	      
+	    encoder.start();
+	    encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi);
+	    for (var i = 0 ; i < this.framesheet.frames.length ; i++) {
+	      var frame = this.framesheet.frames[i];
+	      var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
+	      encoder.addFrame(renderer.render());
+	    }
+	    encoder.finish();
+
+	    var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
+	    return imageData;
+	};
+
+
 	/**
 	 * TODO(juliandescottes): Mutualize with code already present in FrameRenderer
 	 */
@@ -44,14 +60,4 @@
 			throw "Cannot render empty Spritesheet";
 		}
 	};
-
-	ns.SpritesheetRenderer.prototype.openCanvasAsPNGInWindow_ = function (canvas) {
-		var options = [
-		"dialog=yes", "scrollbars=no", "status=no",
-		"width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(),
-		"height=" + this.framesheet.getHeight()
-		].join(",");
-
-		window.open(canvas.toDataURL("image/png"), "piskel-export", options);
-	};
 })();