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

annotation dialog styling changes

This commit is contained in:
Sofia Papacharalampous 2024-07-08 15:18:35 +03:00
parent 1eaa9c3156
commit af7d26b62a
14 changed files with 143 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,11 @@
<!-- <div class="mt-3 pl-3 pr-3 pb-2 pt-1"> --> <div class="dialog-container">
<div style="padding: 0 1.5rem;"> <div class="row mt-2 justify-content-between align-items-center">
<div class="row mt-1 justify-content-between align-items-center">
<div class="col-auto"> <div class="col-auto">
<h3 class="mt-2" style="font-size: 18px; font-weight: 400;">{{'ANNOTATION-DIALOG.TITLE' | translate}}</h3> <h3 class="mt-2 title">{{'ANNOTATION-DIALOG.TITLE' | translate}}</h3>
</div> </div>
<div *ngIf="threads?.size > 0" class="col-auto pl-0"> <div *ngIf="threads?.size > 0" class="col-auto pl-0">
<button class="comments-count" mat-min-fab extended disabled> <button class="comments-count" mat-min-fab extended disabled>
<span>{{ annotationsCount }}ew43344</span> <span>{{ annotationsCount }}</span>
</button> </button>
</div> </div>
<div class="col-auto pr-0 ml-auto dense-4"> <div class="col-auto pr-0 ml-auto dense-4">
@ -55,7 +54,7 @@
</form> </form>
</div> </div>
<div class="col-12"> <div class="col-12">
<ng-container *ngFor="let thread of threads"> <ng-container *ngFor="let thread of threads; first as isFirst">
<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private"> <div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private">
<div class="col-auto"> <div class="col-auto">
<div class="d-flex align-items-center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}"> <div class="d-flex align-items-center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
@ -66,45 +65,60 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors">
<div class="col-auto ml-auto">
<div class="d-flex aling-items center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}">
<mat-icon>public</mat-icon>
<span class="ml-1 mt-1">
{{getAnnotationProtectionType(thread)}}
</span>
</div>
</div>
</div> -->
<div class="row mt-2 mb-3"> <div class="row mt-2 mb-3">
<!-- Parent Thread --> <!-- Parent Thread -->
<div class="col-12"> <div class="col-12">
<div class="container"> <div class="container">
<div class="row comment-wrapper pt-2 pb-2 h-100"> <div class="row comment-wrapper pt-2 pb-2 h-100" [ngClass]="{'focus-thread': isFirst && changesMade}">
<div class="col-12 pt-1"> <div class="col-12 pt-1">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="row h-100"> <div class="row h-100">
<div class="col-auto pr-0 account-icon-wrapper"> <div class="col-12">
<mat-icon class="account-icon">account_circle</mat-icon>
</div>
<div class="col">
<div class="row pt-1 pb-2"> <div class="row pt-1 pb-2">
<div class="col-auto pr-0 account-icon-wrapper"><mat-icon class="account-icon">account_circle</mat-icon></div>
<div class="col"> <div class="col">
<div class="row h-100"> <div class="row mt-2 align-items-center">
<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 | dateTimeFormatter: "d MMMM, y 'at' h:mm a"}}</div> <div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | dateTimeFormatter: "d MMMM, y 'at' h:mm a"}}</div>
<div class="col-auto pl-0 dense-10">
<button mat-icon-button [matMenuTriggerFor]="annotationStatuses" matTooltip="{{ 'ANNOTATION-DIALOG.ANNOTATION-STATUS.ACTIONS.EDIT' | translate }}">
<mat-icon *ngIf="getSelectedStatusIcon(getParentAnnotation(thread).id); else noStatus">{{getSelectedStatusIcon(getParentAnnotation(thread).id)}}</mat-icon>
<ng-template #noStatus> <mat-icon>edit_note</mat-icon></ng-template>
</button>
<mat-menu class="statuses-menu" #annotationStatuses>
<button *ngFor="let status of listingStatuses" mat-menu-item
class="w-auto"
[matTooltip]="status?.label"
(click)="setAnnotationStatus(annotationStatusFormGroup?.get('annotationsStatusArray'), getParentAnnotation(thread).id, status?.id); persistAnnotationStatus(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id)"
>
<mat-icon>{{getStatusIcon(status)}}</mat-icon>
</button>
</mat-menu>
</div>
</div>
<div class="row mt-3">
<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div> <div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
<div class="col-12 align-self-end"> <div class="col-12 align-self-end">
<div class="row"> <div class="row mt-1">
<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>
<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>
</div> </div>
<div class="row">
<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
<button mat-button class="action-button mt-3" (click)="showReplies(thread)">
<img src="/assets/images/annotations/reply.png" alt="reply"> <span class="mt-1 reply-btn"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} </span>
</button>
</ng-container>
<ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]">
<button mat-button class="action-button mt-3" (click)="showReplies(thread)">
<img src="/assets/images/annotations/reply.png" alt="reply"> <span class="mt-1 reply-btn"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}} </span>
</button>
</ng-container>
</div>
</div> </div>
</div> </div>
<mat-divider [vertical]="true"></mat-divider> <!-- <mat-divider [vertical]="true"></mat-divider>
<div class="col-auto mt-2 mr-1"> <div class="col-auto mt-2 mr-1">
<div class="row flex-column align-items-center pr-1 pl-1"> <div class="row flex-column align-items-center pr-1 pl-1">
<div *ngFor="let status of listingStatuses" class="col-12"> <div *ngFor="let status of listingStatuses" class="col-12">
@ -116,28 +130,12 @@
<mat-icon>{{getStatusIcon(status)}}</mat-icon> <mat-icon>{{getStatusIcon(status)}}</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</div> -->
</div> </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>
<!-- Previous Replies --> <!-- Previous Replies -->
<div *ngIf="this.showRepliesPerThread[thread]" class="row"> <div *ngIf="this.showRepliesPerThread[thread]" class="row pt-1 thread-replies">
<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12"> <div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12">
<div class="row m-0 mt-2 h-100"> <div class="row m-0 mt-2 h-100">
<div class="col-auto pr-0 pl-0"> <div class="col-auto pr-0 pl-0">
@ -151,12 +149,12 @@
<mat-icon class="account-icon">account_circle</mat-icon> <mat-icon class="account-icon">account_circle</mat-icon>
</div> </div>
<div class="col"> <div class="col">
<div class="row"> <div class="row mt-2">
<span class="col user">{{annotation.author.name}}</span> <span class="col user">{{annotation.author.name}}</span>
<div class="col-auto annotation-time">{{annotation.timeStamp | dateTimeFormatter:"d MMMM, y 'at' h:mm a"}}</div> <div class="col-auto annotation-time">{{annotation.timeStamp | dateTimeFormatter:"d MMMM, y 'at' h:mm a"}}</div>
</div> </div>
<div class="row pt-1 pb-1"> <div class="row mt-3 pt-1 pb-1">
<div class="col-12 annotation-full-text">{{annotation.payload}}</div> <div class="col-12 annotation-full-text">{{annotation.payload}}</div>
</div> </div>
</div> </div>

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

