diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index b5ba0e5e4a5..48b1ff60be2 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -109,6 +109,48 @@ export function grafanaAppDirective(playlistSrv, contextSrv) { $("#tooltip, .tooltip").remove(); }); + // handle kiosk mode + appEvents.on('toggle-kiosk-mode', () => { + body.toggleClass('page-kiosk-mode'); + }); + + // handle in active view state class + var lastActivity = new Date().getTime(); + var activeUser = true; + var inActiveTimeLimit = 2 * 60 * 1000; + + function checkForInActiveUser() { + if (!activeUser) { + return; + } + // only go to activity low mode on dashboard page + if (!body.hasClass('page-dashboard')) { + return; + } + + if ((new Date().getTime() - lastActivity) > inActiveTimeLimit) { + activeUser = false; + body.addClass('user-activity-low'); + } + } + + function userActivityDetected() { + lastActivity = new Date().getTime(); + if (!activeUser) { + activeUser = true; + body.removeClass('user-activity-low'); + } + } + + body.mousemove(userActivityDetected); + body.keydown(userActivityDetected); + setInterval(checkForInActiveUser, 1000); + + appEvents.on('toggle-view-mode', () => { + lastActivity = 0; + checkForInActiveUser(); + }); + // handle document clicks that should hide things body.click(function(evt) { var target = $(evt.target); diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index d96b38dee19..880315ed498 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -190,6 +190,14 @@ export class KeybindingSrv { this.showDashEditView('settings'); }); + this.bind('d k', () => { + appEvents.emit('toggle-kiosk-mode'); + }); + + this.bind('d v', () => { + appEvents.emit('toggle-view-mode'); + }); + this.bind('esc', () => { var popups = $('.popover.in'); if (popups.length > 0) { diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index cedaf7ed7b0..96e06edc8b6 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,4 +1,4 @@ -
+
diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss index b1dd8c047cf..4922d2ff022 100644 --- a/public/sass/mixins/_mixins.scss +++ b/public/sass/mixins/_mixins.scss @@ -351,3 +351,14 @@ border-left: 0; border-bottom: 1px solid transparent; } + +@mixin hide-controls() { + .add-row-panel-hint, + .dash-row-menu { + display: none; + } + .resize-panel-handle, + .panel-drop-zone { + visibility: hidden; + } +} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index df6f0890ac4..fe9ea63c328 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -14,11 +14,11 @@ } .playlist-active { - .add-row-panel-hint, + @include hide-controls(); + .dashnav-refresh-action, .dashnav-zoom-out, .dashnav-action-icons, - .dash-row-menu, .dashnav-move-timeframe { display: none; } @@ -29,15 +29,40 @@ } .hide-controls { - .add-row-panel-hint { + @include hide-controls(); +} + +.page-kiosk-mode { + @include hide-controls(); + dashnav { display: none; } - .dash-row-menu { - display: none; +} + +.user-activity-low { + @include hide-controls(); + .dashnav-refresh-action, + .dashnav-zoom-out, + .dashnav-action-icons, + .dashnav-move-timeframe { + opacity: 0; + transition: opacity 1.5s ease-in-out; } - .resize-panel-handle, - .panel-drop-zone { - visibility: hidden; + + // navbar buttons + .navbar-inner { + background: transparent; + transition: background 1.5s ease-in-out; + } + .navbar-brand-btn, + .navbar-page-btn { + border: none; + background: transparent; + .fa, .icon-gf { + opacity: 0; + transition: opacity 1s ease-in-out; + transition: opacity 1.5s ease-in-out; + } } }