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

Issue #287 : Move helptext to tooltip, change cheatsheet column layout

Browse Source
This commit is contained in:
jdescottes 2015-11-12 22:47:51 +01:00
parent 947306a80c
commit 460688e2d5
4 changed files with 68 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/css/dialogs-cheatsheet.css
View File

@ -26,8 +26,9 @@
.cheatsheet-container {
box-sizing: border-box;
display: block;
bottom: 70px;
bottom: 46px;
padding: 20px 3%;
border-radius: 3px;
background-color: rgba(0,0,0,0.9);
@ -44,16 +45,29 @@
}
.cheatsheet-section {
display: inline-block;
vertical-align: top;
padding : 0 20px;
box-sizing: border-box;
float: left;
vertical-align: top;
padding : 0 20px 20px 20px;
min-width: 300px;
}
@media (min-width: 1200px) {
.cheatsheet-section {
.cheatsheet-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
float: left;
}
@media (min-width: 1300px) {
.cheatsheet-container > div {
width: 33%;
}
.cheatsheet-boxes {
flex-direction: column;
}
}
.cheatsheet-shortcut {
@ -128,7 +142,7 @@
bottom : 0;
left : 0;
right : 0;
height : 70px;
height : 46px;
padding : 10px;
overflow: hidden;
@ -137,10 +151,19 @@
}
.cheatsheet-helptext {
display: block;
font-size: 14px;
height : 26px;
line-height : 26px;
color: black;
padding-right: 150px;
}
.cheatsheet-helptext-tooltip {
text-align: left;
}
.cheatsheet-helptext-tooltip-item {
line-height: 0.9em;
margin: 10px 0;
}
.cheatsheet-button {

20
src/js/controller/dialogs/CheatsheetController.js
View File

@ -20,6 +20,7 @@
$.subscribe(Events.SHORTCUTS_CHANGED, this.onShortcutsChanged_.bind(this));
this.initMarkup_();
document.querySelector('.cheatsheet-helptext').setAttribute('title', this.getHelptextTitle_());
};
ns.CheatsheetController.prototype.destroy = function () {
@ -29,7 +30,9 @@
};
ns.CheatsheetController.prototype.onRestoreDefaultsClick_ = function () {
pskl.service.keyboard.Shortcuts.restoreDefaultShortcuts();
if (window.confirm('Replace all custom shortcuts by the default Piskel shortcuts ?')) {
pskl.service.keyboard.Shortcuts.restoreDefaultShortcuts();
}
};
ns.CheatsheetController.prototype.onShortcutsChanged_ = function () {
@ -152,4 +155,19 @@
key = key.replace(/([^ ])\+([^ ])/g, '$1 + $2');
return key;
};
ns.CheatsheetController.prototype.getHelptextTitle_ = function () {
var helpItems = [
'Click on a shortcut to change the key.',
'When the shortcut blinks, press the key on your keyboard to assign it.',
'White shortcuts can not be edited.',
'Click on \'Restore default shortcuts\' to erase all custom shortcuts.'
];
var helptextTitle = helpItems.reduce(function (p, n) {
return p + '<div class="cheatsheet-helptext-tooltip-item">' + n + '</div>';
}, '');
helptextTitle = '<div class="cheatsheet-helptext-tooltip">' + helptextTitle + '</div>';
return helptextTitle;
};
})();

4
src/js/service/keyboard/KeycodeTranslator.js
View File

@ -17,7 +17,9 @@
// 61 on Firefox for =/+ key
61 : '+',
188 : '<',
190 : '>'
190 : '>',
219 : '[',
221 : ']'
};
var ns = $.namespace('pskl.service.keyboard');

23
src/templates/dialogs/cheatsheet.html
View File

@ -12,18 +12,23 @@
<h3 class="cheatsheet-title">Misc shortcuts</h3>
<ul class="cheatsheet-misc-shortcuts"></ul>
</div>
<div class="cheatsheet-section">
<h3 class="cheatsheet-title">Selection shortcuts</h3>
<ul class="cheatsheet-selection-shortcuts"></ul>
<h3 class="cheatsheet-title">Color shortcuts</h3>
<ul class="cheatsheet-color-shortcuts"></ul>
<h3 class="cheatsheet-title">Storage shortcuts</h3>
<ul class="cheatsheet-storage-shortcuts"></ul>
<div class="cheatsheet-boxes">
<div class="cheatsheet-section">
<h3 class="cheatsheet-title">Selection shortcuts</h3>
<ul class="cheatsheet-selection-shortcuts"></ul>
</div>
<div class="cheatsheet-section">
<h3 class="cheatsheet-title">Color shortcuts</h3>
<ul class="cheatsheet-color-shortcuts"></ul>
</div>
<div class="cheatsheet-section">
<h3 class="cheatsheet-title">Storage shortcuts</h3>
<ul class="cheatsheet-storage-shortcuts"></ul>
</div>
</div>
</div>
<div class="cheatsheet-actions">
<span class="cheatsheet-helptext"><b>Change shortcuts</b> : Click on a shortcut to remap its key. When the shortcut blinks, press the key on your keyboard to assign it. Conflicts will be highlighted in red.</span>
<span class="cheatsheet-helptext">White-colored shortcuts can not be edited. Click on 'Restore default shortcuts' to go back to the default Piskel shortcuts.</span>
<span class="cheatsheet-helptext" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></span>
<button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
</div>