Keyboard Cheatsheet : extract color shortcuts to dedicated category

src/css/cheatsheet.css

@@ -51,11 +51,15 @@
   overflow: auto;
 }
 
-.cheatsheet-container h3 {
+.cheatsheet-container .cheatsheet-title {
   font-size:24px;
   margin-top: 0;
 }
 
+.cheatsheet-container .cheatsheet-title:nth-of-type(2) {
+  margin-top: 30px;
+}
+
 .cheatsheet-section {
   float: left;
   width : 33%;

src/js/service/keyboard/CheatsheetService.js

@@ -60,6 +60,7 @@
   ns.CheatsheetService.prototype.initMarkup_ = function () {
     this.initMarkupForTools_();
     this.initMarkupForMisc_();
+    this.initMarkupForColors_();
     this.initMarkupForSelection_();
   };
 
@@ -76,8 +77,6 @@
     var descriptors = [
       this.toDescriptor_('0', 'Reset zoom level'),
       this.toDescriptor_('+/-', 'Zoom in/Zoom out'),
-      this.toDescriptor_('X', 'Swap primary/secondary colors'),
-      this.toDescriptor_('D', 'Reset default colors'),
       this.toDescriptor_('ctrl + Z', 'Undo'),
       this.toDescriptor_('ctrl + Y', 'Redo'),
       this.toDescriptor_('￪', 'Select previous frame'), /* ASCII for up-arrow */
@@ -85,9 +84,6 @@
       this.toDescriptor_('N', 'Create new frame'),
       this.toDescriptor_('shift + N', 'Duplicate selected frame'),
       this.toDescriptor_('shift + ?', 'Open/Close this popup'),
-      this.toDescriptor_('alt + P', 'Create a Palette'),
-      this.toDescriptor_('</>', 'Select prev/next palette color'),
-      this.toDescriptor_('1 to 9', 'Select palette color at index'),
       this.toDescriptor_('alt + O', 'Toggle Onion Skin'),
       this.toDescriptor_('alt + L', 'Toggle Layer Preview')
     ];
@@ -96,6 +92,19 @@
     this.initMarkupForDescriptors_(descriptors, container);
   };
 
+  ns.CheatsheetService.prototype.initMarkupForColors_ = function () {
+    var descriptors = [
+      this.toDescriptor_('X', 'Swap primary/secondary colors'),
+      this.toDescriptor_('D', 'Reset default colors'),
+      this.toDescriptor_('alt + P', 'Create a Palette'),
+      this.toDescriptor_('</>', 'Select prev/next palette color'),
+      this.toDescriptor_('1 to 9', 'Select palette color at index')
+    ];
+
+    var container = this.cheatsheetEl.querySelector('.cheatsheet-colors-shortcuts');
+    this.initMarkupForDescriptors_(descriptors, container);
+  };
+
   ns.CheatsheetService.prototype.initMarkupForSelection_ = function () {
     var descriptors = [
       this.toDescriptor_('ctrl + X', 'Cut selection'),

src/templates/cheatsheet.html

@@ -1,16 +1,18 @@
 <div id="cheatsheet-wrapper" style="display:none">
   <div class="cheatsheet-container">
     <div class="cheatsheet-section">
-      <h3>Tool shortcuts</h3>
+      <h3 class="cheatsheet-title">Tool shortcuts</h3>
       <ul class="cheatsheet-tool-shortcuts"></ul>
     </div>
     <div class="cheatsheet-section">
-      <h3>Misc shortcuts</h3>
+      <h3 class="cheatsheet-title">Misc shortcuts</h3>
       <ul class="cheatsheet-misc-shortcuts"></ul>
     </div>
     <div class="cheatsheet-section">
-      <h3>Selection shortcuts</h3>
+      <h3 class="cheatsheet-title">Selection shortcuts</h3>
       <ul class="cheatsheet-selection-shortcuts"></ul>
+      <h3 class="cheatsheet-title">Color shortcuts</h3>
+      <ul class="cheatsheet-colors-shortcuts"></ul>
     </div>
   </div>
 </div>