Improve tooltip design

src/css/tools.css

@@ -107,7 +107,8 @@
  * Tool cursors:
  */
 
-.tool-paint-bucket .drawing-canvas-container:hover {
+.tool-paint-bucket .drawing-canvas-container:hover,
+.tool-colorswap .drawing-canvas-container:hover {
   cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
 }
 
@@ -234,4 +235,28 @@
   );
 }
 
+.tools-tooltip-container {
+  text-align: left;
+  padding-bottom: 5px;
+}
+
+.tools-tooltip-shortcut {
+  color:gold;
+}
+
+.tools-tooltip-modifier {
+  color:#999;
+}
+
+.tools-tooltip-modifier-button {
+  padding:2px;
+  border:1px Solid #999;
+  font-size:0.8em;
+  margin-right:5px;
+  width:35px;
+  text-align:center;
+  border-radius:3px;
+  display:inline-block;
+  line-height: 10px;
+}
 

src/js/controller/ToolController.js

@@ -136,7 +136,12 @@
   };
 
   ns.ToolController.prototype.getTooltipText_ = function (tool) {
-    return tool.instance.helpText + ' (' + tool.shortcut + ')';
+    var shortcutMarkup = "<span class='tools-tooltip-shortcut'>("+tool.shortcut+")</span>";
+    if (tool.instance.helpText.indexOf('{{shortcut}}') !== -1) {
+      return tool.instance.helpText.replace('{{shortcut}}', shortcutMarkup);
+    } else {
+      return tool.instance.helpText + ' ' + shortcutMarkup;
+    }
   };
 
   ns.ToolController.prototype.addKeyboardShortcuts_ = function () {

src/js/drawingtools/Circle.js

@@ -10,7 +10,13 @@
     ns.ShapeTool.call(this);
 
     this.toolId = "tool-circle";
-    this.helpText = "Circle tool";
+
+    this.helpText = [
+      "<div class='tools-tooltip-container'>",
+      "Circle tool {{shortcut}}<br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Keep 1 to 1 ratio</span><br/>",
+      "</div>"
+    ].join("");
   };
 
   pskl.utils.inherit(ns.Circle, ns.ShapeTool);

src/js/drawingtools/ColorSwap.js

@@ -7,7 +7,13 @@
 
   ns.ColorSwap = function() {
     this.toolId = "tool-colorswap";
-    this.helpText = "Color swap";
+    this.helpText = [
+      "<div class='tools-tooltip-container'>",
+      "Paint all pixels of the same color {{shortcut}}<br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Apply to all layers</span><br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Apply to all frames</span><br/>",
+      "</div>"
+    ].join("");
   };
 
   pskl.utils.inherit(ns.ColorSwap, ns.BaseTool);
@@ -18,7 +24,11 @@
   ns.ColorSwap.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     if (frame.containsPixel(col, row)) {
       var sampledColor = frame.getPixel(col, row);
-      this.swapColors(sampledColor, color);
+
+      var allLayers = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
+      var allFrames = event.shiftKey;
+
+      this.swapColors(sampledColor, color, allLayers, allFrames);
 
       $.publish(Events.PISKEL_SAVE_STATE, {
         type : pskl.service.HistoryService.SNAPSHOT
@@ -26,17 +36,23 @@
     }
   };
 
-  ns.ColorSwap.prototype.swapColors = function(oldColor, newColor) {
+  ns.ColorSwap.prototype.swapColors = function(oldColor, newColor, allLayers, allFrames) {
     var swapPixelColor = function (pixelColor,x,y,frame) {
       if (pixelColor == oldColor) {
         frame.pixels[x][y] = newColor;
       }
     };
+    var currentLayer = pskl.app.piskelController.getCurrentLayer();
+    var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
     pskl.app.piskelController.getPiskel().getLayers().forEach(function (l) {
-      l.getFrames().forEach(function (f) {
+      if (allLayers || l === currentLayer) {
-        f.forEachPixel(swapPixelColor);
+        l.getFrames().forEach(function (f, frameIndex) {
-        f.version++;
+          if (allFrames || frameIndex === currentFrameIndex) {
-      });
+            f.forEachPixel(swapPixelColor);
+            f.version++;
+          }
+        });
+      }
     });
   };
 })();

src/js/drawingtools/Lighten.js

