ux(dashboard): keybinding changes / new, grafana#6442

torkelo · torkelo · commit f91e06723526 · 2016-11-03T15:14:44.000+01:00
diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
@@ -1,6 +1,7 @@
 ///<reference path="../../headers/common.d.ts" />
 
 import $ from 'jquery';
+import _ from 'lodash';
 
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
@@ -9,10 +10,15 @@ import Mousetrap from 'mousetrap';
 
 export class KeybindingSrv {
   helpModal: boolean;
-  bindings: any;
 
   /** @ngInject */
-  constructor(private $rootScope, private $modal, private $location, private contextSrv) {
+  constructor(
+    private $rootScope,
+    private $modal,
+    private $location,
+    private contextSrv,
+    private $timeout) {
+
     // clear out all shortcuts on route change
     $rootScope.$on('$routeChangeSuccess', () => {
       Mousetrap.reset();
@@ -23,9 +29,8 @@ export class KeybindingSrv {
     this.setupGlobal();
   }
 
-
   setupGlobal() {
-    this.bind("?", this.showHelpModal);
+    this.bind(['?', 'h'], this.showHelpModal);
     this.bind("g h", this.goToHome);
     this.bind("g a", this.openAlerting);
     this.bind("g p", this.goToProfile);
@@ -54,7 +59,6 @@ export class KeybindingSrv {
   }
 
   showHelpModal() {
-    console.log('showing help modal');
     appEvents.emit('show-modal', {
       src: 'public/app/partials/help_modal.html',
       model: {}
@@ -69,6 +73,11 @@ export class KeybindingSrv {
     });
   }
 
+  showDashEditView(view) {
+    var search = _.extend(this.$location.search(), {editview: view});
+    this.$location.search(search);
+  }
+
   setupDashboardBindings(scope, dashboard) {
     this.bind('b', () => {
       dashboard.toggleEditMode();
@@ -82,11 +91,6 @@ export class KeybindingSrv {
     this.bind(['ctrl+s', 'command+s'], () => {
       scope.appEvent('save-dashboard');
     });
-
-    this.bind('r', () => {
-      scope.broadcastRefresh();
-    });
-
     this.bind('ctrl+z', () => {
       scope.appEvent('zoom-out');
     });
@@ -128,14 +132,37 @@ export class KeybindingSrv {
     });
 
     // delete panel
-    this.bind('d', () => {
+    this.bind('r', () => {
       if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
         var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
         panelInfo.row.removePanel(panelInfo.panel);
         dashboard.meta.focusPanelId = 0;
       }
     });
 
+    // delete panel
+    this.bind('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();
+    });
+
+    this.bind('d s', () => {
+      this.showDashEditView('settings');
+    });
+
     this.bind('esc', () => {
       var popups = $('.popover.in');
       if (popups.length > 0) {
diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html
@@ -64,6 +64,11 @@
 			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="viewJson();">View JSON</a></li>
 			<li ng-if="contextSrv.isEditor && !dashboard.editable"><a class="pointer" ng-click="makeEditable();">Make Editable</a></li>
 			<li ng-if="contextSrv.isEditor"><a class="pointer" ng-click="saveDashboardAs();">Save As...</a></li>
+			<li class="dropdown-menu-item-with-shortcut">
+        <a class="pointer" ng-click="showHelpModal();">
+          Help <span class="dropdown-menu-item-shortcut">h</span>
+        </a>
+      </li>
 			<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
 		</ul>
 	</li>
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -33,6 +33,13 @@ export class DashNavCtrl {
       $location.search(search);
     };
 
+    $scope.showHelpModal = function() {
+      $scope.appEvent('show-modal', {
+        src: 'public/app/partials/help_modal.html',
+        model: {}
+      });
+    };
+
     $scope.starDashboard = function() {
       if ($scope.dashboardMeta.isStarred) {
         backendSrv.delete('/api/user/stars/dashboard/' + $scope.dashboard.id).then(function() {
diff --git a/public/app/features/org/prefs_control.ts b/public/app/features/org/prefs_control.ts
@@ -53,21 +53,21 @@ var template = `
   <h3 class="page-heading">Preferences</h3>
 
   <div class="gf-form">
-    <span class="gf-form-label width-9">UI Theme</span>
+    <span class="gf-form-label width-10">UI Theme</span>
     <div class="gf-form-select-wrapper max-width-20">
       <select class="gf-form-input" ng-model="ctrl.prefs.theme" ng-options="f.value as f.text for f in ctrl.themes"></select>
     </div>
   </div>
 
   <div class="gf-form">
-    <span class="gf-form-label width-9">Home Dashboard</span>
+    <span class="gf-form-label width-10">Home Dashboard</span>
     <dashboard-selector class="gf-form-select-wrapper max-width-20 gf-form-select-wrapper--has-help-icon"
                         model="ctrl.prefs.homeDashboardId">
     </dashboard-selector>
   </div>
 
   <div class="gf-form">
-    <label class="gf-form-label width-9">Timezone</label>
+    <label class="gf-form-label width-10">Timezone</label>
     <div class="gf-form-select-wrapper max-width-20">
       <select class="gf-form-input" ng-model="ctrl.prefs.timezone" ng-options="f.value as f.text for f in ctrl.timezones"></select>
     </div>
