mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Improve tooltip design

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

27
src/css/tools.css
View File

@ -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;
}

7
src/js/controller/ToolController.js
View File

@ -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 () {

8
src/js/drawingtools/Circle.js
View File

@ -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);

24
src/js/drawingtools/ColorSwap.js
View File

@ -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) {
l.getFrames().forEach(function (f, frameIndex) {
if (allFrames || frameIndex === currentFrameIndex) {
f.forEachPixel(swapPixelColor);
f.version++;
}
});
}
});
};
})();

12
src/js/drawingtools/Lighten.js
View File

@ -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;

8
src/js/drawingtools/Rectangle.js
View File

@ -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);

13
src/js/drawingtools/VerticalMirrorPen.js
View File

@ -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);
}

10
src/js/drawingtools/selectiontools/RectangleSelect.js
View File

@ -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;

10
src/js/drawingtools/selectiontools/ShapeSelect.js
View File

@ -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);
};

6
src/js/service/keyboard/ShortcutService.js
View File

@ -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;
};
})();

3
src/js/utils/UserAgent.js
View File

@ -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 () {