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

src/css/dialogs-cheatsheet.css

@@ -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-boxes {
-  .cheatsheet-section {
+  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 {

src/js/controller/dialogs/CheatsheetController.js

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

src/js/service/keyboard/KeycodeTranslator.js

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

src/templates/dialogs/cheatsheet.html

@@ -12,18 +12,23 @@
       <h3 class="cheatsheet-title">Misc shortcuts</h3>
       <ul class="cheatsheet-misc-shortcuts"></ul>
     </div>
-    <div class="cheatsheet-section">
+    <div class="cheatsheet-boxes">
-      <h3 class="cheatsheet-title">Selection shortcuts</h3>
+      <div class="cheatsheet-section">
-      <ul class="cheatsheet-selection-shortcuts"></ul>
+        <h3 class="cheatsheet-title">Selection shortcuts</h3>
-      <h3 class="cheatsheet-title">Color shortcuts</h3>
+        <ul class="cheatsheet-selection-shortcuts"></ul>
-      <ul class="cheatsheet-color-shortcuts"></ul>
+      </div>
-      <h3 class="cheatsheet-title">Storage shortcuts</h3>
+      <div class="cheatsheet-section">
-      <ul class="cheatsheet-storage-shortcuts"></ul>
+        <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" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></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>
     <button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
   </div>