From 2e83a28df837aa62861f7e581a0bdb071f120284 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Tue, 14 May 2019 11:51:39 +0300
Subject: [PATCH] Styles: Dataset Listing, Fixes: Bug on Public Dmp Filters,
 Arrows-down Return

---
 .../src/app/core/model/dmp/dmp-listing.ts     |  2 +-
 .../criteria/dataset-criteria.component.html  |  2 +
 .../listing/dataset-listing.component.html    |  2 +-
 .../dataset-listing-item.component.html       | 54 +++++++++++---
 .../dataset-listing-item.component.scss       | 70 ++++++++++++++++++-
 .../dmp-listing-item.component.html           |  2 +-
 .../explore-dmp-filters.component.html        |  3 +-
 dmp-frontend/src/styles.scss                  |  4 ++
 8 files changed, 120 insertions(+), 19 deletions(-)

diff --git a/dmp-frontend/src/app/core/model/dmp/dmp-listing.ts b/dmp-frontend/src/app/core/model/dmp/dmp-listing.ts
index bd4434d4c..9b032ec73 100644
--- a/dmp-frontend/src/app/core/model/dmp/dmp-listing.ts
+++ b/dmp-frontend/src/app/core/model/dmp/dmp-listing.ts
@@ -6,7 +6,7 @@ export interface DmpListingModel {
 	description: String;
 	status: DmpStatus;
 	project: String;
-	projectabbreviation: String;
+	projectAbbreviation: String;
 	profile: String;
 	creationTime: String;
 	modifiedTime: String;
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
index a129514d6..f592f3d80 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
@@ -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 -->
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
index 7bd45b073..b16d9194d 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
@@ -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>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
index fa3c4ba87..7102575c1 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
@@ -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> -->
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
index 0beb62d2f..60daee69e 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
@@ -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;
 }
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
index b90e4e486..c737bbd90 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
@@ -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>
diff --git a/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html b/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html
index c9359f353..e95113847 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html
+++ b/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html
@@ -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"
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index 3475e12b9..a65b352e5 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -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 {