From 3cc4a194a91222f2809e0047c5521581ae28bf67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 4 Nov 2016 17:19:03 +0100 Subject: [PATCH] ux(keybindings): polish help modal with keybindings, #6465 --- public/app/core/components/help/help.html | 75 +++++++-------------- public/app/core/components/help/help.ts | 35 +++++++++- public/app/core/components/search/search.ts | 9 ++- public/app/core/services/keybindingSrv.ts | 36 +++++----- public/app/core/services/util_srv.ts | 7 ++ public/sass/components/_modals.scss | 4 +- public/sass/components/_row.scss | 4 +- public/sass/components/_shortcuts.scss | 31 ++++++++- 8 files changed, 129 insertions(+), 72 deletions(-) diff --git a/public/app/core/components/help/help.html b/public/app/core/components/help/help.html index 8908bb2e088..9cdc7ff8704 100644 --- a/public/app/core/components/help/help.html +++ b/public/app/core/components/help/help.html @@ -7,64 +7,41 @@ - + -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Dashboard wide shortcuts
ESCExit fullscreen edit/view mode, close search or any editor view
FOpen dashboard search view (also contains import/playlist controls)
RRefresh (Fetches new data and rerenders panels)
left arrow keyShift time backward
right arrow keyShift time forward
CTRL+SSave dashboard
CTRL+HHide row controls
CTRL+ZZoom out
CTRL+IQuick snapshot
CTRL+OEnable/Disable shared graph crosshair
+
+ +

+ mod = + CTRL on windows, CMD key on Mac +

+ +
+ + + + + + + + + + +
{{category}}
{{shortcut.key}}{{shortcut.description}}
+
+
+ +
+
diff --git a/public/app/core/components/help/help.ts b/public/app/core/components/help/help.ts index 70a1edbc3e4..fbdd25a9f80 100644 --- a/public/app/core/components/help/help.ts +++ b/public/app/core/components/help/help.ts @@ -1,6 +1,7 @@ /// 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() { diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts index 65a250d533c..bff6d3149f2 100644 --- a/public/app/core/components/search/search.ts +++ b/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); } diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index e5c31f88887..d96b38dee19 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/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(); }); diff --git a/public/app/core/services/util_srv.ts b/public/app/core/services/util_srv.ts index d709b17fb04..c043211cefc 100644 --- a/public/app/core/services/util_srv.ts +++ b/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) { diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 67e2bc017ea..78293ef801a 100644 --- a/public/sass/components/_modals.scss +++ b/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; } } + + diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index 61fca0cef41..25d6b9eb622 100644 --- a/public/sass/components/_row.scss +++ b/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; } diff --git a/public/sass/components/_shortcuts.scss b/public/sass/components/_shortcuts.scss index ed639b6292c..0620057debc 100644 --- a/public/sass/components/_shortcuts.scss +++ b/public/sass/components/_shortcuts.scss @@ -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); }