Move the comment component inside a dialog as we did for the Involved people (#2070)

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css

@@ -31,3 +31,10 @@
     transform: translate(0, -50%);
     width: 40%;
 }
+
+.comments-dialog {
+    position: fixed;
+    top: 50%;
+    transform: translate(0, -50%);
+    width: 40%;
+}

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html

@@ -23,10 +23,7 @@
                 <button type="button" md-button md-raised-button (click)="showPeopleDialog()">{{'TASK_DETAILS.LABELS.INVOLVED_PEOPLE'|translate}}</button>
             </div>
             <div *ngIf="showComments" class="mdl-cell mdl-cell--4-col">
-                <adf-comments #activiticomments
+                <button type="button" md-button md-raised-button (click)="showCommentsDialog()">{{'TASK_DETAILS.LABELS.COMMENTS'|translate}}</button>
-                    [readOnly]="readOnlyForm"
-                    [taskId]="taskDetails.id">
-                </adf-comments>
             </div>
             <div *ngIf="showChecklist" class="mdl-cell mdl-cell--4-col">
                 <adf-checklist #activitichecklist
@@ -81,4 +78,14 @@
             <button type="button" md-button md-raised-button (click)="closePeopleDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
         </div>
     </dialog>
+    <dialog class="mdl-dialog comments-dialog" #dialogComments>
+        <div class="mdl-dialog__content">
+            <adf-comments #activiticomments
+                [readOnly]="readOnlyForm"
+                [taskId]="taskDetails.id">
+            </adf-comments>
+            <br><br>
+            <button type="button" md-button md-raised-button (click)="closeCommentsDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
+        </div>
+    </dialog>
 </div>

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts

@@ -55,6 +55,9 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
     @ViewChild('dialogPeople')
     peopleDialog: any;
 
+    @ViewChild('dialogComments')
+    commentsDialog: any;
+
     @Input()
     debugMode: boolean = false;
 
@@ -303,6 +306,19 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
         }
     }
 
+    public showCommentsDialog(): void {
+        if (!this.commentsDialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(this.commentsDialog.nativeElement);
+        }
+        this.commentsDialog.nativeElement.showModal();
+    }
+
+    public closeCommentsDialog(): void {
+        if (this.commentsDialog) {
+            this.commentsDialog.nativeElement.close();
+        }
+    }
+
     onClaimTask(taskId: string): void {
         this.loadDetails(taskId);
     }

ng2-components/ng2-activiti-tasklist/src/components/adf-comment-list.component.css

@@ -28,7 +28,7 @@
 
 .adf-comment-message {
     float: left;
-    width: calc(100% - 20px);
+    width: calc(100% - 10px);
     padding: 2px 10px;
     font-family: Muli;
     font-style: italic;
@@ -47,7 +47,7 @@
 
 .adf-comment-contents {
     float: left;
-    width: calc(100% - 60px);
+    width: calc(100% - 10px);
 }
 
 adf-datatable >>> table thead {