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> <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="dmp-criteria">
<div class="filters"> <div class="filters">
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6> <div class="row justify-content-center">
<div class="row" style="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--> <!-- Search Filter-->
<!-- <mat-form-field class="col-11 search"> <!-- <mat-form-field class="col-11 search">
<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="grantCriteriaLike" <input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="grantCriteriaLike"
@ -13,112 +17,133 @@
<!-- End of Search Filter --> <!-- End of Search Filter -->
<!-- Status 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> <h6 class="category-title">{{'CRITERIA.DATA-SETS.STATUS'| translate}}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')"> <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-list-item><mat-radio-button value="0" >{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-radio-button></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-radio-button value="1">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-radio-button></mat-list-item> </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> </mat-radio-group>
<hr>
</div> </div>
<!-- End of Status Filter--> <!-- End of Status Filter-->
<!-- Grant Status --> <!-- 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> <h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
<mat-radio-group [formControl]="formGroup.get('grantStatus')"> <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-list-item><mat-radio-button value="0">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button></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-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button></mat-list-item> </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> </mat-radio-group>
<hr>
</div> </div>
<!-- End of Grant Status --> <!-- End of Grant Status -->
<!-- Related Dataset Templates Filters --> <!-- 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> <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> <mat-label>{{'CRITERIA.DATA-SETS.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')" <app-multiple-auto-complete [formControl]="formGroup.get('datasetTemplates')" [configuration]="datasetTemplateAutoCompleteConfiguration">
[configuration]="datasetTemplateAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<hr>
</div> </div>
<!-- End of Related Dataset Templates Filters --> <!-- End of Related Dataset Templates Filters -->
<!-- Related DMP 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> <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> <mat-label>{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('groupIds')" <app-multiple-auto-complete [formControl]="formGroup.get('groupIds')" [configuration]="dmpAutoCompleteConfiguration">
[configuration]="dmpAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<hr>
</div> </div>
<!-- End of Related DMP Filters --> <!-- End of Related DMP Filters -->
<!-- All Versions Filter--> <!-- 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> <h6 class="category-title">{{'CRITERIA.DATA-SETS.ALL-VERSIONS'| translate}}</h6>
<mat-slide-toggle [formControl]="formGroup.get('allVersions')"></mat-slide-toggle> <mat-slide-toggle [formControl]="formGroup.get('allVersions')"></mat-slide-toggle>
<hr>
</div> </div>
<!-- End of All Versions Filter--> <!-- End of All Versions Filter-->
<!-- Related Grant Filters --> <!-- Related Grant Filters -->
<div class="col-10 gray-container"> <div class="col-10">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-GRANT' | translate}}</h6> <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> <mat-label>{{'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('grants')" <app-multiple-auto-complete [formControl]="formGroup.get('grants')" [configuration]="grantAutoCompleteConfiguration">
[configuration]="grantAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<hr>
</div> </div>
<!-- End of Related Grants Filters --> <!-- End of Related Grants Filters -->
<!-- Related Collaborators 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> <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> <mat-label>{{'CRITERIA.DATA-SETS.SELECT-COLLABORATORS' | translate }}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('collaborators')" <app-multiple-auto-complete [formControl]="formGroup.get('collaborators')" [configuration]="collaboratorsAutoCompleteConfiguration">
[configuration]="collaboratorsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<hr>
</div> </div>
<!-- End of Related Collaborators Filters --> <!-- End of Related Collaborators Filters -->
<!-- Role Filter --> <!-- 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> <h6 class="category-title">{{'CRITERIA.DATA-SETS.ROLE' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')"> <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-list-item><mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button></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-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item> </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> </mat-radio-group>
<hr>
</div> </div>
<!-- End of Role Filter --> <!-- End of Role Filter -->
<!-- Related Organization Filter --> <!-- Related Organization Filter -->
<div class="col-10 gray-container"> <div class="col-10">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.ORGANIZATION' | translate }}</h6> <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> <mat-label>{{'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" <app-multiple-auto-complete [formControl]="formGroup.get('organisations')" [configuration]="organisationAutoCompleteConfiguration">
[configuration]="organisationAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<hr>
</div> </div>
<!-- End of Related Organization Filter --> <!-- End of Related Organization Filter -->
<!-- Tags Filter --> <!-- Tags Filter -->
<div class="col-10 gray-container"> <div class="col-10">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.TAGS' | translate }}</h6> <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> <mat-label>{{'CRITERIA.DATA-SETS.SELECT-TAGS' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="formGroup.get('tags')" <app-multiple-auto-complete [formControl]="formGroup.get('tags')" [configuration]="tagsAutoCompleteConfiguration">
[configuration]="tagsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
</div> </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 { .search ::ng-deep.mat-form-field-infix {
margin-left: 1em; margin-left: 1em;
} }
.category-title { .category-title {
color: black; color: black;
// color: #089dbb; // color: #089dbb;
margin-top: 8px; margin-top: 8px;
margin-bottom: 12px; margin-bottom: 12px;
text-transform: none;
font-size: 1rem;
font-weight: 400;
} }
.import { .import {
margin: 10px; margin: 10px;
padding: 0px; padding: 0px;
} }
.filters { .filters {
border: 1px solid #e4e4e4; // border: 1px solid #e4e4e4;
border-radius: 5px; // 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 { .filters-title {
width: 93px; width: 93px;
// color: #089dbb; // color: #089dbb;
color: #23bcba; color: #23bcba;
background-color: white; background-color: white;
padding: 0px 20px; padding: 0px 20px;
margin-top: -10px; margin-top: -10px;
margin-left: 20px; margin-left: 20px;
text-transform: uppercase; text-transform: uppercase;
} }
.style-icon { .style-icon {
color: #adadad; color: #adadad;
} }
::ng-deep .search-form .mat-form-field-wrapper { ::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> <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="dmp-criteria">
<div class="filters"> <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;"> <div class="row" style="justify-content: center;">
<!-- Search Filter--> <!-- Search Filter-->
<!-- <mat-form-field class="col-11 search"> <!-- <mat-form-field class="col-11 search">
@ -13,7 +18,7 @@
<!-- End of Search Filter --> <!-- End of Search Filter -->
<!-- Visibility 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> <h6 class="category-title">{{ 'TYPES.DMP-VISIBILITY.VISIBILITY' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')"> <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> <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="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-list-item><mat-radio-button value="0">{{ 'TYPES.DMP-VISIBILITY.DRAFT' | translate }}</mat-radio-button></mat-list-item>
</mat-radio-group> </mat-radio-group>
<hr>
</div> </div>
<!-- End of Visibility Filter--> <!-- End of Visibility Filter-->
<!-- Grant Status --> <!-- 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> <h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
<mat-radio-group [formControl]="formGroup.get('grantStatus')"> <mat-radio-group [formControl]="formGroup.get('grantStatus')">
<mat-list-item> <mat-list-item>
@ -38,11 +44,12 @@
<mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button> <mat-radio-button value="1">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
</mat-list-item> </mat-list-item>
</mat-radio-group> </mat-radio-group>
<hr>
</div> </div>
<!-- End of Grant Status --> <!-- End of Grant Status -->
<!-- Related Dataset Templates Filter --> <!-- 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> <h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-DATASET-TEMPLATES' | translate}}</h6>
<mat-form-field> <mat-form-field>
<mat-label>{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}</mat-label> <mat-label>{{ 'CRITERIA.DMP.SELECT-DATASET-TEMPLATES' | translate }}</mat-label>
@ -50,11 +57,12 @@
[configuration]="datasetTemplateAutoCompleteConfiguration"> [configuration]="datasetTemplateAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<hr>
</div> </div>
<!-- End of Related Dataset Templates Filter --> <!-- End of Related Dataset Templates Filter -->
<!-- Related Grant Filters --> <!-- 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> <h6 class="category-title">{{ 'DMP-RELATED-GRANT.RELATED-GRANT' | translate}}</h6>
<mat-form-field> <mat-form-field>
<mat-label>{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}</mat-label> <mat-label>{{ 'CRITERIA.DMP.SELECT-GRANTS' | translate }}</mat-label>
@ -62,11 +70,12 @@
[configuration]="grantAutoCompleteConfiguration"> [configuration]="grantAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<hr>
</div> </div>
<!-- End of Related Grants Filters --> <!-- End of Related Grants Filters -->
<!-- Collaborators Filter --> <!-- 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> <h6 class="category-title">{{ 'CRITERIA.DMP.RELATED-COLLABORATORS' | translate}}</h6>
<mat-form-field> <mat-form-field>
<mat-label>{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}</mat-label> <mat-label>{{'CRITERIA.DMP.SELECT-COLLABORATORS' | translate}}</mat-label>
@ -74,22 +83,24 @@
[configuration]="collaboratorsAutoCompleteConfiguration"> [configuration]="collaboratorsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<hr>
</div> </div>
<!-- End of Collaborators Filter --> <!-- End of Collaborators Filter -->
<!-- Role 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> <h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')"> <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="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="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 value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item>
</mat-radio-group> </mat-radio-group>
<hr>
</div> </div>
<!-- End of Role Filter --> <!-- End of Role Filter -->
<!-- Related Organization 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> <h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6>
<mat-form-field> <mat-form-field>
<mat-label>{{'DMP-RELATED-ORGANIZATION.SELECT-ORGANIZATIONS' | translate}}</mat-label> <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; 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 { .hidden {
display: none; display: none;
} }
@ -26,11 +35,14 @@
// color: #089dbb; // color: #089dbb;
margin-top: 8px; margin-top: 8px;
margin-bottom: 12px; margin-bottom: 12px;
text-transform: none;
font-size: 1rem;
font-weight: 400;
} }
.filters { .filters {
border: 1px solid #e4e4e4; // border: 1px solid #e4e4e4;
border-radius: 5px; // border-radius: 5px;
} }
.filters-title { .filters-title {