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

Refactoring tooltip code + display CMD on mac

Browse Source
This commit is contained in:
jdescottes 2014-07-10 01:32:16 +02:00
parent a6d70920e2
commit 982a5ab048
11 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -192,7 +192,7 @@ module.exports = function(grunt) {
{src: ['src/js/lib/iframeLoader-0.1.0.js'], dest: 'dest/js/lib/iframeLoader-0.1.0.js'},
{expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
{expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
{expand: true, src: ['**/*.html'], cwd: 'src/templates/', dest: 'dest/templates' + version + '/', filter: 'isFile'}
{expand: true, src: ['**/*.html'], cwd: 'src/templates/', dest: 'dest/templates/', filter: 'isFile'}
]
}
},

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

@ -10,7 +10,7 @@
toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
toDescriptor('paintBucket', 'B', new pskl.drawingtools.PaintBucket()),
toDescriptor('colorSwap', 'F', new pskl.drawingtools.ColorSwap()),
toDescriptor('colorSwap', 'A', new pskl.drawingtools.ColorSwap()),
toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
toDescriptor('stroke', 'L', new pskl.drawingtools.Stroke()),
toDescriptor('rectangle', 'R', new pskl.drawingtools.Rectangle()),

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

@ -58,6 +58,18 @@
});
};
ns.BaseTool.prototype.getShortHelpText = function() {
return this.shortHelpText || this.helpText;
};
ns.BaseTool.prototype.getModifierHelpText = function(modifier, helptext) {
var tpl = "<span class='tools-tooltip-modifier'><span class='tools-tooltip-modifier-button'>{{modifier}}</span>{{helptext}}</span><br/>";
modifier = modifier.toUpperCase();
if (pskl.utils.UserAgent.isMac) {
modifier = modifier.replace('CTRL', 'CMD');
}
return pskl.utils.Template.replace(tpl, {modifier : modifier, helptext : helptext});
};
ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};

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

@ -11,10 +11,11 @@
this.toolId = "tool-circle";
this.shortHelpText = "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/>",
this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'),
"</div>"
].join("");
};

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

@ -7,11 +7,13 @@
ns.ColorSwap = function() {
this.toolId = "tool-colorswap";
this.shortHelpText = "Paint all";
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/>",
this.getModifierHelpText('ctrl', 'Apply to all layers'),
this.getModifierHelpText('shift', 'Apply to all frames'),
"</div>"
].join("");
};

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

@ -12,11 +12,12 @@
this.superclass.constructor.call(this);
this.toolId = "tool-lighten";
this.shortHelpText = "Lighten / 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/>",
this.getModifierHelpText('ctrl', 'Darken'),
this.getModifierHelpText('shift', 'Apply only once per pixel'),
"</div>"
].join("");

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

@ -11,10 +11,11 @@
this.toolId = "tool-rectangle";
this.shortHelpText = "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/>",
this.getModifierHelpText('shift', 'Keep 1 to 1 ratio'),
"</div>"
].join("");
};

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

@ -5,13 +5,13 @@
this.superclass.constructor.call(this);
this.toolId = "tool-vertical-mirror-pen";
this.helpText = "Vertical Mirror pen (CTRL for Horizontal, SHIFT for both)";
this.shortHelpText = "Vertical Mirror pen";
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/>",
this.getModifierHelpText('ctrl', 'Use horizontal axis'),
this.getModifierHelpText('shift', 'Use horizontal and vertical axis'),
"</div>"
].join("");
};

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

@ -9,12 +9,13 @@
ns.RectangleSelect = function() {
this.toolId = "tool-rectangle-select";
this.shortHelpText = "Rectangle selection";
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/>",
this.getModifierHelpText('ctrl+c', 'Copy the selected area'),
this.getModifierHelpText('ctrl+v', 'Paste the copied area'),
"</div>"
].join("");

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

@ -9,12 +9,13 @@
ns.ShapeSelect = function() {
this.toolId = "tool-shape-select";
this.shortHelpText = "Shape selection";
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/>",
this.getModifierHelpText('ctrl+c', 'Copy the selected area'),
this.getModifierHelpText('ctrl+v', 'Paste the copied area'),
"</div>"
].join("");

5
src/js/service/keyboard/CheatsheetService.js
View File

@ -55,6 +55,9 @@
};
ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
if (pskl.utils.UserAgent.isMac) {
shortcut = shortcut.replace('ctrl', 'cmd');
}
return {
'shortcut' : shortcut,
'description' : description,
@ -84,7 +87,7 @@
ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
var descriptors = pskl.app.toolController.tools.map(function (tool) {
return this.toDescriptor_(tool.shortcut, tool.instance.helpText, 'tool-icon ' + tool.instance.toolId);
return this.toDescriptor_(tool.shortcut, tool.instance.getShortHelpText(), 'tool-icon ' + tool.instance.toolId);
}.bind(this));
this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');