- {{category}} |
+
- {{shortcut.key}} |
- {{shortcut.description}} |
+
+
+
+ |
+ {{shortcut.description}} |
diff --git a/public/app/core/components/help/help.ts b/public/app/core/components/help/help.ts
index fbdd25a9f80..9b2d54b269d 100644
--- a/public/app/core/components/help/help.ts
+++ b/public/app/core/components/help/help.ts
@@ -8,38 +8,38 @@ export class HelpCtrl {
shortcuts: any;
/** @ngInject */
- constructor(private $scope) {
+ constructor(private $scope, $sce) {
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'},
+ {keys: ['g', 'h'], description: 'Go to Home Dashboard'},
+ {keys: ['g', 'p'], description: 'Go to Profile'},
+ {keys: ['s', 'o'], description: 'Open search'},
+ {keys: ['s', 's'], description: 'Open search with starred filter'},
+ {keys: ['s', 't'], description: 'Open search in tags view'},
+ {keys: ['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'},
+ {keys: ['e'], description: 'Toggle panel edit view'},
+ {keys: ['v'], description: 'Toggle panel fullscreen view'},
+ {keys: ['p', 's'], description: 'Open Panel Share Modal'},
+ {keys: ['p', 'r'], description: 'Remove Panel'},
],
'Focused Row': [
- {key: 'r c', description: 'Collapse Row'},
- {key: 'r r', description: 'Remove Row'},
+ {keys: ['r', 'c'], description: 'Collapse Row'},
+ {keys: ['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'},
+ {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': [
- {key: 't z', description: 'Zoom out time range'},
- {key: 't left', description: 'Move time range back'},
- {key: 't right', description: 'Move time range forward'},
+ {keys: ['t', 'z'], description: 'Zoom out time range'},
+ {keys: ['t', '
'], description: 'Move time range back'},
+ {keys: ['t', '
'], description: 'Move time range forward'},
],
};
}
diff --git a/public/sass/components/_shortcuts.scss b/public/sass/components/_shortcuts.scss
index 0620057debc..4e2d56503d9 100644
--- a/public/sass/components/_shortcuts.scss
+++ b/public/sass/components/_shortcuts.scss
@@ -1,19 +1,26 @@
+
+.shortcut-category {
+ float: left;
+ font-size: $font-size-sm;
+ width: 50%;
+}
+
.shortcut-table {
- th {
+ .shortcut-table-category-header {
font-weight: normal;
- font-size: $font-size-h5;
+ font-size: $font-size-h6;
font-style: italic;
text-align: left;
}
- td:nth-child(2) {
+ .shortcut-table-description {
text-align: left;
color: $text-muted;
width: 99%;
padding: 0.38rem 1rem;
}
- td:first-child {
+ .shortcut-table-keys {
white-space: nowrap;
width: 1%;
text-align: right;
@@ -24,8 +31,18 @@
}
.shortcut-table-key {
- word-spacing: 5px;
- padding: 0.2rem 0.5rem;
- @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+ display: inline-block;
+ text-align: center;
+ 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;
}