From 29e1d5217aae99a66606b7dcf533c84f6d6450be Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Tue, 2 Jan 2018 13:48:01 -0800 Subject: [PATCH 1/2] feat(dialogs): extend MatDialogConfig to leverage all the dialog configurations we are going away from hardcoding widths so this is technically a breaking change, but now you will be able to pass any widths and update the dialog configuration as needed.. also long words wrap properly --- .../components/dialogs/dialogs.component.html | 3 +++ .../components/dialogs/dialogs.component.ts | 3 +++ .../alert-dialog/alert-dialog.component.scss | 11 ++--------- .../confirm-dialog/confirm-dialog.component.scss | 11 ++--------- .../prompt-dialog/prompt-dialog.component.scss | 14 ++++---------- .../core/dialogs/services/dialog.service.ts | 9 ++++----- 6 files changed, 18 insertions(+), 33 deletions(-) diff --git a/src/app/components/components/dialogs/dialogs.component.html b/src/app/components/components/dialogs/dialogs.component.html index e219c5147b..0624c47ff9 100644 --- a/src/app/components/components/dialogs/dialogs.component.html +++ b/src/app/components/components/dialogs/dialogs.component.html @@ -48,6 +48,7 @@

Example(after setup):

viewContainerRef: this._viewContainerRef, //OPTIONAL title: 'Alert', //OPTIONAL, hides if not provided closeButton: 'Close', //OPTIONAL, defaults to 'CLOSE' + width: '400px', //OPTIONAL }); } @@ -59,6 +60,7 @@

Example(after setup):

title: 'Confirm', //OPTIONAL, hides if not provided cancelButton: 'Disagree', //OPTIONAL, defaults to 'CANCEL' acceptButton: 'Agree', //OPTIONAL, defaults to 'ACCEPT' + width: '400px', //OPTIONAL }).afterClosed().subscribe((accept: boolean) => { if (accept) { // DO SOMETHING @@ -77,6 +79,7 @@

Example(after setup):

value: 'Prepopulated value', //OPTIONAL cancelButton: 'Cancel', //OPTIONAL, defaults to 'CANCEL' acceptButton: 'Ok', //OPTIONAL, defaults to 'ACCEPT' + width: '400px', //OPTIONAL }).afterClosed().subscribe((newValue: string) => { if (newValue) { // DO SOMETHING diff --git a/src/app/components/components/dialogs/dialogs.component.ts b/src/app/components/components/dialogs/dialogs.component.ts index 62a3eaeb23..46792ba663 100644 --- a/src/app/components/components/dialogs/dialogs.component.ts +++ b/src/app/components/components/dialogs/dialogs.component.ts @@ -46,6 +46,7 @@ export class DialogsDemoComponent { title: 'Alert', disableClose: true, message: 'This is how simple it is to create an alert with this wrapper service.', + width: '400px', }); } @@ -55,6 +56,7 @@ export class DialogsDemoComponent { message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?', cancelButton: 'Disagree', acceptButton: 'Agree', + width: '400px', }); } @@ -65,6 +67,7 @@ export class DialogsDemoComponent { value: 'Populated value', cancelButton: 'Cancel', acceptButton: 'Ok', + width: '400px', }); } } diff --git a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.scss b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.scss index 267af23164..b777100f60 100644 --- a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.scss +++ b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.scss @@ -1,10 +1,3 @@ -@media (min-width: 600px) { - td-dialog { - width: 400px; - } -} -@media (max-width: 599px) { - td-dialog { - width: 250px; - } +.td-dialog-message { + word-break: break-word; } diff --git a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.scss b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.scss index 2c2b0d3db5..a802259a71 100644 --- a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.scss +++ b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.scss @@ -1,10 +1,3 @@ -@media (min-width: 600px) { - td-dialog { - width: 400px; - } -} -@media (max-width: 599px) { - td-dialog { - width: 250px; - } +.td-dialog-message { + word-break: break-word; } \ No newline at end of file diff --git a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.scss b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.scss index 1723c4145f..519e53fa01 100644 --- a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.scss +++ b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.scss @@ -1,13 +1,3 @@ -@media (min-width: 600px) { - td-dialog { - width: 400px; - } -} -@media (max-width: 599px) { - td-dialog { - width: 250px; - } -} .td-dialog-input-wrapper { // layout row flex-direction: row; @@ -19,3 +9,7 @@ box-sizing: border-box; } } + +.td-dialog-message { + word-break: break-word; +} diff --git a/src/platform/core/dialogs/services/dialog.service.ts b/src/platform/core/dialogs/services/dialog.service.ts index 0edcdcb7e3..1841e3e9e3 100644 --- a/src/platform/core/dialogs/services/dialog.service.ts +++ b/src/platform/core/dialogs/services/dialog.service.ts @@ -6,11 +6,9 @@ import { TdAlertDialogComponent } from '../alert-dialog/alert-dialog.component'; import { TdConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'; import { TdPromptDialogComponent } from '../prompt-dialog/prompt-dialog.component'; -export interface IDialogConfig { +export interface IDialogConfig extends MatDialogConfig { title?: string; message: string; - viewContainerRef?: ViewContainerRef; - disableClose?: boolean; } export interface IAlertConfig extends IDialogConfig { @@ -137,8 +135,9 @@ export class TdDialogService { private _createConfig(config: MatDialogConfig): MatDialogConfig { let dialogConfig: MatDialogConfig = new MatDialogConfig(); - dialogConfig.viewContainerRef = config.viewContainerRef; - dialogConfig.disableClose = config.disableClose; + for (let key in config) { + dialogConfig[key] = config[key]; + } return dialogConfig; } From b816f408943d58b44d55fd5a9b10e7887dcb0eb8 Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Tue, 2 Jan 2018 14:33:44 -0800 Subject: [PATCH 2/2] feat(): add 400px width by default --- .../components/components/dialogs/dialogs.component.html | 6 +++--- src/app/components/components/dialogs/dialogs.component.ts | 4 +--- src/platform/core/dialogs/services/dialog.service.ts | 1 + 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/app/components/components/dialogs/dialogs.component.html b/src/app/components/components/dialogs/dialogs.component.html index 0624c47ff9..5938c8b5d5 100644 --- a/src/app/components/components/dialogs/dialogs.component.html +++ b/src/app/components/components/dialogs/dialogs.component.html @@ -48,7 +48,7 @@

