Restyles: Confirmation Dialog
This commit is contained in:
parent
072f97fdb7
commit
0708a4f58d
|
@ -1,10 +1,15 @@
|
||||||
<div class="confirmation-dialog">
|
<div class="confirmation-dialog">
|
||||||
<div class="confirmation-message">
|
<div class="row d-flex flex-row">
|
||||||
{{ data.message }}
|
<div class="col-auto confirmation-message">
|
||||||
|
{{ data.message }}
|
||||||
|
</div>
|
||||||
|
<div class="col-auto close-btn" (click)="close()"><mat-icon>close</mat-icon></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col"></div>
|
<div class="col"></div>
|
||||||
<div class="col-auto"><button mat-raised-button type="button" (click)="cancel()" class="cancel">{{ data.cancelButton }}</button></div>
|
<div class="col-auto"><button mat-raised-button type="button" (click)="cancel()"
|
||||||
<div class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="confirm">{{ data.confirmButton }}</button></div>
|
class="cancel">{{ data.cancelButton }}</button></div>
|
||||||
|
<div class="col-auto"><button mat-raised-button type="button" (click)="confirm()"
|
||||||
|
class="confirm">{{ data.confirmButton }}</button></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,13 +3,18 @@
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
margin-left: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.cancel {
|
.cancel {
|
||||||
background-color: #ba2c2c;
|
background-color: #aaaaaa;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm {
|
.confirm {
|
||||||
background-color: #92d050;
|
background-color: #ba2c2c;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,10 @@ export class ConfirmationDialogComponent {
|
||||||
) {
|
) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.dialogRef.close(false);
|
||||||
|
}
|
||||||
|
|
||||||
cancel() {
|
cancel() {
|
||||||
this.dialogRef.close(false);
|
this.dialogRef.close(false);
|
||||||
}
|
}
|
||||||
|
|
|
@ -93,7 +93,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
|
||||||
maxWidth: '300px',
|
maxWidth: '300px',
|
||||||
data: {
|
data: {
|
||||||
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
|
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
|
||||||
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
|
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'),
|
||||||
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')
|
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -36,7 +36,9 @@
|
||||||
"DELETE-ITEM": "Delete this item?",
|
"DELETE-ITEM": "Delete this item?",
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
"CONFIRM": "Yes",
|
"CONFIRM": "Yes",
|
||||||
"CANCEL": "No"
|
"No": "No",
|
||||||
|
"DELETE": "Delete",
|
||||||
|
"CANCEL": "Cancel"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
|
|
Loading…
Reference in New Issue