[ADF-1149] 'Remove' involved people of a task button is displayed behind the dialog (#2130)

* Removed mdl dialogs for comments and people
* Removed list-column CSS class from activiti-demo component to show tasks/process list and details in the same row on low resolution screens

demo-shell-ng2/app/components/activiti/activiti-demo.component.css

@@ -12,10 +12,6 @@
     padding: 10px 10px 10px 10px;
 }
 
-.list-column {
-    width: 320px;
-}
-
 .mdl-layout__header {
     z-index: 1;
 }

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -38,7 +38,7 @@
                             </adf-accordion-group>
                         </adf-accordion>
                     </div>
-                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column" *ngIf="taskFilter && !isStartTaskMode()">
+                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp" *ngIf="taskFilter && !isStartTaskMode()">
                         <activiti-tasklist
                             [appId]="taskFilter?.appId"
                             [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
@@ -74,9 +74,13 @@
                             (taskDeleted)="onTaskDeleted($event)">
                         </activiti-task-details>
                         <hr>
-                        <activiti-task-attachments
+                        <md-card>
-                            [taskId]="currentTaskId">
+                            <md-card-content>
-                        </activiti-task-attachments>
+                                <activiti-task-attachments
+                                    [taskId]="currentTaskId">
+                                </activiti-task-attachments>
+                            </md-card-content>
+                        </md-card>
                     </div>
                     <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartTaskMode()">
                          <activiti-start-task
@@ -116,7 +120,7 @@
                                 </adf-accordion-group>
                             </adf-accordion>
                         </div>
-                        <div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
+                        <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
                             <activiti-process-instance-list
                                 *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                                 [processDefinitionKey]="processFilter.filter.processDefinitionKey"
@@ -145,9 +149,13 @@
                                 (taskClick)="onProcessDetailsTaskClick($event)">
                             </activiti-process-instance-details>
                             <hr>
-                            <activiti-process-attachments
+                            <md-card>
-                                [processId]="currentProcessInstanceId">
+                                <md-card-content>
-                            </activiti-process-attachments>
+                                    <activiti-process-attachments
+                                        [processId]="currentProcessInstanceId">
+                                    </activiti-process-attachments>
+                                </md-card-content>
+                            </md-card>
                         </div>
                         <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
                             <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>

ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html

@@ -5,9 +5,6 @@
         [processInstance]="processInstanceDetails"
         (showProcessDiagram)="onShowProcessDiagram($event)">
     </adf-process-instance-header>
-    <div class="mdl-cell mdl-cell--4-col">
-        <button type="button" md-button md-raised-button (click)="showCommentsDialog()">{{'DETAILS.LABELS.COMMENTS'|translate}}</button>
-    </div>
     <div class="mdl-cell mdl-cell--4-col">
         <button id="show-diagram-button" type="button" md-button md-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
     </div>
@@ -22,14 +19,12 @@
     <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="isRunning()">
         <button type="button" (click)="cancelProcess()" class="mdl-button">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
     </div>
-    <dialog class="mdl-dialog adf-comments-dialog" #dialogComments>
+    <md-card>
-        <div class="mdl-dialog__content">
+        <md-card-content>
             <adf-process-instance-comments #activiticomments
                 [readOnly]="!isRunning()"
                 [processInstanceId]="processInstanceDetails.id">
             </adf-process-instance-comments>
-            <br><br>
+        </md-card-content>
-            <button type="button" md-button md-raised-button (click)="closeCommentsDialog()">{{ 'DETAILS.BUTTON.CLOSE' | translate }}</button>
+    </md-card>
-        </div>
-    </dialog>
 </div>

ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.ts

@@ -43,9 +43,6 @@ export class ProcessInstanceDetailsComponent implements OnChanges {
     @ViewChild(ProcessInstanceTasksComponent)
     tasksList: ProcessInstanceTasksComponent;
 
-    @ViewChild('dialogComments')
-    commentsDialog: any;
-
     @Input()
     showTitle: boolean = true;
 
@@ -109,19 +106,6 @@ export class ProcessInstanceDetailsComponent implements 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();
-        }
-    }
-
     isRunning(): boolean {
         return this.processInstanceDetails && !this.processInstanceDetails.ended;
     }

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

