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

styling changes 

*annotations
This commit is contained in:
Sofia Papacharalampous 2024-03-28 17:00:58 +02:00
parent 6d96e56ec8
commit 9af7cd64f1
10 changed files with 130 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
View File

@ -10,30 +10,29 @@
<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col-12"> --> <!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col-12"> -->
<div class="col-12"> <div class="col-12">
<form class="row p-2 mt-2 mb-3 ml-0 pr-3 mr-0 new-thread" [formGroup]="threadFormGroup"> <form class="row p-2 mt-2 mb-3 ml-0 pr-3 mr-0 new-thread" [formGroup]="threadFormGroup">
<!-- <mat-form-field class="col-6 msg-input"> <div class="col-12 col-md mb-2">
<textarea matInput matTextareaAutosize matAutosizeMinRows="1" name="thread-text" formControlName="text" placeholder="{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}" required></textarea> <mat-form-field appearance="outline" class="w-100">
<mat-error *ngIf="threadFormGroup.get('text').hasError('backendError')">{{threadFormGroup.get('text').getError('backendError')?.message}}</mat-error> <mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
<mat-error *ngIf="threadFormGroup.get('text').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error> <input matInput formControlName="text" required>
</mat-form-field> --> <mat-icon matSuffix class="material-symbols-outlined">
add_reaction
</mat-icon>
<mat-error *ngIf="threadFormGroup.get('text').hasError('backendError')">{{threadFormGroup.get('text').getError('backendError')?.message}}</mat-error>
<mat-error *ngIf="threadFormGroup.get('text').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<mat-form-field appearance="outline" class="col"> <div class="col-12 col-md-auto pl-md-0 pr-md-0">
<mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label> <mat-form-field class="w-100 protection-input">
<input matInput formControlName="text" required> <mat-label>{{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}}</mat-label>
<mat-icon matSuffix class="material-symbols-outlined"> <mat-select name="thread-protectionType" formControlName="protectionType" required>
add_reaction <mat-option *ngFor="let enumValue of annotationProtectionTypeEnumValues" [value]="enumValue">{{enumUtils.toAnnotationProtectionTypeString(enumValue)}}</mat-option>
</mat-icon> </mat-select>
<mat-error *ngIf="threadFormGroup.get('text').hasError('backendError')">{{threadFormGroup.get('text').getError('backendError')?.message}}</mat-error> <mat-error *ngIf="threadFormGroup.get('protectionType').hasError('backendError')">{{threadFormGroup.get('protectionType').getError('backendError')?.message}}</mat-error>
<mat-error *ngIf="threadFormGroup.get('text').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="threadFormGroup.get('protectionType').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
<mat-form-field class="col-auto pl-0 pr-0 protection-input">
<mat-label>{{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}}</mat-label>
<mat-select name="thread-protectionType" formControlName="protectionType" required>
<mat-option *ngFor="let enumValue of annotationProtectionTypeEnumValues" [value]="enumValue">{{enumUtils.toAnnotationProtectionTypeString(enumValue)}}</mat-option>
</mat-select>
<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('backendError')">{{threadFormGroup.get('protectionType').getError('backendError')?.message}}</mat-error>
<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="col-12 send-msg mt-1"> <div class="col-12 send-msg mt-1">
<div class="row"> <div class="row">
<div class="col-auto pr-1"> <div class="col-auto pr-1">
@ -51,38 +50,63 @@
<ng-container *ngFor="let thread of threads"> <ng-container *ngFor="let thread of threads">
<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}"> <div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
<div class="col-auto ml-auto"> <div class="col-auto ml-auto">
<i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i>{{getAnnotationProtectionType(thread)}} <div class="d-flex align-items-center">
<img src="/assets/images/annotations/eye-hide.png">
<div class="ml-1 mt-1">
{{getAnnotationProtectionType(thread)}}
</div>
</div>
</div> </div>
</div> </div>
<div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}"> <div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}">
<div class="col-auto ml-auto"> <div class="col-auto ml-auto">
<i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i>{{getAnnotationProtectionType(thread)}} <div class="d-flex aling-items center">
<img src="/assets/images/annotations/globe.png" alt="globe">
<!-- <i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i> -->
<span class="ml-1">
{{getAnnotationProtectionType(thread)}}
</span>
</div>
</div> </div>
</div> </div>
<div class="row thread mb-2"> <div class="row pt-1 pb-1 mt-1 comment-wrapper">
<!-- Parent Thread --> <!-- Parent Thread -->
<div class="col-12"> <div class="col-12">
<div class="row parent-thread m-0 h-100"> <div class="row m-0 h-100">
<div class="col-auto pr-0 pl-0"> <div class="col pt-1">
<div class="side-color"></div> <div class="row">
</div>
<div class="col">
<div class="row reply-content">
<div class="col-12"> <div class="col-12">
<div class="row h-100"> <div class="row h-100">
<div class="col-auto"> <div class="col-auto p-0">
<img class="profile-picture" src="/assets/images/user-profile-2.png" alt="profile-picture"> <img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
</div> </div>
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<span class="col user">{{getParentAnnotation(thread).author.name}}</span> <span class="col user">{{getParentAnnotation(thread).author.name}}</span>
<div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | date: "d MMMM, y 'at' h:mm a"}}</div> <div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | date: "d MMMM, y 'at' h:mm a"}}</div>
<!-- <em class="col user">{{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{getParentAnnotation(thread).author.name}}</em> -->
<!-- <div class="col annotation-time">{{getParentAnnotation(thread).timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> -->
</div> </div>
<div class="row pt-1 pb-1"> <div class="row pt-1">
<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div> <div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
</div> </div>
<div class="row"> <!--pb-2-->
<div class="col-12">
<button mat-button (click)="enableReply(thread)" class="action-button" [ngClass]="this.replyEnabledPerThread[thread] ? 'active-action' : ''" [disabled]="this.replyEnabledPerThread[thread]">{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</button>
</div>
</div>
<div class="row">
<div class="col-12">
<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
<button mat-button (click)="showReplies(thread)">
<img src="/assets/images/annotations/reply.png" alt="reply"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}
</button>
</ng-container>
<ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]">
<button mat-button (click)="showReplies(thread)">
<img src="/assets/images/annotations/reply.png" alt="reply"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}}
</button>
</ng-container>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -92,32 +116,29 @@
</div> </div>
<!-- Previous Replies --> <!-- Previous Replies -->
<div class="col-12"> <ng-container *ngIf="this.showRepliesPerThread[thread]">
<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="row replies"> <div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12">
<div class="col-auto pr-0"> <div class="row m-0 h-100">
<div class="col reply child"></div> <div class="col-auto pr-0 pl-0">
<div class="col reply child dummy-for-next-child" *ngIf="i != annotationsPerThread[thread].length - 1"></div> <div class="side-color"></div>
</div> </div>
<div class="col pl-0 pt-1"> <div class="col pt-1">
<div class="parent row m-0"> <div class="row">
<div class="col-auto pl-0 pr-0"> <div class="col-12">
<div class="side-soft-color"></div> <div class="row h-100">
</div> <div class="col-auto p-0">
<div class="col reply-content"> <img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
<div class="row h-100">
<div class="col-auto">
<img class="profile-picture" src="/assets/images/user-profile-2.png" alt="profile-picture">
</div>
<div class="col">
<div class="row">
<div class="col">
<span class="user">{{annotation.author.name}}</span>
</div>
<div class="col-auto annotation-time">{{annotation.timeStamp | date:"d MMMM, y 'at' h:mm a"}}</div>
<!-- <div class="col annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> -->
</div> </div>
<div class="row pt-1 pb-1"> <div class="col">
<div class="col-md-12 annotation-full-text">{{annotation.payload}}</div> <div class="row">
<span class="col user">{{annotation.author.name}}</span>
<div class="col-auto annotation-time">{{annotation.timeStamp | date:"d MMMM, y 'at' h:mm a"}}</div>
<!-- <div class="col annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> -->
</div>
<div class="row pt-1 pb-1">
<div class="col-12 annotation-full-text">{{annotation.payload}}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -125,32 +146,28 @@
</div> </div>
</div> </div>
</div> </div>
</div> </ng-container>
</div>
<div class="row mb-2">
<!-- Type reply in thread --> <!-- Type reply in thread -->
<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col-12"> --> <ng-container *ngIf="this.replyEnabledPerThread[thread]">
<div class="col-12 mt-2"> <div class="col-12 mt-2">
<div class="row new-reply mr-0"> <div class="row new-reply mr-0">
<mat-form-field appearance="outline" class="col pl-0">
<mat-form-field appearance="outline" class="col"> <mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label> <input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required> <mat-icon matSuffix class="material-symbols-outlined">
<mat-icon matSuffix class="material-symbols-outlined"> add_reaction
add_reaction </mat-icon>
</mat-icon> </mat-form-field>
</mat-form-field> <div class="col-auto p-0 send-msg">
<!-- <button class="form-field-margin" mat-icon-button color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
<mat-form-field class="col pt-2 pb-2 pr-0"> <img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
<textarea matInput matTextareaAutosize matAutosizeMinRows="1" [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" placeholder="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}"></textarea> </button>
<mat-error *ngIf="this.threadReplyTextsFG[thread.toString()]?.get('replyText')?.hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error> </div>
</mat-form-field> -->
<div class="col-auto send-msg">
<button class="form-field-margin" mat-icon-button type="button" color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
<i class="fa fa-paper-plane"></i>
</button>
</div> </div>
</div> </div>
</div> </ng-container>
</div> </div>
</ng-container> </ng-container>
</div> </div>

