From 9af7cd64f103ee29ca4c45fd988605cf7a9fd783 Mon Sep 17 00:00:00 2001 From: Sofia Papacharalampous Date: Thu, 28 Mar 2024 17:00:58 +0200 Subject: [PATCH] styling changes *annotations --- .../annotation-dialog.component.html | 185 ++++++++++-------- .../annotation-dialog.component.scss | 20 +- .../annotation-dialog.component.ts | 13 +- dmp-frontend/src/assets/i18n/en.json | 1 + .../images/annotations/add_reaction.png | Bin 0 -> 730 bytes .../assets/images/annotations/eye-hide.png | Bin 0 -> 605 bytes .../src/assets/images/annotations/globe.png | Bin 0 -> 592 bytes .../assets/images/annotations/paper-plane.png | Bin 0 -> 515 bytes .../src/assets/images/annotations/reply.png | Bin 0 -> 262 bytes .../{ => annotations}/user-profile-2.png | Bin 10 files changed, 130 insertions(+), 89 deletions(-) create mode 100644 dmp-frontend/src/assets/images/annotations/add_reaction.png create mode 100644 dmp-frontend/src/assets/images/annotations/eye-hide.png create mode 100644 dmp-frontend/src/assets/images/annotations/globe.png create mode 100644 dmp-frontend/src/assets/images/annotations/paper-plane.png create mode 100644 dmp-frontend/src/assets/images/annotations/reply.png rename dmp-frontend/src/assets/images/{ => annotations}/user-profile-2.png (100%) 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 0000000000000000000000000000000000000000..ace864001f9ea702a16721ad2eab4758dd96cd1d GIT binary patch literal 730 zcmV<00ww*4P)JcWQjI*?6w&USt0YwwBxNHa+Y0dP$|o z+r!~-k5F%|?KQsN_}*C_zop^*e*de)M?<*WoN^z^iK9=Y;KSW+7ts?tGV(AC*O2G( zr$qQhxH^-CNIZWO(W$Bw|NDZ(_47`cSyWK8pJ)}V>w97S>q32i*;YcPjAhF0p=Ss+2C-wmvDFTa% zyefhPMbZRgv$0HLJA$>WJ@Xd?0|_~zdvEW%Y#4+_Bk8=+3Ia621x90q)dCz>jTj<3+Nd?9F55+eUNydO9!b=hA>(qpi1SQ+xJjv-^K}o~T1G`up zNl+k>EqodkfQc9S6v7~DFbX}BLa4*o+V)z{bbf({r3PLyi}=XEnT6b0BH~YZnbRzy z$7uH}z?9(EuhnV~P!JR;rZa%$9`dO}91$=S7ReU92ZUo_o<;|WP%&|d{MSu3@k4li zYf7l}MPuRsS%8Q>798`f;5#tL=j37oN}6C8N_&D0g>qimMewTh2LNS?(wG`L&;S4c M07*qoM6N<$f_N%HzW@LL literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..863f6c03c7a5643702d1cbf740d93ccd6b8fce00 GIT binary patch literal 605 zcmV-j0;2tiP)IsAsh$jGdmWb8dAWN3Gu!;p?e3MQp z5WXtx=&F#Rr~AF`o;M-d*aF+iI<(eaE|;Tjx7()`m^10xF5!8ib(+?vRXi&pQ8b4H zFT>ovk^kBy+Hvig`7NOT5~L(*A4>omjrUiac7UHIo(l6v^G^g)F?s2E?B$u8J=ycI z_g%p9j%e5<3PHrd(gapX5Lg4-k3@qiNE%YHawQ^sW&W&6>{%JzUBj23Mxy3{qy2}} zxBZMIIvCa9k!a0b61F1eDLabAl+09D=t zyq18+A!uLKQCUw&R1v_KJz;!wnM5(Ssx~)!hq4#Vmzj^6IYd$*AeLk+B9XZpcRV)A z_2&^(?5tx2#ikgEg|t$82P}yLAk`aBkItzwlR!peIsmvIaa&($e760h6E_|g$;~$% zV3bEOXUH_VU`MF@%Bn)^^CCr>H$f7D=SoHwLKLPa;O$}-%b7+H2fm0ZP788?yT{VL z!Qt*5$_)@`S*e?L?KC-)l<~WQcqad7>N#2S0># r+x0Z&!V?n0SX)f%F!@Gp?3eZf8Nk&VQkFJw00000NkvXXu0mjfQwIWQ literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..6b7af4097ace5351c3248ae5d980d6b7ec4055ef GIT binary patch literal 592 zcmV-W0UHYgL&PCz?By8&ea$}26P5yAwNSFT__)lTcCj+^5R zbf=3F*`Gd3vO@INMa7(2>usW13Oyw<8p{*sVrWM6eb4;T|5X634=?cOVaYZ{#bnTS zS)f`N{OA_IcMkj!dQDW{WgaWh0>=a}J?y!mDkpFYThIv<%*LI-8be{}VEuJz0Id&F zVPnD78S{u2KB-3?!A%-Zo4I6u9^`L@6si1}Z6Dl?(R(!R^&j*$iPI*ZTaefj34 zNL5J<10={o)RM;6}BJEekeB;55khafWWTj0Jq=`+Es>1l4CN%rW2uIz+*gD4h|Bj(#hWe?eUsAr__8 zbbB(CxjVqLzzAJf4wXkkjR{W}QR($7#=y<=q@Y$9Gg@6#U^`U#Nc4k`h_IX=#~&hS zfT?p+mCf80A>nkNXuqri6;nNe1F(__4iKCCA%LSwrPT z=eTZeJJSZxNCkhcl!X-vjDc+uiH*FbH0IkewVtC@x;+Y7sYGJjXj5rZ1C=&v`9tw! z0rdOkXq0)Y!dQ9$Ff4Lgq&70&CDy#ddEEh>qBdZiegV6NdP>M{ll}kz002ovPDHLk FV1m8L)HDD9 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..2a369ecc97ae611a4ac7e7a69e972685964abbbd GIT binary patch literal 262 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#*`6+rAr*{oCqCqLFc4_%=j=(Ca_a<#+XhBy ziG|t*jLJ6}c0W-OZ(03C$o`kAe#ouwncNe8NV7^@X7lhmyX22aoZ;M{M_YwBMe}Dw zZj7*g-}L;b$gSRLfjwTEX6N^*3R&$EH2(Pe&?jc8@IN6JyX>#1{n)W*Yl~jZ4~35c z9?Wjm6Q<0V$GvF!{K6TxR>dSm@m+hG5DO$aE8eKhiY+{o`&t?3Oa@O^KbLh*2~7Zr CVP9VW literal 0 HcmV?d00001 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