From 82592f0c1336c7b7f5d307a0b09ab88c4d3868e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 3 Nov 2016 20:32:36 +0100 Subject: [PATCH] ux(help): began work on new help modal --- public/app/core/components/help/help.html | 70 +++++++++++++++++++ public/app/core/components/help/help.ts | 31 ++++++++ public/app/core/core.ts | 2 + public/app/core/services/keybindingSrv.ts | 5 +- public/app/core/services/util_srv.ts | 6 +- .../app/features/dashboard/dashnav/dashnav.ts | 5 +- .../app/features/dashboard/shareModalCtrl.js | 2 +- public/app/partials/help_modal.html | 10 ++- 8 files changed, 118 insertions(+), 13 deletions(-) create mode 100644 public/app/core/components/help/help.html create mode 100644 public/app/core/components/help/help.ts diff --git a/public/app/core/components/help/help.html b/public/app/core/components/help/help.html new file mode 100644 index 00000000000..8908bb2e088 --- /dev/null +++ b/public/app/core/components/help/help.html @@ -0,0 +1,70 @@ +
+
+

+ + Help +

+ + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Dashboard wide shortcuts
ESCExit fullscreen edit/view mode, close search or any editor view
FOpen dashboard search view (also contains import/playlist controls)
RRefresh (Fetches new data and rerenders panels)
left arrow keyShift time backward
right arrow keyShift time forward
CTRL+SSave dashboard
CTRL+HHide row controls
CTRL+ZZoom out
CTRL+IQuick snapshot
CTRL+OEnable/Disable shared graph crosshair
+
+ +
diff --git a/public/app/core/components/help/help.ts b/public/app/core/components/help/help.ts new file mode 100644 index 00000000000..70a1edbc3e4 --- /dev/null +++ b/public/app/core/components/help/help.ts @@ -0,0 +1,31 @@ +/// + +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); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 2041f9e60d8..567df736a4e 100644 --- a/public/app/core/core.ts +++ b/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, }; diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 14ea84d1df0..83b03c9728b 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/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: ''}); } bind(keyArg, fn) { diff --git a/public/app/core/services/util_srv.ts b/public/app/core/services/util_srv.ts index ca386a491b9..d4ca13166d5 100644 --- a/public/app/core/services/util_srv.ts +++ b/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, diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index ad3fe8ba6ed..33bb4411640 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/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: ''}); }; $scope.starDashboard = function() { diff --git a/public/app/features/dashboard/shareModalCtrl.js b/public/app/features/dashboard/shareModalCtrl.js index d0de3dbb4a9..77a6cfb21fc 100644 --- a/public/app/features/dashboard/shareModalCtrl.js +++ b/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'}); } diff --git a/public/app/partials/help_modal.html b/public/app/partials/help_modal.html index e6601001433..0cdd669d956 100644 --- a/public/app/partials/help_modal.html +++ b/public/app/partials/help_modal.html @@ -2,9 +2,17 @@

- Keyboard shortcuts + Help

+ +