ux(keybindings): polish help modal with keybindings, #6465

public/app/core/components/help/help.html

@@ -7,64 +7,41 @@
 
 		<ul class="gf-tabs">
 			<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts']">
-				<a class="gf-tabs-link" ng-click="ctrl.tabindex = $index" ng-class="{active: ctrl.tabindex === $index}">
+				<a class="gf-tabs-link" ng-click="ctrl.tabindex = $index" ng-class="{active: ctrl.tabIndex === $index}">
 					{{::tab}}
 				</a>
 			</li>
 		</ul>
 
-		<a class="modal-header-close" ng-click="dismiss();">
+		<a class="modal-header-close" ng-click="ctrl.dismiss();">
 			<i class="fa fa-remove"></i>
 		</a>
 	</div>
 
-	<div class="modal-content">
-		<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">F</span></td>
-				<td>Open dashboard search view (also contains import/playlist controls)</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">R</span></td>
-				<td>Refresh (Fetches new data and rerenders panels)</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">left arrow key</span></td>
-				<td>Shift time backward</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">right arrow key</span></td>
-				<td>Shift time forward</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+I</span></td>
-				<td>Quick snapshot</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">CTRL+O</span></td>
-				<td>Enable/Disable shared graph crosshair</td>
-			</tr>
-		</table>
+	<div class="modal-content help-modal">
+
+		<p class="small pull-right" style="position: relative; top: -10px;, right: -10px; margin: 0;">
+			<span class="shortcut-table-key">mod</span> =
+			<span class="muted">CTRL on windows, CMD key on Mac</span>
+		</p>
+
+		<div ng-repeat="(category, shortcuts) in ctrl.shortcuts">
+			<table class="shortcut-table">
+				<tbody>
+					<tr>
+						<th 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>
+					</tr>
+					<tbody>
+			</table>
+			<div class="clearfix" ng-if="$index%3==2"></div>
+		</div>
+
+		<div class="clearfix"></div>
+
 	</div>
 
 </div>

public/app/core/components/help/help.ts

@@ -1,6 +1,7 @@
 ///<reference path="../../../headers/common.d.ts" />
 
 import coreModule from '../../core_module';
+import appEvents from 'app/core/app_events';
 
 export class HelpCtrl {
   tabIndex: any;
@@ -11,9 +12,41 @@ export class HelpCtrl {
     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'},
+      ],
+      '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'},
+      ],
+      'Focused Row': [
+        {key: 'r c', description: 'Collapse Row'},
+        {key: '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'},
+      ],
+      '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'},
+      ],
     };
   }
+
+  dismiss() {
+    appEvents.emit('hide-modal');
+  }
 }
 
 export function helpModal() {

public/app/core/components/search/search.ts

@@ -47,10 +47,17 @@ export class SearchCtrl {
       this.query.starred = true;
     }
 
+    if (payload && payload.tagsMode) {
+      return this.$timeout(() => {
+        this.ignoreClose = false;
+        this.giveSearchFocus = this.giveSearchFocus + 1;
+        this.getTags();
+      }, 100);
+    }
+
     this.$timeout(() => {
       this.ignoreClose = false;
       this.giveSearchFocus = this.giveSearchFocus + 1;
-      this.query.query = '';
       this.search();
     }, 100);
   }

public/app/core/services/keybindingSrv.ts

@@ -35,6 +35,8 @@ export class KeybindingSrv {
     this.bind("g a", this.openAlerting);
     this.bind("g p", this.goToProfile);
     this.bind("s s", this.openSearchStarred);
+    this.bind('s o', this.openSearch);
+    this.bind('s t', this.openSearchTags);
     this.bind('f', this.openSearch);
   }
 
@@ -42,6 +44,10 @@ export class KeybindingSrv {
     this.$rootScope.appEvent('show-dash-search', {starred: true});
   }
 
+  openSearchTags() {
+    this.$rootScope.appEvent('show-dash-search', {tagsMode: true});
+  }
+
   openSearch() {
     this.$rootScope.appEvent('show-dash-search');
   }
@@ -143,6 +149,21 @@ export class KeybindingSrv {
       }
     });
 
+    // share panel
+    this.bind('p s', () => {
+      if (dashboard.meta.focusPanelId) {
+        var shareScope =  scope.$new();
+        var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
+        shareScope.panel = panelInfo.panel;
+        shareScope.dashboard = dashboard;
+
+        appEvents.emit('show-modal', {
+          src: 'public/app/features/dashboard/partials/shareModal.html',
+          scope: shareScope
+        });
+      }
+    });
+
     // delete row
     this.bind('r r', () => {
       if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
@@ -161,21 +182,6 @@ export class KeybindingSrv {
       }
     });
 
-    // share panel
-    this.bind('p s', () => {
-      if (dashboard.meta.focusPanelId) {
-        var shareScope =  scope.$new();
-        var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
-        shareScope.panel = panelInfo.panel;
-        shareScope.dashboard = dashboard;
-
-        appEvents.emit('show-modal', {
-          src: 'public/app/features/dashboard/partials/shareModal.html',
-          scope: shareScope
-        });
-      }
-    });
-
     this.bind('d r', () => {
       scope.broadcastRefresh();
     });

public/app/core/services/util_srv.ts

@@ -16,6 +16,13 @@ export class UtilSrv {
 
   init() {
     appEvents.on('show-modal', this.showModal.bind(this), this.$rootScope);
+    appEvents.on('hide-modal', this.hideModal.bind(this), this.$rootScope);
+  }
+
+  hideModal() {
+    if (this.modalScope && this.modalScope.dismiss) {
+      this.modalScope.dismiss();
+    }
   }
 
   showModal(options) {

public/sass/components/_modals.scss

@@ -20,7 +20,7 @@
 
 // Base modal
 .modal {
-  position: fixed;
+  position: absolute;
   z-index: $zindex-modal;
   width: 100%;
 	background-color: $panel-bg;
@@ -173,3 +173,5 @@
     text-overflow: ellipsis;
   }
 }
+
+

public/sass/components/_row.scss

@@ -65,8 +65,8 @@
 
 .dash-row-dropview-close {
   position: absolute;
-  right: -15px;
-  top: -12px;
+  right: -12px;
+  top: -10px;
   width: 20px;
   height: 20px;
 }

public/sass/components/_shortcuts.scss

@@ -1,6 +1,31 @@
 .shortcut-table {
-  td { padding: 3px; }
-  th:last-child { text-align: left; }
-  td:first-child { text-align: right; }
+  th {
+    font-weight: normal;
+    font-size: $font-size-h5;
+    font-style: italic;
+    text-align: left;
+  }
+
+  td:nth-child(2) {
+    text-align: left;
+    color: $text-muted;
+    width: 99%;
+    padding: 0.38rem 1rem;
+  }
+
+  td:first-child {
+    white-space: nowrap;
+    width: 1%;
+    text-align: right;
+    color: $text-color;
+  }
+
+  margin-bottom: $spacer;
+}
+
+.shortcut-table-key {
+  word-spacing: 5px;
+  padding: 0.2rem 0.5rem;
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
 }