From 16e79809828b423c9ecfedad33eb4c4ec724d2cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 19 Oct 2014 12:30:41 -0400
Subject: [PATCH] Help: added help modal, accessed by shortcut '?', the help
 modal only contains a list of all shortcuts right now but will be extended in
 the future, #952

---
 CHANGELOG.md                                  |  1 +
 src/app/partials/help_modal.html              | 46 +++++++++++++++++++
 .../dashboard/dashboardKeyBindings.js         | 20 +++++++-
 src/app/services/keyboardManager.js           |  2 +-
 src/css/less/grafana.less                     |  6 +++
 5 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 src/app/partials/help_modal.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7b4bbd366a..dd27a6a6667 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 **Misc**
 - [Issue #938](https://github.com/grafana/grafana/issues/938). Panel: Plugin panels now reside outside of app/panels directory
+- [Issue #952](https://github.com/grafana/grafana/issues/952). Help: Shortcut "?" to open help modal with list of all shortcuts
 
 **Fixes**
 - [Issue #925](https://github.com/grafana/grafana/issues/925). Graph: bar width calculation fix for some edge cases (bars would render on top of each other)
diff --git a/src/app/partials/help_modal.html b/src/app/partials/help_modal.html
new file mode 100644
index 00000000000..8fca3680fa0
--- /dev/null
+++ b/src/app/partials/help_modal.html
@@ -0,0 +1,46 @@
+<div class="modal-body">
+	<div class="dashboard-editor-header">
+		<div class="dashboard-editor-title">
+			<i class="icon icon-keyboard"></i>
+			Keyboard shutcuts
+		</div>
+	</div>
+
+	<div class="dashboard-editor-body">
+		<table class="shortcut-table">
+			<tr>
+				<th></th>
+				<th style="text-align: left;">Dashboard wide shortcuts</th>
+			</tr>
+			<tr>
+				<td style="text-align: right;"><span class="label label-info">ESC</span></td>
+				<td>Exit fullscreen edit/view mode, close search or any editor view</td>
+			</tr>
+			<tr>
+				<td><span class="label label-info">CTRL+F</span></td>
+				<td>Open dashboard search view (also contains import/playlist controls)</td>
+			</tr>
+			<tr>
+				<td><span class="label label-info">CTRL+S</span></td>
+				<td>Save dashboard</td>
+			</tr>
+			<tr>
+				<td><span class="label label-info">CTRL+H</span></td>
+				<td>Hide row controls</td>
+			</tr>
+			<tr>
+				<td><span class="label label-info">CTRL+Z</span></td>
+				<td>Zoom out</td>
+			</tr>
+			<tr>
+				<td><span class="label label-info">CTRL+R</span></td>
+				<td>Refresh (Fetches new data and rerenders panels)</td>
+			</tr>
+		</table>
+	</div>
+
+</div>
+
+<div class="modal-footer">
+	<button type="button" class="btn btn-info" ng-click="dismiss()">Close</button>
+</div>
diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js
index 987bb5a71ad..c87b07db622 100644
--- a/src/app/services/dashboard/dashboardKeyBindings.js
+++ b/src/app/services/dashboard/dashboardKeyBindings.js
@@ -8,7 +8,7 @@ function(angular, $) {
 
   var module = angular.module('grafana.services');
 
-  module.service('dashboardKeybindings', function($rootScope, keyboardManager) {
+  module.service('dashboardKeybindings', function($rootScope, keyboardManager, $modal, $q) {
 
     this.shortcuts = function(scope) {
 
@@ -22,6 +22,24 @@ function(angular, $) {
         keyboardManager.unbind('esc');
       });
 
+      var helpModalScope = null;
+      keyboardManager.bind('shift+¿', function() {
+        if (helpModalScope) { return; }
+
+        helpModalScope = $rootScope.$new();
+        var helpModal = $modal({
+          template: './app/partials/help_modal.html',
+          persist: false,
+          show: false,
+          scope: helpModalScope,
+          keyboard: false
+        });
+
+        helpModalScope.$on('$destroy', function() { helpModalScope = null; });
+        $q.when(helpModal).then(function(modalEl) { modalEl.modal('show'); });
+
+      }, { inputDisabled: true });
+
       keyboardManager.bind('ctrl+f', function() {
         scope.appEvent('show-dash-editor', { src: 'app/partials/search.html' });
       }, { inputDisabled: true });
diff --git a/src/app/services/keyboardManager.js b/src/app/services/keyboardManager.js
index 9875d74964f..72124fe76af 100644
--- a/src/app/services/keyboardManager.js
+++ b/src/app/services/keyboardManager.js
@@ -277,4 +277,4 @@ function (angular) {
     return keyboardManagerService;
   }]);
 
-});
\ No newline at end of file
+});
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index ab9e9ee99b9..1f676b97531 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -552,3 +552,9 @@ select.grafana-target-segment-input {
 .grafana-tip {
   padding-left: 5px;
 }
+
+.shortcut-table {
+  td { padding: 3px; }
+  th:last-child { text-align: left; }
+  td:first-child { text-align: right; }
+}