Adding moar icons + anim preview + code removal

css/preview-animation-section.less

@@ -1,17 +0,0 @@
-
-
-.preview-container {
-  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 {
-  border : 0px Solid transparent;
-}
-
-#preview-fps {
-  width : 200px;
-}

css/preview-film-section.less

@@ -98,6 +98,11 @@
   border-style: solid;
 }
 
+
+/**
+ *  Drag n drop styles.
+ */
+
 .preview-tile.ui-draggable-dragging {
   opacity: 0.3;
 }

css/style.less

@@ -3,6 +3,7 @@
 body {
   background: -webkit-radial-gradient(circle, #000, #373737);
 }
+
 /**
  * Application layout
  */
@@ -46,7 +47,6 @@ body {
 .right-column {
   display: inline-block;
   vertical-align: top;
-  background: blue;
   margin-left: 10px;
 }
 
@@ -81,6 +81,39 @@ body {
   z-index: 10;
 }
 
+
+/**
+ * Animated preview styles.
+ */
+
+.preview-container {
+  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 {
+  border : 0px Solid transparent;
+}
+
+.display-fps {
+  float: left;
+  color: #aaa;
+  font-size: 12px;
+  min-width: 55px;
+  vertical-align: bottom;
+  line-height: 24px;
+}
+
+.range-fps {
+  overflow: hidden;
+}
+
+.application-actions {
+  margin-top: 35px;
+}
+
 /** 
  * User messages 
  */

css/tools.less

@@ -17,8 +17,8 @@
   margin: 1px;
   background-color: rgba(200,200,200, .1);
   background-repeat: no-repeat;
-  background-position: 9px 9px;
+  background-position: 12px 12px;
-  background-size: 28px;
+  background-size: 24px 24px;
 }
 
 .tool-icon.selected {
@@ -41,7 +41,9 @@
 }
 
 .tool-icon.tool-vertical-mirror-pen {
-  background-image: url(../img/tools_legacy/vertical-mirror-pen.png);
+  background-image: url(../img/tools/mirror.png);
+  background-position: 0px 10px;
+  background-size: 38px 27px;
 }
 
 .tool-icon.tool-paint-bucket {
@@ -49,15 +51,17 @@
 }
 
 .tool-icon.tool-eraser {
-  background-image: url(../img/tools_legacy/eraser.png);
+  background-image: url(../img/tools/eraser.png);
 }
 
 .tool-icon.tool-stroke {
-  background-image: url(../img/tools_legacy/stroke.png);
+  background-image: url(../img/tools/stroke.png);
 }
 
 .tool-icon.tool-rectangle {
-  background-image: url(../img/tools_legacy/rectangle.png);
+  background-image: url(../img/tools/rectangle.png);
+  background-position: 12px 14px;
+  background-size: 24px 20px;
 }
 
 .tool-icon.tool-circle {
@@ -66,10 +70,14 @@
 
 .tool-icon.tool-move {
   background-image: url(../img/tools/hand.png);
+  background-position: 12px 12px;
+  background-size: 24px 24px;
 }
 
 .tool-icon.tool-rectangle-select {
-  background-image: url(../img/tools_legacy/select.png);
+  background-image: url(../img/tools/rectangle_selection.png);
+  background-position: 12px 14px;
+  background-size: 24px 20px;
 }
 
 .tool-icon.tool-shape-select {
@@ -78,6 +86,8 @@
 
 .tool-icon.tool-colorpicker {
   background-image: url(../img/tools/eyedropper.png);
+  background-position: 12px 12px;
+  background-size: 23px 23px;
 }
 
 /*

index.html

@@ -14,7 +14,6 @@
   <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>
@@ -64,18 +63,22 @@
         <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;"/>
+        <div>
-        <span id="display-fps">12 FPS</span>
+          <span id="display-fps" class="display-fps">12 FPS</span>
+          <input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
+        </div>
+        
+        
         
       </div>
 
-      <div class="menubar">
+      <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" onclick="piskel.exportToPNG()" 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="Upload as GIF" onclick="piskel.uploadAsGIF()" 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>