[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
2025-07-24 17:32:15 +00:00 · 2017-08-25 16:28:41 +01:00
parent e199d0cb6d
commit e852856a24
18 changed files with 605 additions and 122 deletions
--- a/ng2-components/ng2-activiti-tasklist/index.ts
+++ b/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
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.css
+++ b/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;
-}
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html
+++ b/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>
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.scss
+++ b/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;
+            }
+        }
+    }
+}
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.ts
+++ b/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
    ]
--- a/ng2-components/ng2-alfresco-core/docs/assets/activities-infodrawer.png
+++ b/ng2-components/ng2-alfresco-core/docs/assets/activities-infodrawer.png
--- a/ng2-components/ng2-alfresco-core/docs/assets/infodrawerlayout.png
+++ b/ng2-components/ng2-alfresco-core/docs/assets/infodrawerlayout.png
--- a/ng2-components/ng2-alfresco-core/index.ts
+++ b/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,
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.html
+++ b/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>
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss
+++ b/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;
+            }
+        }
+    }
+}
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.ts
+++ b/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 {}
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html
+++ b/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>
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.scss
+++ b/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;
+                    }
+                }
+            }
+        }
+    }
+}
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts
+++ b/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;
+    }
+}
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md
+++ b/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>
+```
--- a/ng2-components/ng2-alfresco-core/src/material.module.ts
+++ b/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
    ];
 }