From af7d26b62a21c0cc0de7e2a8079fc0ff8949d883 Mon Sep 17 00:00:00 2001 From: Sofia Papacharalampous Date: Mon, 8 Jul 2024 15:18:35 +0300 Subject: [PATCH] annotation dialog styling changes --- .../annotation-dialog.component.html | 94 +++++++++---------- .../annotation-dialog.component.scss | 45 ++++++++- .../annotation-dialog.component.ts | 12 ++- dmp-frontend/src/assets/i18n/baq.json | 5 +- dmp-frontend/src/assets/i18n/de.json | 5 +- dmp-frontend/src/assets/i18n/en.json | 5 +- dmp-frontend/src/assets/i18n/es.json | 5 +- dmp-frontend/src/assets/i18n/gr.json | 5 +- dmp-frontend/src/assets/i18n/hr.json | 5 +- dmp-frontend/src/assets/i18n/pl.json | 5 +- dmp-frontend/src/assets/i18n/pt.json | 5 +- dmp-frontend/src/assets/i18n/sk.json | 5 +- dmp-frontend/src/assets/i18n/sr.json | 5 +- dmp-frontend/src/assets/i18n/tr.json | 5 +- 14 files changed, 143 insertions(+), 63 deletions(-) diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html index dc34ca405..2e04cab5a 100644 --- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html +++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html @@ -1,12 +1,11 @@ - -
-
+
+
-

{{'ANNOTATION-DIALOG.TITLE' | translate}}

+

{{'ANNOTATION-DIALOG.TITLE' | translate}}

@@ -55,7 +54,7 @@
- +
@@ -66,45 +65,60 @@
-
-
+
- -
+
+
-
+
{{getParentAnnotation(thread).author.name}}
{{getParentAnnotation(thread).timeStamp | dateTimeFormatter: "d MMMM, y 'at' h:mm a"}}
+
+ + + + +
+
+
{{getParentAnnotation(thread).payload}}
-
-
- -
+
+
+
+ + + + + + +
- +
- -
-
-
- - - - - - -
-
- -
+
@@ -151,12 +149,12 @@
-
+
{{annotation.author.name}}
{{annotation.timeStamp | dateTimeFormatter:"d MMMM, y 'at' h:mm a"}}
-
+
{{annotation.payload}}
diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss index 81284ea70..9ce76f138 100644 --- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss +++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss @@ -4,6 +4,15 @@ $mat-card-header-size: 40px !default; border-radius: 8px; } +.dialog-container { + padding: 0 1.5rem; + + .title { + font-size: 18px; + font-weight: 400; + } +} + .logo { width: 8.44rem; } @@ -21,6 +30,10 @@ $mat-card-header-size: 40px !default; border-radius: 50%; } +.reply-btn { + color: rgba(0, 0, 0, 0.6); +} + .content { margin: 2.17rem 2.304rem 1.1875rem 3.065rem; } @@ -83,8 +96,30 @@ $mat-card-header-size: 40px !default; .comment-wrapper { border-radius: 4px; 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 { font-weight: bold; font-size: 16px; @@ -97,11 +132,12 @@ $mat-card-header-size: 40px !default; .action-button { font-weight: 400; - color: #8C8C8C; + border-radius: 20px; + color: var(--primary-color); + font-weight: 500; &.active-action { - font-weight: 500; - color: #129D99; + display: none; } } @@ -109,3 +145,6 @@ $mat-card-header-size: 40px !default; background-color: #18488f3d; } +::ng-deep .statuses-menu.mat-mdc-menu-panel { + min-width: initial !important; +} \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts index 176e0e0ea..17a0b74fd 100644 --- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts +++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts @@ -204,6 +204,16 @@ export class AnnotationDialogComponent extends BaseComponent { 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 { let icon = this.configurationService.defaultStatusIcon; @@ -298,7 +308,7 @@ export class AnnotationDialogComponent extends BaseComponent { return this.statusService.query(lookup).pipe(takeUntil(this._destroyed)) .subscribe(result => { - if (result && result.items?.length > 0) this.listingStatuses.push(...result.items); + if (result && result.items?.length > 0) this.listingStatuses = result.items; }); } diff --git a/dmp-frontend/src/assets/i18n/baq.json b/dmp-frontend/src/assets/i18n/baq.json index 6278575b4..646ed503b 100644 --- a/dmp-frontend/src/assets/i18n/baq.json +++ b/dmp-frontend/src/assets/i18n/baq.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json index 57ef3cdfe..ff41e2d43 100644 --- a/dmp-frontend/src/assets/i18n/de.json +++ b/dmp-frontend/src/assets/i18n/de.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index ee8fbdeab..30b819724 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json index 801e60533..03c75363a 100644 --- a/dmp-frontend/src/assets/i18n/es.json +++ b/dmp-frontend/src/assets/i18n/es.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json index 3b015f7de..8bd2c6210 100644 --- a/dmp-frontend/src/assets/i18n/gr.json +++ b/dmp-frontend/src/assets/i18n/gr.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/hr.json b/dmp-frontend/src/assets/i18n/hr.json index 576a6134f..7e811e7b8 100644 --- a/dmp-frontend/src/assets/i18n/hr.json +++ b/dmp-frontend/src/assets/i18n/hr.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/pl.json b/dmp-frontend/src/assets/i18n/pl.json index 830a06de6..44359f12f 100644 --- a/dmp-frontend/src/assets/i18n/pl.json +++ b/dmp-frontend/src/assets/i18n/pl.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/pt.json b/dmp-frontend/src/assets/i18n/pt.json index 48220ced2..a82a92047 100644 --- a/dmp-frontend/src/assets/i18n/pt.json +++ b/dmp-frontend/src/assets/i18n/pt.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json index 8a4f149c6..1d3c831ed 100644 --- a/dmp-frontend/src/assets/i18n/sk.json +++ b/dmp-frontend/src/assets/i18n/sk.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/sr.json b/dmp-frontend/src/assets/i18n/sr.json index e3dcc2dcf..e1d470a79 100644 --- a/dmp-frontend/src/assets/i18n/sr.json +++ b/dmp-frontend/src/assets/i18n/sr.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": { diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json index 76b5d54c1..e8c595a66 100644 --- a/dmp-frontend/src/assets/i18n/tr.json +++ b/dmp-frontend/src/assets/i18n/tr.json @@ -336,7 +336,10 @@ }, "ANNOTATION-STATUS": { "TITLE": "Status", - "SUCCESS": "Comment Status successfully saved" + "SUCCESS": "Comment Status successfully saved", + "ACTIONS": { + "EDIT": "Change status" + } } }, "MAINTENANCE-TASKS": {