@@ -25,20 +25,6 @@
     text-transform: uppercase;
 }
 
-.people-dialog {
+adf-people >>> .assignment-top-container{
-    position: fixed;
+    background-color: #fff;
-    top: 50%;
-    transform: translate(0, -50%);
-    width: 40%;
-}
-
-.comments-dialog {
-    position: fixed;
-    top: 50%;
-    transform: translate(0, -50%);
-    width: 40%;
-}
-
-adf-comments >>> adf-comment-list {
-    max-height: 400px;
 }

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

@@ -19,12 +19,6 @@
             (claim)="onClaimTask($event)">
         </adf-task-header>
         <div *ngIf="showHeaderContent" class="mdl-grid">
-            <div *ngIf="showInvolvePeople" class="mdl-cell mdl-cell--4-col">
-                <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">
-                <button type="button" md-button md-raised-button (click)="showCommentsDialog()">{{'TASK_DETAILS.LABELS.COMMENTS'|translate}}</button>
-            </div>
             <div *ngIf="showChecklist" class="mdl-cell mdl-cell--4-col">
                 <adf-checklist #activitichecklist
                     [readOnly]="readOnlyForm"
@@ -67,26 +61,19 @@
             <button type="button" class="mdl-button" (click)="closeErrorDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
         </div>
     </dialog>
-    <dialog class="mdl-dialog people-dialog" #dialogPeople>
+    <br /><br />
-        <div class="mdl-dialog__content">
+    <adf-people *ngIf="showInvolvePeople"
-            <adf-people
+                [iconImageUrl]="peopleIconImageUrl"
-                        [iconImageUrl]="peopleIconImageUrl"
+                [people]="taskPeople"
-                        [people]="taskPeople"
+                [readOnly]="readOnlyForm"
-                        [readOnly]="readOnlyForm"
+                [taskId]="taskDetails.id">
-                        [taskId]="taskDetails.id">
+    </adf-people>
-            </adf-people>
+    <md-card *ngIf="showComments">
-            <br><br>
+        <md-card-content>
-            <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>
+         </md-card-content>
-            <button type="button" md-button md-raised-button (click)="closeCommentsDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
+    </md-card>
-        </div>
-    </dialog>
 </div>

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

@@ -27,7 +27,7 @@ import { Component,
     ViewChild
 } from '@angular/core';
 import { ContentLinkModel, FormModel, FormOutcomeEvent, FormService } from 'ng2-activiti-form';
-import { AlfrescoAuthenticationService, AlfrescoTranslationService, CardViewUpdateService, LogService, UpdateNotification, ClickNotification } from 'ng2-alfresco-core';
+import { AlfrescoAuthenticationService, AlfrescoTranslationService, CardViewUpdateService, ClickNotification, LogService, UpdateNotification } from 'ng2-alfresco-core';
 import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 import { TaskDetailsModel } from '../models/task-details.model';
 import { User } from '../models/user.model';
@@ -55,12 +55,6 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
     @ViewChild('errorDialog')
     errorDialog: DebugElement;
 
-    @ViewChild('dialogPeople')
-    peopleDialog: any;
-
-    @ViewChild('dialogComments')
-    commentsDialog: any;
-
     @Input()
     debugMode: boolean = false;
 
@@ -323,32 +317,6 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
         this.errorDialog.nativeElement.close();
     }
 
-    public showPeopleDialog(): void {
-        if (!this.peopleDialog.nativeElement.showModal) {
-            dialogPolyfill.registerDialog(this.peopleDialog.nativeElement);
-        }
-        this.peopleDialog.nativeElement.showModal();
-    }
-
-    public closePeopleDialog(): void {
-        if (this.peopleDialog) {
-            this.peopleDialog.nativeElement.close();
-        }
-    }
-
-    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);
     }