MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Fix style of buttons on finalize dialogs

This commit is contained in:
apapachristou 2020-11-18 10:58:26 +02:00
parent 25d408c113
commit 52317c10f9
7 changed files with 192 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
View File

@ -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'),

8
dmp-frontend/src/app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component.html
View File

@ -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>
@ -52,6 +53,7 @@
{{'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">
{{ 'DMP-FINALISE-DIALOG.IMPACT' | translate }}
@ -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>

54
dmp-frontend/src/app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component.scss
View File

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

1
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
View File

@ -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'),

1
dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.ts
View File

@ -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'),

10
dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html
View File

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

27
dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss
View File

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