Merge branch 'proto-ui-1'

css/preview-film-section.css

@@ -10,6 +10,31 @@
   padding-right: 7px;
 }
 
+.add-frame-action {
+  border: #888 solid 4px;
+  font-size: 13px;
+  color: #888;
+  cursor: pointer;
+  padding: 6px 0;
+  border-radius: 4px;
+  margin-top: 8px;
+  background-image: url(../img/plus.png);
+  background-repeat: no-repeat;
+  background-position: 3px 7px;
+  background-size: 26px 26px;
+  text-indent: 18px;
+  background-color: #222;
+}
+
+.add-frame-action .label {
+  width: 80px;
+  margin: 0 auto;
+}
+
+.add-frame-action:hover {
+  border-color: gold;
+}
+
 .preview-tile {
   position: relative;
   border: #444 3px solid;

css/reset.css

@@ -32,5 +32,5 @@ ul, li {
 }
 
 ::-webkit-scrollbar-track {
-   background-color: #444;
+   background-color: rgba(50, 50, 50, 0.4);;
 }

css/style.css

@@ -12,10 +12,10 @@ body {
   text-align: center;
   font-size: 0;
   position: absolute;
-  left: 0;
-  top: 104px;
+  left: 104px;
+  top: 10px;
   right: 0;
-  bottom: 0;
+  bottom: 10px;
 }
 
 .left-column {
@@ -35,19 +35,27 @@ body {
   font-size: 0;
 }
 
-.top-section {
-  position: absolute;
-  bottom: 100%;
-  min-width: 400px;
-  margin-bottom: 5px;
-}
-
 .right-column {
   display: inline-block;
   vertical-align: top;
   margin-left: 10px;
 }
 
+.sticky-section {
+  display: table;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 140px;
+}
+
+.sticky-section .wrap {
+  display: table-cell;
+  vertical-align: middle;
+}
+
 
 /**
  * Canvases layout

css/tools.css

@@ -5,10 +5,6 @@
   float: left;
 }
 
-.tools-wrapper {
-  width: 70%;
-}
-
 .tool-icon {
   float: left;
   cursor : pointer;
@@ -95,96 +91,77 @@
  */
 
 .tool-paint-bucket .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/paint-bucket.png) 12 12, pointer;
+  cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
 }
 
 .tool-vertical-mirror-pen .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/vertical-mirror-pen.png) 5 15, pointer;
+  cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
 }
 
 .tool-pen .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/pen.png) 0 15, pointer;
+  cursor: url(../img/icons/pen.png) 0 15, pointer;
 }
 
 .tool-eraser .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/eraser.png) 0 15, pointer;
+  cursor: url(../img/icons/eraser.png) 0 15, pointer;
 }
 
 .tool-stroke .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/pen.png) 0 15, pointer;
+  cursor: url(../img/icons/pen.png) 0 15, pointer;
 }
 
 .tool-rectangle .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/rectangle.png) 0 15, pointer;
+  cursor: url(../img/icons/rectangle.png) 0 15, pointer;
 }
 
 .tool-circle .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/circle.png) 2 15, pointer;
+  cursor: url(../img/icons/circle.png) 2 15, pointer;
 }
 
 .tool-move .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/hand.png) 15 15, pointer;
+  cursor: url(../img/icons/hand.png) 15 15, pointer;
 }
 
 .tool-rectangle-select .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/select.png) 15 15, pointer;
+  cursor: url(../img/icons/select.png) 15 15, pointer;
 }
 
 .tool-shape-select .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/wand.png) 15 15, pointer;
+  cursor: url(../img/icons/wand.png) 15 15, pointer;
 }
 
 .tool-colorpicker .drawing-canvas-container:hover {
-  cursor: url(../img/tools_legacy/dropper.png) 0 15, pointer;
-}
-
-.tool-grid,
-.tool-grid label,
-.tool-grid input {
-  line-height: 2.5;
-  cursor: pointer;
-}
-
-.tool-color-picker {
-  padding: 5px 0 0 5px;
-  height: 25px;
-  cursor : default;
+  cursor: url(../img/icons/dropper.png) 0 15, pointer;
 }
 
 .tool-color-picker input {
-  width: 8px; height: 8px;
+  width: 16px;
+  height: 16px;
+  text-indent: -10000px;
   border: 1px solid black;
-  padding: 1px;
   background: white;
   cursor: pointer;
   position : relative;
+  top: 10px;
+  margin-left: 2px;
 }
 
