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

Fix style on filters dialog

This commit is contained in:
apapachristou 2020-11-19 16:16:28 +02:00
parent 4552525e1c
commit e3cfd47edb
6 changed files with 129 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.html
View File

@ -1,2 +1,2 @@
<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<app-dataset-criteria-component [isPublic]="data.isPublic" [status]="data.status" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dataset-criteria-component>
<app-dataset-criteria-component [isPublic]="data.isPublic" [status]="data.status" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)"></app-dataset-criteria-component>

103
dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
View File

@ -1,7 +1,11 @@
<div class="dmp-criteria">
<div class="filters">
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
<div class="row" style="justify-content: center;">
<div class="row justify-content-center">
<div class="col-10">
<h6 class="criteria-title">{{'CRITERIA.FILTERS'| translate}}</h6>
</div>
</div>
<div class="row justify-content-center">
<!-- Search Filter-->
<!-- <mat-form-field class="col-11 search">
<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="grantCriteriaLike"
@ -13,112 +17,133 @@
<!-- End of Search Filter -->
<!-- Status Filter-->
<div class="col-10 gray-container" *ngIf="!isPublic" >
<div class="col-10" *ngIf="!isPublic">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.STATUS'| translate}}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')">
<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('status').value">{{ 'TYPES.DATASET-STATUS.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="0" >{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item>
<mat-radio-button value="null" [checked]="!formGroup.get('status').value">{{ 'TYPES.DATASET-STATUS.ANY' | translate }}</mat-radio-button>
</mat-list-item>
<mat-list-item>
<mat-radio-button value="0">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-radio-button>
</mat-list-item>
<mat-list-item>
<mat-radio-button value="1">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-radio-button>
</mat-list-item>
</mat-radio-group>
<hr>
</div>
<!-- End of Status Filter-->
<!-- Grant Status -->
<div class="col-10 gray-container" *ngIf="isPublic">
<div class="col-10" *ngIf="isPublic">
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
<mat-radio-group [formControl]="formGroup.get('grantStatus')">
<mat-list-item><mat-radio-button checked value="null" [checked]="!formGroup.get('grantStatus').value">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="0">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item>
<mat-radio-button checked value="null" [checked]="!formGroup.get('grantStatus').value">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button>
</mat-list-item>
<mat-list-item>
<mat-radio-button value="0">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button>
</mat-list-item>
<mat-list-item>
<mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
</mat-list-item>
</mat-radio-group>
<hr>
</div>
<!-- End of Grant Status -->
<!-- Related Dataset Templates Filters -->
<div class="col-10 gray-container">
<div class="col-10">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DATASET-TEMPLATES' | translate}}</h6>
<mat-form-field>
<mat-form-field class="mb-4">
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')"
[configuration]="datasetTemplateAutoCompleteConfiguration">
<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')" [configuration]="datasetTemplateAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<hr>
</div>
<!-- End of Related Dataset Templates Filters -->
<!-- Related DMP Filters -->
<div class="col-10 gray-container">
<div class="col-10">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DMP' | translate}}</h6>
<mat-form-field>
<mat-form-field class="mb-4">
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('groupIds')"
[configuration]="dmpAutoCompleteConfiguration">
<app-multiple-auto-complete [formControl]="formGroup.get('groupIds')" [configuration]="dmpAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<hr>
</div>
<!-- End of Related DMP Filters -->
<!-- All Versions Filter-->
<div class="col-10 gray-container" *ngIf="!isPublic">
<div class="col-10" *ngIf="!isPublic">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.ALL-VERSIONS'| translate}}</h6>
<mat-slide-toggle [formControl]="formGroup.get('allVersions')"></mat-slide-toggle>
<hr>
</div>
<!-- End of All Versions Filter-->
<!-- Related Grant Filters -->
<div class="col-10 gray-container">
<div class="col-10">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-GRANT' | translate}}</h6>
<mat-form-field>
<mat-form-field class="mb-4">
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('grants')"
[configuration]="grantAutoCompleteConfiguration">
<app-multiple-auto-complete [formControl]="formGroup.get('grants')" [configuration]="grantAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<hr>
</div>
<!-- End of Related Grants Filters -->
<!-- Related Collaborators Filters -->
<div class="col-10 gray-container" *ngIf="!isPublic">
<div class="col-10" *ngIf="!isPublic">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-COLLABORATORS' | translate}}</h6>
<mat-form-field>
<mat-form-field class="mb-4">
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-COLLABORATORS' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')"
[configuration]="collaboratorsAutoCompleteConfiguration">
<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')" [configuration]="collaboratorsAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<hr>
</div>
<!-- End of Related Collaborators Filters -->
<!-- Role Filter -->
<div class="col-10 gray-container" *ngIf="isAuthenticated()">
<div class="col-10" *ngIf="isAuthenticated()">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.ROLE' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')">
<mat-list-item><mat-radio-button checked value="null" [checked]="!formGroup.get('role').value">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item>
<mat-radio-button checked value="null" [checked]="!formGroup.get('role').value">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button>
</mat-list-item>
<mat-list-item>
<mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button>
</mat-list-item>
<mat-list-item>
<mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button>
</mat-list-item>
</mat-radio-group>
<hr>
</div>
<!-- End of Role Filter -->
<!-- Related Organization Filter -->
<div class="col-10 gray-container">
<div class="col-10">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.ORGANIZATION' | translate }}</h6>
<mat-form-field>
<mat-form-field class="mb-4">
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
[configuration]="organisationAutoCompleteConfiguration">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" [configuration]="organisationAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<hr>
</div>
<!-- End of Related Organization Filter -->
<!-- Tags Filter -->
<div class="col-10 gray-container">
<div class="col-10">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.TAGS' | translate }}</h6>
<mat-form-field>
<mat-form-field class="mb-4">
<mat-label>{{'CRITERIA.DATA-SETS.SELECT-TAGS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('tags')"
[configuration]="tagsAutoCompleteConfiguration">
<app-multiple-auto-complete [formControl]="formGroup.get('tags')" [configuration]="tagsAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
</div>

48
dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
View File

@ -1,37 +1,49 @@
.search ::ng-deep.mat-form-field-infix {
margin-left: 1em;
margin-left: 1em;
}
.category-title {
color: black;
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
color: black;
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
text-transform: none;
font-size: 1rem;
font-weight: 400;
}
.import {
margin: 10px;
padding: 0px;
margin: 10px;
padding: 0px;
}
.filters {
border: 1px solid #e4e4e4;
border-radius: 5px;
// border: 1px solid #e4e4e4;
// border-radius: 5px;
}
.criteria-title {
color: black;
font-weight: 500;
text-transform: none;
font-size: 1.25rem;
margin-bottom: 1.5em;
opacity: 0.8;
}
.filters-title {
width: 93px;
// color: #089dbb;
color: #23bcba;
background-color: white;
padding: 0px 20px;
margin-top: -10px;
margin-left: 20px;
text-transform: uppercase;
width: 93px;
// color: #089dbb;
color: #23bcba;
background-color: white;
padding: 0px 20px;
margin-top: -10px;
margin-left: 20px;
text-transform: uppercase;
}
.style-icon {
color: #adadad;
color: #adadad;
}
::ng-deep .search-form .mat-form-field-wrapper {

2
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html
View File

@ -1,2 +1,2 @@
<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dmp-criteria-component>
<app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)"></app-dmp-criteria-component>

27
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
View File

@ -1,6 +1,11 @@
<div class="dmp-criteria">
<div class="filters">
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
<div class="row justify-content-center">
<div class="col-10">
<h6 class="criteria-title">{{'CRITERIA.FILTERS'| translate}}</h6>
</div>
</div>
<!-- <h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6> -->
<div class="row" style="justify-content: center;">
<!-- Search Filter-->
<!-- <mat-form-field class="col-11 search">
@ -13,7 +18,7 @@
<!-- End of Search Filter -->
<!-- Visibility Filter-->
<div *ngIf="!isPublic" class="col-10 gray-container">
<div *ngIf="!isPublic" class="col-10">
<h6 class="category-title">{{ 'TYPES.DMP-VISIBILITY.VISIBILITY' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')">
<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('status').value">{{ 'TYPES.DMP-VISIBILITY.ANY' | translate }}</mat-radio-button></mat-list-item>
@ -21,11 +26,12 @@
<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DMP-VISIBILITY.FINALIZED' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DMP-VISIBILITY.DRAFT' | translate }}</mat-radio-button></mat-list-item>
</mat-radio-group>
<hr>
</div>
<!-- End of Visibility Filter-->
<!-- Grant Status -->
<div class="col-10 gray-container" *ngIf="isPublic">
<div class="col-10" *ngIf="isPublic">
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
<mat-radio-group [formControl]="formGroup.get('grantStatus')">
<mat-list-item>
@ -38,11 +44,12 @@
<mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
</mat-list-item>
</mat-radio-group>
<hr>
</div>
<!-- End of Grant Status -->
<!-- Related Dataset Templates Filter -->
<div *ngIf="showGrant" class="col-10 gray-container">
<div *ngIf="showGrant" class="col-10">
<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-DATASET-TEMPLATES' | translate}}</h6>
<mat-form-field>
<mat-label>{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
@ -50,11 +57,12 @@
[configuration]="datasetTemplateAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<hr>
</div>
<!-- End of Related Dataset Templates Filter -->
<!-- Related Grant Filters -->
<div *ngIf="showGrant" class="col-10 gray-container">
<div *ngIf="showGrant" class="col-10">
<h6 class="category-title">{{ 'DMP-RELATED-GRANT.RELATED-GRANT' | translate}}</h6>
<mat-form-field>
<mat-label>{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}</mat-label>
@ -62,11 +70,12 @@
[configuration]="grantAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<hr>
</div>
<!-- End of Related Grants Filters -->
<!-- Collaborators Filter -->
<div *ngIf="isAuthenticated()" class="col-10 gray-container">
<div *ngIf="isAuthenticated()" class="col-10">
<h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-COLLABORATORS' | translate}}</h6>
<mat-form-field>
<mat-label>{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}</mat-label>
@ -74,22 +83,24 @@
[configuration]="collaboratorsAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<hr>
</div>
<!-- End of Collaborators Filter -->
<!-- Role Filter -->
<div *ngIf="isAuthenticated()" class="col-10 gray-container">
<div *ngIf="isAuthenticated()" class="col-10">
<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')">
<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('role').value">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item>
</mat-radio-group>
<hr>
</div>
<!-- End of Role Filter -->
<!-- Related Organization Filter -->
<div *ngIf="showGrant" class="col-10 gray-container">
<div *ngIf="showGrant" class="col-10">
<h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6>
<mat-form-field>
<mat-label>{{'DMP-RELATED-ORGANIZATION.SELECT-ORGANIZATIONS' | translate}}</mat-label>

16
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
View File

@ -8,6 +8,15 @@
padding-bottom: 0px;
}
.criteria-title {
color: black;
font-weight: 500;
text-transform: none;
font-size: 1.25rem;
margin-bottom: 1.5em;
opacity: 0.8;
}
.hidden {
display: none;
}
@ -26,11 +35,14 @@
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
text-transform: none;
font-size: 1rem;
font-weight: 400;
}
.filters {
border: 1px solid #e4e4e4;
border-radius: 5px;
// border: 1px solid #e4e4e4;
// border-radius: 5px;
}
.filters-title {