diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts
index 16666dea1b2..17aecb68d32 100644
--- a/public/app/core/components/grafana_app.ts
+++ b/public/app/core/components/grafana_app.ts
@@ -69,6 +69,30 @@ export class GrafanaCtrl {
}
}
+function setViewModeBodyClass(body, mode, sidemenuOpen: boolean) {
+ body.removeClass('view-mode--tv');
+ body.removeClass('view-mode--kiosk');
+ body.removeClass('view-mode--inactive');
+
+ switch (mode) {
+ case 'tv': {
+ body.removeClass('sidemenu-open');
+ body.addClass('view-mode--tv');
+ break;
+ }
+ // 1 & true for legacy states
+ case 1:
+ case true: {
+ body.removeClass('sidemenu-open');
+ body.addClass('view-mode--kiosk');
+ break;
+ }
+ default: {
+ body.toggleClass('sidemenu-open', sidemenuOpen);
+ }
+ }
+}
+
/** @ngInject */
export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScope, $location) {
return {
@@ -98,7 +122,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
});
scope.$watch(() => playlistSrv.isPlaying, function(newValue) {
- elem.toggleClass('playlist-active', newValue === true);
+ elem.toggleClass('view-mode--playlist', newValue === true);
});
// check if we are in server side render
@@ -127,17 +151,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
$('#tooltip, .tooltip').remove();
// check for kiosk url param
- if (data.params.kiosk) {
- appEvents.emit('toggle-kiosk-mode');
- }
-
- // check for 'inactive' url param for clean looks like kiosk, but with title
- if (data.params.inactive) {
- body.addClass('user-activity-low');
-
- // for some reason, with this class it looks cleanest
- body.addClass('sidemenu-open');
- }
+ setViewModeBodyClass(body, data.params.kiosk, sidemenuOpen);
// close all drops
for (const drop of Drop.drops) {
@@ -146,15 +160,37 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
});
// handle kiosk mode
- appEvents.on('toggle-kiosk-mode', () => {
- body.toggleClass('page-kiosk-mode');
+ appEvents.on('toggle-kiosk-mode', options => {
+ const search = $location.search();
+
+ if (options && options.exit) {
+ search.kiosk = 1;
+ }
+
+ switch (search.kiosk) {
+ case 'tv': {
+ search.kiosk = 1;
+ appEvents.emit('alert-success', ['Press ESC to exit Kiosk mode']);
+ break;
+ }
+ case 1:
+ case true: {
+ delete search.kiosk;
+ break;
+ }
+ default: {
+ search.kiosk = 'tv';
+ }
+ }
+
+ $location.search(search);
+ setViewModeBodyClass(body, search.kiosk, sidemenuOpen);
});
// handle in active view state class
let lastActivity = new Date().getTime();
let activeUser = true;
- const inActiveTimeLimit = 60 * 1000;
- let sidemenuHidden = false;
+ const inActiveTimeLimit = 60 * 5000;
function checkForInActiveUser() {
if (!activeUser) {
@@ -167,15 +203,8 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
if (new Date().getTime() - lastActivity > inActiveTimeLimit) {
activeUser = false;
- body.addClass('user-activity-low');
- // hide sidemenu
- if (sidemenuOpen) {
- sidemenuHidden = true;
- body.removeClass('sidemenu-open');
- $timeout(function() {
- $rootScope.$broadcast('render');
- }, 100);
- }
+ body.addClass('view-mode--inactive');
+ body.removeClass('sidemenu-open');
}
}
@@ -183,17 +212,8 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
lastActivity = new Date().getTime();
if (!activeUser) {
activeUser = true;
- body.removeClass('user-activity-low');
-
- // restore sidemenu
- if (sidemenuHidden) {
- sidemenuHidden = false;
- body.addClass('sidemenu-open');
- appEvents.emit('toggle-inactive-mode');
- $timeout(function() {
- $rootScope.$broadcast('render');
- }, 100);
- }
+ body.removeClass('view-mode--inactive');
+ body.toggleClass('sidemenu-open', sidemenuOpen);
}
}
diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts
index 5cdbdb62ee3..2d60825e739 100644
--- a/public/app/core/components/scroll/scroll.ts
+++ b/public/app/core/components/scroll/scroll.ts
@@ -1,7 +1,6 @@
import $ from 'jquery';
import baron from 'baron';
import coreModule from 'app/core/core_module';
-import appEvents from 'app/core/app_events';
const scrollBarHTML = `
@@ -39,43 +38,6 @@ export function geminiScrollbar() {
const scrollbar = baron(scrollParams);
- let lastPos = 0;
-
- appEvents.on(
- 'dash-scroll',
- evt => {
- if (evt.restore) {
- elem[0].scrollTop = lastPos;
- return;
- }
-
- lastPos = elem[0].scrollTop;
-
- if (evt.animate) {
- elem.animate({ scrollTop: evt.pos }, 500);
- } else {
- elem[0].scrollTop = evt.pos;
- }
- },
- scope
- );
-
- // force updating dashboard width
- appEvents.on('toggle-sidemenu', forceUpdate, scope);
- appEvents.on('toggle-sidemenu-hidden', forceUpdate, scope);
- appEvents.on('toggle-view-mode', forceUpdate, scope);
- appEvents.on('toggle-kiosk-mode', forceUpdate, scope);
- appEvents.on('toggle-inactive-mode', forceUpdate, scope);
-
- function forceUpdate() {
- scrollbar.scroll();
- }
-
- scope.$on('$routeChangeSuccess', () => {
- lastPos = 0;
- elem[0].scrollTop = 0;
- });
-
scope.$on('$destroy', () => {
scrollbar.dispose();
});
diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
index cad538d13aa..d05e9b0c21c 100644
--- a/public/app/core/services/keybindingSrv.ts
+++ b/public/app/core/services/keybindingSrv.ts
@@ -77,15 +77,15 @@ export class KeybindingSrv {
appEvents.emit('hide-modal');
- if (!this.modalOpen) {
- if (this.timepickerOpen) {
- this.$rootScope.appEvent('closeTimepicker');
- this.timepickerOpen = false;
- } else {
- this.$rootScope.appEvent('panel-change-view', { fullscreen: false, edit: false });
- }
- } else {
+ if (this.modalOpen) {
this.modalOpen = false;
+ return;
+ }
+
+ if (this.timepickerOpen) {
+ this.$rootScope.appEvent('closeTimepicker');
+ this.timepickerOpen = false;
+ return;
}
// close settings view
@@ -93,6 +93,16 @@ export class KeybindingSrv {
if (search.editview) {
delete search.editview;
this.$location.search(search);
+ return;
+ }
+
+ if (search.fullscreen) {
+ this.$rootScope.appEvent('panel-change-view', { fullscreen: false, edit: false });
+ return;
+ }
+
+ if (search.kiosk) {
+ this.$rootScope.appEvent('toggle-kiosk-mode', { exit: true });
}
}
diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts
index 2c8cd2eeae6..1a7f0b85f2b 100644
--- a/public/app/features/dashboard/dashboard_model.ts
+++ b/public/app/features/dashboard/dashboard_model.ts
@@ -842,12 +842,20 @@ export class DashboardModel {
})
);
- // Consider navbar and submenu controls, padding and margin
- let visibleHeight = window.innerHeight - 55 - 20;
+ const navbarHeight = 55;
+ const margin = 20;
+ const submenuHeight = 50;
- // Remove submenu if visible
- if (this.meta.submenuEnabled) {
- visibleHeight -= 50;
+ let visibleHeight = viewHeight - navbarHeight - margin;
+
+ // Remove submenu height if visible
+ if (this.meta.submenuEnabled && !this.meta.kiosk) {
+ visibleHeight -= submenuHeight;
+ }
+
+ // add back navbar height
+ if (this.meta.kiosk === 'b') {
+ visibleHeight += 55;
}
const visibleGridHeight = Math.floor(visibleHeight / (GRID_CELL_HEIGHT + GRID_CELL_VMARGIN));
diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html
index 6ec272b5ca4..74e00fea798 100644
--- a/public/app/features/dashboard/dashnav/dashnav.html
+++ b/public/app/features/dashboard/dashnav/dashnav.html
@@ -8,14 +8,14 @@
+
+
-
-
-
+
+
+
+