proto init implementation + less

css/preview-animation-section.less

@@ -1,13 +1,11 @@
 
+
 .preview-container {
-  position : absolute;
-  bottom : 0; right : 0;
-  height : 282px;
-  width : 256px;
   background : white;
   border : 0px Solid black;
   border-radius:5px 0px 0px 5px;
   box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
+  font-size: 0;
 }
 
 .preview-container canvas {
@@ -16,4 +14,4 @@
 
 #preview-fps {
   width : 200px;
-}
+}

css/preview-film-section.css

@@ -1,103 +0,0 @@
-
-.preview-list-wrapper {
-  overflow-y: scroll;
-  position: absolute;
-  top: 30px;
-  right:0;
-  bottom: 0;
-  left: 0;
-}
-
-.preview-list {
-  list-style-type: none;
-  padding-left: 7px;
-  padding-right: 7px;
-}
-
-.preview-tile {
-  padding : 10px;
-  overflow: hidden;
-  background-color: gray;
-  border-radius: 2px;
-
-  -webkit-box-shadow:  0 0 7px 0 rgba(0, 0, 0, 1);
-  box-shadow:  0 0 7px 0 rgba(0, 0, 0, 1);
-}
-
-.preview-tile:hover {
-  -webkit-box-shadow:  0 0 10px 0 rgba(0, 0, 0, 1);
-  box-shadow:  0 0 10px 0 rgba(0, 0, 0, 1);
-}
-
-.preview-tile .canvas-container {
-  float: left;
-}
-
-.preview-tile .tile-view {
-  float: left;
-  border: #ccc 1px solid;
-}
-
-.preview-tile .tile-action {
-  display: block;
-  cursor: pointer;
-  width: 30px;
-  height: 30px;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: 7px 7px;
-  border: none;
-}
-
-.preview-tile .tile-action-container {
-  float: right;
-  visibility : hidden;
-  overflow: hidden;
-}
-
-.preview-tile:hover .tile-action-container {
-  visibility : visible;
-}
-
-.preview-tile .tile-action.duplicate-frame-action {
-   background-image: url(../img/actions/duplicate.png);
-}
-
-.preview-tile .tile-action.delete-frame-action {
-   background-image: url(../img/actions/delete.png);
-}
-
-.preview-tile:hover {
-  background-color: lightgray;
-}
-
-.preview-tile.selected {
-  background-color: lightyellow;
-}
-
-.preview-tile.ui-draggable-dragging {
-  opacity: 0.3;
-}
-
-
-.preview-tile.droppable-active {
-  background-color: pink;
-}
-
-.interstitial-tile.droppable-hover-active {
-  background-color: purple;
-}
-
-.preview-tile.droppable-hover-active {
-  background-color: yellow;
-}
-
-.interstitial-tile {
-  visibility: hidden;
-  background-color: blue;
-  height: 10px;
-}
-
-.show-interstitial-tiles .interstitial-tile {
-  visibility: visible;
-}

css/preview-film-section.less

