Skip to content

N
nexpie-grafana-theme
Commit 8db40b25 by Torkel Ödegaard
Options

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
parent bd996a48
Showing with 35 additions and 24 deletions
public/app/core/components/grafana_app.ts
...@@ -107,6 +107,11 @@ export function grafanaAppDirective(playlistSrv, contextSrv) { ...@@ -107,6 +107,11 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
body.addClass(pageClass); body.addClass(pageClass);
} }
$("#tooltip, .tooltip").remove(); $("#tooltip, .tooltip").remove();
// check for kiosk url param
if (data.params.kiosk) {
appEvents.emit('toggle-kiosk-mode');
}
}); });
// handle kiosk mode // handle kiosk mode
...@@ -117,7 +122,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv) { ...@@ -117,7 +122,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
// handle in active view state class // handle in active view state class
var lastActivity = new Date().getTime(); var lastActivity = new Date().getTime();
var activeUser = true; var activeUser = true;
var inActiveTimeLimit = 2 * 60 * 1000; var inActiveTimeLimit = 60 * 1000;
function checkForInActiveUser() { function checkForInActiveUser() {
if (!activeUser) { if (!activeUser) {
......
public/app/core/components/help/help.html
<div class="modal-body"> <div class="modal-body">
<div class="modal-header"> <div class="modal-header">
<h2 class="modal-header-title"> <h2 class="modal-header-title">
<i class="fa fa-question-circle"></i> <i class="fa fa-keyboard"></i>
<span class="p-l-1">Help</span> <span class="p-l-1">Shortcuts</span>
</h2> </h2>
<ul class="gf-tabs"> <!-- <ul class="gf&#45;tabs"> -->
<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts']"> <!-- <li class="gf&#45;tabs&#45;item" ng&#45;repeat="tab in ['Shortcuts']"> -->
<a class="gf-tabs-link" ng-click="ctrl.tabindex = $index" ng-class="{active: ctrl.tabIndex === $index}"> <!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabindex = $index" ng&#45;class="{active: ctrl.tabIndex === $index}"> -->
{{::tab}} <!-- {{::tab}} -->
</a> <!-- </a> -->
</li> <!-- </li> -->
</ul> <!-- </ul> -->
<a class="modal-header-close" ng-click="ctrl.dismiss();"> <a class="modal-header-close" ng-click="ctrl.dismiss();">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class="modal-content help-modal"> <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="shortcut-table-key">mod</span> =
<span class="muted">CTRL on windows, CMD key on Mac</span> <span class="muted">CTRL on windows, CMD key on Mac</span>
</p> </p>
...@@ -33,18 +33,16 @@ ...@@ -33,18 +33,16 @@
</tr> </tr>
<tr ng-repeat="shortcut in shortcuts"> <tr ng-repeat="shortcut in shortcuts">
<td class="shortcut-table-keys"> <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> </span>
</td> </td>
<td class="shortcut-table-description">{{shortcut.description}}</td> <td class="shortcut-table-description">{{shortcut.description}}</td>
</tr> </tr>
<tbody> <tbody>
</table> </table>
<div class="clearfix" ng-if="$index%3==2"></div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
public/app/core/components/help/help.ts
...@@ -19,6 +19,15 @@ export class HelpCtrl { ...@@ -19,6 +19,15 @@ export class HelpCtrl {
{keys: ['s', 't'], description: 'Open search in tags view'}, {keys: ['s', 't'], description: 'Open search in tags view'},
{keys: ['esc'], description: 'Exit edit/setting views'}, {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': [ 'Focused Panel': [
{keys: ['e'], description: 'Toggle panel edit view'}, {keys: ['e'], description: 'Toggle panel edit view'},
{keys: ['v'], description: 'Toggle panel fullscreen view'}, {keys: ['v'], description: 'Toggle panel fullscreen view'},
...@@ -29,13 +38,6 @@ export class HelpCtrl { ...@@ -29,13 +38,6 @@ export class HelpCtrl {
{keys: ['r', 'c'], description: 'Collapse Row'}, {keys: ['r', 'c'], description: 'Collapse Row'},
{keys: ['r', 'r'], description: 'Remove 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': [ 'Time Range': [
{keys: ['t', 'z'], description: 'Zoom out 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'}, {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 @@ ...@@ -60,7 +60,7 @@
<li ng-if="contextSrv.isEditor"><a class="pointer" ng-click="saveDashboardAs();">Save As...</a></li> <li ng-if="contextSrv.isEditor"><a class="pointer" ng-click="saveDashboardAs();">Save As...</a></li>
<li class="dropdown-menu-item-with-shortcut"> <li class="dropdown-menu-item-with-shortcut">
<a class="pointer" ng-click="showHelpModal();"> <a class="pointer" ng-click="showHelpModal();">
Help <span class="dropdown-menu-item-shortcut">h</span> Shortcuts <span class="dropdown-menu-item-shortcut">?</span>
</a> </a>
</li> </li>
<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</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 @@ ...@@ -73,14 +73,20 @@
transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out;
} }
} }
.navbar-page-btn { .navbar-page-btn {
border: none; border: none;
margin-left: -35px; transform: translate3d(-50px, 0, 0);
background: transparent; background: transparent;
transition: margin-left 1.5s ease-in-out; transition: transform 1.5s ease-in-out;
.icon-gf { .icon-gf {
opacity: 0; opacity: 0;
transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out;
} }
} }
.gf-timepicker-nav-btn {
transform: translate3d(40px, 0, 0);
transition: transform 1.5s ease-in-out;
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment