Fix style of buttons on finalize dialogs
This commit is contained in:
apapachristou
parent
25d408c113
commit
52317c10f9
|
|
@ -796,6 +796,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
|||
const dialogRef = this.dialog.open(DmpFinalizeDialogComponent, {
|
||||
maxWidth: '500px',
|
||||
restoreFocus: false,
|
||||
autoFocus: false,
|
||||
data: {
|
||||
dialogInputModel: dialogInputModel,
|
||||
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.FINALIZE-ITEM'),
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div mat-dialog-content class="pt-2 pb-2">
|
||||
<div class="container">
|
||||
<mat-accordion [multi]="true">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
|
|
@ -51,6 +52,7 @@
|
|||
<mat-error *ngIf="getFinalizedDatasets().length === 0 && outputModel.datasetsToBeFinalized.length === 0">
|
||||
{{'DMP-FINALISE-DIALOG.VALIDATION.AT-LEAST-ONE-DATASET-FINALISED' | translate}}
|
||||
</mat-error>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="getFinalizedDatasets().length != 0">
|
||||
<div class="row pt-2 pb-2 pl-4 pr-4">
|
||||
|
|
@ -61,12 +63,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div mat-dialog-actions class="d-flex justify-content-end">
|
||||
<div mat-dialog-actions class="d-flex justify-content-end mb-1">
|
||||
<div class="col-auto">
|
||||
<button mat-raised-button [disabled]="getFinalizedDatasets().length === 0 && outputModel.datasetsToBeFinalized.length === 0" class="confirm" (click)="onSubmit()">{{ data.confirmButton }}</button>
|
||||
<button mat-raised-button cdkFocusInitial (click)="close()" class="cancel-btn">{{ data.cancelButton }}</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-raised-button cdkFocusInitial (click)="close()" class="cancel">{{ data.cancelButton }}</button>
|
||||
<button mat-raised-button [disabled]="getFinalizedDatasets().length === 0 && outputModel.datasetsToBeFinalized.length === 0" class="submit-btn" (click)="onSubmit()">{{ data.confirmButton }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,3 +73,57 @@
|
|||
font-style: italic;
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #129d99 0% 0% no-repeat padding-box;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
min-width: 84px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
color: #129d99;
|
||||
border: 1px solid #129d99;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
border: 1px solid #b5b5b5 !important;
|
||||
}
|
||||
|
||||
.submit-btn:not([disabled]):hover {
|
||||
background-color: #129d99;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.default-btn {
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
box-shadow: 0px 3px 6px #1e202029;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
font-size: 0.87rem;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -593,6 +593,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
|
|||
const dialogRef = this.dialog.open(DmpFinalizeDialogComponent, {
|
||||
maxWidth: '500px',
|
||||
restoreFocus: false,
|
||||
autoFocus: false,
|
||||
data: {
|
||||
dialogInputModel: dialogInputModel,
|
||||
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.FINALIZE-ITEM'),
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ export class QuickWizardEditorComponent extends CheckDeactivateBaseComponent imp
|
|||
const dialogRef = this.dialog.open(DmpFinalizeDialogComponent, {
|
||||
maxWidth: '500px',
|
||||
restoreFocus: false,
|
||||
autoFocus: false,
|
||||
data: {
|
||||
dialogInputModel: dialogInputModel,
|
||||
confirmButton: this.language.instant('DMP-FINALISE-DIALOG.SUBMIT'),
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<mat-icon>close</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex flex-row">
|
||||
<div class="row d-flex flex-row mb-2">
|
||||
<div class="col message pb-4 pl-3">{{ data.message }}</div>
|
||||
<div *ngIf="!data.icon" class="col-auto close-btn justify-content-end" (click)="close()">
|
||||
<mat-icon>close</mat-icon>
|
||||
|
|
@ -22,10 +22,10 @@
|
|||
<div *ngIf="!agreePrivacyPolicyNames" class="required-policy">{{'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REQUIRED' | translate}}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"></div>
|
||||
<div class="col-auto"><button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
|
||||
<!-- <div class="col"></div> -->
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button></div>
|
||||
<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete">{{ data.confirmButton }}</button></div>
|
||||
<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" color="primary">{{ data.confirmButton }}</button></div>
|
||||
<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" color="primary">{{ data.confirmButton }}</button></div>
|
||||
<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="submit-btn">{{ data.confirmButton }}</button></div>
|
||||
<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="submiit-btn">{{ data.confirmButton }}</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,15 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background-color: #2cba6c;
|
||||
color: #ffffff;
|
||||
|
|
@ -41,5 +50,23 @@
|
|||
font-size: smaller;
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
color: #129d99;
|
||||
border: 1px solid #129d99;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
border: 1px solid #b5b5b5 !important;
|
||||
}
|
||||
|
||||
.submit-btn:not([disabled]):hover {
|
||||
background-color: #129d99;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue