Use the activiti people with the new look and feel inside the demo shell (#2008)

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

@@ -24,3 +24,10 @@
 .activiti-task-details__action-button {
     text-transform: uppercase;
 }
+
+.people-dialog {
+    position: fixed;
+    top: 50%;
+    transform: translate(0, -50%);
+    width: 40%;
+}

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

@@ -20,12 +20,7 @@
         </activiti-task-header>
         <div *ngIf="showHeaderContent" class="mdl-grid">
             <div *ngIf="showInvolvePeople" class="mdl-cell mdl-cell--4-col">
-                <activiti-people
+                <button type="button" md-button md-raised-button (click)="showPeopleDialog()">{{'TASK_DETAILS.LABELS.INVOLVED_PEOPLE'|translate}}</button>
-                    [iconImageUrl]="peopleIconImageUrl"
-                    [people]="taskPeople"
-                    [readOnly]="readOnlyForm"
-                    [taskId]="taskDetails.id">
-                </activiti-people>
             </div>
             <div *ngIf="showComments" class="mdl-cell mdl-cell--4-col">
                 <activiti-comments #activiticomments
@@ -74,4 +69,16 @@
             <button type="button" class="mdl-button" (click)="closeErrorDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
         </div>
     </dialog>
+    <dialog class="mdl-dialog people-dialog" #dialogPeople>
+        <div class="mdl-dialog__content">
+            <activiti-people
+                        [iconImageUrl]="peopleIconImageUrl"
+                        [people]="taskPeople"
+                        [readOnly]="readOnlyForm"
+                        [taskId]="taskDetails.id">
+            </activiti-people>
+            <br><br>
+            <button type="button" md-button md-raised-button (click)="closePeopleDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
+        </div>
+    </dialog>
 </div>

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

@@ -35,6 +35,7 @@ import { FormService, FormModel, FormOutcomeEvent, ContentLinkModel } from 'ng2-
 import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 
 declare var require: any;
+declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-task-details',
@@ -52,6 +53,9 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
     @ViewChild('errorDialog')
     errorDialog: DebugElement;
 
+    @ViewChild('dialogPeople')
+    peopleDialog: any;
+
     @Input()
     debugMode: boolean = false;
 
@@ -289,6 +293,19 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
         this.errorDialog.nativeElement.close();
     }
 
+    public showPeopleDialog() {
+        if (!this.peopleDialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(this.peopleDialog.nativeElement);
+        }
+        this.peopleDialog.nativeElement.showModal();
+    }
+
+    public closePeopleDialog() {
+        if (this.peopleDialog) {
+            this.peopleDialog.nativeElement.close();
+        }
+    }
+
     onClaimTask(taskId: string) {
         this.loadDetails(taskId);
     }