From 6a4d3cb10692161e2a9ca482e7860a6f52786694 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Fri, 14 Aug 2015 00:01:47 +0200
Subject: [PATCH] Keyboard Cheatsheet : extract color shortcuts to dedicated
 category

---
 src/css/cheatsheet.css                       |  6 +++++-
 src/js/service/keyboard/CheatsheetService.js | 19 ++++++++++++++-----
 src/templates/cheatsheet.html                |  8 +++++---
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/css/cheatsheet.css b/src/css/cheatsheet.css
index 6287d06..121e14c 100644
--- a/src/css/cheatsheet.css
+++ b/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%;
diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js
index bf7eebc..396e9af 100644
--- a/src/js/service/keyboard/CheatsheetService.js
+++ b/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_('&#65514;', '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_('&lt;/&gt;', '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_('&lt;/&gt;', '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'),
diff --git a/src/templates/cheatsheet.html b/src/templates/cheatsheet.html
index 5377bad..d4fbdb0 100644
--- a/src/templates/cheatsheet.html
+++ b/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>