-.secondary-color-picker {
-  top : 8px;
+.tool-color-picker .secondary-color-picker {
+  top : 18px;
+  margin-left: 0;
 }
 
-.tool-palette {
-    width: auto;
-}
-.tool-palette .palette li {
-    float: left;
-}
-
-.palette .palette-color {
-  cursor: pointer;
-  display : inline-block;
-  height : 20px;
-  width : 20px;
-  margin : 5px;
-}
 
 .palette .palette-color.transparent-color {
+  position: relative;
+  top: 10px;
+  left: 10px;
   background-color: white;
   height : 16px;
   width : 16px;
   border: 2px solid #000;
-
+  background-size: 16px 16px;
+  background-position: 0 0;
   background-image: -webkit-gradient(
     linear,
     left top,
@@ -208,20 +185,27 @@
 /*
  * Framesheet level actions:
  */
-.tool-icon.tool-save {
-  background-image: url(../img/actions/save.png);
+ 
+.tool-icon.save-icon {
+  background-image: url(../img/save.png);
+  background-position: 6px 6px;
+  background-size: 36px 36px;
 }
 
-.tool-icon.tool-export {
-  background-image: url(../img/actions/image-export.png);
+.tool-icon.upload-cloud-icon {
+  background-image: url(../img/cloud_export.png);
+  background-position: 4px 0px;
+  background-size: 36px 36px;
+  position: relative;
 }
 
-.tool-icon.tool-upload {
-  background-image: url(../img/actions/image-upload.png);
-}
-
-
-.tool-icon.tool-add-frame {
-  background-image: url(../img/actions/add.png);
+.upload-cloud-icon .label {
+  position: absolute;
+  left: 0;
+  bottom: 4px;
+  right: 0;
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #fff;
 }
 

index.html

@@ -17,6 +17,30 @@
 </head>
 <body>
 
+  <div id="menubar" class="sticky-section">
+    <div class="wrap">
+      <ul id="tools-container" class="tools-wrapper"></ul>
+      <div class="palette-wrapper">
+        <div class="tool-icon tool-color-picker">
+          <input id="color-picker" class="color {hash:true}" type="text" value="" />
+          <input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
+        </div>
+        <div class="tool-icon tool-palette">
+          <div id="palette" class="palette">
+            <span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
+          </div>
+        </div>
+      </div>
+      <!-- TODO: remove grid -->
+      <div style="display:none;" class="options-wrapper">   
+        <div class="tool-grid">
+          <input id="show-grid" type="checkbox"/>
+          <label for="show-grid">Show grid</label>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="column-wrapper">
     <div class='left-column'>
       
@@ -27,27 +51,6 @@
     </div>
 
     <div class='main-column'>
-      
-      <div id="menubar" class="top-section">
-        <ul id="tools-container" class="tools-wrapper"></ul>
-        <ul class="palette-wrapper">
-          <li class="tool-icon tool-palette">
-            <ul id="palette" class="palette">
-              <span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
-            </ul>
-          </li>
-          <li class="tool-icon tool-color-picker">
-            <input id="color-picker" class="color {hash:true}" type="text" value="" />
-            <input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
-          </li>
-        </ul>
-        <ul class="options-wrapper">
-          <li class="tool-grid">
-            <input id="show-grid" type="checkbox"/>
-            <label for="show-grid">Show grid</label>
-          </li>
-        </ul>
-      </div>
 
       <!-- Drawing area: -->
       <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
@@ -71,14 +74,13 @@
       </div>
 
       <div class="application-actions">
-        <ul>
-          <!-- TODO: Remove that from here or change CSS class naming since
-            they are framesheet level actions, not tools --> 
-          <li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></li>
-          <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>
-          <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>
-          <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>
-        </ul>
+        <div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></div>
+        <div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="bottom" >
+          <span class="label">GIF</span>
+        </div>
+        <div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="bottom" >
+          <span class="label">PNG</span>
+        </div>
       </div>
     </div>
   </div>

js/controller/PreviewFilmController.js

@@ -13,10 +13,7 @@
         $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
     };
 
-    ns.PreviewFilmController.prototype.init = function() {
-        var addFrameButton = $('#add-frame-button')[0];
-        addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
-    };
+    ns.PreviewFilmController.prototype.init = function() {};
 
     ns.PreviewFilmController.prototype.addFrame = function () {
         this.framesheet.addEmptyFrame();
@@ -50,7 +47,15 @@
         for (var i = 0, l = frameCount; i < l ; i++) {
             this.container.append(this.createPreviewTile_(i));
         }
-        
+        // Append 'new empty frame' button
+        var newFrameButton = document.createElement("div");
+        newFrameButton.id = "add-frame-action";
+        newFrameButton.className = "add-frame-action";
+        newFrameButton.innerHTML = "<p class='label'>Add new frame</p>";
+        this.container.append(newFrameButton);
+
+        $(newFrameButton).click(this.addFrame.bind(this));
+
         var needDragndropBehavior = (frameCount > 1);
         if(needDragndropBehavior) {
             this.initDragndropBehavior_();

js/controller/ToolController.js

@@ -69,11 +69,15 @@
      * @private
      */
     ns.ToolController.prototype.createToolMarkup_ = function() {
-        var currentTool, toolMarkup = '';
+        var currentTool, toolMarkup = '', extraClass;
         // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that.
         for (var toolKey in this.toolInstances) {
             currentTool = this.toolInstances[toolKey];
-            toolMarkup += '<li rel="tooltip" data-placement="bottom" class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId +
+            extraClass = currentTool.toolId;
+            if (this.currentSelectedTool == currentTool) {
+                extraClass = extraClass + " selected";
+            }
+            toolMarkup += '<li rel="tooltip" data-placement="right" class="tool-icon ' + extraClass + '" data-tool-id="' + currentTool.toolId +
                             '" title="' + currentTool.helpText + '"></li>';
         }
         $('#tools-container').html(toolMarkup);

js/piskel.js

@@ -167,41 +167,42 @@ $.namespace("pskl");
       return false;
     },
 
-    /**
-     * 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());
+    uploadToScreenletstore : function(imageData) {
       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;
 	};
 
-	/**
-	 * Will open a new window displaying the spritesheet as a png 
-	 */
-	ns.SpritesheetRenderer.prototype.render = function () {
+	ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = 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);
-	};
 })();