@@ -11,7 +11,15 @@
   ns.Lighten = function() {
     this.superclass.constructor.call(this);
     this.toolId = "tool-lighten";
-    this.helpText = "Lighten (hold ctrl for Darken)";
+
+    this.helpText = [
+      "<div class='tools-tooltip-container'>",
+      "Lighten {{shortcut}}<br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Darken</span><br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Apply only once per pixel</span><br/>",
+      "</div>"
+    ].join("");
+
     this.resetUsedPixels_();
   };
 
@@ -31,7 +39,7 @@
     var frameColor = frame.getPixel(col, row);
     var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
 
-    var isDarken = event.ctrlKey || event.cmdKey;
+    var isDarken = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
     var isSinglePass = event.shiftKey;
 
     var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;

src/js/drawingtools/Rectangle.js

@@ -10,7 +10,13 @@
     ns.ShapeTool.call(this);
 
     this.toolId = "tool-rectangle";
-    this.helpText = "Rectangle tool";
+
+    this.helpText = [
+      "<div class='tools-tooltip-container'>",
+      "Rectangle tool {{shortcut}}<br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Keep 1 to 1 ratio</span><br/>",
+      "</div>"
+    ].join("");
   };
 
   pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);

src/js/drawingtools/VerticalMirrorPen.js

@@ -6,6 +6,14 @@
 
     this.toolId = "tool-vertical-mirror-pen";
     this.helpText = "Vertical Mirror pen (CTRL for Horizontal, SHIFT for both)";
+
+    this.helpText = [
+      "<div class='tools-tooltip-container'>",
+      "Vertical Mirror pen {{shortcut}}<br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL</span>Use horizontal axis</span><br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>SHIFT</span>Use horizontal and vertical axis</span><br/>",
+      "</div>"
+    ].join("");
   };
 
   pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
@@ -30,11 +38,12 @@
     var mirroredCol = this.getSymmetricCol_(col, frame);
     var mirroredRow = this.getSymmetricRow_(row, frame);
 
-    if (!event.ctrlKey) {
+    var hasCtrlKey = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
+    if (!hasCtrlKey) {
       this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
     }
 
-    if (event.shiftKey || event.ctrlKey) {
+    if (event.shiftKey || hasCtrlKey) {
       this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
     }
 

src/js/drawingtools/selectiontools/RectangleSelect.js

@@ -8,7 +8,15 @@
 
   ns.RectangleSelect = function() {
     this.toolId = "tool-rectangle-select";
-    this.helpText = "Rectangle selection tool";
+
+    this.helpText = [
+      "<div class='tools-tooltip-container'>",
+      "Rectangle selection {{shortcut}}<br/>",
+      "<span class='tools-tooltip-modifier'>Drag the selection to move it. You may switch to other layers and frames.</span><br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+C</span>Copy the selected area</span><br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+V</span>Paste the copied area</span><br/>",
+      "</div>"
+    ].join("");
 
     ns.BaseSelect.call(this);
     this.hasSelection = false;

src/js/drawingtools/selectiontools/ShapeSelect.js

@@ -8,7 +8,15 @@
 
   ns.ShapeSelect = function() {
     this.toolId = "tool-shape-select";
-    this.helpText = "Shape selection tool";
+
+    this.helpText = [
+      "<div class='tools-tooltip-container'>",
+      "Shape selection {{shortcut}}<br/>",
+      "<span class='tools-tooltip-modifier'>Drag the selection to move it. You may switch to other layers and frames.</span><br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+C</span>Copy the selected area</span><br/>",
+      "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>CTRL+V</span>Paste the copied area</span><br/>",
+      "</div>"
+    ].join("");
 
     ns.BaseSelect.call(this);
   };

src/js/service/keyboard/ShortcutService.js

@@ -107,7 +107,7 @@
   };
 
   ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) {
-    return this.isMac_() ? evt.metaKey : evt.ctrlKey;
+    return pskl.utils.UserAgent.isMac ? evt.metaKey : evt.ctrlKey;
   };
 
   ns.ShortcutService.prototype.isShiftKeyPressed_ = function (evt) {
@@ -117,8 +117,4 @@
   ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) {
     return evt.altKey;
   };
-
-  ns.ShortcutService.prototype.isMac_ = function () {
-    return navigator.appVersion.indexOf("Mac") != -1;
-  };
 })();

src/js/utils/UserAgent.js

@@ -6,7 +6,8 @@
     isIE : /MSIE/i.test( ua ),
     isIE11 : /trident/i.test( ua ),
     isChrome : /Chrome/i.test( ua ),
-    isFirefox : /Firefox/i.test( ua )
+    isFirefox : /Firefox/i.test( ua ),
+    isMac : /Mac/.test( ua )
   };
 
   ns.UserAgent.version = (function () {