ux(dashboard): final tweaks to view mode and kiosk mode, better animation for…

ux(dashboard): final tweaks to view mode and kiosk mode, better animation for view mode, and kiosk mode can be entered via kiosk url parameter, #6476

public/app/core/components/grafana_app.ts

@@ -107,6 +107,11 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
           body.addClass(pageClass);
         }
         $("#tooltip, .tooltip").remove();
+
+        // check for kiosk url param
+        if (data.params.kiosk) {
+          appEvents.emit('toggle-kiosk-mode');
+        }
       });
 
       // handle kiosk mode
@@ -117,7 +122,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
       // handle in active view state class
       var lastActivity = new Date().getTime();
       var activeUser = true;
-      var inActiveTimeLimit = 2 * 60 * 1000;
+      var inActiveTimeLimit = 60 * 1000;
 
       function checkForInActiveUser() {
         if (!activeUser) {

public/app/core/components/help/help.html

 <div class="modal-body">
 	<div class="modal-header">
 		<h2 class="modal-header-title">
-			<i class="fa fa-question-circle"></i>
-			<span class="p-l-1">Help</span>
+			<i class="fa fa-keyboard"></i>
+			<span class="p-l-1">Shortcuts</span>
 		</h2>
 
-		<ul class="gf-tabs">
-			<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts']">
-				<a class="gf-tabs-link" ng-click="ctrl.tabindex = $index" ng-class="{active: ctrl.tabIndex === $index}">
-					{{::tab}}
-				</a>
-			</li>
-		</ul>
+		<!-- <ul class="gf&#45;tabs"> -->
+		<!-- 	<li class="gf&#45;tabs&#45;item" ng&#45;repeat="tab in ['Shortcuts']"> -->
+		<!-- 		<a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabindex = $index" ng&#45;class="{active: ctrl.tabIndex === $index}"> -->
+		<!-- 			{{::tab}} -->
+		<!-- 		</a> -->
+		<!-- 	</li> -->
+		<!-- </ul> -->
 
 		<a class="modal-header-close" ng-click="ctrl.dismiss();">
 			<i class="fa fa-remove"></i>
@@ -20,7 +20,7 @@
 
 	<div class="modal-content help-modal">
 
-		<p class="small pull-right" style="position: relative; top: -10px;, right: -10px; margin: 0;">
+		<p class="small" style="position: absolute; top: 48px;, right: 10px">
 			<span class="shortcut-table-key">mod</span> =
 			<span class="muted">CTRL on windows, CMD key on Mac</span>
 		</p>
@@ -33,18 +33,16 @@
 					</tr>
 					<tr ng-repeat="shortcut in shortcuts">
 						<td class="shortcut-table-keys">
-              <span class="shortcut-table-key" ng-repeat="key in shortcut.keys" ng-bind-html="key">
+              <span class="shortcut-table-key" ng-repeat="key in shortcut.keys track by $index" ng-bind-html="key">
               </span>
             </td>
 						<td class="shortcut-table-description">{{shortcut.description}}</td>
 					</tr>
 					<tbody>
 			</table>
-			<div class="clearfix" ng-if="$index%3==2"></div>
 		</div>
 
 		<div class="clearfix"></div>
-
 	</div>
 
 </div>

public/app/core/components/help/help.ts

@@ -19,6 +19,15 @@ export class HelpCtrl {
         {keys: ['s', 't'], description: 'Open search in tags view'},
         {keys: ['esc'], description: 'Exit edit/setting views'},
       ],
+      'Dashboard': [
+        {keys: ['mod+s'], description: 'Save dashboard'},
+        {keys: ['mod+h'], description: 'Hide row controls'},
+        {keys: ['d', 'r'], description: 'Refresh all panels'},
+        {keys: ['d', 's'], description: 'Dashboard settings'},
+        {keys: ['d', 'v'], description: 'Toggle in-active / view mode'},
+        {keys: ['d', 'k'], description: 'Toggle kiosk mode (hides top nav)'},
+        {keys: ['mod+o'], description: 'Toggle shared graph crosshair'},
+      ],
       'Focused Panel': [
         {keys: ['e'], description: 'Toggle panel edit view'},
         {keys: ['v'], description: 'Toggle panel fullscreen view'},
@@ -29,13 +38,6 @@ export class HelpCtrl {
         {keys: ['r', 'c'], description: 'Collapse Row'},
         {keys: ['r', 'r'], description: 'Remove Row'},
       ],
-      'Dashboard': [
-        {keys: ['mod+s'], description: 'Save dashboard'},
-        {keys: ['mod+h'], description: 'Hide row controls'},
-        {keys: ['d', 'r'], description: 'Refresh all panels'},
-        {keys: ['d', 's'], description: 'Dashboard settings'},
-        {keys: ['mod+o'], description: 'Toggle shared graph crosshair'},
-      ],
       'Time Range': [
         {keys: ['t', 'z'], description: 'Zoom out time range'},
         {keys: ['t', '<i class="fa fa-long-arrow-left"></i>'], description: 'Move time range back'},

public/app/features/dashboard/dashnav/dashnav.html

@@ -60,7 +60,7 @@
 			<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>
+          Shortcuts <span class="dropdown-menu-item-shortcut">?</span>
         </a>
       </li>
 			<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>

public/sass/components/_view_states.scss

@@ -73,14 +73,20 @@
       transition: opacity 1.5s ease-in-out;
     }
   }
+
   .navbar-page-btn {
     border: none;
-    margin-left: -35px;
+    transform: translate3d(-50px, 0, 0);
     background: transparent;
-    transition: margin-left 1.5s ease-in-out;
+    transition: transform 1.5s ease-in-out;
     .icon-gf {
       opacity: 0;
       transition: opacity 1.5s ease-in-out;
     }
   }
+
+  .gf-timepicker-nav-btn {
+    transform: translate3d(40px, 0, 0);
+    transition: transform 1.5s ease-in-out;
+  }
 }