mirror of
https://github.com/datahub-project/datahub.git
synced 2025-08-29 11:35:56 +00:00
refactors confirm dialog modal as a contextual component
This commit is contained in:
parent
af15076f33
commit
b19e76f3d7
@ -1,49 +0,0 @@
|
|||||||
import Component from 'ember-modal-dialog/components/modal-dialog';
|
|
||||||
import { get } from '@ember/object';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The default value for content when component is rendered inline
|
|
||||||
* @type {string}
|
|
||||||
*/
|
|
||||||
const defaultInlineContent = '';
|
|
||||||
|
|
||||||
enum Key {
|
|
||||||
Escape = 27
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Component.extend({
|
|
||||||
containerClassNames: ['notification-confirm-modal'],
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Default value for modal content
|
|
||||||
* @type {string}
|
|
||||||
*/
|
|
||||||
content: defaultInlineContent,
|
|
||||||
|
|
||||||
init() {
|
|
||||||
this._super(...Array.from(arguments));
|
|
||||||
},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
/**
|
|
||||||
* Handles user dismissal of modal
|
|
||||||
*/
|
|
||||||
onClose() {
|
|
||||||
get(this, 'onClose')();
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* On user confirmation / affirm
|
|
||||||
*/
|
|
||||||
onConfirm() {
|
|
||||||
get(this, 'onConfirm')();
|
|
||||||
},
|
|
||||||
|
|
||||||
//TODO: META-91
|
|
||||||
onKeyUp({ key, which }: { key: any; which: any }) {
|
|
||||||
if (which === Key.Escape || key === 'Escape') {
|
|
||||||
get(this, 'onClose')();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
@ -0,0 +1,34 @@
|
|||||||
|
import Dialog from 'ember-modal-dialog/components/modal-dialog';
|
||||||
|
import { get } from '@ember/object';
|
||||||
|
import { action } from '@ember-decorators/object';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The default value for content when component is rendered inline
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
const defaultInlineContent = '';
|
||||||
|
const containerClassNames = ['notification-confirm-modal'];
|
||||||
|
|
||||||
|
export default class NotificationsDialogConfirmDialog extends Dialog.extend({
|
||||||
|
content: defaultInlineContent,
|
||||||
|
|
||||||
|
overlayClass: 'notification-overlay',
|
||||||
|
|
||||||
|
containerClassNames
|
||||||
|
}) {
|
||||||
|
/**
|
||||||
|
* Handles the onClose external action
|
||||||
|
*/
|
||||||
|
@action
|
||||||
|
onClose() {
|
||||||
|
get(this, 'onClose')();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles the onConfirm external action
|
||||||
|
*/
|
||||||
|
@action
|
||||||
|
onConfirm() {
|
||||||
|
get(this, 'onConfirm')();
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
import Component from '@ember/component';
|
||||||
|
|
||||||
|
export default class NotificationsDialogDialogContent extends Component {
|
||||||
|
tagName = 'section';
|
||||||
|
|
||||||
|
classNames = ['notification-confirm-modal__content'];
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
import Component from '@ember/component';
|
||||||
|
|
||||||
|
export default class NotificationsDialogDialogFooter extends Component {
|
||||||
|
tagName = 'footer';
|
||||||
|
|
||||||
|
classNames = ['notification-confirm-modal__footer'];
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
import Component from '@ember/component';
|
||||||
|
|
||||||
|
export default class NotificationsDialogDialogHeader extends Component {
|
||||||
|
tagName = 'header';
|
||||||
|
|
||||||
|
classNames = ['notification-confirm-modal__header'];
|
||||||
|
}
|
@ -1,7 +1,7 @@
|
|||||||
/// Defines the styles for the notification confirm modal
|
/// Defines the styles for the notification confirm modal
|
||||||
/// Includes 3 structural elements: __header, __content, __footer
|
/// Includes 3 structural elements: __header, __content, __footer
|
||||||
.notification-confirm-modal {
|
.notification-confirm-modal {
|
||||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 12px 18px 1px rgba(0, 0, 0, .2);
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 12px 18px 1px rgba(0, 0, 0, 0.2);
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -19,18 +19,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__heading-text {
|
&__heading-text {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-weight:fw(normal, 4);
|
font-weight: fw(normal, 4);
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: set-color(grey, dark);
|
color: set-color(grey, dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
border-top: 1px solid rgba(0, 0, 0, .15);
|
border-top: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
@ -40,7 +40,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-confirm-modal-overlay {
|
.notification-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -1,34 +0,0 @@
|
|||||||
{{#modal-dialog
|
|
||||||
overlayClass="notification-confirm-modal-overlay"
|
|
||||||
containerClassNames=containerClassNames
|
|
||||||
onConfirm=(action "onConfirm")
|
|
||||||
onClose=(action "onClose")
|
|
||||||
}}
|
|
||||||
<header class="notification-confirm-modal__header">
|
|
||||||
<h2 class="notification-confirm-modal__heading-text">
|
|
||||||
{{header}}
|
|
||||||
</h2>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="notification-confirm-modal__content">
|
|
||||||
{{#if hasBlock}}
|
|
||||||
{{yield}}
|
|
||||||
{{else}}
|
|
||||||
{{content}}
|
|
||||||
{{/if}}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="notification-confirm-modal__footer">
|
|
||||||
{{#unless (eq dismissButtonText false)}}
|
|
||||||
<button class="nacho-button--large nacho-button--secondary" {{action "onClose"}}>
|
|
||||||
{{dismissButtonText}}
|
|
||||||
</button>
|
|
||||||
{{/unless}}
|
|
||||||
|
|
||||||
{{#unless (eq confirmButtonText false)}}
|
|
||||||
<button class="nacho-button nacho-button--large-inverse" {{action "onConfirm"}}>
|
|
||||||
{{confirmButtonText}}
|
|
||||||
</button>
|
|
||||||
{{/unless}}
|
|
||||||
</footer>
|
|
||||||
{{/modal-dialog}}
|
|
@ -1,18 +1,15 @@
|
|||||||
{{#if service.isShowingModal}}
|
{{#if service.isShowingModal}}
|
||||||
{{#confirm-dialog
|
{{#notifications/dialog/confirm-dialog
|
||||||
header=service.modal.props.header
|
|
||||||
dismissButtonText=service.modal.props.dismissButtonText
|
dismissButtonText=service.modal.props.dismissButtonText
|
||||||
confirmButtonText=service.modal.props.confirmButtonText
|
confirmButtonText=service.modal.props.confirmButtonText
|
||||||
onConfirm=(action 'confirmModal' target=service)
|
onConfirm=(action 'confirmModal' target=service)
|
||||||
onClose=(action 'dismissModal' target=service)}}
|
onClose=(action 'dismissModal' target=service) as |dialog|}}
|
||||||
|
{{dialog.header header=service.modal.props.header}}
|
||||||
|
|
||||||
{{#if service.modal.props.isHtml}}
|
{{dialog.content content=service.modal.props.content}}
|
||||||
{{service.modal.props.content}}
|
|
||||||
{{else}}
|
|
||||||
{{service.modal.props.content}}
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{/confirm-dialog}}
|
{{dialog.footer}}
|
||||||
|
{{/notifications/dialog/confirm-dialog}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
|
||||||
|
@ -0,0 +1,21 @@
|
|||||||
|
{{#modal-dialog
|
||||||
|
overlayClass=overlayClass
|
||||||
|
containerClassNames=containerClassNames
|
||||||
|
onClose=(action "onClose")
|
||||||
|
}}
|
||||||
|
{{yield (hash
|
||||||
|
header=(component "notifications/dialog/dialog-header"
|
||||||
|
header=header
|
||||||
|
)
|
||||||
|
content=(component "notifications/dialog/dialog-content"
|
||||||
|
content=content
|
||||||
|
)
|
||||||
|
footer=(component "notifications/dialog/dialog-footer"
|
||||||
|
dismissButtonText=dismissButtonText
|
||||||
|
confirmButtonText=confirmButtonText
|
||||||
|
onDismiss=(action "onClose")
|
||||||
|
onConfirm=(action "onConfirm")
|
||||||
|
)
|
||||||
|
)}}
|
||||||
|
|
||||||
|
{{/modal-dialog}}
|
@ -0,0 +1,5 @@
|
|||||||
|
{{#if hasBlock}}
|
||||||
|
{{yield}}
|
||||||
|
{{else}}
|
||||||
|
{{content}}
|
||||||
|
{{/if}}
|
@ -0,0 +1,22 @@
|
|||||||
|
{{#if hasBlock}}
|
||||||
|
{{yield (hash
|
||||||
|
dismissButtonText=dismissButtonText
|
||||||
|
confirmButtonText=confirmButtonText
|
||||||
|
onDismiss=onDismiss
|
||||||
|
onConfirm=onConfirm
|
||||||
|
)}}
|
||||||
|
{{else}}
|
||||||
|
|
||||||
|
{{#unless (eq dismissButtonText false)}}
|
||||||
|
<button class="nacho-button--large nacho-button--secondary" {{action onDismiss}}>
|
||||||
|
{{dismissButtonText}}
|
||||||
|
</button>
|
||||||
|
{{/unless}}
|
||||||
|
|
||||||
|
{{#unless (eq confirmButtonText false)}}
|
||||||
|
<button class="nacho-button nacho-button--large-inverse" {{action onConfirm}}>
|
||||||
|
{{confirmButtonText}}
|
||||||
|
</button>
|
||||||
|
{{/unless}}
|
||||||
|
|
||||||
|
{{/if}}
|
@ -0,0 +1,7 @@
|
|||||||
|
{{#if hasBlock}}
|
||||||
|
{{yield}}
|
||||||
|
{{else}}
|
||||||
|
<h2 class="notification-confirm-modal__heading-text">
|
||||||
|
{{header}}
|
||||||
|
</h2>
|
||||||
|
{{/if}}
|
@ -3,7 +3,7 @@
|
|||||||
{{#if isShowingFieldComment}}
|
{{#if isShowingFieldComment}}
|
||||||
{{#if getComments.last.isRunning}}
|
{{#if getComments.last.isRunning}}
|
||||||
{{#modal-dialog
|
{{#modal-dialog
|
||||||
overlayClass="notification-confirm-modal-overlay"
|
overlayClass="notification-overlay"
|
||||||
containerClassNames=containerClassNames
|
containerClassNames=containerClassNames
|
||||||
onClose=(action "hideComments")
|
onClose=(action "hideComments")
|
||||||
}}
|
}}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user