diff --git a/wherehows-web/app/components/confirm-dialog.ts b/wherehows-web/app/components/confirm-dialog.ts deleted file mode 100644 index ca61b8a7ce..0000000000 --- a/wherehows-web/app/components/confirm-dialog.ts +++ /dev/null @@ -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')(); - } - } - } -}); diff --git a/wherehows-web/app/components/notifications/dialog/confirm-dialog.ts b/wherehows-web/app/components/notifications/dialog/confirm-dialog.ts new file mode 100644 index 0000000000..0ad9d4b22e --- /dev/null +++ b/wherehows-web/app/components/notifications/dialog/confirm-dialog.ts @@ -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')(); + } +} diff --git a/wherehows-web/app/components/notifications/dialog/dialog-content.ts b/wherehows-web/app/components/notifications/dialog/dialog-content.ts new file mode 100644 index 0000000000..7d2242b644 --- /dev/null +++ b/wherehows-web/app/components/notifications/dialog/dialog-content.ts @@ -0,0 +1,7 @@ +import Component from '@ember/component'; + +export default class NotificationsDialogDialogContent extends Component { + tagName = 'section'; + + classNames = ['notification-confirm-modal__content']; +} diff --git a/wherehows-web/app/components/notifications/dialog/dialog-footer.ts b/wherehows-web/app/components/notifications/dialog/dialog-footer.ts new file mode 100644 index 0000000000..564ff5dc38 --- /dev/null +++ b/wherehows-web/app/components/notifications/dialog/dialog-footer.ts @@ -0,0 +1,7 @@ +import Component from '@ember/component'; + +export default class NotificationsDialogDialogFooter extends Component { + tagName = 'footer'; + + classNames = ['notification-confirm-modal__footer']; +} diff --git a/wherehows-web/app/components/notifications/dialog/dialog-header.ts b/wherehows-web/app/components/notifications/dialog/dialog-header.ts new file mode 100644 index 0000000000..52bfb19bce --- /dev/null +++ b/wherehows-web/app/components/notifications/dialog/dialog-header.ts @@ -0,0 +1,7 @@ +import Component from '@ember/component'; + +export default class NotificationsDialogDialogHeader extends Component { + tagName = 'header'; + + classNames = ['notification-confirm-modal__header']; +} diff --git a/wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss b/wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss index 2c04f02ab2..1d5284093b 100644 --- a/wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss +++ b/wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss @@ -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; diff --git a/wherehows-web/app/templates/components/confirm-dialog.hbs b/wherehows-web/app/templates/components/confirm-dialog.hbs deleted file mode 100644 index 6e6fb53124..0000000000 --- a/wherehows-web/app/templates/components/confirm-dialog.hbs +++ /dev/null @@ -1,34 +0,0 @@ -{{#modal-dialog - overlayClass="notification-confirm-modal-overlay" - containerClassNames=containerClassNames - onConfirm=(action "onConfirm") - onClose=(action "onClose") -}} -
-

- {{header}} -

-
- -
- {{#if hasBlock}} - {{yield}} - {{else}} - {{content}} - {{/if}} -
- - -{{/modal-dialog}} diff --git a/wherehows-web/app/templates/components/notifications-service.hbs b/wherehows-web/app/templates/components/notifications-service.hbs index 77220e68a5..a5adbfaccf 100644 --- a/wherehows-web/app/templates/components/notifications-service.hbs +++ b/wherehows-web/app/templates/components/notifications-service.hbs @@ -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}} diff --git a/wherehows-web/app/templates/components/notifications/dialog/confirm-dialog.hbs b/wherehows-web/app/templates/components/notifications/dialog/confirm-dialog.hbs new file mode 100644 index 0000000000..f8b0ed015d --- /dev/null +++ b/wherehows-web/app/templates/components/notifications/dialog/confirm-dialog.hbs @@ -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}} \ No newline at end of file diff --git a/wherehows-web/app/templates/components/notifications/dialog/dialog-content.hbs b/wherehows-web/app/templates/components/notifications/dialog/dialog-content.hbs new file mode 100644 index 0000000000..87d1dcde6e --- /dev/null +++ b/wherehows-web/app/templates/components/notifications/dialog/dialog-content.hbs @@ -0,0 +1,5 @@ +{{#if hasBlock}} + {{yield}} +{{else}} + {{content}} +{{/if}} \ No newline at end of file diff --git a/wherehows-web/app/templates/components/notifications/dialog/dialog-footer.hbs b/wherehows-web/app/templates/components/notifications/dialog/dialog-footer.hbs new file mode 100644 index 0000000000..3298465acf --- /dev/null +++ b/wherehows-web/app/templates/components/notifications/dialog/dialog-footer.hbs @@ -0,0 +1,22 @@ +{{#if hasBlock}} + {{yield (hash + dismissButtonText=dismissButtonText + confirmButtonText=confirmButtonText + onDismiss=onDismiss + onConfirm=onConfirm + )}} +{{else}} + + {{#unless (eq dismissButtonText false)}} + + {{/unless}} + + {{#unless (eq confirmButtonText false)}} + + {{/unless}} + +{{/if}} \ No newline at end of file diff --git a/wherehows-web/app/templates/components/notifications/dialog/dialog-header.hbs b/wherehows-web/app/templates/components/notifications/dialog/dialog-header.hbs new file mode 100644 index 0000000000..64332d3f3e --- /dev/null +++ b/wherehows-web/app/templates/components/notifications/dialog/dialog-header.hbs @@ -0,0 +1,7 @@ +{{#if hasBlock}} + {{yield}} +{{else}} +

+ {{header}} +

+{{/if}} diff --git a/wherehows-web/app/templates/components/schema-comment.hbs b/wherehows-web/app/templates/components/schema-comment.hbs index 4020148d0e..84a74031a4 100644 --- a/wherehows-web/app/templates/components/schema-comment.hbs +++ b/wherehows-web/app/templates/components/schema-comment.hbs @@ -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") }}