Merge pull request #104 from juliandescottes/proto-ui-1

A bunch of UI changes

css/preview-animation-section.css

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

css/preview-film-section.css

@@ -1,103 +1,116 @@
 
 .preview-list-wrapper {
   overflow-y: scroll;
-  position: absolute;
-  top: 30px;
-  right:0;
-  bottom: 0;
-  left: 0;
+  overflow-x: hidden;
+  height: 100%;
 }
 
 .preview-list {
   list-style-type: none;
-  padding-left: 7px;
   padding-right: 7px;
 }
 
 .preview-tile {
-  padding : 10px;
-  overflow: hidden;
-  background-color: gray;
-  border-radius: 2px;
+  position: relative;
+  border: #444 3px solid;
+  border-radius: 3px;
+  margin: 5px 0;
+}
 
-  -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:first-child {
+  margin-top: 0;
 }
 
 .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);
+  border: #999 3px solid;
 }
 
-.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;
+.preview-tile .tile-overlay {
+  z-index: 10;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.3);
+  opacity: 0;
   height: 30px;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: 7px 7px;
+  width: 30px;
   border: none;
 }
 
-.preview-tile .tile-action-container {
-  float: right;
-  visibility : hidden;
-  overflow: hidden;
+.preview-tile:hover .tile-overlay {
+  opacity: 1.0;
 }
 
-.preview-tile:hover .tile-action-container {
-  visibility : visible;
+.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-action.duplicate-frame-action {
-   background-image: url(../img/actions/duplicate.png);
+.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-action.delete-frame-action {
-   background-image: url(../img/actions/delete.png);
+.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:hover {
-  background-color: lightgray;
+.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 {
-  background-color: lightyellow;
+  border-color: gold;
 }
 
-.preview-tile.ui-draggable-dragging {
-  opacity: 0.3;
+.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.droppable-active {
-  background-color: pink;
-}
+/**
+ *  Drag n drop styles.
+ */
 
-.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;
+.preview-tile-drop-proxy {
+  border: 3px dashed gold;
+  height: 90px;
+  border-radius: 9px;
+  background-color: rgba(255, 215,0, 0.2);
 }

css/reset.css

@@ -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.css

@@ -1,47 +1,51 @@
 
 
-/**
- * Top menubars
- */
-.menubar {
-  background-color: #fff;
-  width: 100%;
-  height: 30px;
+body {
+  background: -webkit-radial-gradient(circle, #000, #373737);
 }
 
-
 /**
  * Application layout
  */
 
-.left-section {
+.column-wrapper {
+  text-align: center;
+  font-size: 0;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 220px;
-  background: #666;
-}
-
-.main-panel {
-  position: absolute;
-  top: 0; 
+  left: 0;
+  top: 104px;
   right: 0;
   bottom: 0;
-  left: 220px;
-  background: #ccc;
 }
 
+.left-column {
+  display: inline-block;
+  vertical-align: top;
+  height: 100%;
+  margin-right: 7px;
+}
 
-/**
- * CSS Helpers
- */
+.main-column {
+  display: inline-block;
+  height: 100%;
+  position: relative;
+}
 
-.overlay-total {
+.drawing-canvas-container {
+  font-size: 0;
+}
+
+.top-section {
   position: absolute;
-  top: 0;
-  right:0;
-  bottom: 0;
-  left: 0;
+  bottom: 100%;
+  min-width: 400px;
+  margin-bottom: 5px;
+}
+
+.right-column {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 10px;
 }
 
 
@@ -60,7 +64,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,15 +79,38 @@
   z-index: 10;
 }
 
-.drawing-canvas {
-  float: left;
+
+/**
+ * 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;
 }
 
-.drawing-canvas-container {
-  float: left;
+.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.css

@@ -1,38 +1,36 @@
-.tools-group {
+
+.tools-wrapper,
+.options-wrapper,
+.palette-wrapper {
   float: left;
-    height: 30px;
-    border-left: 1px solid #ccc;
-    padding: 0 3px;
+}
+
+.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: 12px 12px;
+  background-size: 24px 24px;
 }
 
-/*
- * 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;
 } 
 
 /*
@@ -43,11 +41,13 @@
 }
 
 .tool-icon.tool-vertical-mirror-pen {
-  background-image: url(../img/tools/vertical-mirror-pen.png);
+  background-image: url(../img/tools/mirror.png);
+  background-position: 0px 10px;
+  background-size: 38px 27px;
 }
 
 .tool-icon.tool-paint-bucket {
-  background-image: url(../img/tools/paint-bucket.png);
+  background-image: url(../img/tools/paintbucket.png);
 }
 
 .tool-icon.tool-eraser {
@@ -60,6 +60,8 @@
 
 .tool-icon.tool-rectangle {
   background-image: url(../img/tools/rectangle.png);
+  background-position: 12px 14px;
+  background-size: 24px 20px;
 }
 
 .tool-icon.tool-circle {
@@ -68,70 +70,72 @@
 
 .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/select.png);
+  background-image: url(../img/tools/rectangle_selection.png);
+  background-position: 12px 14px;
+  background-size: 24px 20px;
 }
 
 .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);
+  background-position: 12px 12px;
+  background-size: 23px 23px;
 }
 
-/*.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 +145,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 +204,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,41 +7,30 @@
   <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" type="text/css" href="css/reset.css">
+  <link rel="stylesheet" type="text/css" href="css/style.css">
+  <link rel="stylesheet" type="text/css" href="css/tools.css">
+  <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
+  <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
+  <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
 </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>
+  <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>
 
-  <div class='main-panel'>
+    <div class='main-column'>
       
-    <div id="menubar" class="menubar">
-      <ul id="tools-container" class="tools-group"></ul>
-      <ul class="tools-group">
+      <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>
@@ -52,31 +41,51 @@
             <input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
           </li>
         </ul>
-      <ul class="tools-group">
+        <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'>
-      <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="canvas-background"></div>
         </div>
+        <div>
+          <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="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>
     </div>
   </div>
   
   <!-- Core libraries: -->
   <script src="js/lib/jquery-1.8.0.js"></script>
-  <script src="js/lib/jquery-ui-1.8.23.custom.js"></script>
+  <script src="js/lib/jquery-ui-1.10.3.custom.js"></script>
   <script src="js/lib/pubsub.js"></script>
   <script src="js/lib/bootstrap/bootstrap.js"></script> 
 

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

@@ -48,114 +48,43 @@
         var frameCount = this.framesheet.getFrameCount();
 
         for (var i = 0, l = frameCount; i < l ; i++) {
-            this.container.append(this.createInterstitialTile_(i));
             this.container.append(this.createPreviewTile_(i));
         }
-        this.container.append(this.createInterstitialTile_(frameCount));
         
-        var needDragndropBehavior = (frameCount > 1) ? true : false;
+        var needDragndropBehavior = (frameCount > 1);
         if(needDragndropBehavior) {
             this.initDragndropBehavior_();
         }
     };
 
-    /**
-     * @private
-     */
-    ns.PreviewFilmController.prototype.createInterstitialTile_ = function (tileNumber) {
-        var interstitialTile = document.createElement("div");
-        interstitialTile.className = "interstitial-tile";
-        interstitialTile.setAttribute("data-tile-type", "interstitial");
-        interstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
-
-        return interstitialTile;
-    };
 
     /**
      * @private
      */
     ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
-        var tiles = $(".preview-tile");
-        // Each preview film tile is draggable.
-        tiles.draggable( {
-          //containment: '.left-nav',
-          stack: '.preview-tile',
-          cursor: 'move',
-          revert: true,
-          start: function(event, ui) {
-            // We only show the fake interstitial tiles when starting the 
-            // drag n drop interaction. We hide them when the DnD is done.
-            $('#preview-list').addClass("show-interstitial-tiles");
-          },
-          stop: function() {
-            $('#preview-list').removeClass("show-interstitial-tiles");
-          }
-        });
-
-
-        // Each preview film tile is a drop target. This allow us to swap two tiles.
-        // However, we want to be able to insert a tile between two other tiles.
-        // For that we created fake interstitial tiles that are used as drop targets as well.
-        var droppableTiles = $(".interstitial-tile");
-        $.merge(droppableTiles, tiles);
-
-        droppableTiles.droppable( {
-            accept: ".preview-tile",
-            tolerance: "pointer",
-            activeClass: "droppable-active",
-            hoverClass: "droppable-hover-active",
-            drop: $.proxy(this.onDrop_, this)
+        
+        $( "#preview-list" ).sortable({
+          placeholder: "preview-tile-drop-proxy",
+          update: $.proxy(this.onUpdate_, this)
         });
+        $( "#preview-list" ).disableSelection();
     };
 
     /**
      * @private
      */
-    ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) {
-        var activeFrame;
-        // When we drag from an element, the drag could start from a nested DOM element
-        // inside the drag target. We normalize that by taking the correct ancestor:
-        var originTile = $(event.srcElement).closest(".preview-tile");
-        var originFrameId = parseInt(originTile.data("tile-number"), 10);
+    ns.PreviewFilmController.prototype.onUpdate_ = function( event, ui ) {
+        var originFrameId = parseInt(ui.item.data("tile-number"), 10);
+        var targetInsertionId = $('.preview-tile').index(ui.item);
 
-        var dropTarget = $(event.target);
-        if(dropTarget.data("tile-type") == "interstitial") {
-            var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10);
-            // In case we drop outside of the tile container
-            if(isNaN(originFrameId) || isNaN(targetInsertionId)) {
-                return;
-            }
-            //console.log("origin-frame: "+originFrameId+" - targetInsertionId: "+ targetInsertionId)
         this.framesheet.moveFrame(originFrameId, targetInsertionId);
+        this.framesheet.setCurrentFrameIndex(targetInsertionId);
 
-            activeFrame = targetInsertionId;
-            // The last fake interstitial tile is outside of the framesheet array bound.
-            // It allow us to append after the very last element in this fake slot.
-            // However, when setting back the active frame, we have to make sure the 
-            // frame does exist.
-            if(activeFrame > (this.framesheet.getFrameCount() - 1)) {
-                activeFrame = targetInsertionId - 1;
-            }
-        } else {
-            var targetSwapId = parseInt(dropTarget.data("tile-number"), 10);
-            // In case we drop outside of the tile container
-            if(isNaN(originFrameId) || isNaN(targetSwapId)) {
-                return;
-            }
-            //console.log("origin-frame: "+originFrameId+" - targetSwapId: "+ targetSwapId)
-            this.framesheet.swapFrames(originFrameId, targetSwapId);
-            activeFrame = targetSwapId;
-        }
-
-        
-        $('#preview-list').removeClass("show-interstitial-tiles");
-
-        this.framesheet.setCurrentFrameIndex(activeFrame);
-
-        // TODO(vincz): move localstorage request to the model layer?
+        // TODO(grosbouddha): move localstorage request to the model layer?
         $.publish(Events.LOCALSTORAGE_REQUEST);
     };
 
+
     /**
      * @private
      * TODO(vincz): clean this giant rendering function & remove listeners.
@@ -181,17 +110,13 @@
         
         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.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
+        var cloneFrameButton = document.createElement("button");
+        cloneFrameButton.setAttribute('rel', 'tooltip');
+        cloneFrameButton.setAttribute('data-placement', 'right');
+        cloneFrameButton.setAttribute('title', 'Duplicate this frame');
+        cloneFrameButton.className = "tile-overlay duplicate-frame-action";
+        previewTileRoot.appendChild(cloneFrameButton);
+        cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
 
         // TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
         // is to make this update function (#createPreviewTile) less aggressive.
@@ -202,24 +127,32 @@
         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);
+
+            // Add 'dragndrop handle'.
+            var dndHandle = document.createElement("div");
+            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);
         
-        previewTileRoot.appendChild(actionContainer);
 
         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 +172,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 ?)

js/lib/jquery-ui-package-info.txt

@@ -1,14 +0,0 @@
-
-jquery-ui-1.8.23.custom.js was generated at: http://http://jqueryui.com/download
-and contains:
-
-jQuery  ui core:
-	core
-	widget
-	position
-	mouse
-
-Interactions:
-	Draggable
-	Droppable
-	Resizable

js/model/FrameSheet.js

@@ -137,13 +137,7 @@
 	};
 
 	ns.FrameSheet.prototype.moveFrame = function(originIndex, destinationIndex) {
-		var frameToMove = this.getFrameByIndex(originIndex);
-		this.frames.splice(destinationIndex, 0,frameToMove);
-
-		if(destinationIndex <= originIndex) {
-			originIndex++;
-		}
-		this.removeFrameByIndex(originIndex);
+		this.frames.splice(destinationIndex, 0, this.frames.splice(originIndex, 1)[0]);
 	};
 
 	ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {

resources/proto-ui-1/index.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+<head>
+  
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="main.css">
+</head>
+<body class="hor-list-mode">
+  <div class="main-wrapper">
+    <div class="tools">
+      <div class="tool pen"></div>
+      <div class="tool bucket"></div>
+      <div class="tool magicwand selected"></div>
+      <div class="tool eyedropper"></div>
+      <div class="tool pen has-group"></div>
+      <div class="tool pen has-group"></div>
+      <div class="tool magicwand"></div>
+      <div class="tool pen"></div>
+      <div class="tool bucket has-group"></div>
+    </div>
+    <div id="canvas" class="canvas">
+      <div class="draw-area draw-area-5"></div>
+    </div>
+    <div id="previewlist" class="previewlist">
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">1</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">2</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">3</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div> 
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">4</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div> 
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">5</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>   
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">6</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>    
+      </div>
+      <div class="drop-target preview-item">
+        <div class="preview-item drag-target">
+          <div class="tile-count preview-item-overlay">15</div>
+          <div class="tile-close preview-item-overlay"></div>
+        </div>
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">7</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">8</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">9</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">10</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">11</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">12</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">13</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      <div class="preview-item">
+        <div class="tile-count preview-item-overlay">14</div>
+        <div class="tile-close preview-item-overlay"></div>
+        <div class="tile-dnd preview-item-overlay"></div>
+        
+      </div>
+      
+    </div>
+    <div class="animpreview">
+      <div class="animpreview-inner">
+        <img src="img/preview.gif"/>
+      </div>
+    </div>
+  </div>
+  <div class="ux-options">
+    <button id="toggle-frame-mode">Toggle tile modes</button>
+    <br/>
+    Toggle canvas background:
+    <select id="change-draw-area">
+      <option value="1">rich-texture-1</value>
+      <option value="2">falloutjacket</value>
+      <option value="3">classic</value>
+      <option value="4">rich-texture-2</value>
+      <option value="5">sober</value>
+    </select>
+    <br/>
+    <button id="toggle-dnd-state">DnD states</button>
+  </div>
+  <script src="jquery-1.8.0.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>
+

resources/proto-ui-1/main.css

@@ -0,0 +1,362 @@
+body {
+	margin: 0;
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+	font-weight: 300;
+}
+
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 11px;
+    height: 11px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 2px solid #444; /* should match background, can't be transparent */
+    background-color: #444; /*rgba(0, 0, 0, .5);*/
+}
+
+.main-wrapper {
+  padding: 10px;
+  position: absolute;
+  top:0; right: 0; bottom: 0; left: 0;
+  background: -webkit-radial-gradient(circle, #000, #373737);
+}
+
+.tools {
+	float: left;
+	width: 100px;
+	margin-right: 10px;
+	height: 100%;
+}
+
+.tool {
+	position: relative;
+	float: left;
+	height: 46px;
+	width: 46px;
+	background-repeat: no-repeat;
+	background-size: 28px;
+	background-position: 9px; 
+	background-color: rgba(200,200,200, .1);
+	margin: 1px;
+}
+
+.tool.magicwand { background-image: url(img/magicwand-icon.png); }
+.tool.bucket { background-image: url(img/paintbucket-icon.png); }
+.tool.pen { background-image: url(img/pen-icon.png); }
+.tool.eyedropper { background-image: url(img/eyedropper-icon.png);}
+
+.tool:hover {
+	cursor: pointer;
+	background-color: #6b5f68; /*rgba(240,200,230, .3);*/
+}
+
+.tool.selected {
+	cursor: default;
+	background-color: #444;
+	cursor: normal;
+	border: 1px gold solid;
+	margin: 0;
+}
+
+
+.tool.has-group:after {
+	content: " ";
+	position: absolute;
+	bottom: 2px;
+	right: 2px;
+	width: 0;
+	height: 0;
+	border: 4px #eee solid;
+	border-top-color: transparent;
+	border-left-color: transparent;
+}
+
+.tool.has-group:hover:after {
+	border-color: gold;
+	border-top-color: transparent;
+	border-left-color: transparent;
+}
+
+.canvas {
+	position: relative;
+	height: 100%;
+	float: left;
+	margin-right: 10px;
+	background-color: blue;
+}
+
+.canvas .draw-area {
+	position: absolute;
+	top:0; right: 0; bottom: 0; left: 0;
+	box-shadow: 0 0 8px 5px #444;
+}
+
+.canvas .draw-area-1 {
+	background: radial-gradient(black 15%, transparent 16%) 0 0,
+				radial-gradient(black 15%, transparent 16%) 8px 8px,
+				radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
+				radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
+	background-color:#282828;
+	background-size:16px 16px;
+}
+
+.canvas .draw-area-2 {
+	background-color: #eee;
+	background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
+					  linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
+	background-size:60px 60px;
+	background-position:0 0, 30px 30px
+}
+
+.canvas .draw-area-3 {
+	background: repeat url(img/transparent_background.png);
+}
+
+.canvas .draw-area-4 {
+	background:
+		linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
+		linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
+		linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
+		linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
+		linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
+		linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
+	background-color: #131313;
+	background-size: 20px 20px;
+}
+
+.canvas .draw-area-5 {
+	border: #6b5f68 1px solid;
+	background-color:#444;
+	background-image: linear-gradient(#6b5f68 1px, transparent 1px),
+	linear-gradient(90deg, #6b5f68 1px, transparent 1px),
+	linear-gradient(#6b5f68 1px, transparent 1px),
+	linear-gradient(90deg, #6b5f68 1px, transparent 1px);
+	background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
+	background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
+}
+
+.previewlist {
+	float: left;
+	background-color: #111;
+	width: 120px;
+	height: 100%;
+	overflow-y: scroll;
+}
+
+.preview-item {
+	position: relative;
+	border: #444 3px solid;
+	border-radius: 3px;
+	width: 90px;
+	height: 90px;
+	margin-bottom: 5px;
+	margin-right: 5px;
+	font-size: 0;
+	background: no-repeat url(img/preview-state-1.png);
+	background-size: 90px;
+}
+
+.preview-item.selected {
+	border-color: gold;
+}
+
+.preview-item-overlay {
+	z-index: 10;
+	position: absolute;
+	background-color: rgba(0, 0, 0, 0.3);
+	font-size: 14px;
+	color: white;
+	font-weight: bold;
+	opacity: 0;
+	height: 30px;
+	width: 30px;
+}
+
+
+.preview-item:hover .preview-item-overlay,
+.preview-item-overlay:hover {
+	opacity: 1.0;
+}
+
+.preview-item-overlay.tile-count {
+	display: block;
+	opacity: 0.5;
+	border-bottom-right-radius: 3px;
+	top: 0;
+	left: 0;
+	line-height: 30px;
+	text-align: center;
+	cursor: default;
+}
+
+.preview-item-overlay.tile-close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-bottom-left-radius: 3px;
+	height: 30px;
+	width: 30px;
+	cursor: pointer;
+}
+
+.preview-item-overlay.tile-close:after {
+	content: " ";
+	position: absolute;
+	background: no-repeat url(img/garbage.png) 5px 5px;
+	background-size: 20px 20px;
+	top: 0; right: 0; bottom: 0; left: 0;
+	z-index: 10;
+}
+
+.preview-item-overlay.tile-dnd {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-top-right-radius: 3px;
+	height: 30px;
+	width: 30px;
+	cursor: move;
+}
+
+.preview-item-overlay.tile-dnd:after {
+	content: " ";
+	position: absolute;
+	background: no-repeat url(img/dragndrop.png) 5px 5px;
+	background-size: 20px 20px;
+	top: 0; right: 0; bottom: 0; left: 0;
+	z-index: 10;
+}
+
+.preview-item img {
+	width: 100%;
+}
+
+.drop-target.preview-item {
+	width: 0;
+	border: none;
+	background-image: none;
+	margin-right: 0;
+	background-color: #333;
+	opacity: 0;
+	transition-property: width, opacity;  
+	transition-duration: 0.15s;
+	transition-timing-function: linear;  
+}
+
+.drag-target.preview-item {
+	display: none;
+}
+
+.dnd-state1 .drop-target.preview-item {
+	border: #444 3px dashed;
+	margin-right: 5px;
+	width: 90px;
+	opacity: 1.0;
+}
+
+.dnd-state1 .drag-target.preview-item {
+	display: block;
+	position: absolute;
+	top: 30px;
+	left: 30px;
+	opacity: 0.6;
+	z-index: 10;
+}
+
+/** Grid mode */
+
+.grid-mode .previewlist {
+	float: none;
+	width: auto;
+	overflow: hidden;
+	background: none;
+}
+
+.grid-mode .preview-item {
+	float: left;
+}
+
+.grid-mode .animpreview {
+	display: none;
+}
+
+/** Horizontal list mode */
+
+.hor-list-mode .main-wrapper {
+	padding-bottom: 120px;
+}
+
+.hor-list-mode .previewlist {
+	float: none;
+	width: auto;
+	position: absolute;
+	bottom: 0;
+	left: 115px;
+	right: 0;
+	height: 115px;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	white-space: nowrap;
+	padding-top: 5px;
+}
+
+.hor-list-mode .preview-item {
+	display: inline-block;
+}
+
+.hor-list-mode .preview-item:last-child {
+	margin-right: 1000px;
+}
+
+.hor-list-mode .preview-item.selected:after {
+	content: " ";
+	position: absolute;
+	top: -15px;
+	border: transparent 4px solid;
+	left: 38px;
+	border-bottom-color: gold;
+	border-width: 6px;
+	border-style: solid;
+}
+}
+
+
+.animpreview {
+	overflow: hidden;
+	text-align: center;
+	display: table;
+	height: 100%;
+}
+
+.animpreview .animpreview-inner {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.animpreview img {
+	width: 50%;
+	box-shadow: 0 0 5px 5px #000;
+}
+
+.ux-options:hover {
+	opacity: 1.0;
+}
+
+.ux-options {
+	color: #ddd;
+	font-size: 14px;
+
+	position: absolute;
+	padding: 5px;
+	bottom: 0;
+	right: 0;
+	background-color: #333;
+	opacity: 0.3;
+	border: #fff solid 3px;
+	border-right: none;
+	border-bottom: none;
+}

resources/proto-ui-1/main.js

@@ -0,0 +1,75 @@
+$().ready(function(){
+
+	var body = $('body');
+	var mainWrapper = $(".main-wrapper");
+	var canvas = $("#canvas");
+
+	var resizeCanvas = function() {
+		canvas.height(mainWrapper.height());
+		canvas.width(mainWrapper.height());
+	};
+
+	var selectTile = function(tileElement) {
+		$('.preview-item').removeClass('selected');
+		tileElement.addClass('selected');
+		if(body.hasClass('hor-list-mode')) {
+			var index = $('.preview-item:not(.drop-target)').index(tileElement);
+			console.log(index);
+			$('.previewlist').animate({
+			    scrollLeft: -100 + 100 * index
+			 }, 300);
+		}
+	};
+	selectTile($('.preview-item').eq(4));
+
+	$(document).on('click', '.tile-close', function(evt) {
+		$(evt.target).closest('.preview-item').remove();
+	});
+
+	$(document).on('click', '.preview-item', function(evt) {
+		selectTile($(evt.target).closest('.preview-item'));
+	});
+
+	$(document).on('click', '.tool', function(evt) {
+		$('.tool').removeClass('selected');
+		$(evt.target).closest('.tool').addClass('selected');
+	});
+
+	$(window).resize(resizeCanvas);
+	resizeCanvas();
+
+	/**
+	 * Admin stuff
+	 */
+
+	$(document).on('click', '#toggle-frame-mode', function(evt) {
+		if(body.hasClass('grid-mode')) {
+			$('body').removeClass('grid-mode');
+			$('body').addClass('hor-list-mode');
+		} else if (body.hasClass('hor-list-mode')) {
+			$('body').removeClass('hor-list-mode');
+			$('body').addClass('vert-list-mode');
+		}
+		else if (body.hasClass('vert-list-mode')) {
+			$('body').removeClass('vert-list-mode');
+			$('body').addClass('grid-mode');
+		}
+		resizeCanvas();
+	});
+
+	$(document).on('click', '#toggle-dnd-state', function(evt) {
+		
+		body.toggleClass('dnd-state1');
+	});
+
+	$("#change-draw-area").change(function () {
+	  var str = "";
+	  $("#change-draw-area option:selected").each(function () {
+	            str = $(this).val();
+	  });
+	  $(".canvas .draw-area").attr('class', 'draw-area draw-area-'+ str);
+	});
+
+	
+
+});