Add keyboard shortcuts to account dropdown
Change-Id: I5ce804f896522f4bf25f8a6ed70231ef27c85876
diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.js b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.js
index 903552a..23a4c55 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.js
+++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.js
@@ -90,7 +90,9 @@
return undefined;
}
- const links = [{name: 'Settings', url: '/settings/'}];
+ const links = [];
+ links.push({name: 'Settings', url: '/settings/'});
+ links.push({name: 'Keyboard Shortcuts', id: 'shortcuts'});
if (switchAccountUrl) {
const replacements = {path};
const url = this._interpolateUrl(switchAccountUrl, replacements);
@@ -107,6 +109,11 @@
];
}
+ _handleShortcutsTap(e) {
+ this.dispatchEvent(new CustomEvent('show-keyboard-shortcuts',
+ {bubbles: true, composed: true}));
+ }
+
_handleLocationChange() {
this._path =
window.location.pathname +
diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_html.js b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_html.js
index b47894e..5db7923 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_html.js
+++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_html.js
@@ -37,6 +37,7 @@
link=""
items="[[links]]"
top-content="[[topContent]]"
+ on-tap-item-shortcuts="_handleShortcutsTap"
horizontal-align="right"
>
<span hidden$="[[_hasAvatars]]" hidden="">[[_accountName(account)]]</span>
diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.html b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.html
index 6c8ed68..a366d09 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.html
+++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.html
@@ -84,12 +84,12 @@
assert.isUndefined(element._getLinks(null));
// No switch account link.
- assert.equal(element._getLinks(null, '').length, 2);
+ assert.equal(element._getLinks(null, '').length, 3);
// Unparameterized switch account link.
let links = element._getLinks('/switch-account', '');
- assert.equal(links.length, 3);
- assert.deepEqual(links[1], {
+ assert.equal(links.length, 4);
+ assert.deepEqual(links[2], {
name: 'Switch account',
url: '/switch-account',
external: true,
@@ -97,8 +97,8 @@
// Parameterized switch account link.
links = element._getLinks('/switch-account${path}', '/c/123');
- assert.equal(links.length, 3);
- assert.deepEqual(links[1], {
+ assert.equal(links.length, 4);
+ assert.deepEqual(links[2], {
name: 'Switch account',
url: '/switch-account/c/123',
external: true,
diff --git a/polygerrit-ui/app/elements/gr-app-element.js b/polygerrit-ui/app/elements/gr-app-element.js
index ecb40a5..4915eda 100644
--- a/polygerrit-ui/app/elements/gr-app-element.js
+++ b/polygerrit-ui/app/elements/gr-app-element.js
@@ -499,6 +499,10 @@
}
}
+ handleShowKeyboardShortcuts() {
+ this.$.keyboardShortcuts.open();
+ }
+
_showKeyboardShortcuts(e) {
// same shortcut should close the dialog if pressed again
// when dialog is open
diff --git a/polygerrit-ui/app/elements/gr-app-element_html.js b/polygerrit-ui/app/elements/gr-app-element_html.js
index 47139ce..75295bc 100644
--- a/polygerrit-ui/app/elements/gr-app-element_html.js
+++ b/polygerrit-ui/app/elements/gr-app-element_html.js
@@ -104,6 +104,7 @@
id="mainHeader"
search-query="{{params.query}}"
on-mobile-search="_mobileSearchToggle"
+ on-show-keyboard-shortcuts="handleShowKeyboardShortcuts"
login-url="[[_loginUrl]]"
>
</gr-main-header>
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js
index 8e7ea87..717275d 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js
@@ -292,7 +292,8 @@
const item = this.items.find(item => item.id === id);
if (id && !this.disabledIds.includes(id)) {
if (item) {
- this.dispatchEvent(new CustomEvent('tap-item', {detail: item}));
+ this.dispatchEvent(new CustomEvent('tap-item',
+ {detail: item, bubbles: true, composed: true}));
}
this.dispatchEvent(new CustomEvent('tap-item-' + id));
}
