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

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

@ -5,52 +5,54 @@
</div>
</div>
<div mat-dialog-content class="pt-2 pb-2">
<mat-accordion [multi]="true">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{ 'DMP-FINALISE-DIALOG.DMP' | translate }}
</mat-panel-title>
<mat-panel-description class="dmp-title">
{{ inputModel.dmpLabel }}
</mat-panel-description>
</mat-expansion-panel-header>
{{ inputModel.dmpDescription }}
</mat-expansion-panel>
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
{{ 'DMP-FINALISE-DIALOG.DATASETS' | translate }}
</mat-panel-title>
<mat-panel-description></mat-panel-description>
</mat-expansion-panel-header>
<div *ngIf="inputModel.datasets.length > 0">
<div *ngFor="let dataset of inputModel.datasets" class="row pl-3 datasets">
<mat-icon *ngIf="dataset.status == 0" class="col-1 draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="dataset.status != 0" class="col-1 finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="dataset.status == 0" class="col-11 ml-auto mt-1 mb-4">
<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span>
{{ dataset.label }}</h4>
<h4 *ngIf="dataset.status != 0" class="col-11 ml-auto mt-1 mb-4">{{ dataset.label }}</h4>
<div class="container">
<mat-accordion [multi]="true">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{ 'DMP-FINALISE-DIALOG.DMP' | translate }}
</mat-panel-title>
<mat-panel-description class="dmp-title">
{{ inputModel.dmpLabel }}
</mat-panel-description>
</mat-expansion-panel-header>
{{ inputModel.dmpDescription }}
</mat-expansion-panel>
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
{{ 'DMP-FINALISE-DIALOG.DATASETS' | translate }}
</mat-panel-title>
<mat-panel-description></mat-panel-description>
</mat-expansion-panel-header>
<div *ngIf="inputModel.datasets.length > 0">
<div *ngFor="let dataset of inputModel.datasets" class="row pl-3 datasets">
<mat-icon *ngIf="dataset.status == 0" class="col-1 draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="dataset.status != 0" class="col-1 finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="dataset.status == 0" class="col-11 ml-auto mt-1 mb-4">
<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span>
{{ dataset.label }}</h4>
<h4 *ngIf="dataset.status != 0" class="col-11 ml-auto mt-1 mb-4">{{ dataset.label }}</h4>
</div>
</div>
</div>
<div *ngIf="inputModel.datasets.length === 0" class="emptyList">{{ 'DMP-FINALISE-DIALOG.EMPTY' | translate }} </div>
</mat-expansion-panel>
</mat-accordion>
<div *ngIf="inputModel.datasets.length === 0" class="emptyList">{{ 'DMP-FINALISE-DIALOG.EMPTY' | translate }} </div>
</mat-expansion-panel>
</mat-accordion>
<div *ngIf="getDraftDatasets().length > 0" class="pt-4 pb-2">
<h4 class="pl-2">{{'DMP-FINALISE-DIALOG.FINALISE-TITLE' | translate}}</h4>
<mat-selection-list #datasetsDraftSelectionList [(ngModel)]="outputModel.datasetsToBeFinalized">
<div class="styleBorder" *ngFor="let dataset of getDraftDatasets()">
<mat-list-option [value]='dataset.id'>
{{ dataset.label }}
</mat-list-option>
</div>
</mat-selection-list>
<div *ngIf="getDraftDatasets().length > 0" class="pt-4 pb-2">
<h4 class="pl-2">{{'DMP-FINALISE-DIALOG.FINALISE-TITLE' | translate}}</h4>
<mat-selection-list #datasetsDraftSelectionList [(ngModel)]="outputModel.datasetsToBeFinalized">
<div class="styleBorder" *ngFor="let dataset of getDraftDatasets()">
<mat-list-option [value]='dataset.id'>
{{ dataset.label }}
</mat-list-option>
</div>
</mat-selection-list>
</div>
<mat-error *ngIf="getFinalizedDatasets().length === 0 && outputModel.datasetsToBeFinalized.length === 0">
{{'DMP-FINALISE-DIALOG.VALIDATION.AT-LEAST-ONE-DATASET-FINALISED' | translate}}
</mat-error>
</div>
<mat-error *ngIf="getFinalizedDatasets().length === 0 && outputModel.datasetsToBeFinalized.length === 0">
{{'DMP-FINALISE-DIALOG.VALIDATION.AT-LEAST-ONE-DATASET-FINALISED' | translate}}
</mat-error>
</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>

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

@ -1,75 +1,129 @@
.styleBorder {
border: 0.2em solid lightgray;
border-radius: 0.5em;
margin-bottom: 0.5em;
border: 0.2em solid lightgray;
border-radius: 0.5em;
margin-bottom: 0.5em;
}
.confirmation-dialog {
.confirmation-message {
padding-bottom: 20px;
}
.confirmation-message {
padding-bottom: 20px;
}
.close-btn {
margin-left: auto;
cursor: pointer;
}
.close-btn {
margin-left: auto;
cursor: pointer;
}
.cancel {
background-color: #aaaaaa;
color: #ffffff;
}
.cancel {
background-color: #aaaaaa;
color: #ffffff;
}
.confirm {
background-color: #ba2c2c;
color: #ffffff;
}
.confirm {
background-color: #ba2c2c;
color: #ffffff;
}
}
.dataset-card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
border-radius: 6px;
color: #333333;
background: #fff;
width: 100%;
min-height: 90%;
max-height: 90%;
margin-top: 1em;
margin-bottom: 1em;
cursor: pointer;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
border-radius: 6px;
color: #333333;
background: #fff;
width: 100%;
min-height: 90%;
max-height: 90%;
margin-top: 1em;
margin-bottom: 1em;
cursor: pointer;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}
.draft-bookmark {
color: #e7e6e6;
display: inline;
padding: 0;
color: #e7e6e6;
display: inline;
padding: 0;
}
.finalized-bookmark {
color: #08bd63;
// color: #92d050;
display: inline;
padding: 0;
color: #08bd63;
// color: #92d050;
display: inline;
padding: 0;
}
.dmp-title {
font-weight: 500;
color: black;
font-weight: 500;
color: black;
}
.close-btn {
margin-left: auto;
cursor: pointer;
margin-left: auto;
cursor: pointer;
}
.datasets span {
color: #00b29f;
color: #00b29f;
}
.emptyList {
font-style: italic;
color: rgba(0, 0, 0, 0.26);
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>

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

@ -2,44 +2,71 @@
.confirmation {
padding-bottom: 20px;
}
.privacy-policy-names {
font-weight: 700;
padding: 1em;
}
.close-btn {
margin-left: auto;
cursor: pointer;
}
.warn-text {
color: #f44336;
}
.cancel {
background-color: #aaaaaa;
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;
}
.delete {
background-color: #ba2c2c;
color: #ffffff;
}
.checkbox-privacy {
padding: 0em 1em;
}
.required-policy {
padding: 0em 1.2em 1em;
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;
}
}