mirror of
https://github.com/status-im/consul.git
synced 2025-01-24 12:40:17 +00:00
3f131dcf34
- Moves where they appear up to the <App /> component.
- Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers.
- Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
38 lines
946 B
JavaScript
38 lines
946 B
JavaScript
import Modifier from 'ember-modifier';
|
|
import { inject as service } from '@ember/service';
|
|
|
|
export default class NotificationModifier extends Modifier {
|
|
@service('flashMessages') notify;
|
|
|
|
didInstall() {
|
|
this.element.setAttribute('role', 'alert');
|
|
this.element.dataset['notification'] = null;
|
|
const options = {
|
|
timeout: 6000,
|
|
extendedTimeout: 300,
|
|
...this.args.named,
|
|
};
|
|
options.dom = this.element.outerHTML;
|
|
this.element.remove();
|
|
this.notify.clearMessages();
|
|
if (typeof options.after === 'function') {
|
|
Promise.resolve().then(_ => options.after())
|
|
.catch(e => {
|
|
if (e.name !== 'TransitionAborted') {
|
|
throw e;
|
|
}
|
|
})
|
|
.then(res => {
|
|
this.notify.add(options);
|
|
});
|
|
} else {
|
|
this.notify.add(options);
|
|
}
|
|
}
|
|
willDestroy() {
|
|
if(this.args.named.sticky) {
|
|
this.notify.clearMessages();
|
|
}
|
|
}
|
|
}
|