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 c0c1d6b9c..74ff94aa8 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 @@ -10,30 +10,29 @@
- +
+ + {{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}} + + + add_reaction + + {{threadFormGroup.get('text').getError('backendError')?.message}} + {{'COMMONS.VALIDATION.REQUIRED' | translate}} + +
- - {{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}} - - - add_reaction - - {{threadFormGroup.get('text').getError('backendError')?.message}} - {{'COMMONS.VALIDATION.REQUIRED' | translate}} - +
+ + {{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}} + + {{enumUtils.toAnnotationProtectionTypeString(enumValue)}} + + {{threadFormGroup.get('protectionType').getError('backendError')?.message}} + {{'COMMONS.VALIDATION.REQUIRED' | translate}} + +
- - {{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}} - - {{enumUtils.toAnnotationProtectionTypeString(enumValue)}} - - {{threadFormGroup.get('protectionType').getError('backendError')?.message}} - {{'COMMONS.VALIDATION.REQUIRED' | translate}} -
@@ -51,38 +50,63 @@
- {{getAnnotationProtectionType(thread)}} +
+ +
+ {{getAnnotationProtectionType(thread)}} +
+
- {{getAnnotationProtectionType(thread)}} +
+ globe + + + {{getAnnotationProtectionType(thread)}} + +
-
+
-
-
-
-
-
-
+
+
+
-
- profile-picture +
+ profile-picture
{{getParentAnnotation(thread).author.name}}
{{getParentAnnotation(thread).timeStamp | date: "d MMMM, y 'at' h:mm a"}}
- -
-
+
{{getParentAnnotation(thread).payload}}
+
+
+ +
+
+
+
+ + + + + + +
+
@@ -92,32 +116,29 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- profile-picture -
-
-
-
- {{annotation.author.name}} -
-
{{annotation.timeStamp | date:"d MMMM, y 'at' h:mm a"}}
- + +
+
+
+
+
+
+
+
+
+
+ profile-picture
-
-
{{annotation.payload}}
+
+
+ {{annotation.author.name}} +
{{annotation.timeStamp | date:"d MMMM, y 'at' h:mm a"}}
+ +
+ +
+
{{annotation.payload}}
+
@@ -125,32 +146,28 @@
-
- + +
+
- -
-
- - - {{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} - - - add_reaction - - - -
- + +
+
+ + {{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} + + + add_reaction + + +
+ +
-
+
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 b67b02dd9..d889ce43d 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 @@ -76,12 +76,26 @@ $mat-card-header-size: 40px !default; flex-shrink: 0; } -.thread { - padding: 1em 0 0 0; +.comment-wrapper { background-color: #F5F5F5; - margin: 1em 0 0 0; } .user { 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; + } } 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 2a7bfd10f..6b180e818 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 @@ -35,6 +35,8 @@ export class AnnotationDialogComponent extends BaseComponent { public comments = new Array(); public threads = new Set(); public annotationsPerThread = {}; + public showRepliesPerThread = {}; + public replyEnabledPerThread = {}; public parentAnnotationsPerThread = {}; threadReplyTextsFG: Array; threadFormGroup: UntypedFormGroup; @@ -212,8 +214,7 @@ export class AnnotationDialogComponent extends BaseComponent { getAnnotationProtectionType(thread: Guid): string { return this.enumUtils.toAnnotationProtectionTypeString(this.parentAnnotationsPerThread[thread.toString()].protectionType); } - - + cancel() { this.dialogRef.close(this.changesMade); } @@ -226,4 +227,12 @@ export class AnnotationDialogComponent extends BaseComponent { this.router.navigate(['/plans/new']); this.close(); } + + showReplies(threadId: string): void { + this.showRepliesPerThread[threadId] = true; + } + + enableReply(threadId: string): void { + this.replyEnabledPerThread[threadId] = true; + } } diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index e2371f2dc..42c697a77 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -257,6 +257,7 @@ "SEND": "Send", "CANCEL": "Cancel", "REPLY": "Reply", + "REPLIES": "Replies", "PROTECTION": { "TITLE": "Visibility" } diff --git a/dmp-frontend/src/assets/images/annotations/add_reaction.png b/dmp-frontend/src/assets/images/annotations/add_reaction.png new file mode 100644 index 000000000..ace864001 Binary files /dev/null and b/dmp-frontend/src/assets/images/annotations/add_reaction.png differ diff --git a/dmp-frontend/src/assets/images/annotations/eye-hide.png b/dmp-frontend/src/assets/images/annotations/eye-hide.png new file mode 100644 index 000000000..863f6c03c Binary files /dev/null and b/dmp-frontend/src/assets/images/annotations/eye-hide.png differ diff --git a/dmp-frontend/src/assets/images/annotations/globe.png b/dmp-frontend/src/assets/images/annotations/globe.png new file mode 100644 index 000000000..6b7af4097 Binary files /dev/null and b/dmp-frontend/src/assets/images/annotations/globe.png differ diff --git a/dmp-frontend/src/assets/images/annotations/paper-plane.png b/dmp-frontend/src/assets/images/annotations/paper-plane.png new file mode 100644 index 000000000..366176997 Binary files /dev/null and b/dmp-frontend/src/assets/images/annotations/paper-plane.png differ diff --git a/dmp-frontend/src/assets/images/annotations/reply.png b/dmp-frontend/src/assets/images/annotations/reply.png new file mode 100644 index 000000000..2a369ecc9 Binary files /dev/null and b/dmp-frontend/src/assets/images/annotations/reply.png differ diff --git a/dmp-frontend/src/assets/images/user-profile-2.png b/dmp-frontend/src/assets/images/annotations/user-profile-2.png similarity index 100% rename from dmp-frontend/src/assets/images/user-profile-2.png rename to dmp-frontend/src/assets/images/annotations/user-profile-2.png