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 @@ ...@@ -7,64 +7,41 @@
<ul class="gf-tabs"> <ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts']"> <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}} {{::tab}}
</a> </a>
</li> </li>
</ul> </ul>
<a class="modal-header-close" ng-click="dismiss();"> <a class="modal-header-close" ng-click="ctrl.dismiss();">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</div> </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"> <table class="shortcut-table">
<tbody>
<tr> <tr>
<th></th> <th colspan="2">{{category}}</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>
<tr> <tr ng-repeat="shortcut in shortcuts">
<td><span class="label label-info">CTRL+S</span></td> <td><span class="shortcut-table-key">{{shortcut.key}}</span></td>
<td>Save dashboard</td> <td>{{shortcut.description}}</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> </tr>
<tbody>
</table> </table>
<div class="clearfix" ng-if="$index%3==2"></div>
</div>
<div class="clearfix"></div>
</div> </div>
</div> </div>
public/app/core/components/help/help.ts
///<reference path="../../../headers/common.d.ts" /> ///<reference path="../../../headers/common.d.ts" />
import coreModule from '../../core_module'; import coreModule from '../../core_module';
import appEvents from 'app/core/app_events';
export class HelpCtrl { export class HelpCtrl {
tabIndex: any; tabIndex: any;
...@@ -11,9 +12,41 @@ export class HelpCtrl { ...@@ -11,9 +12,41 @@ export class HelpCtrl {
this.tabIndex = 0; this.tabIndex = 0;
this.shortcuts = { this.shortcuts = {
'Global': [ '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() { export function helpModal() {
......
public/app/core/components/search/search.ts
...@@ -47,10 +47,17 @@ export class SearchCtrl { ...@@ -47,10 +47,17 @@ export class SearchCtrl {
this.query.starred = true; 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.$timeout(() => {
this.ignoreClose = false; this.ignoreClose = false;
this.giveSearchFocus = this.giveSearchFocus + 1; this.giveSearchFocus = this.giveSearchFocus + 1;
this.query.query = '';
this.search(); this.search();
}, 100); }, 100);
} }
......
public/app/core/services/keybindingSrv.ts
...@@ -35,6 +35,8 @@ export class KeybindingSrv { ...@@ -35,6 +35,8 @@ export class KeybindingSrv {
this.bind("g a", this.openAlerting); this.bind("g a", this.openAlerting);
this.bind("g p", this.goToProfile); this.bind("g p", this.goToProfile);
this.bind("s s", this.openSearchStarred); this.bind("s s", this.openSearchStarred);
this.bind('s o', this.openSearch);
this.bind('s t', this.openSearchTags);
this.bind('f', this.openSearch); this.bind('f', this.openSearch);
} }
...@@ -42,6 +44,10 @@ export class KeybindingSrv { ...@@ -42,6 +44,10 @@ export class KeybindingSrv {
this.$rootScope.appEvent('show-dash-search', {starred: true}); this.$rootScope.appEvent('show-dash-search', {starred: true});
} }
openSearchTags() {
this.$rootScope.appEvent('show-dash-search', {tagsMode: true});
}
openSearch() { openSearch() {
this.$rootScope.appEvent('show-dash-search'); this.$rootScope.appEvent('show-dash-search');
} }
...@@ -143,6 +149,21 @@ export class KeybindingSrv { ...@@ -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 // delete row
this.bind('r r', () => { this.bind('r r', () => {
if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) { if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
...@@ -161,21 +182,6 @@ export class KeybindingSrv { ...@@ -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', () => { this.bind('d r', () => {
scope.broadcastRefresh(); scope.broadcastRefresh();
}); });
......
public/app/core/services/util_srv.ts
...@@ -16,6 +16,13 @@ export class UtilSrv { ...@@ -16,6 +16,13 @@ export class UtilSrv {
init() { init() {
appEvents.on('show-modal', this.showModal.bind(this), this.$rootScope); 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) { showModal(options) {
......
public/sass/components/_modals.scss
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
// Base modal // Base modal
.modal { .modal {
position: fixed; position: absolute;
z-index: $zindex-modal; z-index: $zindex-modal;
width: 100%; width: 100%;
background-color: $panel-bg; background-color: $panel-bg;
...@@ -173,3 +173,5 @@ ...@@ -173,3 +173,5 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
public/sass/components/_row.scss
...@@ -65,8 +65,8 @@ ...@@ -65,8 +65,8 @@
.dash-row-dropview-close { .dash-row-dropview-close {
position: absolute; position: absolute;
right: -15px; right: -12px;
top: -12px; top: -10px;
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
......
public/sass/components/_shortcuts.scss
.shortcut-table { .shortcut-table {
td { padding: 3px; } th {
th:last-child { text-align: left; } font-weight: normal;
td:first-child { text-align: right; } 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