@@ -0,0 +1,126 @@
+
+.preview-list-wrapper {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 100%;
+}
+
+.preview-list {
+  list-style-type: none;
+  padding-right: 7px;
+}
+
+.preview-tile {
+  position: relative;
+  border: #444 3px solid;
+  border-radius: 3px;
+}
+
+.preview-tile:hover {
+  border: #999 3px solid;
+}
+
+.preview-tile .tile-overlay {
+  z-index: 10;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  height: 30px;
+  width: 30px;
+  border: none;
+}
+
+.preview-tile:hover .tile-overlay {
+  opacity: 1.0;
+}
+
+.tile-overlay.tile-count {
+  display: block;
+  opacity: 0.5;
+  border-bottom-right-radius: 3px;
+  top: 0;
+  left: 0;
+  font-size: 14px;
+  line-height: 30px;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  cursor: default;
+}
+
+.preview-tile .tile-overlay.delete-frame-action {
+   background-image: url(../img/garbage.png);
+   background-repeat: no-repeat;
+   top: 0;
+   right: 0;
+   border-bottom-left-radius: 3px;
+   height: 30px;
+   width: 30px;
+   background-position: 5px 5px;
+   background-size: 20px;
+   cursor: pointer;
+}
+
+.preview-tile .tile-overlay.duplicate-frame-action {
+   bottom: 0;
+   right: 0;
+   border-bottom-left-radius: 3px;
+   background-image: url(../img/duplicate.png);
+   background-repeat: no-repeat;
+   background-position: 5px 5px;
+   background-size: 20px;
+   cursor: pointer;
+}
+
+.preview-tile .tile-overlay.dnd-action {
+   bottom: 0;
+   left: 0;
+   border-top-right-radius: 3px;
+   background-image: url(../img/dragndrop.png);
+   background-repeat: no-repeat;
+   background-position: 5px 5px;
+   background-size: 20px;
+   cursor: move;
+}
+
+.preview-tile.selected {
+  border-color: gold;
+}
+
+.preview-tile.selected:after {
+  content: " ";
+  position: absolute;
+  top: 38px;
+  right: -15px;
+  border: transparent 4px solid;
+  border-left-color: gold;
+  border-width: 6px;
+  border-style: solid;
+}
+
+.preview-tile.ui-draggable-dragging {
+  opacity: 0.3;
+}
+
+
+.preview-tile.droppable-active {
+  background-color: pink;
+}
+
+.interstitial-tile.droppable-hover-active {
+  background-color: purple;
+}
+
+.preview-tile.droppable-hover-active {
+  background-color: yellow;
+}
+
+.interstitial-tile {
+  visibility: hidden;
+  background-color: blue;
+  height: 10px;
+}
+
+.show-interstitial-tiles .interstitial-tile {
+  visibility: visible;
+}

css/reset.less

