ux(help): began work on new help modal

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

+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-question-circle"></i>
+			<span class="p-l-1">Help</span>
+		</h2>
+
+		<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}">
+					{{::tab}}
+				</a>
+			</li>
+		</ul>
+
+		<a class="modal-header-close" ng-click="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>
+
+</div>

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

+///<reference path="../../../headers/common.d.ts" />
+
+import coreModule from '../../core_module';
+
+export class HelpCtrl {
+  tabIndex: any;
+  shortcuts: any;
+
+  /** @ngInject */
+  constructor(private $scope) {
+    this.tabIndex = 0;
+    this.shortcuts = {
+      'Global': [
+      ]
+    };
+  }
+}
+
+export function helpModal() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/core/components/help/help.html',
+    controller: HelpCtrl,
+    bindToController: true,
+    transclude: true,
+    controllerAs: 'ctrl',
+    scope: {},
+  };
+}
+
+coreModule.directive('helpModal', helpModal);

public/app/core/core.ts

@@ -45,6 +45,7 @@ import colors from './utils/colors';
 import {assignModelProperties} from './utils/model_utils';
 import {contextSrv} from './services/context_srv';
 import {KeybindingSrv} from './services/keybindingSrv';
+import {helpModal} from './components/help/help';
 
 
 export {
@@ -68,4 +69,5 @@ export {
   assignModelProperties,
   contextSrv,
   KeybindingSrv,
+  helpModal,
 };

public/app/core/services/keybindingSrv.ts

@@ -59,10 +59,7 @@ export class KeybindingSrv {
   }
 
   showHelpModal() {
-    appEvents.emit('show-modal', {
-      src: 'public/app/partials/help_modal.html',
-      model: {}
-    });
+   appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
   }
 
   bind(keyArg, fn) {

public/app/core/services/util_srv.ts

@@ -23,13 +23,13 @@ export class UtilSrv {
       this.modalScope.dismiss();
     }
 
-    if (options.model) {
+    if (options.model || !options.scope) {
       options.scope = this.modalScope = this.$rootScope.$new();
       options.scope.model = options.model;
-    } else {
-      this.modalScope = options.scope;
     }
 
+    this.modalScope = options.scope;
+
     var modal = this.$modal({
       modalClass: options.modalClass,
       template: options.src,

public/app/features/dashboard/dashnav/dashnav.ts

@@ -34,10 +34,7 @@ export class DashNavCtrl {
     };
 
     $scope.showHelpModal = function() {
-      $scope.appEvent('show-modal', {
-        src: 'public/app/partials/help_modal.html',
-        model: {}
-      });
+      $scope.appEvent('show-modal', {templateHtml: '<help-modal></help-modal>'});
     };
 
     $scope.starDashboard = function() {

public/app/features/dashboard/shareModalCtrl.js

@@ -29,7 +29,7 @@ function (angular, _, require, config) {
         $scope.tabs.push({title: 'Snapshot', src: 'shareSnapshot.html'});
       }
 
-      if (!$scope.dashboard.meta.isSnapshot) {
+      if (!$scope.dashboard.meta.isSnapshot && !$scope.modeSharePanel) {
         $scope.tabs.push({title: 'Export', src: 'shareExport.html'});
       }
 

public/app/partials/help_modal.html

@@ -2,9 +2,17 @@
 	<div class="modal-header">
 		<h2 class="modal-header-title">
 			<i class="fa fa-keyboard-o"></i>
-			<span class="p-l-1">Keyboard shortcuts</span>
+			<span class="p-l-1">Help</span>
 		</h2>
 
+		<ul class="gf-tabs">
+			<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts', 'Tips', 'Docs']">
+				<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
+					{{::tab}}
+				</a>
+			</li>
+		</ul>
+
 		<a class="modal-header-close" ng-click="dismiss();">
 			<i class="fa fa-remove"></i>
 		</a>