[ADF-1237] removed material design lite from userinfo component (#2238)

* [ADF-1083] removing material design lite from userinfo component

* [ADF-1237] - styled userinfo component]

* [ADF-1237] removed material design lite from userinfo component

* [ADF-1237] updated readme with the two new options

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

@@ -1,7 +1,8 @@
 <md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
     <ng2-alfresco-userinfo
         class="user-profile"
-        [menuOpenType]="left">
+        [menuPositionX]="'before'"
+        [menuPositionY]="'above'">
     </ng2-alfresco-userinfo>
 
     <span>ADF Demo Application</span>

ng2-components/ng2-alfresco-core/styles/_all-theme.scss

@@ -33,6 +33,8 @@
 @import '../../ng2-alfresco-core/styles/theme-colors';
 
 @import '../../ng2-alfresco-datatable/src/components/datatable/datatable.component.scss';
+@import '../../ng2-alfresco-userinfo/src/components/user-info.component.scss';
+
 
 @mixin alfresco-material-theme($theme) {
     @include mat-colors-theme($theme);
@@ -61,4 +63,5 @@
     @include mat-breadcrumb-dropdown-theme($theme);
     @include mat-datatable-theme($theme);
     @include mat-content-node-selector-theme($theme);
+    @include mat-userinfo-theme($theme);
 }

ng2-components/ng2-alfresco-userinfo/README.md

@@ -42,7 +42,8 @@ npm install ng2-alfresco-userinfo
 | --- | --- | --- | --- |
 | ecmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for ECM users |
 | bpmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for BPM users |
-| menuOpenType | string | right  | Custom choice for opening the menu bottom : `right` or `left`  |
+| menuPositionX | string |   | Custom choice for opening the menu bottom : `before` or `after`  |
+| menuPositionY | string |   | Custom choice for opening the menu bottom : `above` or `below`  |
 | fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thumbnail is missing|
 
 This will show a round icon with user and on click some user information.

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

@@ -17,6 +17,7 @@
 
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
+import { MaterialModule } from './src/material.module';
 
 import { UserInfoComponent } from './src/components/user-info.component';
 import { BpmUserService } from './src/services/bpm-user.service';
