Improve tooltip design

This commit is contained in:
jdescottes
2014-07-09 07:56:22 +02:00
parent b311312260
commit a6d70920e2
11 changed files with 111 additions and 23 deletions

View File

@ -107,7 +107,8 @@
* Tool cursors: * 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; 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;
}

View File

@ -136,7 +136,12 @@
}; };
ns.ToolController.prototype.getTooltipText_ = function (tool) { 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 () { ns.ToolController.prototype.addKeyboardShortcuts_ = function () {

View File

@ -10,7 +10,13 @@
ns.ShapeTool.call(this); ns.ShapeTool.call(this);
this.toolId = "tool-circle"; 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); pskl.utils.inherit(ns.Circle, ns.ShapeTool);

View File

@ -7,7 +7,13 @@
ns.ColorSwap = function() { ns.ColorSwap = function() {
this.toolId = "tool-colorswap"; 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); pskl.utils.inherit(ns.ColorSwap, ns.BaseTool);
@ -18,7 +24,11 @@
ns.ColorSwap.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { ns.ColorSwap.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
if (frame.containsPixel(col, row)) { if (frame.containsPixel(col, row)) {
var sampledColor = frame.getPixel(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, { $.publish(Events.PISKEL_SAVE_STATE, {
type : pskl.service.HistoryService.SNAPSHOT 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) { var swapPixelColor = function (pixelColor,x,y,frame) {
if (pixelColor == oldColor) { if (pixelColor == oldColor) {
frame.pixels[x][y] = newColor; 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) { 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++;
}
});
}
}); });
}; };
})(); })();

View File

@ -11,7 +11,15 @@
ns.Lighten = function() { ns.Lighten = function() {
this.superclass.constructor.call(this); this.superclass.constructor.call(this);
this.toolId = "tool-lighten"; 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_(); this.resetUsedPixels_();
}; };
@ -31,7 +39,7 @@
var frameColor = frame.getPixel(col, row); var frameColor = frame.getPixel(col, row);
var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor; 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 isSinglePass = event.shiftKey;
var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR; var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;

View File

@ -10,7 +10,13 @@
ns.ShapeTool.call(this); ns.ShapeTool.call(this);
this.toolId = "tool-rectangle"; 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); pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);

View File

@ -6,6 +6,14 @@
this.toolId = "tool-vertical-mirror-pen"; this.toolId = "tool-vertical-mirror-pen";
this.helpText = "Vertical Mirror pen (CTRL for Horizontal, SHIFT for both)"; 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); pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
@ -30,11 +38,12 @@
var mirroredCol = this.getSymmetricCol_(col, frame); var mirroredCol = this.getSymmetricCol_(col, frame);
var mirroredRow = this.getSymmetricRow_(row, 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); 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); this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
} }

View File

@ -8,7 +8,15 @@
ns.RectangleSelect = function() { ns.RectangleSelect = function() {
this.toolId = "tool-rectangle-select"; 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); ns.BaseSelect.call(this);
this.hasSelection = false; this.hasSelection = false;

View File

@ -8,7 +8,15 @@
ns.ShapeSelect = function() { ns.ShapeSelect = function() {
this.toolId = "tool-shape-select"; 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); ns.BaseSelect.call(this);
}; };

View File

@ -107,7 +107,7 @@
}; };
ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) { 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) { ns.ShortcutService.prototype.isShiftKeyPressed_ = function (evt) {
@ -117,8 +117,4 @@
ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) { ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) {
return evt.altKey; return evt.altKey;
}; };
ns.ShortcutService.prototype.isMac_ = function () {
return navigator.appVersion.indexOf("Mac") != -1;
};
})(); })();

View File

@ -6,7 +6,8 @@
isIE : /MSIE/i.test( ua ), isIE : /MSIE/i.test( ua ),
isIE11 : /trident/i.test( ua ), isIE11 : /trident/i.test( ua ),
isChrome : /Chrome/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 () { ns.UserAgent.version = (function () {