20
dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
View File

@ -76,12 +76,26 @@ $mat-card-header-size: 40px !default;
flex-shrink: 0; flex-shrink: 0;
} }
.thread { .comment-wrapper {
padding: 1em 0 0 0;
background-color: #F5F5F5; background-color: #F5F5F5;
margin: 1em 0 0 0;
} }
.user { .user {
font-weight: bold; font-weight: bold;
font-size: 16px;
}
.paper-plane {
height: 21px;
width: 20.5px;
}
.action-button {
font-weight: 400;
color: #8C8C8C;
&.active-action {
font-weight: 500;
color: #129D99;
}
} }

11
dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
View File

@ -35,6 +35,8 @@ export class AnnotationDialogComponent extends BaseComponent {
public comments = new Array<Annotation>(); public comments = new Array<Annotation>();
public threads = new Set<Guid>(); public threads = new Set<Guid>();
public annotationsPerThread = {}; public annotationsPerThread = {};
public showRepliesPerThread = {};
public replyEnabledPerThread = {};
public parentAnnotationsPerThread = {}; public parentAnnotationsPerThread = {};
threadReplyTextsFG: Array<UntypedFormGroup>; threadReplyTextsFG: Array<UntypedFormGroup>;
threadFormGroup: UntypedFormGroup; threadFormGroup: UntypedFormGroup;
@ -213,7 +215,6 @@ export class AnnotationDialogComponent extends BaseComponent {
return this.enumUtils.toAnnotationProtectionTypeString(this.parentAnnotationsPerThread[thread.toString()].protectionType); return this.enumUtils.toAnnotationProtectionTypeString(this.parentAnnotationsPerThread[thread.toString()].protectionType);
} }
cancel() { cancel() {
this.dialogRef.close(this.changesMade); this.dialogRef.close(this.changesMade);
} }
@ -226,4 +227,12 @@ export class AnnotationDialogComponent extends BaseComponent {
this.router.navigate(['/plans/new']); this.router.navigate(['/plans/new']);
this.close(); this.close();
} }
showReplies(threadId: string): void {
this.showRepliesPerThread[threadId] = true;
}
enableReply(threadId: string): void {
this.replyEnabledPerThread[threadId] = true;
}
} }

1
dmp-frontend/src/assets/i18n/en.json
View File

@ -257,6 +257,7 @@
"SEND": "Send", "SEND": "Send",
"CANCEL": "Cancel", "CANCEL": "Cancel",
"REPLY": "Reply", "REPLY": "Reply",
"REPLIES": "Replies",
"PROTECTION": { "PROTECTION": {
"TITLE": "Visibility" "TITLE": "Visibility"
} }

BIN
dmp-frontend/src/assets/images/annotations/add_reaction.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 730 B

BIN
dmp-frontend/src/assets/images/annotations/eye-hide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 605 B

BIN
dmp-frontend/src/assets/images/annotations/globe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 592 B

BIN
dmp-frontend/src/assets/images/annotations/paper-plane.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 515 B

BIN
dmp-frontend/src/assets/images/annotations/reply.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 B

0
dmp-frontend/src/assets/images/user-profile-2.png → dmp-frontend/src/assets/images/annotations/user-profile-2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 214 KiB

After

Width:  |  Height:  |  Size: 214 KiB