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

Styles: Dataset Listing, Fixes: Bug on Public Dmp Filters, Arrows-down Return

This commit is contained in:
apapachristou 2019-05-14 11:51:39 +03:00
parent 2854e9bade
commit 2e83a28df8
8 changed files with 120 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/core/model/dmp/dmp-listing.ts
View File

@ -6,7 +6,7 @@ export interface DmpListingModel {
description: String;
status: DmpStatus;
project: String;
projectabbreviation: String;
projectAbbreviation: String;
profile: String;
creationTime: String;
modifiedTime: String;

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

@ -31,6 +31,7 @@
placeholder="{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}"
[configuration]="dmpAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field>
</div>
<!-- End of Related DMP Filters -->
@ -43,6 +44,7 @@
placeholder="{{'CRITERIA.DATA-SETS.SELECT-PROJECTS' | translate }}"
[configuration]="projectAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field>
</div>
<!-- End of Related Projects Filters -->

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

@ -1,7 +1,7 @@
<div class="main-content">
<div class="container-fluid">
<div class="card">
<div class="card-header card-header-blue d-flex">
<div class="card-header card-header-plain d-flex">
<div class="card-desc d-flex flex-column justify-content-center">
<h4 class="card-title">{{'DASHBOARD.DATASETS' | translate}} {{titlePrefix}}</h4>
<p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p>

54
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
View File

@ -1,20 +1,52 @@
<div class="listing-item" (click)="itemClicked()">
<div class="col">
<mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="isDraft"><span>DRAFT:</span> {{ dataset.label }}</h4>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
<p>{{ dataset.description }}</p>
<div class="info">
<div class="row">
<div class="col-12 gray-container container-header">
<mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
<p>{{ dataset.label }}</p>
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto"
(click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button> -->
</div>
</div>
<div class="row">
<div class="col-12">
<!-- <mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon> -->
<!-- <h4 *ngIf="isDraft"><span>DRAFT:</span> {{ dataset.label }}</h4>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4> -->
</div>
</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dataset.description}}</p>
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon class="gray-icon pt-2">storage</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
<mat-icon class="gray-icon pt-2">work_outline</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.project }}</h4>
<mat-icon class="gray-icon pt-2">assignment</mat-icon>
<div class="pt-1">
<div class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>
</div>
</div>
<!-- <div class="info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.project }}</p>
</div>
<div class="row" style="margin-left: 0px !important">
<div class="chip"><p>{{ dataset.profile }}</p></div>
</div>
</div>
<!-- <div class="col-auto">
<mat-icon>more_horiz</mat-icon>
<div class="chip">
<p>{{ dataset.profile }}</p>
</div>
</div> -->
</div>
</div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

70
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
View File

@ -1,4 +1,68 @@
h4 {
display: inline;
padding-left: 1em;
.gray-container {
letter-spacing: 5px;
color: #aaaaaa;
}
.container-header {
display: flex;
align-items: baseline;
margin-top: 0px;
text-transform: uppercase;
}
.container-header p {
letter-spacing: 5px;
color: #aaaaaa;
padding: 5px 30px;
margin-bottom: 0px;
}
h4 {
display: inline;
padding-left: 1em;
}
.about-item {
display: flex;
}
.about-item .length {
color: rgb(70, 135, 240);
}
.about-item .title {
margin: 2px 10px;
}
.about-item p {
margin-left: auto;
margin-bottom: 0px;
padding-top: 7px;
color: #aaaaaa;
}
::ng-deep .mat-ripple-element {
background-color: #2e74b649 !important;
}
::ng-deep .mat-radio-container {
border-radius: 1em;
background: white;
}
::ng-deep .mat-radio-button .mat-radio-outer-circle {
border: 1px solid #aaaaaa;
}
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: #2e75b6;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
color: #2e75b6;
background-color: #2e75b6;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #2e74b649;
}

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

@ -2,7 +2,7 @@
<div class="col" (click)="itemClicked()">
<div class="row">
<div class="col-12 gray-container container-header">
{{dmp.projectabbreviation}}
{{dmp.projectAbbreviation}}
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button>

3
dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html
View File

@ -13,8 +13,7 @@
<mat-list-item><mat-radio-button value="1" (change)="projectStatusChanged($event)">Inactive</mat-radio-button></mat-list-item>
</div>
<div *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished"
class="col-10 gray-container">
<div class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}</h6>
<mat-form-field>
<app-multiple-auto-complete placeholder="Select Project"

4
dmp-frontend/src/styles.scss
View File

@ -123,11 +123,15 @@ $theme: mat-light-theme($primary, $accent);
.draft-bookmark {
color: #e7e6e6;
display: inline;
position: absolute;
padding-top: 3px
}
.finalized-bookmark {
color: #92d050;
display: inline;
position: absolute;
padding-top: 3px;
}
h4 span {