Move 'add frame button' to preview frames

and change UXD

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/tools.css

@@ -185,6 +185,7 @@
 /*
  * Framesheet level actions:
  */
+ 
 .tool-icon.save-icon {
   background-image: url(../img/save.png);
   background-position: 6px 6px;
@@ -208,7 +209,3 @@
   color: #fff;
 }
 
-.tool-icon.tool-add-frame {
-  background-image: url(../img/actions/add.png);
-}
-

index.html

@@ -81,9 +81,6 @@
         <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 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/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_();