Merge pull request #11430 from grafana/11332_esc_timepicker

Enable closing timepicker using escape key

public/app/core/services/keybindingSrv.ts

@@ -10,6 +10,7 @@ import 'mousetrap-global-bind';
 export class KeybindingSrv {
 export class KeybindingSrv {
   helpModal: boolean;
   helpModal: boolean;
   modalOpen = false;
   modalOpen = false;
+  timepickerOpen = false;
 
 
   /** @ngInject */
   /** @ngInject */
   constructor(private $rootScope, private $location) {
   constructor(private $rootScope, private $location) {
@@ -22,6 +23,8 @@ export class KeybindingSrv {
 
 
     this.setupGlobal();
     this.setupGlobal();
     appEvents.on('show-modal', () => (this.modalOpen = true));
     appEvents.on('show-modal', () => (this.modalOpen = true));
+    $rootScope.onAppEvent('timepickerOpen', () => (this.timepickerOpen = true));
+    $rootScope.onAppEvent('timepickerClosed', () => (this.timepickerOpen = false));
   }
   }
 
 
   setupGlobal() {
   setupGlobal() {
@@ -73,7 +76,12 @@ export class KeybindingSrv {
     appEvents.emit('hide-modal');
     appEvents.emit('hide-modal');
 
 
     if (!this.modalOpen) {
     if (!this.modalOpen) {
-      this.$rootScope.appEvent('panel-change-view', { fullscreen: false, edit: false });
+      if (this.timepickerOpen) {
+        this.$rootScope.appEvent('closeTimepicker');
+        this.timepickerOpen = false;
+      } else {
+        this.$rootScope.appEvent('panel-change-view', { fullscreen: false, edit: false });
+      }
     } else {
     } else {
       this.modalOpen = false;
       this.modalOpen = false;
     }
     }

public/app/features/dashboard/timepicker/timepicker.ts

@@ -22,7 +22,6 @@ export class TimePickerCtrl {
   refresh: any;
   refresh: any;
   isUtc: boolean;
   isUtc: boolean;
   firstDayOfWeek: number;
   firstDayOfWeek: number;
-  closeDropdown: any;
   isOpen: boolean;
   isOpen: boolean;
 
 
   /** @ngInject */
   /** @ngInject */
@@ -32,6 +31,7 @@ export class TimePickerCtrl {
     $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope);
     $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope);
     $rootScope.onAppEvent('shift-time-backward', () => this.move(-1), $scope);
     $rootScope.onAppEvent('shift-time-backward', () => this.move(-1), $scope);
     $rootScope.onAppEvent('refresh', this.onRefresh.bind(this), $scope);
     $rootScope.onAppEvent('refresh', this.onRefresh.bind(this), $scope);
+    $rootScope.onAppEvent('closeTimepicker', this.openDropdown.bind(this), $scope);
 
 
     // init options
     // init options
     this.panel = this.dashboard.timepicker;
     this.panel = this.dashboard.timepicker;
@@ -96,7 +96,7 @@ export class TimePickerCtrl {
 
 
   openDropdown() {
   openDropdown() {
     if (this.isOpen) {
     if (this.isOpen) {
-      this.isOpen = false;
+      this.closeDropdown();
       return;
       return;
     }
     }
 
 
@@ -112,6 +112,12 @@ export class TimePickerCtrl {
 
 
     this.refresh.options.unshift({ text: 'off' });
     this.refresh.options.unshift({ text: 'off' });
     this.isOpen = true;
     this.isOpen = true;
+    this.$rootScope.appEvent('timepickerOpen');
+  }
+
+  closeDropdown() {
+    this.isOpen = false;
+    this.$rootScope.appEvent('timepickerClosed');
   }
   }
 
 
   applyCustom() {
   applyCustom() {
@@ -120,7 +126,7 @@ export class TimePickerCtrl {
     }
     }
 
 
     this.timeSrv.setTime(this.editTimeRaw);
     this.timeSrv.setTime(this.editTimeRaw);
-    this.isOpen = false;
+    this.closeDropdown();
   }
   }
 
 
   absoluteFromChanged() {
   absoluteFromChanged() {
@@ -143,7 +149,7 @@ export class TimePickerCtrl {
     }
     }
 
 
     this.timeSrv.setTime(range);
     this.timeSrv.setTime(range);
-    this.isOpen = false;
+    this.closeDropdown();
   }
   }
 }
 }