@@ -37,7 +38,8 @@ export const USER_INFO_PROVIDERS: any[] = [
 
 @NgModule({
     imports: [
-        CoreModule
+        CoreModule,
+        MaterialModule
     ],
     declarations: [
         ...USER_INFO_DIRECTIVES

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css

@@ -1,86 +0,0 @@
-.profile-image {
-  text-align: center;
-  border-radius: 90%;
-  width: 40px;
-  height: 40px;
-  margin-right: 0%;
-  cursor: pointer;
-  border: 1px solid #999999;
-  vertical-align: middle;
-  background-color:white;;
-}
-
-.button-profile {
-  display: inline-block;
-  border: 0px;
-  vertical-align: middle;
-}
-
-.detail-user-profile-list-mdl{
-    padding: 0px 0;
-}
-
-@media only screen
-and (min-device-width: 480px) {
-    .user-profile-list-mdl{
-        max-height: 450px;
-        min-width: 450px;
-        overflow: auto;
-        padding:0px;
-    }
-}
-
-.header-profile{
-    color: rgb(255,152,0);
-    margin-left: 10px;
-}
-
-hr.title-start {
-    border: 0;
-    height: 1px;
-    background: #333;
-    background-image: linear-gradient(to right, #ccc, #333, #ccc);
-}
-
-span.role-label-user{
-    font-weight: 400;
-    line-height: 1;
-    letter-spacing: 0;
-    color: rgba(0,0,0,.87);
-}
-
-.truncate-long-names{
-    text-overflow: ellipsis;
-}
-.demo-card-wide.mdl-card {
-    width: inherit;
-}
-.demo-card-wide > .mdl-card__title {
-    color: #fff;
-    height: 176px;
-}
-.demo-card-wide > .mdl-card__menu {
-    color: #fff;
-}
-
-.card-title__option{
-    height: 100px!important;
-}
-
-img.profile-picture {
-    background-color: white;
-    background-size: cover;
-    border-radius: 50%;
-    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px rgba(0,0,0,0.3);
-    height: 80px;
-    width: 80px;
-    z-index: 3;
-    margin-left: 0px;
-    margin-right: 8px;
-}
-
-.user-info__job-title {
-    align-items: flex-start;
-    font-size: 14px;
-    color: #9e9e9e;
-}

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html

@@ -1,79 +1,66 @@
 <div id="userinfo_container" *ngIf="isLoggedIn()">
-    <div *ngIf="ecmUser || bpmUser">
+    <button md-button [mdMenuTriggerFor]="menu" class="adf-userinfo-menu_button">
-        <div class="button-profile" id="user-profile" data-automation-id="user-profile">
+    <div class="adf-userinfo-button-profile" id="user-profile" data-automation-id="user-profile">
-            <img id="logged-user-img"
+        <img id="logged-user-img" [src]="getUserAvatar()"
-                 [src]="getUserAvatar()"
              alt="user-info-profile-button"
-                 (error)="onImageLoadingError($event)"
+             (error)="onImageLoadingError($event)" class="adf-userinfo-profile-image"/>
-                 class="profile-image"/>
     </div>
-        <div mdl id="user-profile-lists" class="user-profile-list-mdl mdl-menu mdl-js-menu mdl-js-ripple-effect"
+</button>
-             [class.mdl-menu--bottom-left]="menuOpenType === 'left'"
+    <md-menu #menu="mdMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu">
-             [class.mdl-menu--bottom-right]="menuOpenType === 'right'"
+        <md-tab-group id="tab-group-env" (click)="stopClosing($event)"
-             for="user-profile" (click)="stopClosing($event)">
+            class="adf-userinfo-tab" [class.adf-hide-tab]="!bpmUser || !ecmUser">
-            <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
+            <md-tab id="ecm-panel" label="Content Services" *ngIf="ecmUser">
-                <div id="tab-bar-env" class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
+                <md-card class="adf-userinfo-card">
-                    <a href="#ecm-panel" id="ecm-tab" class="mdl-tabs__tab is-active">Content Services</a>
+                    <md-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
-                    <a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">Process Services</a>
+                        <img class="adf-userinfo-profile-picture"
-                </div>
-                <div class="mdl-tabs__panel" [class.is-active]="ecmUser" id="ecm-panel">
-                    <div class="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
-                        <div class="demo-card-wide mdl-card">
-                            <div class="card-title__option mdl-card__title"
-                                 id="ecm-background-image"
-                                 [style.background-image]="'url(' + ecmBackgroundImage + ')'">
-                                <img class="profile-picture"
                             id="ecm-user-detail-image"
                             alt="ecm-profile-image"
                             (error)="onImageLoadingError($event)"
-                                     [src]="getEcmUserAvatar()"/>
+                            [src]="getEcmUserAvatar()" />
-                                <h2 class="mdl-card__title-text" id="ecm-username">{{ecmUser.fullNameDisplay}}</h2>
+                       <h2 class="adf-userinfo-title" id="ecm-username">{{ecmUser.fullNameDisplay}}</h2>
+                    </md-card-header>
+                    <md-card-content>
+                        <div class="adf-userinfo-supporting-text">
+                                <div class="adf-userinfo-detail">
+                                    <span id="ecm-full-name" class="adf-userinfo__detail-title">{{ecmUser.fullNameDisplay}}</span>
+                                    <span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
                                 </div>
-                            <div class="mdl-card__supporting-text">
+                                <div class="adf-userinfo-detail">
-                                <li class="mdl-list__item mdl-list__item--two-line">
+                                    <span class="adf-userinfo__secondary-info">
-                                    <span class="mdl-list__item-primary-content">
+                                        {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
-                                        <span id="ecm-full-name" class="truncate-long-names">{{ecmUser.fullNameDisplay}}</span>
+                                        <span id="ecm-job-title" class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
-                                        <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
                                     </span>
-                                    <span id="ecm-job-title" class="mdl-list__item-secondary-content user-info__job-title">
-                                        <span class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
-                                        {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }}
-                                    </span>
-                                </li>
                                 </div>
                         </div>
-                    </div>
+                    </md-card-content>
-                </div>
+                </md-card>
-                <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser" id="bpm-panel">
+            </md-tab>
-                    <div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
+            <md-tab label="Process Services" id="bpm-panel" *ngIf="bpmUser">
-                        <div class="demo-card-wide mdl-card">
+            <md-card class="adf-userinfo-card">
-                            <div class="card-title__option mdl-card__title"
+                <md-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
-                                 id="bpm-background-image"
+                    <img class="adf-userinfo-profile-picture"
-                                 [style.background-image]="'url(' + bpmBackgroundImage + ')'">
-                                <img class="profile-picture"
                         id="bpm-user-detail-image"
                         alt="bpm-profile-image"
                         (error)="onImageLoadingError($event)"
                         [src]="getBpmUserAvatar()"/>
-                                <h2 class="mdl-card__title-text" id="bpm-username">{{bpmUser.fullNameDisplay}}</h2>
+                   <h2 class="adf-userinfo-title" id="bpm-username">{{bpmUser.fullNameDisplay}}</h2>
+                </md-card-header>
+                <md-card-content>
+                    <div class="adf-userinfo-supporting-text">
+                            <div class="adf-userinfo-detail">
+                                <span id="bpm-full-name" class="adf-userinfo__detail-title">{{ bpmUser.fullNameDisplay }}</span>
+                                <span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
                             </div>
-                            <div class="mdl-card__supporting-text">
+                            <div class="adf-userinfo-detail">
-                                <li class="mdl-list__item mdl-list__item--two-line">
+                                <span id="bpm-tenant" class="adf-userinfo__secondary-info">
-                                    <span class="mdl-list__item-primary-content">
+                                    {{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
-                                        <span id="bpm-full-name" class="truncate-long-names">{{ bpmUser.fullNameDisplay }}</span>
+                                    <span class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : 'N/A' }}</span>
-                                        <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
                                 </span>
-                                    <span id="bpm-tenant" class="mdl-list__item-secondary-content user-info__job-title">
-                                        <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
-                                        {{ bpmUser.tenantName }}
-                                    </span>
-                                </li>
                             </div>
                     </div>
-                    </div>
+                </md-card-content>
-                </div>
+            </md-card>
-            </div>
+            </md-tab>
-        </div>
+        </md-tab-group>
-
+    </md-menu>
-    </div>
 </div>

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.scss

@@ -0,0 +1,153 @@
+@mixin mat-userinfo-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+
+    .adf {
+
+        &-userinfo-profile-image {
+            text-align: center;
+            border-radius: 90%;
+            width: 40px;
+            height: 40px;
+            margin-right: 0%;
+            cursor: pointer;
+            vertical-align: middle;
+        }
+
+        &-userinfo-menu_button.mat-button {
+            margin-right: 0%;
+            border-radius: 90%;
+            padding: 0px;
+            min-width: 40px;
+            height: 40px;
+        }
+
+        &-userinfo-tab /deep/ .mat-tab-header {
+            align-self: center;
+            width: 100%;
+        }
+
+        &-userinfo-tab /deep/ .mat-tab-label {
+            flex: auto;
+            font-weight: 500;
+            font-size: 14px;
+            text-transform: uppercase;
+            line-height: 48px;
+            text-align: center;
+        }
+
+        &-userinfo-card-header {
+            align-items: center;
+            display: flex;
+            justify-content: stretch;
+            line-height: normal;
+            height: 100px;
+            box-sizing: border-box;
+        }
+
+        &-userinfo-card.mat-card {
+            padding: 0px;
+        }
+
+        &-userinfo-supporting-text {
+            font-size: 14px;
+            font-weight: 400;
+            letter-spacing: 0;
+            line-height: 18px;
+            display: block;
+            overflow: hidden;
+            padding: 32px;
+            -webkit-column-count: 2;
+            -moz-column-count: 2;
+            column-count: 2;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        &-userinfo-title {
+            font: 500 20px/32px Roboto,"Helvetica Neue",sans-serif;
+            margin: 0;
+            align-self: flex-end;
+            display: flex;
+            -webkit-align-self: flex-end;
+            overflow: hidden;
+            transform-origin: 149px 48px;
+            padding: 0;
+            -webkit-margin-before: 0.83em;
+            -webkit-margin-after: 0.83em;
+            -webkit-margin-start: 0px;
+            -webkit-margin-end: 0px;
+        }
+
+        &-userinfo__detail-profile {
+            align-items: flex-start;
+            font-size: 14px;
+            font-size: 14px;
+            font-weight: 400;
+            letter-spacing: 0;
+            line-height: 18px;
+            display: block;
+            padding: 0;
+            align-items: flex-start;
+            margin: 0px;
+            color: mat-color($primary, A100);
+        }
+
+        &-userinfo__detail-title {
+            text-overflow: ellipsis;
+            font-size: 16px;
+            font-weight: 400;
+            letter-spacing: .04em;
+            line-height: 20px;
+            align-items: flex-start
+        }
+
+        &-userinfo__secondary-info {
+            font-size: 14px;
+            font-weight: 400;
+            letter-spacing: 0;
+            line-height: 18px;
+            align-items: flex-end;
+        }
+
+        &-userinfo-profile-picture {
+            background-size: cover;
+            border-radius: 50%;
+            height: 80px;
+            width: 80px;
+            z-index: 3;
+            margin-left: 0px;
+            margin-right: 8px;
+        }
+
+        &-userinfo-button-profile {
+            display: inline-block;
+            border: 0px;
+            vertical-align: middle;
+        }
+
+        &-userinfo-detail {
+            text-align: left
+        }
+
+        &-hide-tab /deep/ .mat-tab-label-active {
+            display: none !important;
+        }
+
+    }
+
+    @media only screen and (min-device-width: 480px) {
+        .mat-menu-panel.adf-userinfo-menu {
+        max-height: 450px;
+        min-width: 450px;
+        overflow: auto;
+        padding: 0px;
+        }
+    }
+
+    .mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content{
+        padding: 0px;
+    }
+
+}

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts

@@ -16,6 +16,7 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import {
     AlfrescoAuthenticationService,
     AlfrescoContentService,
@@ -25,6 +26,7 @@ import {
 import { fakeBpmUser } from '../assets/fake-bpm-user.service.mock';
 import { fakeEcmEditedUser, fakeEcmUser, fakeEcmUserNoImage } from '../assets/fake-ecm-user.service.mock';
 import { TranslationMock } from '../assets/translation.service.mock';
+import { MaterialModule } from '../material.module';
 import { BpmUserService } from '../services/bpm-user.service';
 import { EcmUserService } from '../services/ecm-user.service';
 import { BpmUserModel } from './../models/bpm-user.model';
@@ -46,7 +48,8 @@ describe('User info component', () => {
         window['componentHandler'] = componentHandler;
         TestBed.configureTestingModule({
             imports: [
-                CoreModule.forRoot()
+                CoreModule.forRoot(),
+                MaterialModule
             ],
             declarations: [
                 UserInfoComponent
@@ -110,11 +113,15 @@ describe('User info component', () => {
             });
 
             fixture.whenStable().then(() => {
+                let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+                imageButton.click();
                 fixture.detectChanges();
                 expect(element.querySelector('#userinfo_container')).toBeDefined();
-                expect(element.querySelector('#ecm-username')).toBeDefined();
+                let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
-                expect(element.querySelector('#ecm-username').textContent).not.toContain('fake-ecm-first-name');
+                expect(ecmUsername).toBeDefined();
-                expect(element.querySelector('#ecm-username').textContent).not.toContain('null');
+                expect(ecmUsername).not.toBeNull();
+                expect(ecmUsername.nativeElement.textContent).not.toContain('fake-ecm-first-name');
+                expect(ecmUsername.nativeElement.textContent).not.toContain('null');
             });
         }));
 
@@ -132,23 +139,32 @@ describe('User info component', () => {
 
             it('should get the ecm current user image from the service', async(() => {
                 fixture.whenStable().then(() => {
+                    let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+                    imageButton.click();
                     fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
+                    let loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
-                    expect(element.querySelector('#logged-user-img')).toBeDefined();
+
-                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('assets/images/ecmImg.gif');
+                    expect(element.querySelector('#userinfo_container')).not.toBeNull();
+                    expect(loggedImage).not.toBeNull();
+                    expect(loggedImage.properties.src).toContain('assets/images/ecmImg.gif');
                 });
             }));
 
             it('should get the ecm user informations from the service', () => {
                 fixture.whenStable().then(() => {
+                    let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+                    imageButton.click();
                     fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
+                    let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
-                    expect(element.querySelector('#ecm_username')).toBeDefined();
+                    let ecmFullName = fixture.debugElement.query(By.css('#ecm-full-name'));
-                    expect(element.querySelector('#ecm_title')).toBeDefined();
+                    let ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title-label'));
-                    expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
+
-                    expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toContain('assets/images/ecmImg.gif');
+                    expect(element.querySelector('#userinfo_container')).not.toBeNull();
-                    expect(element.querySelector('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+                    expect(fixture.debugElement.query(By.css('#ecm-username'))).not.toBeNull();
-                    expect(element.querySelector('#ecm-job-title').textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
+                    expect(ecmImage).not.toBeNull();
+                    expect(ecmImage.properties.src).toContain('assets/images/ecmImg.gif');
+                    expect(ecmFullName.nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+                    expect(ecmJobTitle.nativeElement.textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
                 });
             });
         });
@@ -166,15 +182,22 @@ describe('User info component', () => {
             }));
 
             it('should show N/A when the job title is null', async(() => {
+                let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+                imageButton.click();
                 fixture.detectChanges();
-                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#userinfo_container')).not.toBeNull();
-                expect(element.querySelector('#ecm-job-title')).toBeDefined();
+                let ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title'));
-                expect(element.querySelector('#ecm-job-title').textContent).toContain('N/A');
+                expect(ecmJobTitle).not.toBeNull();
+                expect(ecmJobTitle).not.toBeNull();
+                expect(ecmJobTitle.nativeElement.textContent).toContain('N/A');
             }));
 
             it('should not show the tabs', () => {
+                let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+                imageButton.click();
                 fixture.detectChanges();
-                expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
+                let tabHeader = fixture.debugElement.query(By.css('#tab-group-env'));
+                expect(tabHeader.classes['adf-hide-tab']).toBeTruthy();
             });
         });
 
@@ -203,10 +226,14 @@ describe('User info component', () => {
             });
 
             fixture.whenStable().then(() => {
+                let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+                imageButton.click();
                 fixture.detectChanges();
-                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                let bpmUserName = fixture.debugElement.query(By.css('#bpm-username'));
-                expect(element.querySelector('#bpm-username')).toBeDefined();
+                expect(element.querySelector('#userinfo_container')).not.toBeNull();
-                expect(element.querySelector('#bpm-username').innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
+                expect(bpmUserName).toBeDefined();
+                expect(bpmUserName).not.toBeNull();
+                expect(bpmUserName.nativeElement.innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
             });
         });
 
@@ -220,8 +247,8 @@ describe('User info component', () => {
 
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#userinfo_container')).not.toBeNull();
-                expect(element.querySelector('#logged-user-img')).toBeDefined();
+                expect(element.querySelector('#logged-user-img')).not.toBeNull();
                 expect(element.querySelector('#logged-user-img').getAttribute('src'))
                     .toContain('activiti-app/app/rest/admin/profile-picture');
             });
@@ -315,6 +342,8 @@ describe('User info component', () => {
         }));
 
         beforeEach(() => {
+            let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+            imageButton.click();
             fixture.detectChanges();
         });
 
@@ -323,24 +352,30 @@ describe('User info component', () => {
         });
 
         it('should get the bpm user informations from the service', () => {
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            let bpmTab = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'))[1];
-            expect(element.querySelector('#bpm_username')).toBeDefined();
+            bpmTab.triggerEventHandler('click', null);
-            expect(element.querySelector('#bpm_title')).toBeDefined();
+            fixture.detectChanges();
-            expect(element.querySelector('#bpm-user-detail-image')).toBeDefined();
+            let bpmUsername = fixture.debugElement.query(By.css('#bpm-username'));
-            expect(element.querySelector('#bpm-user-detail-image').getAttribute('src'))
+            let bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image'));
-                .toContain('app/rest/admin/profile-picture');
+
-            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
+            expect(element.querySelector('#userinfo_container')).not.toBeNull();
-            expect(element.querySelector('#bpm-tenant').textContent).toContain('fake-tenant-name');
+            expect(bpmUsername).not.toBeNull();
+            expect(bpmImage).not.toBeNull();
+            expect(bpmImage.properties.src).toContain('app/rest/admin/profile-picture');
+            expect(bpmUsername.nativeElement.textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
+            expect(fixture.debugElement.query(By.css('#bpm-tenant')).nativeElement.textContent).toContain('fake-tenant-name');
         });
 
         it('should get the ecm user informations from the service', () => {
+            let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
+            let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
+
             expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#ecm_username')).toBeDefined();
+            expect(ecmUsername).not.toBeNull();
-            expect(element.querySelector('#ecm_title')).toBeDefined();
+            expect(ecmImage).not.toBeNull();
-            expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
+            expect(ecmImage.properties.src).toContain('assets/images/ecmImg.gif');
-            expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toContain('assets/images/ecmImg.gif');
+            expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
-            expect(element.querySelector('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+            expect(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.textContent).toContain('job-ecm-test');
-            expect(element.querySelector('#ecm-job-title').textContent).toContain('job-ecm-test');
         });
 
         it('should show the ecm image if exists', () => {
@@ -358,20 +393,22 @@ describe('User info component', () => {
         });
 
         it('should show the tabs for the env', () => {
-            expect(element.querySelector('#tab-bar-env')).toBeDefined();
+            let tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
-            expect(element.querySelector('#tab-bar-env')).not.toBeNull();
+            let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
-            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull();
+
-            expect(element.querySelector('#ecm-tab')).not.toBeNull();
+            expect(tabGroup).not.toBeNull();
-            expect(element.querySelector('#bpm-tab')).not.toBeNull();
+            expect(tabGroup.classes['adf-hide-tab']).toBeFalsy();
+            expect(tabs.length).toBe(2);
         });
 
         it('should not close the menu when a tab is clicked', () => {
-            expect(element.querySelector('#tab-bar-env')).toBeDefined();
+            let tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
-            expect(element.querySelector('#tab-bar-env')).not.toBeNull();
+            let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
-            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull();
+
-            let bpmTab = <HTMLElement>element.querySelector('#bpm-tab');
+            expect(tabGroup).not.toBeNull();
-            bpmTab.click();
+            tabs[1].triggerEventHandler('click', null);
-            expect(element.querySelector('#user-profile-lists')).not.toBeNull();
+            fixture.detectChanges();
+            expect(fixture.debugElement.query(By.css('#user-profile-lists'))).not.toBeNull();
         });
     });
 });

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { BpmUserModel } from './../models/bpm-user.model';
 import { EcmUserModel } from './../models/ecm-user.model';
@@ -26,8 +26,9 @@ declare var require: any;
 
 @Component({
     selector: 'adf-userinfo, ng2-alfresco-userinfo',
-    styleUrls: ['./user-info.component.css'],
+    styleUrls: ['./user-info.component.scss'],
-    templateUrl: './user-info.component.html'
+    templateUrl: './user-info.component.html',
+    encapsulation: ViewEncapsulation.None
 })
 export class UserInfoComponent implements OnInit {
 
@@ -38,7 +39,10 @@ export class UserInfoComponent implements OnInit {
     bpmBackgroundImage: string = require('../assets/images/bpm-background.png');
 
     @Input()
-    menuOpenType: string = 'right';
+    menuPositionX: string = 'after';
+
+    @Input()
+    menuPositionY: string = 'below';
 
     @Input()
     fallBackThumbnailImage: string;

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

@@ -0,0 +1,39 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import {
+    MdButtonModule,
+    MdCardModule,
+    MdMenuModule,
+    MdTabsModule
+} from '@angular/material';
+
+export function modules() {
+    return [
+        MdButtonModule,
+        MdMenuModule,
+        MdTabsModule,
+        MdCardModule
+    ];
+}
+
+@NgModule({
+    imports: modules(),
+    exports: modules()
+})
+export class MaterialModule {}

ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { async, TestBed } from '@angular/core/testing';
-import { AlfrescoAuthenticationService, AlfrescoContentService, CoreModule} from 'ng2-alfresco-core';
+import { AlfrescoAuthenticationService, AlfrescoContentService, CoreModule } from 'ng2-alfresco-core';
 import { fakeEcmUser } from '../assets/fake-ecm-user.service.mock';
 import { EcmUserService } from '../services/ecm-user.service';