ux(view/kiosk mode): added view mode and kiosk mode, #6476

public/app/core/components/grafana_app.ts

@@ -109,6 +109,48 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
         $("#tooltip, .tooltip").remove();
         $("#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
       // handle document clicks that should hide things
       body.click(function(evt) {
       body.click(function(evt) {
         var target = $(evt.target);
         var target = $(evt.target);

public/app/core/services/keybindingSrv.ts

@@ -190,6 +190,14 @@ export class KeybindingSrv {
       this.showDashEditView('settings');
       this.showDashEditView('settings');
     });
     });
 
 
+    this.bind('d k', () => {
+      appEvents.emit('toggle-kiosk-mode');
+    });
+
+    this.bind('d v', () => {
+      appEvents.emit('toggle-view-mode');
+    });
+
     this.bind('esc', () => {
     this.bind('esc', () => {
       var popups = $('.popover.in');
       var popups = $('.popover.in');
       if (popups.length > 0) {
       if (popups.length > 0) {

public/app/partials/dashboard.html

-<div dash-class ng-if="dashboard" >
+<div dash-class ng-if="dashboard">
 	<dashnav></dashnav>
 	<dashnav></dashnav>
 
 
 	<div class="dashboard-container">
 	<div class="dashboard-container">

public/sass/mixins/_mixins.scss

@@ -351,3 +351,14 @@
   border-left: 0;
   border-left: 0;
   border-bottom: 1px solid transparent;
   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;
+  }
+}

public/sass/pages/_dashboard.scss

@@ -14,11 +14,11 @@
 }
 }
 
 
 .playlist-active {
 .playlist-active {
-  .add-row-panel-hint,
+  @include hide-controls();
+
   .dashnav-refresh-action,
   .dashnav-refresh-action,
   .dashnav-zoom-out,
   .dashnav-zoom-out,
   .dashnav-action-icons,
   .dashnav-action-icons,
-  .dash-row-menu,
   .dashnav-move-timeframe  {
   .dashnav-move-timeframe  {
     display: none;
     display: none;
   }
   }
@@ -29,15 +29,40 @@
 }
 }
 
 
 .hide-controls {
 .hide-controls {
-  .add-row-panel-hint {
+  @include hide-controls();
+}
+
+.page-kiosk-mode {
+  @include hide-controls();
+  dashnav {
     display: none;
     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;
+    }
   }
   }
 }
 }