Adding drawer prototype

css/style.css

@@ -50,7 +50,8 @@ body {
   z-index: 10;
 }
 
-.sticky-section .wrap {
+.sticky-section .wrap,
+.sticky-section .drawer {
   display: table-cell;
   vertical-align: middle;
 }
@@ -67,13 +68,31 @@ body {
 .right-sticky-section.sticky-section {
   right: 0;
   width: 50px;
+
+  -webkit-transition: all 200ms ease-out;
+  -moz-transition: all 200ms ease-out;
+  -ms-transition: all 200ms ease-out;
+  transition: all 200ms ease-out;
+}
+
+.right-sticky-section.expanded {
+  right: 300px;
+}
+
+.drawer {
+
+}
+
+.drawer-content {
+  background-color: red;
+  height: 600px;
+  width: 300px;
 }
 
 .right-sticky-section .tool-icon {
   float: right;
 }
 
-
 /**
  * Canvases layout
  */

index.html

@@ -50,9 +50,9 @@
     </div>
   </div>
 
-  <div class="sticky-section right-sticky-section">
+  <div id="application-action-section" class="sticky-section right-sticky-section">
     <div class="wrap">
-      <div class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div>
+      <div id="settings" class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div>
       <a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="left" target="_blank"></a>
       <div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="left" ></div>
       <div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
@@ -62,6 +62,9 @@
         <span class="label">PNG</span>
       </div>
     </div>
+    <div class="drawer">
+      <div class="drawer-content"></div>
+    </div>
   </div>
 
   <div class="column-wrapper">

js/piskel.js

@@ -71,6 +71,10 @@ $.namespace("pskl");
         selector: '[rel=tooltip]'
       });
 
+      $('#settings').click(function(evt) {
+        $('.right-sticky-section').toggleClass('expanded');
+      });
+
       $('#canvas-picker').change(function(evt) {
         $('#canvas-picker option:selected').each(function() {
             console.log($(this).val());