Skip to content

N
nexpie-grafana-theme
Commit 3cc4a194 by Torkel Ödegaard
Options

ux(keybindings): polish help modal with keybindings, #6465

parent 4ab095b0
Showing with 124 additions and 67 deletions
public/app/core/components/help/help.html
......@@ -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">
<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></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>
<th colspan="2">{{category}}</th>
</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 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>
public/app/core/components/help/help.ts
///<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() {
......
public/app/core/components/search/search.ts
......@@ -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);
}
......
public/app/core/services/keybindingSrv.ts
......@@ -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();
});
......
public/app/core/services/util_srv.ts
......@@ -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) {
......
public/sass/components/_modals.scss
......@@ -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;
}
}
public/sass/components/_row.scss
......@@ -65,8 +65,8 @@
.dash-row-dropview-close {
position: absolute;
right: -15px;
top: -12px;
right: -12px;
top: -10px;
width: 20px;
height: 20px;
}
......
public/sass/components/_shortcuts.scss
.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);
}
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