mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(keybindings): polish help modal with keybindings, #6465
This commit is contained in:
Torkel Ödegaard
parent
4ab095b051
commit
3cc4a194a9
@ -7,64 +7,41 @@
|
||||
|
||||
<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}">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.tabindex = $index" ng-class="{active: ctrl.tabIndex === $index}">
|
||||
{{::tab}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="modal-header-close" ng-click="dismiss();">
|
||||
<a class="modal-header-close" ng-click="ctrl.dismiss();">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<table class="shortcut-table">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th style="text-align: left;">Dashboard wide shortcuts</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: right;"><span class="label label-info">ESC</span></td>
|
||||
<td>Exit fullscreen edit/view mode, close search or any editor view</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">F</span></td>
|
||||
<td>Open dashboard search view (also contains import/playlist controls)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">R</span></td>
|
||||
<td>Refresh (Fetches new data and rerenders panels)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">left arrow key</span></td>
|
||||
<td>Shift time backward</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">right arrow key</span></td>
|
||||
<td>Shift time forward</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">CTRL+S</span></td>
|
||||
<td>Save dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">CTRL+H</span></td>
|
||||
<td>Hide row controls</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">CTRL+Z</span></td>
|
||||
<td>Zoom out</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">CTRL+I</span></td>
|
||||
<td>Quick snapshot</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="label label-info">CTRL+O</span></td>
|
||||
<td>Enable/Disable shared graph crosshair</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="modal-content help-modal">
|
||||
|
||||
<p class="small pull-right" style="position: relative; top: -10px;, right: -10px; margin: 0;">
|
||||
<span class="shortcut-table-key">mod</span> =
|
||||
<span class="muted">CTRL on windows, CMD key on Mac</span>
|
||||
</p>
|
||||
|
||||
<div ng-repeat="(category, shortcuts) in ctrl.shortcuts">
|
||||
<table class="shortcut-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th colspan="2">{{category}}</th>
|
||||
</tr>
|
||||
<tr ng-repeat="shortcut in shortcuts">
|
||||
<td><span class="shortcut-table-key">{{shortcut.key}}</span></td>
|
||||
<td>{{shortcut.description}}</td>
|
||||
</tr>
|
||||
<tbody>
|
||||
</table>
|
||||
<div class="clearfix" ng-if="$index%3==2"></div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import coreModule from '../../core_module';
|
||||
import appEvents from 'app/core/app_events';
|
||||
|
||||
export class HelpCtrl {
|
||||
tabIndex: any;
|
||||
@ -11,9 +12,41 @@ export class HelpCtrl {
|
||||
this.tabIndex = 0;
|
||||
this.shortcuts = {
|
||||
'Global': [
|
||||
]
|
||||
{key: 'g h', description: 'Go to Home Dashboard'},
|
||||
{key: 'g p', description: 'Go to Profile'},
|
||||
{key: 's o', description: 'Open search'},
|
||||
{key: 's s', description: 'Open search with starred filter'},
|
||||
{key: 's t', description: 'Open search in tags view'},
|
||||
{key: 'esc', description: 'Exit edit/setting views'},
|
||||
],
|
||||
'Focused Panel': [
|
||||
{key: 'e', description: 'Toggle panel edit view'},
|
||||
{key: 'v', description: 'Toggle panel fullscreen view'},
|
||||
{key: 'p s', description: 'Open Panel Share Modal'},
|
||||
{key: 'p r', description: 'Remove Panel'},
|
||||
],
|
||||
'Focused Row': [
|
||||
{key: 'r c', description: 'Collapse Row'},
|
||||
{key: 'r r', description: 'Remove Row'},
|
||||
],
|
||||
'Dashboard': [
|
||||
{key: 'mod+s', description: 'Save dashboard'},
|
||||
{key: 'mod+h', description: 'Hide row controls'},
|
||||
{key: 'd r', description: 'Refresh all panels'},
|
||||
{key: 'd s', description: 'Dashboard settings'},
|
||||
{key: 'mod+o', description: 'Toggle shared graph crosshair'},
|
||||
],
|
||||
'Time Range': [
|
||||
{key: 't z', description: 'Zoom out time range'},
|
||||
{key: 't left', description: 'Move time range back'},
|
||||
{key: 't right', description: 'Move time range forward'},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
appEvents.emit('hide-modal');
|
||||
}
|
||||
}
|
||||
|
||||
export function helpModal() {
|
||||
|
||||
@ -47,10 +47,17 @@ export class SearchCtrl {
|
||||
this.query.starred = true;
|
||||
}
|
||||
|
||||
if (payload && payload.tagsMode) {
|
||||
return this.$timeout(() => {
|
||||
this.ignoreClose = false;
|
||||
this.giveSearchFocus = this.giveSearchFocus + 1;
|
||||
this.getTags();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
this.$timeout(() => {
|
||||
this.ignoreClose = false;
|
||||
this.giveSearchFocus = this.giveSearchFocus + 1;
|
||||
this.query.query = '';
|
||||
this.search();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
@ -35,6 +35,8 @@ export class KeybindingSrv {
|
||||
this.bind("g a", this.openAlerting);
|
||||
this.bind("g p", this.goToProfile);
|
||||
this.bind("s s", this.openSearchStarred);
|
||||
this.bind('s o', this.openSearch);
|
||||
this.bind('s t', this.openSearchTags);
|
||||
this.bind('f', this.openSearch);
|
||||
}
|
||||
|
||||
@ -42,6 +44,10 @@ export class KeybindingSrv {
|
||||
this.$rootScope.appEvent('show-dash-search', {starred: true});
|
||||
}
|
||||
|
||||
openSearchTags() {
|
||||
this.$rootScope.appEvent('show-dash-search', {tagsMode: true});
|
||||
}
|
||||
|
||||
openSearch() {
|
||||
this.$rootScope.appEvent('show-dash-search');
|
||||
}
|
||||
@ -143,6 +149,21 @@ export class KeybindingSrv {
|
||||
}
|
||||
});
|
||||
|
||||
// share panel
|
||||
this.bind('p s', () => {
|
||||
if (dashboard.meta.focusPanelId) {
|
||||
var shareScope = scope.$new();
|
||||
var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
|
||||
shareScope.panel = panelInfo.panel;
|
||||
shareScope.dashboard = dashboard;
|
||||
|
||||
appEvents.emit('show-modal', {
|
||||
src: 'public/app/features/dashboard/partials/shareModal.html',
|
||||
scope: shareScope
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// delete row
|
||||
this.bind('r r', () => {
|
||||
if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
|
||||
@ -161,21 +182,6 @@ export class KeybindingSrv {
|
||||
}
|
||||
});
|
||||
|
||||
// share panel
|
||||
this.bind('p s', () => {
|
||||
if (dashboard.meta.focusPanelId) {
|
||||
var shareScope = scope.$new();
|
||||
var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
|
||||
shareScope.panel = panelInfo.panel;
|
||||
shareScope.dashboard = dashboard;
|
||||
|
||||
appEvents.emit('show-modal', {
|
||||
src: 'public/app/features/dashboard/partials/shareModal.html',
|
||||
scope: shareScope
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.bind('d r', () => {
|
||||
scope.broadcastRefresh();
|
||||
});
|
||||
|
||||
@ -16,6 +16,13 @@ export class UtilSrv {
|
||||
|
||||
init() {
|
||||
appEvents.on('show-modal', this.showModal.bind(this), this.$rootScope);
|
||||
appEvents.on('hide-modal', this.hideModal.bind(this), this.$rootScope);
|
||||
}
|
||||
|
||||
hideModal() {
|
||||
if (this.modalScope && this.modalScope.dismiss) {
|
||||
this.modalScope.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
showModal(options) {
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
// Base modal
|
||||
.modal {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
z-index: $zindex-modal;
|
||||
width: 100%;
|
||||
background-color: $panel-bg;
|
||||
@ -173,3 +173,5 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -65,8 +65,8 @@
|
||||
|
||||
.dash-row-dropview-close {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: -12px;
|
||||
right: -12px;
|
||||
top: -10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,31 @@
|
||||
.shortcut-table {
|
||||
td { padding: 3px; }
|
||||
th:last-child { text-align: left; }
|
||||
td:first-child { text-align: right; }
|
||||
th {
|
||||
font-weight: normal;
|
||||
font-size: $font-size-h5;
|
||||
font-style: italic;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td:nth-child(2) {
|
||||
text-align: left;
|
||||
color: $text-muted;
|
||||
width: 99%;
|
||||
padding: 0.38rem 1rem;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
text-align: right;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.shortcut-table-key {
|
||||
word-spacing: 5px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user