opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-20 13:33:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

ux(keybindings): updated look of dashboard keybindings help modal, #6465

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-11-05 12:19:52 +01:00
parent aaa174a091
commit 0d82fb71ad
3 changed files with 52 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,15 +25,18 @@
<span class="muted">CTRL on windows, CMD key on Mac</span> <span class="muted">CTRL on windows, CMD key on Mac</span>
</p> </p>
<div ng-repeat="(category, shortcuts) in ctrl.shortcuts"> <div ng-repeat="(category, shortcuts) in ctrl.shortcuts" class="shortcut-category">
<table class="shortcut-table"> <table class="shortcut-table">
<tbody> <tbody>
<tr> <tr>
<th colspan="2">{{category}}</th> <th class="shortcut-table-category-header" colspan="2">{{category}}</th>
</tr> </tr>
<tr ng-repeat="shortcut in shortcuts"> <tr ng-repeat="shortcut in shortcuts">
<td><span class="shortcut-table-key">{{shortcut.key}}</span></td> <td class="shortcut-table-keys">
<td>{{shortcut.description}}</td> <span class="shortcut-table-key" ng-repeat="key in shortcut.keys" ng-bind-html="key">
</span>
</td>
<td class="shortcut-table-description">{{shortcut.description}}</td>
</tr> </tr>
<tbody> <tbody>
</table> </table>

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

@ -8,38 +8,38 @@ export class HelpCtrl {
shortcuts: any; shortcuts: any;
/** @ngInject */ /** @ngInject */
constructor(private $scope) { constructor(private $scope, $sce) {
this.tabIndex = 0; this.tabIndex = 0;
this.shortcuts = { this.shortcuts = {
'Global': [ 'Global': [
{key: 'g h', description: 'Go to Home Dashboard'}, {keys: ['g', 'h'], description: 'Go to Home Dashboard'},
{key: 'g p', description: 'Go to Profile'}, {keys: ['g', 'p'], description: 'Go to Profile'},
{key: 's o', description: 'Open search'}, {keys: ['s', 'o'], description: 'Open search'},
{key: 's s', description: 'Open search with starred filter'}, {keys: ['s', 's'], description: 'Open search with starred filter'},
{key: 's t', description: 'Open search in tags view'}, {keys: ['s', 't'], description: 'Open search in tags view'},
{key: 'esc', description: 'Exit edit/setting views'}, {keys: ['esc'], description: 'Exit edit/setting views'},
], ],
'Focused Panel': [ 'Focused Panel': [
{key: 'e', description: 'Toggle panel edit view'}, {keys: ['e'], description: 'Toggle panel edit view'},
{key: 'v', description: 'Toggle panel fullscreen view'}, {keys: ['v'], description: 'Toggle panel fullscreen view'},
{key: 'p s', description: 'Open Panel Share Modal'}, {keys: ['p', 's'], description: 'Open Panel Share Modal'},
{key: 'p r', description: 'Remove Panel'}, {keys: ['p', 'r'], description: 'Remove Panel'},
], ],
'Focused Row': [ 'Focused Row': [
{key: 'r c', description: 'Collapse Row'}, {keys: ['r', 'c'], description: 'Collapse Row'},
{key: 'r r', description: 'Remove Row'}, {keys: ['r', 'r'], description: 'Remove Row'},
], ],
'Dashboard': [ 'Dashboard': [
{key: 'mod+s', description: 'Save dashboard'}, {keys: ['mod+s'], description: 'Save dashboard'},
{key: 'mod+h', description: 'Hide row controls'}, {keys: ['mod+h'], description: 'Hide row controls'},
{key: 'd r', description: 'Refresh all panels'}, {keys: ['d', 'r'], description: 'Refresh all panels'},
{key: 'd s', description: 'Dashboard settings'}, {keys: ['d', 's'], description: 'Dashboard settings'},
{key: 'mod+o', description: 'Toggle shared graph crosshair'}, {keys: ['mod+o'], description: 'Toggle shared graph crosshair'},
], ],
'Time Range': [ 'Time Range': [
{key: 't z', description: 'Zoom out time range'}, {keys: ['t', 'z'], description: 'Zoom out time range'},
{key: 't left', description: 'Move time range back'}, {keys: ['t', '<i class="fa fa-long-arrow-left"></i>'], description: 'Move time range back'},
{key: 't right', description: 'Move time range forward'}, {keys: ['t', '<i class="fa fa-long-arrow-right"></i>'], description: 'Move time range forward'},
], ],
}; };
} }

31
public/sass/components/_shortcuts.scss
View File

@ -1,19 +1,26 @@
.shortcut-category {
float: left;
font-size: $font-size-sm;
width: 50%;
}
.shortcut-table { .shortcut-table {
th { .shortcut-table-category-header {
font-weight: normal; font-weight: normal;
font-size: $font-size-h5; font-size: $font-size-h6;
font-style: italic; font-style: italic;
text-align: left; text-align: left;
} }
td:nth-child(2) { .shortcut-table-description {
text-align: left; text-align: left;
color: $text-muted; color: $text-muted;
width: 99%; width: 99%;
padding: 0.38rem 1rem; padding: 0.38rem 1rem;
} }
td:first-child { .shortcut-table-keys {
white-space: nowrap; white-space: nowrap;
width: 1%; width: 1%;
text-align: right; text-align: right;
@ -24,8 +31,18 @@
} }
.shortcut-table-key { .shortcut-table-key {
word-spacing: 5px; display: inline-block;
padding: 0.2rem 0.5rem; text-align: center;
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); margin-right: 0.3rem;
padding: 3px 5px;
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
line-height: 10px;
color: #555;
vertical-align: middle;
background-color: $btn-inverse-bg;
border: solid 1px $btn-inverse-bg-hl;
border-radius: 3px;
color: $btn-inverse-text-color;
box-shadow: inset 0 -1px 0 $btn-inverse-bg-hl;
} }