From 0d82fb71ad908d0d95a229ea97346e727a68f461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Sat, 5 Nov 2016 12:19:52 +0100
Subject: [PATCH] ux(keybindings): updated look of dashboard keybindings help
 modal, #6465

---
 public/app/core/components/help/help.html | 11 +++---
 public/app/core/components/help/help.ts   | 42 +++++++++++------------
 public/sass/components/_shortcuts.scss    | 31 +++++++++++++----
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/public/app/core/components/help/help.html b/public/app/core/components/help/help.html
index 9cdc7ff8704..d81daae4708 100644
--- a/public/app/core/components/help/help.html
+++ b/public/app/core/components/help/help.html
@@ -25,15 +25,18 @@
 			<span class="muted">CTRL on windows, CMD key on Mac</span>
 		</p>
 
-		<div ng-repeat="(category, shortcuts) in ctrl.shortcuts">
+		<div ng-repeat="(category, shortcuts) in ctrl.shortcuts" class="shortcut-category">
 			<table class="shortcut-table">
 				<tbody>
 					<tr>
-						<th colspan="2">{{category}}</th>
+						<th class="shortcut-table-category-header" colspan="2">{{category}}</th>
 					</tr>
 					<tr ng-repeat="shortcut in shortcuts">
-						<td><span class="shortcut-table-key">{{shortcut.key}}</span></td>
-						<td>{{shortcut.description}}</td>
+						<td class="shortcut-table-keys">
+              <span class="shortcut-table-key" ng-repeat="key in shortcut.keys" ng-bind-html="key">
+              </span>
+            </td>
+						<td class="shortcut-table-description">{{shortcut.description}}</td>
 					</tr>
 					<tbody>
 			</table>
diff --git a/public/app/core/components/help/help.ts b/public/app/core/components/help/help.ts
index fbdd25a9f80..9b2d54b269d 100644
--- a/public/app/core/components/help/help.ts
+++ b/public/app/core/components/help/help.ts
@@ -8,38 +8,38 @@ export class HelpCtrl {
   shortcuts: any;
 
   /** @ngInject */
-  constructor(private $scope) {
+  constructor(private $scope, $sce) {
     this.tabIndex = 0;
     this.shortcuts = {
       'Global': [
-        {key: 'g h', description: 'Go to Home Dashboard'},
-        {key: 'g p', description: 'Go to Profile'},
-        {key: 's o', description: 'Open search'},
-        {key: 's s', description: 'Open search with starred filter'},
-        {key: 's t', description: 'Open search in tags view'},
-        {key: 'esc', description: 'Exit edit/setting views'},
+        {keys: ['g', 'h'], description: 'Go to Home Dashboard'},
+        {keys: ['g', 'p'], description: 'Go to Profile'},
+        {keys: ['s', 'o'], description: 'Open search'},
+        {keys: ['s', 's'], description: 'Open search with starred filter'},
+        {keys: ['s', 't'], description: 'Open search in tags view'},
+        {keys: ['esc'], description: 'Exit edit/setting views'},
       ],
       'Focused Panel': [
-        {key: 'e',   description: 'Toggle panel edit view'},
-        {key: 'v', description: 'Toggle panel fullscreen view'},
-        {key: 'p s', description: 'Open Panel Share Modal'},
-        {key: 'p r', description: 'Remove Panel'},
+        {keys: ['e'], description: 'Toggle panel edit view'},
+        {keys: ['v'], description: 'Toggle panel fullscreen view'},
+        {keys: ['p', 's'], description: 'Open Panel Share Modal'},
+        {keys: ['p', 'r'], description: 'Remove Panel'},
       ],
       'Focused Row': [
-        {key: 'r c', description: 'Collapse Row'},
-        {key: 'r r', description: 'Remove Row'},
+        {keys: ['r', 'c'], description: 'Collapse Row'},
+        {keys: ['r', 'r'], description: 'Remove Row'},
       ],
       'Dashboard': [
-        {key: 'mod+s', description: 'Save dashboard'},
-        {key: 'mod+h', description: 'Hide row controls'},
-        {key: 'd r', description: 'Refresh all panels'},
-        {key: 'd s', description: 'Dashboard settings'},
-        {key: 'mod+o', description: 'Toggle shared graph crosshair'},
+        {keys: ['mod+s'], description: 'Save dashboard'},
+        {keys: ['mod+h'], description: 'Hide row controls'},
+        {keys: ['d', 'r'], description: 'Refresh all panels'},
+        {keys: ['d', 's'], description: 'Dashboard settings'},
+        {keys: ['mod+o'], description: 'Toggle shared graph crosshair'},
       ],
       'Time Range': [
-        {key: 't z', description: 'Zoom out time range'},
-        {key: 't left', description: 'Move time range back'},
-        {key: 't right', description: 'Move time range forward'},
+        {keys: ['t', 'z'], description: 'Zoom out time range'},
+        {keys: ['t', '<i class="fa fa-long-arrow-left"></i>'], description: 'Move time range back'},
+        {keys: ['t', '<i class="fa fa-long-arrow-right"></i>'], description: 'Move time range forward'},
       ],
     };
   }
diff --git a/public/sass/components/_shortcuts.scss b/public/sass/components/_shortcuts.scss
index 0620057debc..4e2d56503d9 100644
--- a/public/sass/components/_shortcuts.scss
+++ b/public/sass/components/_shortcuts.scss
@@ -1,19 +1,26 @@
+
+.shortcut-category {
+  float: left;
+  font-size: $font-size-sm;
+  width: 50%;
+}
+
 .shortcut-table {
-  th {
+  .shortcut-table-category-header {
     font-weight: normal;
-    font-size: $font-size-h5;
+    font-size: $font-size-h6;
     font-style: italic;
     text-align: left;
   }
 
-  td:nth-child(2) {
+  .shortcut-table-description {
     text-align: left;
     color: $text-muted;
     width: 99%;
     padding: 0.38rem 1rem;
   }
 
-  td:first-child {
+  .shortcut-table-keys {
     white-space: nowrap;
     width: 1%;
     text-align: right;
@@ -24,8 +31,18 @@
 }
 
 .shortcut-table-key {
-  word-spacing: 5px;
-  padding: 0.2rem 0.5rem;
-  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  display: inline-block;
+  text-align: center;
+  margin-right: 0.3rem;
+  padding: 3px 5px;
+  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  line-height: 10px;
+  color: #555;
+  vertical-align: middle;
+  background-color: $btn-inverse-bg;
+  border: solid 1px $btn-inverse-bg-hl;
+  border-radius: 3px;
+  color: $btn-inverse-text-color;
+  box-shadow: inset 0 -1px 0 $btn-inverse-bg-hl;
 }