From 267b10379429e19e856039ccc9b1842a632e9ab0 Mon Sep 17 00:00:00 2001
From: Ollie Terrance <ollie.terrance@live.co.uk>
Date: Wed, 21 May 2014 22:42:24 +0100
Subject: [PATCH] Keyboard shortcuts modal

---
 Homely/res/css/homely.css   |  6 ++++
 Homely/res/html/homely.html | 58 ++++++++++++++++++++++++++++++++++++-
 Homely/res/js/homely.js     |  9 ++----
 3 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/Homely/res/css/homely.css b/Homely/res/css/homely.css
index ce29bac..7d951a6 100644
--- a/Homely/res/css/homely.css
+++ b/Homely/res/css/homely.css
@@ -219,3 +219,9 @@ input[type=range] {
 #settings .form-group:last-of-type {
     margin-bottom: 0;
 }
+#shortcuts .modal-body {
+    padding: 0 20px 10px;
+}
+#shortcuts .alert {
+    margin-top: 25px;
+}
diff --git a/Homely/res/html/homely.html b/Homely/res/html/homely.html
index 219df37..4d216a5 100644
--- a/Homely/res/html/homely.html
+++ b/Homely/res/html/homely.html
@@ -294,7 +294,7 @@ <h4 class="modal-title"><i class="fa fa-cog"></i>&nbsp; Settings</h4>
                                             <input id="settings-general-keyboard" type="checkbox">
                                             <span>Enable advanced keyboard navigation</span>
                                         </label>
-                                        <p class="help-block">See the <a href="https://github.com/OllieTerrance/Homely#keyboard-shortcuts" class="link-external">readme</a> for controls.</p>
+                                        <p class="help-block">Press <code>?</code> or see the <a href="https://github.com/OllieTerrance/Homely#keyboard-shortcuts" class="link-external">readme</a> for controls.</p>
                                     </div>
                                 </div>
                                 <div class="form-group form-control-nomar-bottom form-control-pad-bottom">
@@ -493,6 +493,62 @@ <h2 id="settings-about-title"></h2>
                 </div>
             </div>
         </div>
+        <div id="shortcuts" class="modal fade">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
+                        <h4 class="modal-title"><i class="fa fa-magic"></i>&nbsp; Keyboard shortcuts</h4>
+                    </div>
+                    <div class="modal-body row">
+                        <div class="col-sm-6">
+                            <h3>Global</h3>
+                            <ul>
+                                <li><code>Q</code> <code>L</code> &ndash; switch to links</li>
+                                <li><code>W</code> <code>B</code> &ndash; switch to bookmarks</li>
+                                <li><code>E</code> <code>A</code> &ndash; open apps dropdown</li>
+                                <li><code>R</code> <code>H</code> &ndash; open history dropdown</li>
+                                <li><code>T</code> <code>N</code> &ndash; open notifcations dropdown</li>
+                                <li><code>Y</code> <code>S</code> &ndash; open settings modal</li>
+                                <li><code>Tab</code> <code>Shift+Tab</code> &ndash; scroll through dropdown options</li>
+                            </ul>
+                            <h3>Apps</h3>
+                            <ul>
+                                <li><code>Shift+A</code> &ndash; open Chrome Apps page</li>
+                                <li><code>Shift+Alt+A</code> &ndash; go to Chrome Web Store</li>
+                            </ul>
+                            <h3>Links</h3>
+                            <ul>
+                                <li><code>1</code> ... <code>0</code> &ndash; select nth block (<code>0</code> for 10th)</li>
+                                <li><code>-</code> <code>=</code> &ndash; select previous/next block</li>
+                                <li><code>[</code> <code>]</code> &ndash; select previous/next button in block</li>
+                                <li><code>Enter</code> &ndash; open link</li>
+                                <li><code>Backspace</code> &ndash; clear selection</li>
+                            </ul>
+                        </div>
+                        <div class="col-sm-6">
+                            <h3>Bookmarks</h3>
+                            <ul>
+                                <li><code>/</code> &ndash; focus search field</li>
+                            </ul>
+                            <h3>Notifications</h3>
+                            <ul>
+                                <li><code>Shift+N</code> &ndash; refresh notifications</li>
+                                <li><code>Shift+Alt+N</code> &ndash; open all unread notification pages</li>
+                            </ul>
+                            <h3>Settings</h3>
+                            <ul>
+                                <li><code>Tab</code> <code>Shift+Tab</code> &ndash; cycle tabs (ignored if a form field is active)</li>
+                                <li><code>Enter</code> &ndash; switch to fields in tab</li>
+                                <li><code>Ctrl+Enter</code> &ndash; save and reload</li>
+                                <li><code>Esc</code> &ndash; cancel</li>
+                            </ul>
+                            <div class="alert alert-info">Note: shortcuts are disabled whilst input fields (text boxes, selects, buttons) are currently focused.</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <script src="../../lib/js/jquery.min.js"></script>
         <script src="../../lib/js/jquery.sortable.min.js"></script>
         <script src="../../lib/js/bootstrap.min.js"></script>
diff --git a/Homely/res/js/homely.js b/Homely/res/js/homely.js
index c7ebf73..3642c99 100644
--- a/Homely/res/js/homely.js
+++ b/Homely/res/js/homely.js
@@ -2229,6 +2229,8 @@ $(document).ready(function() {
                     }).bind(["s", "y"], function(e, key) {
                         closeDropdowns();
                         $("#menu-settings a").click();
+                    }).bind("?", function(e, key) {
+                        $("#shortcuts").modal();
                     });
                 }
                 // if settings modal is open
@@ -2306,12 +2308,7 @@ $(document).ready(function() {
             }
         });
         weatherCallbacks.push(function() {
-            var label = $("#menu-weather .menu-label");
-            if (settings.style["topbar"].labels) {
-                label.show();
-            } else {
-                label.parent().attr("title", label.text());
-            }
+            if (settings.style["topbar"].labels) $("#menu-weather .menu-label").show();
         });
         proxyCallbacks.push(function() {
             var label = $("#menu-proxy .menu-label");