Example(after setup):

viewContainerRef: this._viewContainerRef, //OPTIONAL title: 'Alert', //OPTIONAL, hides if not provided closeButton: 'Close', //OPTIONAL, defaults to 'CLOSE' - width: '400px', //OPTIONAL + width: '400px', //OPTIONAL, defaults to 400px }); } @@ -60,7 +60,7 @@

Example(after setup):

title: 'Confirm', //OPTIONAL, hides if not provided cancelButton: 'Disagree', //OPTIONAL, defaults to 'CANCEL' acceptButton: 'Agree', //OPTIONAL, defaults to 'ACCEPT' - width: '400px', //OPTIONAL + width: '500px', //OPTIONAL, defaults to 400px }).afterClosed().subscribe((accept: boolean) => { if (accept) { // DO SOMETHING @@ -79,7 +79,7 @@

Example(after setup):

value: 'Prepopulated value', //OPTIONAL cancelButton: 'Cancel', //OPTIONAL, defaults to 'CANCEL' acceptButton: 'Ok', //OPTIONAL, defaults to 'ACCEPT' - width: '400px', //OPTIONAL + width: '400px', //OPTIONAL, defaults to 400px }).afterClosed().subscribe((newValue: string) => { if (newValue) { // DO SOMETHING diff --git a/src/app/components/components/dialogs/dialogs.component.ts b/src/app/components/components/dialogs/dialogs.component.ts index 46792ba663..42e3f0bf50 100644 --- a/src/app/components/components/dialogs/dialogs.component.ts +++ b/src/app/components/components/dialogs/dialogs.component.ts @@ -46,7 +46,6 @@ export class DialogsDemoComponent { title: 'Alert', disableClose: true, message: 'This is how simple it is to create an alert with this wrapper service.', - width: '400px', }); } @@ -56,7 +55,7 @@ export class DialogsDemoComponent { message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?', cancelButton: 'Disagree', acceptButton: 'Agree', - width: '400px', + width: '500px', }); } @@ -67,7 +66,6 @@ export class DialogsDemoComponent { value: 'Populated value', cancelButton: 'Cancel', acceptButton: 'Ok', - width: '400px', }); } } diff --git a/src/platform/core/dialogs/services/dialog.service.ts b/src/platform/core/dialogs/services/dialog.service.ts index 1841e3e9e3..75cb727575 100644 --- a/src/platform/core/dialogs/services/dialog.service.ts +++ b/src/platform/core/dialogs/services/dialog.service.ts @@ -135,6 +135,7 @@ export class TdDialogService { private _createConfig(config: MatDialogConfig): MatDialogConfig { let dialogConfig: MatDialogConfig = new MatDialogConfig(); + dialogConfig.width = '400px'; for (let key in config) { dialogConfig[key] = config[key]; }