Annotation dialog ui update

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

@@ -10,12 +10,12 @@
 		<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col-12"> -->
 		<div class="col-12">
 			<form class="row p-2 mt-2 mb-3 ml-0 pr-3 mr-0 new-thread" [formGroup]="threadFormGroup">
-				<mat-form-field class="col msg-input">
+				<mat-form-field class="col-6 msg-input">
 					<textarea matInput matTextareaAutosize matAutosizeMinRows="1" name="thread-text" formControlName="text" placeholder="{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}" required></textarea>
 					<mat-error *ngIf="threadFormGroup.get('text').hasError('backendError')">{{threadFormGroup.get('text').getError('backendError')?.message}}</mat-error>
 					<mat-error *ngIf="threadFormGroup.get('text').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
-				<mat-form-field class="col-auto pl-0 pr-0 protection-input">
+				<mat-form-field class="col-6 pl-0 pr-0 protection-input">
 					<mat-label>{{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}}</mat-label>
 					<mat-select name="thread-protectionType" formControlName="protectionType" required>
 						<mat-option *ngFor="let enumValue of annotationProtectionTypeEnumValues" [value]="enumValue">{{enumUtils.toAnnotationProtectionTypeString(enumValue)}}</mat-option>
@@ -44,8 +44,8 @@
 								<div class="col-12">
 									<div class="row h-100">
 										<div class="col annotation-time">{{thread.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div>
-										<div class="col-auto" *ngIf="thread.protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}"><i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}">{{getAnnotationProtectionType(thread)}}</i></div>
+										<div class="col-auto" *ngIf="thread.protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}"><i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i>{{getAnnotationProtectionType(thread)}}</div>
-										<div class="col-auto" *ngIf="thread.protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}"><i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}">{{getAnnotationProtectionType(thread)}}</i></div>
+										<div class="col-auto" *ngIf="thread.protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}"><i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i>{{getAnnotationProtectionType(thread)}}</div>
 										<div class="col-md-12 annotation-full-text">{{thread.payload}}</div>
 										<div class="col-md-12">
 											<em class="user">{{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{thread.author.name}}</em>

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

@@ -3,9 +3,9 @@
 }
 
 .form-container {
-	width: 33rem;
+	width: 100%;
 	min-height: 14rem;
-	padding: 0.28rem 0.34rem 0.875rem 0.625rem;
+	padding: 1rem;
 }
 
 .logo {

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

@@ -191,6 +191,11 @@ export class AnnotationDialogComponent extends BaseComponent {
 	}
 
 
+	getAnnotationProtectionType(thread: Annotation): string {
+		return this.enumUtils.toAnnotationProtectionTypeString(thread.protectionType);
+	}
+
+
 	cancel() {
 		this.dialogRef.close();
 	}

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts

@@ -125,7 +125,8 @@ export class DescriptionFormFieldSetComponent extends BaseComponent {
 	//
 	showAnnotations(fieldSetId: string) {
 		const dialogRef = this.dialog.open(AnnotationDialogComponent, {
-			width: '528px',
+			width: '40rem',
+			maxWidth: '90vw',
 			data: {
 				entityId: this.descriptionId,
 				anchor: fieldSetId,

dmp-frontend/src/assets/i18n/en.json

@@ -202,6 +202,9 @@
 		"NO-DATA-TO-DISPLAY": "No data to display"
 	},
 	"COMMONS": {
+		"VALIDATION": {
+			"REQUIRED": "Required"
+		},
 		"LISTING-COMPONENT": {
 			"SEARCH-FILTER-BTN": "Filter Results",
 			"CLEAR-ALL-FILTERS": "clear all filters",
@@ -373,6 +376,21 @@
 		"NOTIFICATIONS":"Notifications",
 		"PREFILLING-SOURCES":"Prefilling Sources"
 	},
+	"ANNOTATION-DIALOG": {
+		"TITLE": "Comments",
+		"THREADS": {
+			"NEW-THREAD": "New comment",
+			"FROM-USER": "From",
+			"SEND": "Send comment", 
+			"PROTECTION": {
+				"TITLE": "Visibility"
+			}
+		},
+		"PROTECTION": {
+			"ENTITY-ACCESSORS": "Visible",
+			"PRIVATE": "Hidden"
+		}
+	},
 	"DESCRIPTION-TEMPLATE-EDITOR": {
 		"TITLE": {
 			"NEW": "New API Client",
@@ -2241,6 +2259,10 @@
 		"INTERNAL-SOURCE": "Not bind with source"
 	},
 	"TYPES": {
+		"ANNOTATION-PROTECTION-TYPE": {
+			"PRIVATE": "Hidden",
+			"ENTITY-ACCESSORS": "Visible"
+		},
 		"APP-ROLE": {
 			"ADMIN": "Admin",
 			"USER": "User",