@@ -23,11 +23,14 @@ ul, li {
 /* Force apparition of scrollbars on leopard */
 ::-webkit-scrollbar {
     -webkit-appearance: none;
-    width: 10px;
+    width: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: rgba(180,180,180,.7);
-    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+    border-radius: 2px;
+    background-color: #666;
+}
+
+::-webkit-scrollbar-track {
+   background-color: #444;
 }

css/style.less

@@ -1,47 +1,53 @@
 
 
-/**
- * Top menubars
- */
-.menubar {
-  background-color: #fff;
-  width: 100%;
-  height: 30px;
+body {
+  background: -webkit-radial-gradient(circle, #000, #373737);
 }
-
-
 /**
  * Application layout
  */
 
-.left-section {
+@toolbar-height: 104px;
+
+.column-wrapper {
+  text-align: center;
+  font-size: 0;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 220px;
-  background: #666;
-}
-
-.main-panel {
-  position: absolute;
-  top: 0; 
-  right: 0;
-  bottom: 0; 
-  left: 220px;
-  background: #ccc;
-}
-
-
-/**
- * CSS Helpers
- */
-
-.overlay-total {
-  position: absolute;
-  top: 0;
-  right:0;
-  bottom: 0;
   left: 0;
+  top: @toolbar-height;
+  right: 0;
+  bottom: 0;
+}
+
+.left-column {
+  display: inline-block;
+  vertical-align: top;
+  height: 100%;
+  margin-right: 7px;
+}
+
+.main-column {
+  display: inline-block;
+  height: 100%;
+  position: relative;
+}
+
+.drawing-canvas-container {
+  font-size: 0;
+}
+
+.top-section {
+  position: absolute;
+  bottom: 100%;
+  min-width: 400px;
+  margin-bottom: 5px;
+}
+
+.right-column {
+  display: inline-block;
+  vertical-align: top;
+  background: blue;
+  margin-left: 10px;
 }
 
 
@@ -60,7 +66,7 @@
 }
 
 .canvas-container .canvas-background {
-  background: url(../img/transparent_background.png) repeat;
+  background: url(../img/canvas_background.png) repeat;
   position: absolute;
   top: 0;
   right: 0;
@@ -75,16 +81,6 @@
   z-index: 10;
 }
 
-.drawing-canvas {
-  float: left;
-}
-
-.drawing-canvas-container {
-  float: left;
-}
-
-
-
 /** 
  * User messages 
  */

css/tools.less

@@ -1,39 +1,37 @@
-.tools-group {
-    float: left;
-    height: 30px;
-    border-left: 1px solid #ccc;
-    padding: 0 3px;
+
+.tools-wrapper,
+.options-wrapper,
+.palette-wrapper {
+  float: left;
+}
+
+.tools-wrapper {
+  width: 70%;
 }
 
 .tool-icon {
   float: left;
   cursor : pointer;
-  width: 30px;
-  height: 30px;
-  background-color: transparent;
+  width: 46px;
+  height: 46px;
+  margin: 1px;
+  background-color: rgba(200,200,200, .1);
   background-repeat: no-repeat;
-  background-position: 7px 7px;
+  background-position: 9px 9px;
+  background-size: 28px;
 }
 
-/*
- * Framesheet level actions:
- */
-.tool-icon.tool-save {
-  background-image: url(../img/actions/save.png);
+.tool-icon.selected {
+  cursor: default;
+  background-color: #444;
+  cursor: normal;
+  border: 1px gold solid;
+  margin: 0;
 }
 
-.tool-icon.tool-export {
-  background-image: url(../img/actions/image-export.png);
-}
-
-.tool-icon.tool-upload {
-  background-image: url(../img/actions/image-upload.png);
-}
-
-
-.tool-icon.tool-add-frame {
-  background-image: url(../img/actions/add.png);
-}
+.tool-icon:hover {
+  background-color: #444;
+} 
 
 /*
  * Tool icons:
@@ -43,23 +41,23 @@
 }
 
 .tool-icon.tool-vertical-mirror-pen {
-  background-image: url(../img/tools/vertical-mirror-pen.png);
+  background-image: url(../img/tools_legacy/vertical-mirror-pen.png);
 }
 
 .tool-icon.tool-paint-bucket {
-  background-image: url(../img/tools/paint-bucket.png);
+  background-image: url(../img/tools/paintbucket.png);
 }
 
 .tool-icon.tool-eraser {
-  background-image: url(../img/tools/eraser.png);
+  background-image: url(../img/tools_legacy/eraser.png);
 }
 
 .tool-icon.tool-stroke {
-  background-image: url(../img/tools/stroke.png);
+  background-image: url(../img/tools_legacy/stroke.png);
 }
 
 .tool-icon.tool-rectangle {
-  background-image: url(../img/tools/rectangle.png);
+  background-image: url(../img/tools_legacy/rectangle.png);
 }
 
 .tool-icon.tool-circle {
@@ -71,67 +69,63 @@
 }
 
 .tool-icon.tool-rectangle-select {
-  background-image: url(../img/tools/select.png);
+  background-image: url(../img/tools_legacy/select.png);
 }
 
 .tool-icon.tool-shape-select {
-  background-image: url(../img/tools/wand.png);
+  background-image: url(../img/tools/magicwand.png);
 }
 
 .tool-icon.tool-colorpicker {
-  background-image: url(../img/tools/dropper.png);
+  background-image: url(../img/tools/eyedropper.png);
 }
 
-/*.tool-icon.tool-palette {
-  background-image: url(../img/tools/color-palette.png);
-}*/
-
 /*
  * Tool cursors:
  */
 
 .tool-paint-bucket .drawing-canvas-container:hover {
-  cursor: url(../img/tools/paint-bucket.png) 12 12, pointer;
+  cursor: url(../img/tools_legacy/paint-bucket.png) 12 12, pointer;
 }
 
 .tool-vertical-mirror-pen .drawing-canvas-container:hover {
-  cursor: url(../img/tools/vertical-mirror-pen.png) 5 15, pointer;
+  cursor: url(../img/tools_legacy/vertical-mirror-pen.png) 5 15, pointer;
 }
 
 .tool-pen .drawing-canvas-container:hover {
-  cursor: url(../img/tools/pen.png) 0 15, pointer;
+  cursor: url(../img/tools_legacy/pen.png) 0 15, pointer;
 }
 
 .tool-eraser .drawing-canvas-container:hover {
-  cursor: url(../img/tools/eraser.png) 0 15, pointer;
+  cursor: url(../img/tools_legacy/eraser.png) 0 15, pointer;
 }
 
 .tool-stroke .drawing-canvas-container:hover {
-  cursor: url(../img/tools/pen.png) 0 15, pointer;
+  cursor: url(../img/tools_legacy/pen.png) 0 15, pointer;
 }
 
 .tool-rectangle .drawing-canvas-container:hover {
-  cursor: url(../img/tools/rectangle.png) 0 15, pointer;
+  cursor: url(../img/tools_legacy/rectangle.png) 0 15, pointer;
 }
 
 .tool-circle .drawing-canvas-container:hover {
-  cursor: url(../img/tools/circle.png) 2 15, pointer;
+  cursor: url(../img/tools_legacy/circle.png) 2 15, pointer;
 }
 
 .tool-move .drawing-canvas-container:hover {
-  cursor: url(../img/tools/hand.png) 15 15, pointer;
+  cursor: url(../img/tools_legacy/hand.png) 15 15, pointer;
 }
 
 .tool-rectangle-select .drawing-canvas-container:hover {
-  cursor: url(../img/tools/select.png) 15 15, pointer;
+  cursor: url(../img/tools_legacy/select.png) 15 15, pointer;
 }
 
 .tool-shape-select .drawing-canvas-container:hover {
-  cursor: url(../img/tools/wand.png) 15 15, pointer;
+  cursor: url(../img/tools_legacy/wand.png) 15 15, pointer;
 }
 
 .tool-colorpicker .drawing-canvas-container:hover {
-  cursor: url(../img/tools/dropper.png) 0 15, pointer;
+  cursor: url(../img/tools_legacy/dropper.png) 0 15, pointer;
 }
 
 .tool-grid,
@@ -141,15 +135,6 @@
   cursor: pointer;
 }
 
-.tool-icon.selected {
-  cursor: auto;
-  background-color: #eee;
-}
-
-.tool-icon:hover {
-  background-color: #eee;
-}
-
 .tool-color-picker {
   padding: 5px 0 0 5px;
   height: 25px;
@@ -209,3 +194,24 @@
       #fff 100%
   );
 }
+
+/*
+ * Framesheet level actions:
+ */
+.tool-icon.tool-save {
+  background-image: url(../img/actions/save.png);
+}
+
+.tool-icon.tool-export {
+  background-image: url(../img/actions/image-export.png);
+}
+
+.tool-icon.tool-upload {
+  background-image: url(../img/actions/image-upload.png);
+}
+
+
+.tool-icon.tool-add-frame {
+  background-image: url(../img/actions/add.png);
+}
+

index.html

@@ -7,71 +7,79 @@
   <title>Piskel</title>
   <meta name="description" content="">
   <meta name="author" content="Julian Descottes">
-  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="css/reset.css">
-  <link rel="stylesheet" href="css/style.css">
-  <link rel="stylesheet" href="css/tools.css">
-  <link rel="stylesheet" href="css/bootstrap/bootstrap.css">
-  <link rel="stylesheet" href="css/bootstrap/bootstrap-tooltip-custom.css">
-  <link rel="stylesheet" href="css/preview-film-section.css">
-  <link rel="stylesheet" href="css/preview-animation-section.css">
-  
+  <link rel="stylesheet/less" type="text/css" href="css/reset.less">
+  <link rel="stylesheet/less" type="text/css" href="css/style.less">
+  <link rel="stylesheet/less" type="text/css" href="css/tools.less">
+  <link rel="stylesheet/less" type="text/css" href="css/bootstrap/bootstrap.css">
+  <link rel="stylesheet/less" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
+  <link rel="stylesheet/less" type="text/css" href="css/preview-film-section.less">
+  <link rel="stylesheet/less" type="text/css" href="css/preview-animation-section.less">
+
+  <script src="js/lib/less-1.3.3-min.js" type="text/javascript"></script> 
 </head>
 <body>
 
-  <div class='left-section'>
-    <div class="menubar">
-      <ul class="tools-group">
-        <!-- 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" onclick="piskel.exportToPNG()" rel="tooltip" data-placement="bottom" ></li>
-        <li class="tool-icon tool-upload" data-tool-id="tool-upload" title="Upload as 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>
-    <!-- List of frames: -->
-    <div class="preview-list-wrapper">
-      <ul class="preview-list" id="preview-list"></ul>
-    </div>
-  </div>
-
-  <div class='main-panel'>
-
-    <div id="menubar" class="menubar">
-      <ul id="tools-container" class="tools-group"></ul>
-      <ul class="tools-group">
-        <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="tools-group">
-        <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">
-      <div class="canvas-background"></div>
+  <div class="column-wrapper">
+    <div class='left-column'>
+      
+      <!-- List of frames: -->
+      <div class="preview-list-wrapper">
+        <ul class="preview-list" id="preview-list"></ul>
+      </div>
     </div>
 
-    <!-- Animation preview: -->
-    <div class='preview-container'>
-      <input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
-      <span id="display-fps">12 FPS</span>
-      <div id='preview-canvas-container' class="canvas-container">
+    <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">
         <div class="canvas-background"></div>
       </div>
     </div>
+
+    <div class="right-column">
+      <!-- Animation preview: -->
+      <div class='preview-container'>
+        <div id='preview-canvas-container' class="canvas-container">
+          <div class="canvas-background"></div>
+        </div>
+        <input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
+        <span id="display-fps">12 FPS</span>
+        
+      </div>
+
+      <div class="menubar">
+        <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" onclick="piskel.exportToPNG()" rel="tooltip" data-placement="bottom" ></li>
+          <li class="tool-icon tool-upload" data-tool-id="tool-upload" title="Upload as 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>
+    </div>
   </div>
   
   <!-- Core libraries: -->

js/controller/AnimatedPreviewController.js

@@ -47,11 +47,13 @@
      * Calculate the preview DPI depending on the framesheet size
      */
     ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
-        var framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
+        var previewSize = 200,
+            framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
             framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
         // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
         
-        return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
+        //return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
+        return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
     };
 
     ns.AnimatedPreviewController.prototype.updateDPI_ = function () {

js/controller/DrawingController.js

@@ -71,7 +71,7 @@
         body.mouseup($.proxy(this.onMouseup_, this));
         
         // Deactivate right click:
-        body.contextmenu(this.onCanvasContextMenu_);
+        //body.contextmenu(this.onCanvasContextMenu_);
   };
 
 
@@ -254,20 +254,21 @@
    * @private
    */
   ns.DrawingController.prototype.calculateDPI_ = function() {
-    var userMessageGap = 80; // Reserve some height to show the user message at the bottom
-
-    var availableViewportHeight = $('.main-panel').height() - userMessageGap,
-        availableViewportWidth = $('.main-panel').width(),
-        previewHeight = $(".preview-container").height(),
-        previewWidth = $(".preview-container").width(),
+    var availableViewportHeight = $('.main-column').height(),
+        leftSectionWidth = $('.left-column').width(),
+        rightSectionWidth = $('.right-column').width(),
+        availableViewportWidth = $('body').width() - leftSectionWidth - rightSectionWidth,
+        //previewHeight = $(".preview-container").height(),
+        //previewWidth = $(".preview-container").width(),
         framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
         framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
     var dpi = pskl.PixelUtils.calculateDPI(availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
-
+    /*
     var drawingCanvasHeight = dpi * framePixelHeight;
     var drawingCanvasWidth = dpi * framePixelWidth;
-
+    */
     // Check if preview and drawing canvas overlap
+    /*
     var heightGap =  drawingCanvasHeight + previewHeight - availableViewportHeight,
         widthGap = drawingCanvasWidth + previewWidth - availableViewportWidth;
     if (heightGap > 0 && widthGap > 0) {
@@ -275,7 +276,7 @@
         var gapDPI = pskl.PixelUtils.calculateDPI(heightGap, widthGap, framePixelHeight, framePixelWidth);
         // substract gap dpi to initial dpi
         dpi -= (gapDPI + 1);
-    }
+    }*/
     return dpi;
   };
 

js/controller/PreviewFilmController.js

@@ -181,16 +181,12 @@
         
         previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
 
-        var actionContainer = document.createElement("DIV");
-        actionContainer.className = "tile-action-container";
-
         var canvasPreviewDuplicateAction = document.createElement("button");
         canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip');
         canvasPreviewDuplicateAction.setAttribute('data-placement', 'right');
         canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame');
-        canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action";
-        actionContainer.appendChild(canvasPreviewDuplicateAction);
-        
+        canvasPreviewDuplicateAction.className = "tile-overlay duplicate-frame-action";
+        previewTileRoot.appendChild(canvasPreviewDuplicateAction);
         canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
 
         // TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
@@ -202,24 +198,35 @@
         previewTileRoot.appendChild(canvasContainer);
 
         if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
-            var canvasPreviewDeleteAction = document.createElement("button");
-            canvasPreviewDeleteAction.setAttribute('rel', 'tooltip');
-            canvasPreviewDeleteAction.setAttribute('data-placement', 'right');
-            canvasPreviewDeleteAction.setAttribute('title', 'Delete this frame');
-            canvasPreviewDeleteAction.className = "tile-action delete-frame-action";
-            canvasPreviewDeleteAction.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
-            previewTileRoot.appendChild(canvasPreviewDeleteAction);
-            actionContainer.appendChild(canvasPreviewDeleteAction);
-        }
+            // Add 'remove frame' button.
+            var deleteButton = document.createElement("button");
+            deleteButton.setAttribute('rel', 'tooltip');
+            deleteButton.setAttribute('data-placement', 'right');
+            deleteButton.setAttribute('title', 'Delete this frame');
+            deleteButton.className = "tile-overlay delete-frame-action";
+            deleteButton.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
+            previewTileRoot.appendChild(deleteButton);
 
-        previewTileRoot.appendChild(actionContainer);
+            // Add 'dragndrop handle'.
+            var dndHandle = document.createElement("div");
+            dndHandle.setAttribute('rel', 'tooltip');
+            dndHandle.setAttribute('title', 'Drag\'n drop');
+            dndHandle.setAttribute('data-placement', 'right');
+            dndHandle.className = "tile-overlay dnd-action";
+            previewTileRoot.appendChild(dndHandle);
+        }
+        var tileCount = document.createElement("div");
+        tileCount.className = "tile-overlay tile-count";
+        tileCount.innerHTML = tileNumber;
+        previewTileRoot.appendChild(tileCount);
+        
 
         return previewTileRoot;
     };
 
     ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
         // has not class tile-action:
-        if(!evt.target.classList.contains('tile-action')) {
+        if(!evt.target.classList.contains('tile-overlay')) {
             this.framesheet.setCurrentFrameIndex(index);
         }    
     };
@@ -239,7 +246,7 @@
      * Calculate the preview DPI depending on the framesheet size
      */
     ns.PreviewFilmController.prototype.calculateDPI_ = function () {
-        var previewSize = 128,
+        var previewSize = 120,
             framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
             framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
         // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)