[ADF-1435] Info drawer (#2249)

* First version of adf-info-drawer with design make-ups for task details page

* Moving tabbing functionality into adf-info-drawer

* Update documentation

ng2-components/ng2-activiti-tasklist/index.ts

@@ -18,7 +18,7 @@
 import { DatePipe } from '@angular/common';
 import { ModuleWithProviders, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { MdAutocompleteModule, MdButtonModule, MdCardModule, MdDatepickerModule, MdGridListModule,
-    MdIconModule, MdInputModule, MdNativeDateModule, MdProgressSpinnerModule, MdSelectModule } from '@angular/material';
+    MdIconModule, MdInputModule, MdNativeDateModule, MdProgressSpinnerModule, MdSelectModule, MdRippleModule } from '@angular/material';
 import { ActivitiFormModule } from 'ng2-activiti-form';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
@@ -163,7 +163,8 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
         MdNativeDateModule,
         MdSelectModule,
         MdAutocompleteModule,
-        MdGridListModule
+        MdGridListModule,
+        MdRippleModule
     ],
     declarations: [
         ...ACTIVITI_TASKLIST_DIRECTIVES

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

@@ -1,40 +0,0 @@
-:host {
-    width: 100%;
-}
-
-.error-dialog h3 {
-    margin: 16px 0;
-}
-
-.activiti-task-details__header {
-    align-self: flex-end;
-    display: flex;
-    font-size: 24px;
-    font-weight: 300;
-    line-height: normal;
-    overflow: hidden;
-    margin: 0 0 8px 0;
-    cursor: pointer;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-}
-
-.activiti-task-details__action-button {
-    text-transform: uppercase;
-}
-
-adf-people >>> .assignment-top-container{
-    background-color: #fff;
-}
-
-.assignment-container {
-    background: #fff;
-    border: 1px solid #e1e1e1;
-    padding: 10px 20px;
-}
-
-adf-task-header.assign-edit-view >>> adf-card-view >>> .adf-property[data-automation-id="header-assignee"] {
-    display: none;
-}

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

@@ -6,68 +6,105 @@
         {{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
     </div>
 </div>
-<div *ngIf="taskDetails">
-    <div *ngIf="showHeader">
+<div *ngIf="taskDetails" class="adf-task-details">
+
+    <div *ngIf="showHeader" class="adf-task-details-header">
         <h2 class="activiti-task-details__header" (click)="toggleHeaderContent()">
-            <md-icon *ngIf="!showHeaderContent">expand_more</md-icon>
-            <md-icon *ngIf="showHeaderContent">expand_less</md-icon>
             <span>{{taskDetails.name || 'No name'}}</span>
         </h2>
-        <div class="assignment-container" *ngIf="showAssignee">
-            <adf-people-search
-            (searchPeople)="searchUser($event)"
-            (success)="assignTaskToUser($event)"
-            (closeSearch)="onCloseSearch()"
-            [results]="peopleSearch$">
-                <header-title>{{ 'TASK_DETAILS.LABELS.ADD_ASSIGNEE' | translate }}</header-title>
-                <action-button-label>{{ 'PEOPLE.ADD_ASSIGNEE' | translate }}</action-button-label>
-            </adf-people-search>
+        <div md-ripple [mdRippleUnbounded]="true" [mdRippleCentered]="true" class="adf-task-details-header-toggle">
+            <md-icon *ngIf="!showHeaderContent" (click)="toggleHeaderContent()">web</md-icon>
+            <md-icon *ngIf="showHeaderContent" (click)="toggleHeaderContent()">web_asset</md-icon>
         </div>
-        <adf-task-header *ngIf="showHeaderContent"
-            [class]="getTaskHeaderViewClass()"
-            [taskDetails]="taskDetails"
-            [formName]="taskFormName"
-            (claim)="onClaimTask($event)">
-        </adf-task-header>
-        <div *ngIf="showHeaderContent" class="mdl-grid">
-            <div *ngIf="showChecklist" class="mdl-cell mdl-cell--4-col">
-                <adf-checklist #activitichecklist
-                    [readOnly]="readOnlyForm"
+    </div>
+
+    <div class="adf-task-details-core">
+        <div class="adf-task-details-core-form">
+            <div *ngIf="isAssigned()">
+                <adf-form *ngIf="hasFormKey()" #activitiForm
+                    [showDebugButton]="debugMode"
                     [taskId]="taskDetails.id"
-                    [assignee]="taskDetails?.assignee?.id"
-                    (checklistTaskCreated)="onChecklistTaskCreated($event)"
-                    (checklistTaskDeleted)="onChecklistTaskDeleted($event)">
-                </adf-checklist>
+                    [showTitle]="showFormTitle"
+                    [showRefreshButton]="showFormRefreshButton"
+                    [showCompleteButton]="showFormCompleteButton"
+                    [disableCompleteButton]="!isAssignedToMe()"
+                    [showSaveButton]="showFormSaveButton"
+                    [readOnly]="readOnlyForm"
+                    [fieldValidators]="fieldValidators"
+                    (formSaved)='onFormSaved($event)'
+                    (formCompleted)='onFormCompleted($event)'
+                    (formContentClicked)='onFormContentClick($event)'
+                    (formLoaded)='onFormLoaded($event)'
+                    (onError)='onFormError($event)'
+                    (executeOutcome)='onFormExecuteOutcome($event)'>
+                    <div empty-form ><h3 class="adf-task-title">Please select a Task</h3></div>
+                </adf-form>
+            </div>
+            <div *ngIf="!isAssigned()">
+                {{ 'TASK_DETAILS.MESSAGES.CLAIM' | translate }}
+            </div>
+            <button md-raised-button class="activiti-task-details__action-button" *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">
+                    {{ 'TASK_DETAILS.BUTTON.COMPLETE' | translate }}
+            </button>
+        </div>
+        <div class="adf-task-details-core-sidebar">
+            <adf-info-drawer *ngIf="showHeaderContent" title="Activities" class="adf-task-details-core-sidebar-drawer">
+
+                <div info-drawer-buttons>
+                    <md-icon (click)="toggleHeaderContent()">clear</md-icon>
+                </div>
+
+                <adf-info-drawer-tab label="Activity">
+                    <div class="assignment-container" *ngIf="showAssignee">
+                        <adf-people-search
+                        (searchPeople)="searchUser($event)"
+                        (success)="assignTaskToUser($event)"
+                        (closeSearch)="onCloseSearch()"
+                        [results]="peopleSearch$">
+                            <header-title>{{ 'TASK_DETAILS.LABELS.ADD_ASSIGNEE' | translate }}</header-title>
+                            <action-button-label>{{ 'PEOPLE.ADD_ASSIGNEE' | translate }}</action-button-label>
+                        </adf-people-search>
+                    </div>
+                    <adf-task-header
+                        [class]="getTaskHeaderViewClass()"
+                        [taskDetails]="taskDetails"
+                        [formName]="taskFormName"
+                        (claim)="onClaimTask($event)">
+                    </adf-task-header>
+                    <adf-people *ngIf="showInvolvePeople" #people
+                        [iconImageUrl]="peopleIconImageUrl"
+                        [people]="taskPeople"
+                        [readOnly]="readOnlyForm"
+                        [taskId]="taskDetails.id">
+                    </adf-people>
+                </adf-info-drawer-tab>
+
+                <adf-info-drawer-tab label="Details">
+                    <md-card *ngIf="showComments">
+                        <md-card-content>
+                            <adf-comments #activiticomments
+                                [readOnly]="readOnlyForm"
+                                [taskId]="taskDetails.id">
+                            </adf-comments>
+                            </md-card-content>
+                    </md-card>
+                </adf-info-drawer-tab>
+
+            </adf-info-drawer>
+
+            <div *ngIf="showHeaderContent" class="adf-task-details-core-sidebar-checklist">
+                <div *ngIf="showChecklist">
+                    <adf-checklist #activitichecklist
+                        [readOnly]="readOnlyForm"
+                        [taskId]="taskDetails.id"
+                        [assignee]="taskDetails?.assignee?.id"
+                        (checklistTaskCreated)="onChecklistTaskCreated($event)"
+                        (checklistTaskDeleted)="onChecklistTaskDeleted($event)">
+                    </adf-checklist>
+                </div>
             </div>
         </div>
     </div>
-    <div *ngIf="isAssigned()">
-        <adf-form *ngIf="hasFormKey()" #activitiForm
-            [showDebugButton]="debugMode"
-            [taskId]="taskDetails.id"
-            [showTitle]="showFormTitle"
-            [showRefreshButton]="showFormRefreshButton"
-            [showCompleteButton]="showFormCompleteButton"
-            [disableCompleteButton]="!isAssignedToMe()"
-            [showSaveButton]="showFormSaveButton"
-            [readOnly]="readOnlyForm"
-            [fieldValidators]="fieldValidators"
-            (formSaved)='onFormSaved($event)'
-            (formCompleted)='onFormCompleted($event)'
-            (formContentClicked)='onFormContentClick($event)'
-            (formLoaded)='onFormLoaded($event)'
-            (onError)='onFormError($event)'
-            (executeOutcome)='onFormExecuteOutcome($event)'>
-            <div empty-form ><h3 class="adf-task-title">Please select a Task</h3></div>
-
-        </adf-form>
-    </div>
-    <div *ngIf="!isAssigned()">
-        {{ 'TASK_DETAILS.MESSAGES.CLAIM' | translate }}
-    </div>
-    <button md-raised-button class="activiti-task-details__action-button" *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">
-        {{ 'TASK_DETAILS.BUTTON.COMPLETE' | translate }}
-    </button>
     <dialog class="mdl-dialog error-dialog" #errorDialog>
         <div class="mdl-dialog__content">
             <h3>{{'TASK_DETAILS.ERROR.TITLE'|translate}}</h3>
@@ -75,20 +112,4 @@
             <button type="button" class="mdl-button" (click)="closeErrorDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
         </div>
     </dialog>
-    <br /><br />
-    <adf-people *ngIf="showInvolvePeople" #people
-                [iconImageUrl]="peopleIconImageUrl"
-                [people]="taskPeople"
-                [readOnly]="readOnlyForm"
-                [taskId]="taskDetails.id">
-    </adf-people>
-    <br />
-    <md-card *ngIf="showComments">
-        <md-card-content>
-            <adf-comments #activiticomments
-                [readOnly]="readOnlyForm"
-                [taskId]="taskDetails.id">
-            </adf-comments>
-         </md-card-content>
-    </md-card>
 </div>

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

@@ -0,0 +1,134 @@
+:host {
+    width: 100%;
+}
+
+.error-dialog h3 {
+    margin: 16px 0;
+}
+
+.activiti-task-details__header {
+    align-self: flex-end;
+    display: flex;
+    font-size: 24px;
+    font-weight: 300;
+    line-height: normal;
+    overflow: hidden;
+    margin: 8px 0 16px 0;
+    cursor: pointer;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
+.activiti-task-details__action-button {
+    text-transform: uppercase;
+}
+
+adf-people >>> .assignment-top-container{
+    background-color: #fff;
+}
+
+.assignment-container {
+    background: #fff;
+    border: 1px solid #e1e1e1;
+    padding: 10px 20px;
+    width: auto;
+}
+
+adf-task-header.assign-edit-view /deep/ adf-card-view /deep/ .adf-property[data-automation-id="header-assignee"] {
+    display: none;
+}
+
+.adf-task-details {
+    &-header {
+        display: flex;
+        justify-content: space-between;
+
+        &-toggle {
+            position: relative;
+            top: 10px;
+            margin-right: 2px;
+            height: 23px;
+            cursor: pointer;
+            user-select: none;
+            -moz-user-select: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+        }
+    }
+
+    &-core {
+        display: flex;
+        justify-content: space-between;
+
+        &-sidebar {
+            &-drawer {
+                margin-left: 10px;
+            }
+
+            &-checklist {
+                margin-top: 30px;
+                padding-left: 20px;
+                padding-right: 20px;
+
+                & /deep/ #checklist-none-message {
+                    margin-top: 10px;
+                    color: rgba(0, 0, 0, .5);
+                }
+
+                & /deep/ .activiti-label.mdl-badge[data-badge]:after {
+                    margin-top: 9px;
+                    right: -29px;
+                }
+
+                & /deep/ .activiti-label.mdl-badge[data-badge] + div.icon {
+                    float: right;
+                }
+
+                & /deep/ .menu-container li.mdl-list {
+                    padding: 0;
+                }
+
+                & /deep/ .menu-container li.mdl-list__item {
+                    padding: 0;
+                    min-height: auto;
+
+                    .mdl-chip {
+                        width: 100%;
+
+                        button {
+                            float: right;
+                            position: relative;
+                            top: 4px;
+                        }
+                    }
+                }
+            }
+        }
+
+        &-form {
+            flex-grow: 1;
+
+            & /deep/ .adf-form-debug-container {
+                padding: 20px 0 0 0;
+
+                .mat-slide-toggle {
+                    float: right;
+
+                    & + div {
+                        background-color: black;
+                        padding: 20px;
+                        clear: both;
+                        margin-top: 30px;
+                        color: white;
+                    }
+                }
+            }
+
+            & /deep/ .mat-tab-label {
+                flex-grow: 1;
+            }
+        }
+    }
+}

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

@@ -40,7 +40,7 @@ declare var require: any;
 @Component({
     selector: 'adf-task-details, activiti-task-details',
     templateUrl: './task-details.component.html',
-    styleUrls: ['./task-details.component.css'],
+    styleUrls: ['./task-details.component.scss'],
     providers: [
         CardViewUpdateService
     ]