Merge pull request #107 from juliandescottes/ui-updates

Ui updates

css/style.css

@@ -72,7 +72,7 @@ body {
 }
 
 .canvas-container .canvas-background {
-  background: url(../img/medium_canvas_background.png) repeat;
+  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
   position: absolute;
   top: 0;
   right: 0;
@@ -80,6 +80,23 @@ body {
   left: 0;
 }
 
+.light-canvas-background .canvas-background {
+  background: url(../img/canvas_background/light_canvas_background.png) repeat;
+}
+
+.medium-canvas-background .canvas-background {
+  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
+}
+
+.lowcont-medium-canvas-background .canvas-background {
+  background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
+}
+
+.lowcont-dark-canvas-background .canvas-background {
+  background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
+}
+
+
 .canvas.canvas-overlay {
   position: absolute;
   top: 0;
@@ -124,20 +141,20 @@ body {
  * User messages 
  */
 .user-message {
-    position: absolute;
+  position: absolute;
-    right: 0;
+  right: 0;
-    bottom: 0;
+  bottom: 0;
-    background-color: #F9EDBE;
+  background-color: #F9EDBE;
-    padding: 10px 47px;
+  padding: 10px 47px;
-    border-top-left-radius: 7px;
+  border-top-left-radius: 7px;
-    color: #222;
+  color: #222;
-    border: #F0C36D 1px solid;
+  border: #F0C36D 1px solid;
-    border-right: 0;
+  border-right: 0;
-    border-bottom: 0;
+  border-bottom: 0;
-    font-weight: bold;
+  font-weight: bold;
-    font-size: 13px; 
+  font-size: 13px; 
-    z-index: 10000;
+  z-index: 10000;
-    max-width: 300px;
+  max-width: 300px;
 }
 
 .user-message .close {

css/tools.css

@@ -186,6 +186,12 @@
  * Framesheet level actions:
  */
 
+.tool-icon.gallery-icon {
+  background-image: url(../img/gallery.png);
+  background-position: 3px 3px;
+  background-size: 39px 39px;
+}
+
 .tool-icon.save-icon {
   background-image: url(../img/save.png);
   background-position: 6px 6px;

index.html

@@ -38,6 +38,15 @@
           <label for="show-grid">Show grid</label>
         </div>
       </div>
+      <div style="float: left; margin-top: 20px; color: #fff;">
+        Canvas background:
+        <select id="canvas-picker" style="width:100px;">
+          <option value="light-canvas-background">Light</option>
+          <option value="lowcont-medium-canvas-background">Medium - low contrast</option>
+          <option value="medium-canvas-background" selected="selected">Medium - high contrast</option>
+          <option value="lowcont-dark-canvas-background">Dark - low constrast</option>
+        </select>
+      </div>
     </div>
   </div>
 
@@ -55,7 +64,6 @@
     </div>
 
     <div class='main-column'>
-
       <!-- Drawing area: -->
       <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
         <div class="canvas-background"></div>
@@ -73,8 +81,8 @@
           <input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
         </div>   
       </div>
-
       <div class="application-actions">
+        <a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="bottom" target="_blank"></a>
         <div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></div>
         <div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="bottom" >
           <span class="label">GIF</span>
@@ -92,7 +100,7 @@
   <script src="js/lib/pubsub.js"></script>
   <script src="js/lib/bootstrap/bootstrap.js"></script> 
 
-  <!-- GIF Encoding DEVICES ! OH YEAY! -->
+  <!-- GIF Encoding libraries -->
   <script src="js/lib/gif/GIFEncoder.js"></script>
   <script src="js/lib/gif/b64.js"></script>
   <script src="js/lib/gif/NeuQuant.js"></script>

js/controller/DrawingController.js

@@ -71,13 +71,15 @@
         body.mouseup($.proxy(this.onMouseup_, this));
         
         // Deactivate right click:
-        //body.contextmenu(this.onCanvasContextMenu_);
+        body.contextmenu(this.onCanvasContextMenu_);
   };
 
 
 
   ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
-      if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
+      if (this.dpiUpdateTimer) {
+        window.clearInterval(this.dpiUpdateTimer);
+      }
       this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
   },
 
@@ -215,10 +217,13 @@
      * @private
      */
     ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
-      event.preventDefault();
+      if ($(event.target).closest('#drawing-canvas-container').length) {
-      event.stopPropagation();
+        // Deactivate right click on drawing canvas only.
-      event.cancelBubble = true;
+        event.preventDefault();
-      return false;
+        event.stopPropagation();
+        event.cancelBubble = true;
+        return false;
+      }   
     };
 
   ns.DrawingController.prototype.render = function () {
@@ -258,25 +263,10 @@
         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) {
-        // Calculate the DPI change needed to bridge height and width gap
-        var gapDPI = pskl.PixelUtils.calculateDPI(heightGap, widthGap, framePixelHeight, framePixelWidth);
-        // substract gap dpi to initial dpi
-        dpi -= (gapDPI + 1);
-    }*/
     return dpi;
   };
 

js/piskel.js

@@ -70,6 +70,13 @@ $.namespace("pskl");
       $('body').tooltip({
         selector: '[rel=tooltip]'
       });
+
+      $('#canvas-picker').change(function(evt) {
+        $('#canvas-picker option:selected').each(function() {
+            console.log($(this).val());
+            $('html')[0].className = $(this).val();
+        });
+      });
     },
 
     render : function (delta) {