Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui: New Confirmation Dialogs #7007

Merged
merged 7 commits into from
Jan 22, 2020
Merged

ui: New Confirmation Dialogs #7007

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
42cdafb
ui: Change action-group to use new popup-menu component in intentions
Dec 26, 2019
6c2ec6c
ui: Slight amends to aria-menu to prevent scrolling
Dec 26, 2019
6286a7a
ui: Begin to use aria-menu/popover-menu for other elements
Jan 7, 2020
a7abb16
Change lint error to warning
Jan 7, 2020
719a2a9
Fix bad rebase
Jan 15, 2020
538d113
Use a simpler, hackier method to fix up zIndexing
Jan 15, 2020
82ce48d
ui: Implement new confirmation dialogs in other list views (#7080)
johncowen Jan 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions ui-v2/app/components/aria-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export default Component.extend({
guid: '',
expanded: false,
orientation: 'vertical',
keyboardAccess: true,
init: function() {
this._super(...arguments);
set(this, 'guid', this.dom.guid(this));
Expand All @@ -59,6 +60,9 @@ export default Component.extend({
this._listeners.remove();
},
actions: {
keypressClick: function(e) {
e.target.dispatchEvent(new MouseEvent('click'));
},
keypress: function(e) {
// If the event is from the trigger and its not an opening/closing
// key then don't do anything
Expand All @@ -83,6 +87,8 @@ export default Component.extend({
if (typeof keys[this.orientation][e.keyCode] === 'undefined') {
return;
}
// prevent any scroll, or default actions
e.preventDefault();
const $focused = this.dom.element(`${MENU_ITEMS}:focus`, this.$menu);
let i;
if ($focused) {
Expand All @@ -95,11 +101,12 @@ export default Component.extend({
},
// TODO: The argument here needs to change to an event
// see toggle-button.change
change: function(open) {
change: function(e) {
const open = e.target.checked;
if (open) {
this.actions.open.apply(this, []);
this.actions.open.apply(this, [e]);
} else {
this.actions.close.apply(this, []);
this.actions.close.apply(this, [e]);
}
},
close: function(e) {
Expand Down Expand Up @@ -127,6 +134,9 @@ export default Component.extend({
this.$trigger.dispatchEvent(new MouseEvent('click'));
return;
}
if (!this.keyboardAccess) {
return;
}
this.actions.keypress.apply(this, [e]);
},
});
Expand Down
24 changes: 24 additions & 0 deletions ui-v2/app/components/popover-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,30 @@
/*eslint ember/closure-actions: "warn"*/
import Component from '@ember/component';
import { inject as service } from '@ember/service';
import Slotted from 'block-slots';

export default Component.extend(Slotted, {
tagName: '',
dom: service('dom'),
expanded: false,
keyboardAccess: true,
onchange: function() {},
init: function() {
this._super(...arguments);
this.guid = this.dom.guid(this);
},
actions: {
change: function(e) {
if (!e.target.checked) {
this.dom.element(`#popover-menu-${this.guid}`).checked = false;
}
this.onchange(e);
},
// Temporary send here so we can send route actions
// easily. It kind of makes sense that you'll want to perform
// route actions from a popup menu for the moment
send: function() {
this.sendAction(...arguments);
},
},
});
Loading