[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

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

@@ -34,3 +34,73 @@
     background: #fff;
     text-align: left;
 }
+
+.activiti-demo-grid {
+    display: flex;
+}
+
+.activiti-demo-grid-item {
+    margin: 8px;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+    background-color: #f5f5f5;
+    padding: 10px 10px 10px 10px;
+}
+
+.activiti-demo-list-buttons {
+    margin-bottom: 24px;
+}
+
+.activiti-demo-list-buttons-start {
+    width: 100%;
+}
+
+.activiti-demo-tasks-menu {
+    min-width: 170px;
+}
+
+.activiti-demo-tasks-list {
+    min-width: 300px;
+    padding: 0;
+}
+
+.activiti-demo-tasks-details,
+.activiti-demo-tasks-start {
+    flex-grow: 1;
+    min-width: 730px;
+}
+
+.activiti-demo-tasks-menu >>> .mat-list .mat-list-item .mat-list-item-content {
+    height: 32px;
+    cursor: pointer;
+    padding: 0 16px 0 24px;
+}
+
+.activiti-demo-tasks-menu >>> .adf-panel-heading {
+    margin-bottom: 10px;
+}
+
+.activiti-demo-tasks-list >>> .adf-data-table {
+    border: none;
+}
+
+.activiti-demo-tasks-list >>> .adf-data-table tr,
+.activiti-demo-tasks-list >>> .adf-data-table td {
+    height: 36px;
+    font-size: 14px;
+}
+
+.activiti-demo-tasks-list >>> .adf-data-table td {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.activiti-demo-tasks-list >>> .adf-data-table th {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 40px;
+    color: rgb(0,0,0);
+    vertical-align: middle;
+    font-size: 14px;
+    background-color: rgba(0,0,0,.05);
+}

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

@@ -1,10 +1,10 @@
 <md-tab-group>
     <md-tab id="tasks-header" href="#tasks" (click)="activeTab = 'tasks'" label="{{'PS-TAB.TASKS-TAB' | translate}}">
         <div class="page-content">
-            <div class="mdl-grid">
+            <div class="activiti-demo-grid">
-                <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
+                <div class="activiti-demo-grid-item activiti-demo-tasks-menu">
-                    <div class="list-buttons">
+                    <div class="activiti-demo-list-buttons">
-                        <button md-raised-button data-automation-id="btn-start-task" (click)="navigateStartTask()">
+                        <button color="primary" md-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
                             <md-icon>add</md-icon>
                             <span>{{'PS-TAB.START-TASK' | translate}}</span>
                         </button>
@@ -23,7 +23,7 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp"
+                <div class="activiti-demo-grid-item activiti-demo-tasks-list"
                      *ngIf="taskFilter && !isStartTaskMode()">
                     <activiti-tasklist
                         [appId]="taskFilter?.appId"
@@ -48,7 +48,7 @@
                         -->
                     </activiti-tasklist>
                 </div>
-                <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp" *ngIf="!isStartTaskMode()"
+                <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()"
                      [class.mdl-cell--7-col]="taskFilter && !isStartTaskMode()"
                      [class.mdl-cell--10-col]="!taskFilter || isStartTaskMode()">
                     <activiti-task-details #activitidetails
@@ -81,7 +81,7 @@
                         </md-card-content>
                     </md-card>
                 </div>
-                <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartTaskMode()">
+                <div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()">
                     <adf-start-task
                         [appId]="appId"
                         (success)="onStartTaskSuccess($event)"

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="taskDetails" class="adf-task-details">
-    <div *ngIf="showHeader">
+
+    <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">
+        <div md-ripple [mdRippleUnbounded]="true" [mdRippleCentered]="true" class="adf-task-details-header-toggle">
-            <adf-people-search
+            <md-icon *ngIf="!showHeaderContent" (click)="toggleHeaderContent()">web</md-icon>
-            (searchPeople)="searchUser($event)"
+            <md-icon *ngIf="showHeaderContent" (click)="toggleHeaderContent()">web_asset</md-icon>
-            (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 *ngIf="showHeaderContent"
+    </div>
-            [class]="getTaskHeaderViewClass()"
+
-            [taskDetails]="taskDetails"
+    <div class="adf-task-details-core">
-            [formName]="taskFormName"
+        <div class="adf-task-details-core-form">
-            (claim)="onClaimTask($event)">
+            <div *ngIf="isAssigned()">
-        </adf-task-header>
+                <adf-form *ngIf="hasFormKey()" #activitiForm
-        <div *ngIf="showHeaderContent" class="mdl-grid">
+                    [showDebugButton]="debugMode"
-            <div *ngIf="showChecklist" class="mdl-cell mdl-cell--4-col">
-                <adf-checklist #activitichecklist
-                    [readOnly]="readOnlyForm"
                     [taskId]="taskDetails.id"
-                    [assignee]="taskDetails?.assignee?.id"
+                    [showTitle]="showFormTitle"
-                    (checklistTaskCreated)="onChecklistTaskCreated($event)"
+                    [showRefreshButton]="showFormRefreshButton"
-                    (checklistTaskDeleted)="onChecklistTaskDeleted($event)">
+                    [showCompleteButton]="showFormCompleteButton"
-                </adf-checklist>
+                    [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
     ]

ng2-components/ng2-alfresco-core/index.ts

@@ -111,6 +111,13 @@ export { DiscoveryApiService } from './src/services/discovery-api.service';
 
 import { DataColumnListComponent } from './src/components/data-column/data-column-list.component';
 import { DataColumnComponent } from './src/components/data-column/data-column.component';
+import {
+    InfoDrawerButtonsDirective,
+    InfoDrawerContentDirective,
+    InfoDrawerLayoutComponent,
+    InfoDrawerTitleDirective
+} from './src/components/info-drawer/info-drawer-layout.component';
+import { InfoDrawerComponent, InfoDrawerTabComponent } from './src/components/info-drawer/info-drawer.component';
 import { NodePermissionDirective } from './src/directives/node-permission.directive';
 import { UploadDirective } from './src/directives/upload.directive';
 
@@ -131,6 +138,7 @@ export { EXTENDIBLE_COMPONENT } from './src/interface/injection.tokens';
 
 export * from './src/components/data-column/data-column.component';
 export * from './src/components/data-column/data-column-list.component';
+export * from './src/components/info-drawer/info-drawer.component';
 export * from './src/directives/upload.directive';
 export * from './src/directives/highlight.directive';
 export * from './src/directives/node-permission.directive';
@@ -237,6 +245,12 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         HighlightDirective,
         DataColumnComponent,
         DataColumnListComponent,
+        InfoDrawerComponent,
+        InfoDrawerTabComponent,
+        InfoDrawerLayoutComponent,
+        InfoDrawerTitleDirective,
+        InfoDrawerButtonsDirective,
+        InfoDrawerContentDirective,
         FileSizePipe,
         HighlightPipe,
         TimeAgoPipe,
@@ -279,7 +293,13 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         HighlightPipe,
         TimeAgoPipe,
         CreateFolderDialogComponent,
-        DownloadZipDialogComponent
+        DownloadZipDialogComponent,
+        InfoDrawerComponent,
+        InfoDrawerTabComponent,
+        InfoDrawerLayoutComponent,
+        InfoDrawerTitleDirective,
+        InfoDrawerButtonsDirective,
+        InfoDrawerContentDirective
     ],
     entryComponents: [
         CreateFolderDialogComponent,

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.html

@@ -0,0 +1,11 @@
+<div class="adf-info-drawer-layout-header">
+    <div class="adf-info-drawer-layout-header-title">
+        <ng-content select="[info-drawer-title]"></ng-content>
+    </div>
+    <div class="adf-info-drawer-layout-header-buttons">
+        <ng-content select="[info-drawer-buttons]"></ng-content>
+    </div>
+</div>
+<div class="adf-info-drawer-layout-content">
+    <ng-content select="[info-drawer-content]"></ng-content>
+</div>

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss

@@ -0,0 +1,35 @@
+.adf {
+    &-info-drawer-layout {
+        width: 350px;
+        display: block;
+        padding: 8px 0;
+        background-color: #FAFAFA;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
+
+        &-header {
+            padding: 8px 24px 24px 24px;
+            display: flex;
+            justify-content: space-between;
+            font-size: 20px;
+
+            &-buttons {
+                md-icon {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        &-content {
+            padding: 10px;
+
+            > * {
+                margin-bottom: 20px;
+                display: block;
+            }
+
+            > *:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.ts

@@ -0,0 +1,31 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Directive, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-info-drawer-layout',
+    templateUrl: './info-drawer-layout.component.html',
+    styleUrls: ['./info-drawer-layout.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-info-drawer-layout' }
+})
+export class InfoDrawerLayoutComponent {}
+
+@Directive({ selector: '[info-drawer-title]' }) export class InfoDrawerTitleDirective {}
+@Directive({ selector: '[info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
+@Directive({ selector: '[info-drawer-content]' }) export class InfoDrawerContentDirective {}

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html

@@ -0,0 +1,22 @@
+<adf-info-drawer-layout>
+    <div *ngIf="title" info-drawer-title>Activities</div>
+    <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
+
+    <ng-content info-drawer-buttons select="[info-drawer-buttons]"></ng-content>
+
+    <ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>
+
+    <ng-template #tabLayout>
+        <md-tab-group class="adf-info-drawer-tabs">
+            <ng-container *ngFor="let contentBlock of contentBlocks">
+                <md-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
+                    <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
+                </md-tab>
+            </ng-container>
+        </md-tab-group>
+    </ng-template>
+
+    <ng-template #singleLayout>
+        <ng-content select="[info-drawer-content]"></ng-content>
+    </ng-template>
+</adf-info-drawer-layout>

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.scss

@@ -0,0 +1,48 @@
+.adf {
+    &-info-drawer {
+        display: block;
+
+        & &-layout {
+
+            &-content {
+                padding: 0;
+
+                & > :not(.adf-info-drawer-tabs) {
+                    padding: 10px;
+
+                    > * {
+                        margin-bottom: 20px;
+                        display: block;
+                    }
+                }
+
+                .adf-info-drawer-tabs {
+                    & .mat-tab-body-content > * {
+                        margin-bottom: 20px;
+                        display: block;
+                    }
+
+                    & .mat-tab-body-content > *:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    .mat-tab-label {
+                        flex-grow: 1;
+                    }
+
+                    .mat-ink-bar {
+                        height: 4px;
+                    }
+
+                    .mat-tab-body {
+                        padding: 10px;
+                    }
+
+                    .mat-tab-body-content {
+                        overflow: initial;
+                    }
+                }
+            }
+        }
+    }
+}

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts

@@ -0,0 +1,45 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ContentChildren, Input, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+@Component({
+    selector: 'adf-info-drawer-tab',
+    template: '<ng-template><ng-content></ng-content></ng-template>'
+})
+export class InfoDrawerTabComponent {
+    @Input('label') label: string = 'Main tab';
+    @ViewChild(TemplateRef) content: TemplateRef<any>;
+}
+
+@Component({
+    selector: 'adf-info-drawer',
+    templateUrl: './info-drawer.component.html',
+    styleUrls: ['./info-drawer.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-info-drawer' }
+})
+export class InfoDrawerComponent {
+    @Input()
+    title: string|null = null;
+
+    @ContentChildren(InfoDrawerTabComponent)
+    contentBlocks: QueryList<InfoDrawerTabComponent>;
+
+    showTabLayout(): boolean {
+        return this.contentBlocks.length > 0;
+    }
+}

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md

@@ -0,0 +1,83 @@
+# Info Drawer component(s)
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [InfoDrawerLayoutComponent](#infodrawerlayoutcomponent)
+  * [Example](#example)
+- [InfoDrawerComponent](#infodrawercomponent)
+  * [Properties](#properties)
+  * [Example](#example-1)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+The **Info Drawer components** helps you manage your layout when you want a *(tabbable)* sidebar-like design, what you can see below.
+
+![adf-custom-view](../../../docs/assets/activities-infodrawer.png)
+
+There are 2 different kind of components what you can choose from:
+
+- InfoDrawerLayoutComponent
+- InfoDrawerComponent
+
+## InfoDrawerLayoutComponent
+
+The InfoDrawerLayoutComponent (as the name says) is basically just a layout with css applied on it. In this layout you have 3 regions you can transclude content into:
+
+- info-drawer-title
+- info-drawer-buttons
+- info-drawer-content
+
+![adf-custom-view](../../../docs/assets/infodrawerlayout.png)
+
+### Example
+
+```html
+<adf-info-drawer-layout>
+        <div info-drawer-title>File info</div>
+
+        <div info-drawer-buttons>
+            <md-icon>clear</md-icon>
+        </div>
+
+        <div info-drawer-content>
+            <md-card>
+                Lorem ipsum dolor sit amet...
+            </md-card>
+        </div>
+</adf-info-drawer-layout>
+```
+
+## InfoDrawerComponent
+
+The InfoDrawerComponent is on top of the InfoDrawerLayoutComponent. This version of the info drawer is supposed to be used if you need tabbing behaviour. Additionally you can set a title (if it only contains a string) with the **title** input property.
+This component has the same 3 regions as described above, but if you want to leverage the tabbing functionality, you have to use the **adf-info-drawer-tab** component to organize your content. The only input paramter of the adf-info-drawer-tab component is the **"label"**, with you can specify the tab label with.
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | string | null | The title of the info drawer component|
+
+### Example
+
+```html
+<adf-info-drawer title="Activities">
+    <div info-drawer-buttons>
+        <md-icon (click)="close()">clear</md-icon>
+    </div>
+
+    <adf-info-drawer-tab label="Activity">
+        <mycomponent1></mycomponent1>
+        <mycomponent2></mycomponent2>
+    </adf-info-drawer-tab>
+
+    <adf-info-drawer-tab label="Details">
+        <mycomponent3></mycomponent3>
+    </adf-info-drawer-tab>
+
+</adf-info-drawer>
+```

ng2-components/ng2-alfresco-core/src/material.module.ts

@@ -22,6 +22,7 @@ import {
     MdInputModule,
     MdProgressBarModule,
     MdSnackBarModule,
+    MdTabsModule,
     MdToolbarModule
 } from '@angular/material';
 
@@ -32,7 +33,8 @@ export function modules() {
         MdInputModule,
         MdProgressBarModule,
         MdSnackBarModule,
-        MdToolbarModule
+        MdToolbarModule,
+        MdTabsModule
     ];
 }