yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-29 03:25:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactors confirm dialog modal as a contextual component

Browse Source
This commit is contained in:
Seyi Adebajo 2018-06-06 21:46:10 -07:00
parent af15076f33
commit b19e76f3d7
13 changed files with 122 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
wherehows-web/app/components/confirm-dialog.ts
View File

@ -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')();
}
}
}
});

34
wherehows-web/app/components/notifications/dialog/confirm-dialog.ts Normal file
View File

@ -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')();
}
}

7
wherehows-web/app/components/notifications/dialog/dialog-content.ts Normal file
View File

@ -0,0 +1,7 @@
import Component from '@ember/component';
export default class NotificationsDialogDialogContent extends Component {
tagName = 'section';
classNames = ['notification-confirm-modal__content'];
}

7
wherehows-web/app/components/notifications/dialog/dialog-footer.ts Normal file
View File

@ -0,0 +1,7 @@
import Component from '@ember/component';
export default class NotificationsDialogDialogFooter extends Component {
tagName = 'footer';
classNames = ['notification-confirm-modal__footer'];
}

7
wherehows-web/app/components/notifications/dialog/dialog-header.ts Normal file
View File

@ -0,0 +1,7 @@
import Component from '@ember/component';
export default class NotificationsDialogDialogHeader extends Component {
tagName = 'header';
classNames = ['notification-confirm-modal__header'];
}

10
wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss
View File

@ -1,7 +1,7 @@
/// Defines the styles for the notification confirm modal
/// Includes 3 structural elements: __header, __content, __footer
.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;
display: flex;
flex-direction: column;
@ -19,18 +19,18 @@
}
&__header {
border-bottom: 1px solid rgba(0, 0, 0, .15);
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
&__heading-text {
margin-top: 0;
font-weight:fw(normal, 4);
font-weight: fw(normal, 4);
font-size: 24px;
color: set-color(grey, dark);
}
&__footer {
border-top: 1px solid rgba(0, 0, 0, .15);
border-top: 1px solid rgba(0, 0, 0, 0.15);
display: flex;
justify-content: flex-end;
@ -40,7 +40,7 @@
}
}
.notification-confirm-modal-overlay {
.notification-overlay {
position: fixed;
top: 0;
left: 0;

34
wherehows-web/app/templates/components/confirm-dialog.hbs
View File

@ -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}}

15
wherehows-web/app/templates/components/notifications-service.hbs
View File

@ -1,18 +1,15 @@
{{#if service.isShowingModal}}
{{#confirm-dialog
header=service.modal.props.header
{{#notifications/dialog/confirm-dialog
dismissButtonText=service.modal.props.dismissButtonText
confirmButtonText=service.modal.props.confirmButtonText
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}}
{{service.modal.props.content}}
{{else}}
{{service.modal.props.content}}
{{/if}}
{{dialog.content content=service.modal.props.content}}
{{/confirm-dialog}}
{{dialog.footer}}
{{/notifications/dialog/confirm-dialog}}
{{/if}}

21
wherehows-web/app/templates/components/notifications/dialog/confirm-dialog.hbs Normal file
View File

@ -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}}

5
wherehows-web/app/templates/components/notifications/dialog/dialog-content.hbs Normal file
View File

@ -0,0 +1,5 @@
{{#if hasBlock}}
{{yield}}
{{else}}
{{content}}
{{/if}}

22
wherehows-web/app/templates/components/notifications/dialog/dialog-footer.hbs Normal file
View File

@ -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}}

7
wherehows-web/app/templates/components/notifications/dialog/dialog-header.hbs Normal file
View File

@ -0,0 +1,7 @@
{{#if hasBlock}}
{{yield}}
{{else}}
<h2 class="notification-confirm-modal__heading-text">
{{header}}
</h2>
{{/if}}

2
wherehows-web/app/templates/components/schema-comment.hbs
View File

@ -3,7 +3,7 @@
{{#if isShowingFieldComment}}
{{#if getComments.last.isRunning}}
{{#modal-dialog
overlayClass="notification-confirm-modal-overlay"
overlayClass="notification-overlay"
containerClassNames=containerClassNames
onClose=(action "hideComments")
}}