IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-20 11:48:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-11-06 10:15:36 +01:00
parent bd996a4810
commit 8db40b25db
5 changed files with 35 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/core/components/grafana_app.ts
View File

@ -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) {

24
public/app/core/components/help/help.html
View File

@ -1,17 +1,17 @@
<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>

16
public/app/core/components/help/help.ts
View File

@ -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'},

2
public/app/features/dashboard/dashnav/dashnav.html
View File

@ -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>

10
public/sass/components/_view_states.scss
View File

@ -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;
}
}