@ -4,6 +4,15 @@ $mat-card-header-size: 40px !default;
border-radius: 8px; border-radius: 8px;
} }
.dialog-container {
padding: 0 1.5rem;
.title {
font-size: 18px;
font-weight: 400;
}
}
.logo { .logo {
width: 8.44rem; width: 8.44rem;
} }
@ -21,6 +30,10 @@ $mat-card-header-size: 40px !default;
border-radius: 50%; border-radius: 50%;
} }
.reply-btn {
color: rgba(0, 0, 0, 0.6);
}
.content { .content {
margin: 2.17rem 2.304rem 1.1875rem 3.065rem; margin: 2.17rem 2.304rem 1.1875rem 3.065rem;
} }
@ -83,8 +96,30 @@ $mat-card-header-size: 40px !default;
.comment-wrapper { .comment-wrapper {
border-radius: 4px; border-radius: 4px;
border: .1rem solid #cecece54; border: .1rem solid #cecece54;
&.focus-thread {
animation-name: threadFocus;
animation-duration: 5s;
}
.thread-replies {
border-top: 1px solid #cecece54;
}
} }
@keyframes threadFocus {
0% {
background-color: #fff;
}
50% {
background-color: #F5F5F5;
}
100% {
background-color: #fff;
}
}
.user { .user {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
@ -97,11 +132,12 @@ $mat-card-header-size: 40px !default;
.action-button { .action-button {
font-weight: 400; font-weight: 400;
color: #8C8C8C; border-radius: 20px;
color: var(--primary-color);
font-weight: 500;
&.active-action { &.active-action {
font-weight: 500; display: none;
color: #129D99;
} }
} }
@ -109,3 +145,6 @@ $mat-card-header-size: 40px !default;
background-color: #18488f3d; background-color: #18488f3d;
} }
::ng-deep .statuses-menu.mat-mdc-menu-panel {
min-width: initial !important;
}

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

@ -204,6 +204,16 @@ export class AnnotationDialogComponent extends BaseComponent {
return !isNullOrUndefined(text) && text.length !== 0 && text !== ''; return !isNullOrUndefined(text) && text.length !== 0 && text !== '';
} }
getSelectedStatusIcon(threadId: Guid): string {
const selectedStatusId = this.getAnnotationStatusFormControl(this.annotationStatusFormGroup.get('annotationsStatusArray') as UntypedFormArray, threadId).get('statusId')?.value;
if (!selectedStatusId) return null;
const selectedStatus = this.listingStatuses.find(s => s.id == selectedStatusId);
if (!selectedStatus) return null;
return this.getStatusIcon(selectedStatus);
}
getStatusIcon(status: Status): string { getStatusIcon(status: Status): string {
let icon = this.configurationService.defaultStatusIcon; let icon = this.configurationService.defaultStatusIcon;
@ -298,7 +308,7 @@ export class AnnotationDialogComponent extends BaseComponent {
return this.statusService.query(lookup).pipe(takeUntil(this._destroyed)) return this.statusService.query(lookup).pipe(takeUntil(this._destroyed))
.subscribe(result => { .subscribe(result => {
if (result && result.items?.length > 0) this.listingStatuses.push(...result.items); if (result && result.items?.length > 0) this.listingStatuses = result.items;
}); });
} }

5
dmp-frontend/src/assets/i18n/baq.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/de.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

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

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/es.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/gr.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/hr.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/pl.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/pt.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/sk.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/sr.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {

5
dmp-frontend/src/assets/i18n/tr.json
View File

@ -336,7 +336,10 @@
}, },
"ANNOTATION-STATUS": { "ANNOTATION-STATUS": {
"TITLE": "Status", "TITLE": "Status",
"SUCCESS": "Comment Status successfully saved" "SUCCESS": "Comment Status successfully saved",
"ACTIONS": {
"EDIT": "Change status"
}
} }
}, },
"MAINTENANCE-TASKS": { "MAINTENANCE-TASKS": {