From e4786ed5f59a7c7948aa34aa2c4fb071ca70f039 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 21 May 2024 17:10:36 +0300
Subject: [PATCH] add author shadow when mouseover on description and dmp
 overview overview

---
 .../overview/description-overview.component.html     |  9 +++------
 .../overview/description-overview.component.scss     | 11 ++++++++++-
 .../overview/description-overview.component.ts       | 10 ++++++++++
 .../app/ui/dmp/overview/dmp-overview.component.html  |  6 +++---
 .../app/ui/dmp/overview/dmp-overview.component.scss  | 12 ++++++++++--
 .../app/ui/dmp/overview/dmp-overview.component.ts    | 11 +++++++++++
 6 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/dmp-frontend/src/app/ui/description/overview/description-overview.component.html b/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
index 4673e3d5b..710dca7c6 100644
--- a/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
+++ b/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
@@ -183,10 +183,10 @@
 									<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
 								</div>
 								<div class="col-12">
-									<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors">
+									<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors pt-1" [ngClass]="{'author-focused': authorFocus && authorFocus == dmpUser.user?.id}" (mouseover)="focusOnAuthor(dmpUser.user?.id)" (mouseout)="resetAuthorFocus()">
 										<div class="col-auto d-flex flex-row pr-0">
 											<button class="account_btn mr-3 pl-0">
-												<mat-icon class="account-icon">account_circle</mat-icon>
+												<mat-icon class="account-icon" [ngClass]="{'author-icon-focused': authorFocus && authorFocus == dmpUser.user?.id}">account_circle</mat-icon>
 											</button>
 										</div>
 										<div class="col pl-0" style="min-width: 0;">
@@ -197,13 +197,10 @@
 													<span *ngIf="dmpUser.sectionId">{{ getSectionNameById(dmpUser.sectionId) }}</span>
 												</p>
 										</div>
-										<div class="col-auto" *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" >
-											<!-- <button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button> -->
-
+										<div class="col-auto" *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner">
 											<button (click)="removeUserFromDmp(dmpUser)" mat-mini-fab matTooltip="{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}" matTooltipPosition="above">
 												<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
 											</button>
-
 										</div>
 									</div>
 								</div>
diff --git a/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss b/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
index 72d87a6e5..f4ee17589 100644
--- a/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
+++ b/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
@@ -116,7 +116,7 @@
 }
 
 .account_btn {
-  background: white;
+  background: transparent;
   color: #d5d5d5;
   border: none;
   height: 2.9em;
@@ -300,3 +300,12 @@
   display: flex;
   justify-content: center;
 }
+
+.author-focused {
+  background-color: #e0e0e0;
+  border-radius: 3px;
+}
+
+.author-icon-focused {
+  color: #a8a8a8 !important;
+}
diff --git a/dmp-frontend/src/app/ui/description/overview/description-overview.component.ts b/dmp-frontend/src/app/ui/description/overview/description-overview.component.ts
index cf16a2e94..411724726 100644
--- a/dmp-frontend/src/app/ui/description/overview/description-overview.component.ts
+++ b/dmp-frontend/src/app/ui/description/overview/description-overview.component.ts
@@ -71,6 +71,8 @@ export class DescriptionOverviewComponent extends BaseComponent implements OnIni
 	canReview = false;
 	canInviteDmpUsers = false;
 
+	authorFocus: Guid;
+
 	constructor(
 		private route: ActivatedRoute,
 		private router: Router,
@@ -214,6 +216,14 @@ export class DescriptionOverviewComponent extends BaseComponent implements OnIni
 		} else return false;
 	}
 
+	focusOnAuthor(userId: Guid): void {
+		this.authorFocus = userId;
+		console.log(this.authorFocus);
+	}
+
+	resetAuthorFocus(): void {
+		this.authorFocus = null;
+	}
 
 	openShareDialog() {
 		const dialogRef = this.dialog.open(DmpInvitationDialogComponent, {
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
index 169a839f2..9fb728bce 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
@@ -244,10 +244,10 @@
 									<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
 								</div>
 								<div class="col-12">
-									<div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors">
+									<div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors pt-1" [ngClass]="{'author-focused': authorFocus && authorFocus == dmpUser.user?.id}" (mouseover)="focusOnAuthor(dmpUser.user?.id)" (mouseout)="resetAuthorFocus()">
 										<div class="col-auto d-flex flex-row pr-0">
 											<button class="account_btn mr-3 pl-0">
-												<mat-icon class="account-icon">account_circle</mat-icon>
+												<mat-icon class="account-icon" [ngClass]="{'author-icon-focused': authorFocus && authorFocus == dmpUser.user?.id}">account_circle</mat-icon>
 											</button>
 										</div>
 										<div class="col pl-0" style="min-width: 0;">
@@ -269,7 +269,7 @@
 										</div>
 									</div>
 								</div>
-								<div *ngIf="canInviteDmpUsers()" class="col-12 d-flex align-items-center justify-content-center">
+								<div *ngIf="canInviteDmpUsers()" class="col-12 d-flex align-items-center justify-content-center mt-2">
 									<button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
 										<mat-icon>group_add</mat-icon>
 										{{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
index ef4b00695..af5c994b1 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
@@ -114,7 +114,7 @@
 }
 
 .account_btn {
-	background: white;
+	background: transparent;
 	color: #d5d5d5;
 	border: none;
 	height: 2.9em;
@@ -264,7 +264,6 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	width: 100%;
 }
 
 .authors-label {
@@ -348,3 +347,12 @@
   justify-content: space-between;
   border: none;
 }
+
+.author-focused {
+  background-color: #e0e0e0;
+  border-radius: 3px;
+}
+
+.author-icon-focused {
+  color: #a8a8a8 !important;
+}
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
index 2a8c4dc24..06026b331 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
@@ -82,6 +82,8 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 	dmpStatusEnum = DmpStatus;
 	dmpUserRoleEnum = DmpUserRole;
 
+	authorFocus: Guid;
+
 	constructor(
 		private route: ActivatedRoute,
 		private router: Router,
@@ -216,6 +218,15 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 		} else return false;
 	}
 
+	focusOnAuthor(userId: Guid): void {
+		this.authorFocus = userId;
+		console.log(this.authorFocus);
+	}
+
+	resetAuthorFocus(): void {
+		this.authorFocus = null;
+	}
+
 	canEditDmp(): boolean{
 		return (this.isDraftDmp()) && (this.dmp.authorizationFlags?.some(x => x === AppPermission.EditDmp) || this.authentication.hasPermission(AppPermission.EditDmp)) && this.isPublicView == false &&  this.dmp.belongsToCurrentTenant != false;
 	}