diff --git a/src/css/cheatsheet.css b/src/css/dialogs-cheatsheet.css
similarity index 67%
rename from src/css/cheatsheet.css
rename to src/css/dialogs-cheatsheet.css
index 144161ee..beb509c9 100644
--- a/src/css/cheatsheet.css
+++ b/src/css/dialogs-cheatsheet.css
@@ -27,6 +27,7 @@
.cheatsheet-container {
box-sizing: border-box;
+ bottom: 70px;
padding: 20px 3%;
border-radius: 3px;
background-color: rgba(0,0,0,0.9);
@@ -46,12 +47,18 @@
display: inline-block;
vertical-align: top;
padding : 0 20px;
+ box-sizing: border-box;
+}
+
+@media (min-width: 1200px) {
+ .cheatsheet-section {
+ width: 33%;
+ }
}
.cheatsheet-shortcut {
overflow: hidden;
margin: 10px 0;
- cursor : pointer;
}
.cheatsheet-icon.tool-icon {
@@ -79,14 +86,14 @@
line-height: 26px;
padding: 0 10px;
- border : 2px solid gold;
+ border : 2px solid white;
border-radius: 2px;
text-align: center;
font-family:Courier;
font-weight: bold;
font-size : 18px;
- color: gold;
+ color: white;
}
.cheatsheet-shorcut-conflict .cheatsheet-key {
@@ -94,10 +101,50 @@
color: red;
}
-.cheatsheet-shortcut-editing .cheatsheet-key{
+.cheatsheet-shortcut-editable {
+ cursor : pointer;
+}
+
+.cheatsheet-shortcut-editable .cheatsheet-key {
+ border-color: gold;
+ color: gold;
+}
+
+.cheatsheet-shortcut-editing .cheatsheet-key {
animation: fade .5s infinite;
}
-.cheatsheet-shortcut-undefined .cheatsheet-key{
+
+.cheatsheet-shortcut-undefined .cheatsheet-key {
border-color: red;
color: red;
+}
+
+/*Cheatsheet actions*/
+
+.cheatsheet-actions {
+ position: absolute;
+ box-sizing: border-box;
+
+ bottom : 0;
+ left : 0;
+ right : 0;
+ height : 70px;
+
+ padding : 10px;
+ overflow: hidden;
+
+ background-color : gold;
+}
+
+.cheatsheet-helptext {
+ display: block;
+ font-size: 14px;
+ color: black;
+ padding-right: 150px;
+}
+
+.cheatsheet-button {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
}
\ No newline at end of file
diff --git a/src/css/dialogs.css b/src/css/dialogs.css
index 7dd6c06c..a8a35645 100644
--- a/src/css/dialogs.css
+++ b/src/css/dialogs.css
@@ -44,10 +44,6 @@
overflow: auto;
}
-.animated #dialog-container {
- transition:margin-top 0.2s;
-}
-
.show #dialog-container {
margin-top: 0;
}
diff --git a/src/css/toolbox-palettes-list.css b/src/css/toolbox-palettes-list.css
index c1cc6294..a5c950d8 100644
--- a/src/css/toolbox-palettes-list.css
+++ b/src/css/toolbox-palettes-list.css
@@ -32,7 +32,6 @@
border-radius: 0 0 0 2px;
}
-
.palettes-list-color:nth-child(1):after {
content: "1";
}
@@ -64,6 +63,7 @@
.palettes-list-color:nth-child(-n+5) {
margin-top: 5px;
}
+
.palettes-list-color div {
width: 32px;
height: 32px;
diff --git a/src/js/controller/NotificationController.js b/src/js/controller/NotificationController.js
index 64dff2eb..18ee3766 100644
--- a/src/js/controller/NotificationController.js
+++ b/src/js/controller/NotificationController.js
@@ -25,9 +25,6 @@
document.body.appendChild(message);
message.querySelector('.close').addEventListener('click', this.removeMessage_.bind(this));
- if (messageInfo.behavior) {
- messageInfo.behavior(message);
- }
if (messageInfo.hideDelay) {
window.setTimeout(this.removeMessage_.bind(this), messageInfo.hideDelay);
diff --git a/src/js/controller/dialogs/CheatsheetController.js b/src/js/controller/dialogs/CheatsheetController.js
index 3fe337b6..379831c5 100644
--- a/src/js/controller/dialogs/CheatsheetController.js
+++ b/src/js/controller/dialogs/CheatsheetController.js
@@ -1,6 +1,8 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs');
+ var SHORTCUT_EDITING_CLASSNAME = 'cheatsheet-shortcut-editing';
+
ns.CheatsheetController = function () {};
pskl.utils.inherit(ns.CheatsheetController, ns.AbstractDialogController);
@@ -9,7 +11,7 @@
this.superclass.init.call(this);
this.cheatsheetEl = document.getElementById('cheatsheetContainer');
- this.eventTrapInput = document.getElementById('cheatsheet-event-trap');
+ this.eventTrapInput = document.getElementById('cheatsheetEventTrap');
pskl.utils.Event.addEventListener('.cheatsheet-restore-defaults', 'click', this.onRestoreDefaultsClick_, this);
pskl.utils.Event.addEventListener(this.cheatsheetEl, 'click', this.onCheatsheetClick_, this);
@@ -35,30 +37,38 @@
};
ns.CheatsheetController.prototype.onCheatsheetClick_ = function (evt) {
- pskl.utils.Dom.removeClass('cheatsheet-shortcut-editing');
-
var shortcutEl = pskl.utils.Dom.getParentWithData(evt.target, 'shortcutId');
+ if (!shortcutEl) {
+ pskl.utils.Dom.removeClass(SHORTCUT_EDITING_CLASSNAME);
+ return;
+ }
+
+ var shortcutId = shortcutEl.dataset.shortcutId;
+ var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
+
+ if (shortcutEl.classList.contains(SHORTCUT_EDITING_CLASSNAME)) {
+ shortcutEl.classList.remove(SHORTCUT_EDITING_CLASSNAME);
+ this.eventTrapInput.blur();
+ } else if (shortcut.isEditable()) {
+ shortcutEl.classList.add(SHORTCUT_EDITING_CLASSNAME);
+ this.eventTrapInput.focus();
+ }
+ };
+
+ ns.CheatsheetController.prototype.onEventTrapKeydown_ = function (evt) {
+ var shortcutEl = document.querySelector('.' + SHORTCUT_EDITING_CLASSNAME);
if (!shortcutEl) {
return;
}
- shortcutEl.classList.add('cheatsheet-shortcut-editing');
- this.eventTrapInput.focus();
- };
-
- ns.CheatsheetController.prototype.onEventTrapKeydown_ = function (evt) {
- var editedShortcutEl = document.querySelector('.cheatsheet-shortcut-editing');
- if (!editedShortcutEl) {
- return;
- }
-
+ var shortcutId = shortcutEl.dataset.shortcutId;
+ var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
var shortcutKeyObject = pskl.service.keyboard.KeyUtils.createKeyFromEvent(evt);
var shortcutKeyString = pskl.service.keyboard.KeyUtils.stringify(shortcutKeyObject);
- var shortcutId = editedShortcutEl.dataset.shortcutId;
- var shortcut = pskl.service.keyboard.Shortcuts.getShortcutById(shortcutId);
pskl.service.keyboard.Shortcuts.updateShortcut(shortcut, shortcutKeyString);
+ shortcutEl.classList.remove(SHORTCUT_EDITING_CLASSNAME);
this.eventTrapInput.blur();
evt.preventDefault();
@@ -108,13 +118,23 @@
var shortcut = descriptor.shortcut;
var description = shortcut.isCustom() ? shortcut.getDescription() + ' *' : shortcut.getDescription();
- var shortcutClass = shortcut.isUndefined() ? 'cheatsheet-shortcut-undefined' : '';
+ var shortcutClasses = [];
+ if (shortcut.isUndefined()) {
+ shortcutClasses.push('cheatsheet-shortcut-undefined');
+ }
+ if (shortcut.isEditable()) {
+ shortcutClasses.push('cheatsheet-shortcut-editable');
+ }
+
+ var title = shortcut.isEditable() ? 'Click to edit the key' : 'Shortcut cannot be remapped';
+
var markup = pskl.utils.Template.replace(shortcutTemplate, {
- shortcutId : shortcut.getId(),
- shortcutIcon : descriptor.iconClass,
- shortcutDescription : description,
- shortcutKey : this.formatKey_(shortcut.getDisplayKey()),
- shortcutClass : shortcutClass
+ id : shortcut.getId(),
+ title : title,
+ icon : descriptor.iconClass,
+ description : description,
+ key : this.formatKey_(shortcut.getDisplayKey()),
+ className : shortcutClasses.join(' ')
});
return markup;
diff --git a/src/js/service/keyboard/Shortcut.js b/src/js/service/keyboard/Shortcut.js
index 29ad7378..beee43c0 100644
--- a/src/js/service/keyboard/Shortcut.js
+++ b/src/js/service/keyboard/Shortcut.js
@@ -48,6 +48,14 @@
return keys;
};
+ /**
+ * For now, only shortcuts with a single key mapped can be edited
+ * @return {Boolean} true if the shortcut can be updated
+ */
+ ns.Shortcut.prototype.isEditable = function () {
+ return this.getKeys().length < 2;
+ };
+
ns.Shortcut.prototype.isCustom = function () {
var keys = this.getKeys();
if (keys.length !== this.defaultKeys_.length) {
@@ -92,6 +100,10 @@
};
ns.Shortcut.prototype.removeKeys = function (keysToRemove) {
+ if (!this.isEditable()) {
+ return;
+ }
+
var keys = this.getKeys();
var updatedKeys = keys.filter(function (key) {
return !keysToRemove.some(function (keyToRemove) {
diff --git a/src/js/service/keyboard/Shortcuts.js b/src/js/service/keyboard/Shortcuts.js
index 922e52bd..3e7e97a6 100644
--- a/src/js/service/keyboard/Shortcuts.js
+++ b/src/js/service/keyboard/Shortcuts.js
@@ -5,6 +5,13 @@
return new ns.Shortcut(id, description, defaultKey, displayKey);
};
+ /**
+ * List of keys that cannot be remapped. Either alternate keys, which are not displayed.
+ * Or really custom shortcuts such as the 1-9 for color palette shorctus
+ */
+ var FORBIDDEN_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '?', 'shift+?',
+ 'del', 'back', 'ctrl+Y', 'ctrl+shift+Z'];
+
ns.Shortcuts = {
/**
* Syntax : createShortcut(id, description, default key(s))
@@ -89,13 +96,31 @@
updateShortcut : function (shortcut, keysString) {
keysString = keysString.replace(/\s/g, '');
var keys = keysString.split(',');
+
+ var hasForbiddenKey = FORBIDDEN_KEYS.some(function (forbiddenKey) {
+ return keys.some(function (key) {
+ return forbiddenKey == key;
+ });
+ });
+
+ if (hasForbiddenKey) {
+ $.publish(Events.SHOW_NOTIFICATION, [{
+ 'content': 'Key cannot be remapped (' + keysString + ')',
+ 'hideDelay' : 5000
+ }]);
+ return;
+ }
+
ns.Shortcuts.getShortcuts().forEach(function (s) {
if (s === shortcut) {
return;
}
if (s.removeKeys(keys)) {
- $.publish(Events.SHOW_NOTIFICATION, [{'content': 'Shortcut key removed for ' + s.getId()}]);
+ $.publish(Events.SHOW_NOTIFICATION, [{
+ 'content': 'Shortcut key removed for ' + s.getId(),
+ 'hideDelay' : 5000
+ }]);
}
});
shortcut.updateKeys(keys);
diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js
index 7d894894..5fcddc6c 100644
--- a/src/piskel-style-list.js
+++ b/src/piskel-style-list.js
@@ -15,12 +15,12 @@
"css/settings-save.css",
"css/tools.css",
"css/icons.css",
- "css/cheatsheet.css",
"css/color-picker-slider.css",
"css/dialogs.css",
- "css/dialogs-import-image.css",
"css/dialogs-browse-local.css",
+ "css/dialogs-cheatsheet.css",
"css/dialogs-create-palette.css",
+ "css/dialogs-import-image.css",
"css/notifications.css",
"css/toolbox.css",
"css/toolbox-layers-list.css",
diff --git a/src/templates/dialogs/cheatsheet.html b/src/templates/dialogs/cheatsheet.html
index 3d80b29e..c5f7132c 100644
--- a/src/templates/dialogs/cheatsheet.html
+++ b/src/templates/dialogs/cheatsheet.html
@@ -20,18 +20,22 @@
Storage shortcuts
-
-
-
-
-
-
+
+
+ Change shortcuts : 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.
+ White-colored shortcuts can not be edited. You can click on 'Restore default shortcuts' to go back to the default Piskel shortcuts.
+
+