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 0b2f728a6..2ab76a4a5 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,12 +10,23 @@
- + + + + {{'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)}} @@ -23,10 +34,15 @@ {{threadFormGroup.get('protectionType').getError('backendError')?.message}} {{'COMMONS.VALIDATION.REQUIRED' | translate}} -
- +
+
+
+ +
+
+ +
+
@@ -43,12 +59,21 @@
-
{{getParentAnnotation(thread).timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}
-
{{getAnnotationProtectionType(thread)}}
-
{{getAnnotationProtectionType(thread)}}
-
{{getParentAnnotation(thread).payload}}
-
- {{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{getParentAnnotation(thread).author.name}} +
+ profile-picture +
+
+
+ {{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{getParentAnnotation(thread).author.name}} +
{{getParentAnnotation(thread).timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}
+
+
+
{{getParentAnnotation(thread).payload}}
+
+
+
{{getAnnotationProtectionType(thread)}}
+
{{getAnnotationProtectionType(thread)}}
+
@@ -71,11 +96,20 @@
-
{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}
-
{{annotation.payload}}
-
- {{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} - {{annotation.author.name}} +
+ profile-picture +
+
+
+
+ {{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} + {{annotation.author.name}} +
+
{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}
+
+
+
{{annotation.payload}}
+
@@ -86,14 +120,23 @@ -
+
+ + + {{'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 628a0b7e1..7d23646a4 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 @@ -1,3 +1,5 @@ +$mat-card-header-size: 40px !default; + ::ng-deep .mat-dialog-container { border-radius: 8px; } @@ -5,7 +7,7 @@ .form-container { width: 100%; min-height: 14rem; - padding: 1rem; + padding: 1rem 2rem 2rem 2rem; } .logo { @@ -66,3 +68,10 @@ .warn { color: #f16868; } + +.profile-picture { + height: $mat-card-header-size; + width: $mat-card-header-size; + border-radius: 50%; + flex-shrink: 0; +} 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 fbaa3dc16..ee9220d69 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 @@ -18,7 +18,7 @@ import { takeUntil } from 'rxjs/operators'; import { nameof } from 'ts-simple-nameof'; @Component({ - selector: 'app-start-new-dmp', + selector: 'app-annotation-dialog', templateUrl: './annotation-dialog.component.html', styleUrls: ['./annotation-dialog.component.scss'] }) @@ -139,6 +139,7 @@ export class AnnotationDialogComponent extends BaseComponent { .pipe(takeUntil(this._destroyed)) .subscribe( data => { + console.log(data); this.annotationsPerThread = {}; this.parentAnnotationsPerThread = {}; this.threads = new Set(); @@ -152,6 +153,7 @@ export class AnnotationDialogComponent extends BaseComponent { this.parentAnnotationsPerThread[element.threadId.toString()] = data.items.filter(x => x.threadId === element.threadId && x.id === element.id)[0]; this.threads.add(element.threadId); }); + console.log(this.parentAnnotationsPerThread); // console.log(this.comments); // console.log(this.threads); // console.log(this.parentAnnotationsPerThread); diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css index 2538b5e45..20a553eb5 100644 --- a/dmp-frontend/src/assets/css/demo.css +++ b/dmp-frontend/src/assets/css/demo.css @@ -590,6 +590,36 @@ hr { font-weight: 500; } +.normal-btn-sm { + min-width: 100px; + max-width: 256px; + height: 40px; + cursor: pointer; + background: var(--primary-color) 0% 0% no-repeat padding-box; + box-shadow: 0px 3px 6px #1E202029; + border-radius: 30px; + border: none; + color: #FFFFFF; + opacity: 1; + font-size: 0.87rem; + padding: 0.62rem 1.87rem; + font-weight: 400; +} + +.normal-btn-light-sm { + background: #ffffff 0% 0% no-repeat padding-box; + box-shadow: 0px 3px 6px #1E202029; + border: 1px solid var(--primary-color); + border-radius: 30px; + opacity: 1; + min-width: 100px; + max-width: 256px; + height: 40px; + color: var(--primary-color); + font-size: 0.87rem; + font-weight: 400; +} + .mirror { -webkit-transform: scaleX(-1); transform: scaleX(-1); diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 06ed50115..f6a940751 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -254,7 +254,8 @@ "THREADS": { "NEW-THREAD": "New comment", "FROM-USER": "From", - "SEND": "Send comment", + "SEND": "Send", + "CANCEL": "Cancel", "REPLY": "Reply", "PROTECTION": { "TITLE": "Visibility" diff --git a/dmp-frontend/src/assets/images/user-profile-2.png b/dmp-frontend/src/assets/images/user-profile-2.png new file mode 100644 index 000000000..619859848 Binary files /dev/null and b/dmp-frontend/src/assets/images/user-profile-2.png differ