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

add author shadow when mouseover on description and dmp overview overview

This commit is contained in:
Sofia Papacharalampous 2024-05-21 17:10:36 +03:00
parent b2355566e5
commit e4786ed5f5
6 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dmp-frontend/src/app/ui/description/overview/description-overview.component.html
View File

@ -183,10 +183,10 @@
<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p> <p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
</div> </div>
<div class="col-12"> <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"> <div class="col-auto d-flex flex-row pr-0">
<button class="account_btn mr-3 pl-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> </button>
</div> </div>
<div class="col pl-0" style="min-width: 0;"> <div class="col pl-0" style="min-width: 0;">
@ -197,13 +197,10 @@
<span *ngIf="dmpUser.sectionId">{{ getSectionNameById(dmpUser.sectionId) }}</span> <span *ngIf="dmpUser.sectionId">{{ getSectionNameById(dmpUser.sectionId) }}</span>
</p> </p>
</div> </div>
<div class="col-auto" *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" > <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> -->
<button (click)="removeUserFromDmp(dmpUser)" mat-mini-fab matTooltip="{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}" matTooltipPosition="above"> <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> <mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</div> </div>

11
dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
View File

@ -116,7 +116,7 @@
} }
.account_btn { .account_btn {
background: white; background: transparent;
color: #d5d5d5; color: #d5d5d5;
border: none; border: none;
height: 2.9em; height: 2.9em;
@ -300,3 +300,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.author-focused {
background-color: #e0e0e0;
border-radius: 3px;
}
.author-icon-focused {
color: #a8a8a8 !important;
}

10
dmp-frontend/src/app/ui/description/overview/description-overview.component.ts
View File

@ -71,6 +71,8 @@ export class DescriptionOverviewComponent extends BaseComponent implements OnIni
canReview = false; canReview = false;
canInviteDmpUsers = false; canInviteDmpUsers = false;
authorFocus: Guid;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
@ -214,6 +216,14 @@ export class DescriptionOverviewComponent extends BaseComponent implements OnIni
} else return false; } else return false;
} }
focusOnAuthor(userId: Guid): void {
this.authorFocus = userId;
console.log(this.authorFocus);
}
resetAuthorFocus(): void {
this.authorFocus = null;
}
openShareDialog() { openShareDialog() {
const dialogRef = this.dialog.open(DmpInvitationDialogComponent, { const dialogRef = this.dialog.open(DmpInvitationDialogComponent, {

6
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
View File

@ -244,10 +244,10 @@
<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p> <p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
</div> </div>
<div class="col-12"> <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"> <div class="col-auto d-flex flex-row pr-0">
<button class="account_btn mr-3 pl-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> </button>
</div> </div>
<div class="col pl-0" style="min-width: 0;"> <div class="col pl-0" style="min-width: 0;">
@ -269,7 +269,7 @@
</div> </div>
</div> </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)"> <button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
{{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}} {{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}

12
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
View File

@ -114,7 +114,7 @@
} }
.account_btn { .account_btn {
background: white; background: transparent;
color: #d5d5d5; color: #d5d5d5;
border: none; border: none;
height: 2.9em; height: 2.9em;
@ -264,7 +264,6 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
width: 100%;
} }
.authors-label { .authors-label {
@ -348,3 +347,12 @@
justify-content: space-between; justify-content: space-between;
border: none; border: none;
} }
.author-focused {
background-color: #e0e0e0;
border-radius: 3px;
}
.author-icon-focused {
color: #a8a8a8 !important;
}

11
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
View File

@ -82,6 +82,8 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
dmpStatusEnum = DmpStatus; dmpStatusEnum = DmpStatus;
dmpUserRoleEnum = DmpUserRole; dmpUserRoleEnum = DmpUserRole;
authorFocus: Guid;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
@ -216,6 +218,15 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
} else return false; } else return false;
} }
focusOnAuthor(userId: Guid): void {
this.authorFocus = userId;
console.log(this.authorFocus);
}
resetAuthorFocus(): void {
this.authorFocus = null;
}
canEditDmp(): boolean{ 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; return (this.isDraftDmp()) && (this.dmp.authorizationFlags?.some(x => x === AppPermission.EditDmp) || this.authentication.hasPermission(AppPermission.EditDmp)) && this.isPublicView == false && this.dmp.belongsToCurrentTenant != false;
} }