From 98cb6de5955cb26bec2af09b618e8294272e7c1b Mon Sep 17 00:00:00 2001 From: Vito Date: Thu, 24 Aug 2017 02:53:59 -0700 Subject: [PATCH] [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 | 3 +- .../ng2-alfresco-core/styles/_all-theme.scss | 3 + .../ng2-alfresco-userinfo/README.md | 3 +- ng2-components/ng2-alfresco-userinfo/index.ts | 4 +- .../src/components/user-info.component.css | 86 ---------- .../src/components/user-info.component.html | 139 ++++++++-------- .../src/components/user-info.component.scss | 153 ++++++++++++++++++ .../components/user-info.component.spec.ts | 133 +++++++++------ .../src/components/user-info.component.ts | 12 +- .../src/material.module.ts | 39 +++++ .../src/services/ecm-user.service.spec.ts | 2 +- 11 files changed, 359 insertions(+), 218 deletions(-) delete mode 100644 ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css create mode 100644 ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.scss create mode 100644 ng2-components/ng2-alfresco-userinfo/src/material.module.ts diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html index 14e9ecab5a..ff54c49dbd 100644 --- a/demo-shell-ng2/app/app.component.html +++ b/demo-shell-ng2/app/app.component.html @@ -1,7 +1,8 @@ ADF Demo Application diff --git a/ng2-components/ng2-alfresco-core/styles/_all-theme.scss b/ng2-components/ng2-alfresco-core/styles/_all-theme.scss index e9ac602052..22895cac2a 100644 --- a/ng2-components/ng2-alfresco-core/styles/_all-theme.scss +++ b/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); } diff --git a/ng2-components/ng2-alfresco-userinfo/README.md b/ng2-components/ng2-alfresco-userinfo/README.md index 09db99f3d4..21d3c9c42b 100644 --- a/ng2-components/ng2-alfresco-userinfo/README.md +++ b/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. diff --git a/ng2-components/ng2-alfresco-userinfo/index.ts b/ng2-components/ng2-alfresco-userinfo/index.ts index 421e361a04..3cd5bab8f7 100644 --- a/ng2-components/ng2-alfresco-userinfo/index.ts +++ b/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 diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css deleted file mode 100644 index 7bc59afcde..0000000000 --- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css +++ /dev/null @@ -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; -} diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html index 4fee0add12..e01660f3ce 100644 --- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html +++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html @@ -1,79 +1,66 @@
-
-
- user-info-profile-button -
- - + + + + + + + ecm-profile-image +

{{ecmUser.fullNameDisplay}}

+ + +
+
+ {{ecmUser.fullNameDisplay}} + {{ecmUser.email}} +
+
+ + {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }} + {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} + +
+
+ + + + + + + bpm-profile-image +

{{bpmUser.fullNameDisplay}}

+ + +
+
+ {{ bpmUser.fullNameDisplay }} + {{bpmUser.email}} +
+
+ + {{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }} + {{ bpmUser.tenantName ? bpmUser.tenantName : 'N/A' }} + +
+
+ + + + +
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.scss b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.scss new file mode 100644 index 0000000000..9711d882a2 --- /dev/null +++ b/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; + } + +} diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts index 7d36dfa4a6..1d6b1a792a 100644 --- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts +++ b/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 = element.querySelector('#logged-user-img'); + imageButton.click(); fixture.detectChanges(); expect(element.querySelector('#userinfo_container')).toBeDefined(); - expect(element.querySelector('#ecm-username')).toBeDefined(); - expect(element.querySelector('#ecm-username').textContent).not.toContain('fake-ecm-first-name'); - expect(element.querySelector('#ecm-username').textContent).not.toContain('null'); + let ecmUsername = fixture.debugElement.query(By.css('#ecm-username')); + expect(ecmUsername).toBeDefined(); + 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 = element.querySelector('#logged-user-img'); + imageButton.click(); fixture.detectChanges(); - expect(element.querySelector('#userinfo_container')).toBeDefined(); - expect(element.querySelector('#logged-user-img')).toBeDefined(); - expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('assets/images/ecmImg.gif'); + let loggedImage = fixture.debugElement.query(By.css('#logged-user-img')); + + 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 = element.querySelector('#logged-user-img'); + imageButton.click(); fixture.detectChanges(); - expect(element.querySelector('#userinfo_container')).toBeDefined(); - expect(element.querySelector('#ecm_username')).toBeDefined(); - expect(element.querySelector('#ecm_title')).toBeDefined(); - 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('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name'); - expect(element.querySelector('#ecm-job-title').textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE'); + let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image')); + let ecmFullName = fixture.debugElement.query(By.css('#ecm-full-name')); + let ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title-label')); + + expect(element.querySelector('#userinfo_container')).not.toBeNull(); + expect(fixture.debugElement.query(By.css('#ecm-username'))).not.toBeNull(); + 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 = element.querySelector('#logged-user-img'); + imageButton.click(); fixture.detectChanges(); - expect(element.querySelector('#userinfo_container')).toBeDefined(); - expect(element.querySelector('#ecm-job-title')).toBeDefined(); - expect(element.querySelector('#ecm-job-title').textContent).toContain('N/A'); + expect(element.querySelector('#userinfo_container')).not.toBeNull(); + let ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title')); + expect(ecmJobTitle).not.toBeNull(); + expect(ecmJobTitle).not.toBeNull(); + expect(ecmJobTitle.nativeElement.textContent).toContain('N/A'); })); it('should not show the tabs', () => { + let imageButton: 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 = element.querySelector('#logged-user-img'); + imageButton.click(); fixture.detectChanges(); - expect(element.querySelector('#userinfo_container')).toBeDefined(); - expect(element.querySelector('#bpm-username')).toBeDefined(); - expect(element.querySelector('#bpm-username').innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name'); + let bpmUserName = fixture.debugElement.query(By.css('#bpm-username')); + expect(element.querySelector('#userinfo_container')).not.toBeNull(); + 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('#logged-user-img')).toBeDefined(); + expect(element.querySelector('#userinfo_container')).not.toBeNull(); + 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 = 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(); - expect(element.querySelector('#bpm_username')).toBeDefined(); - expect(element.querySelector('#bpm_title')).toBeDefined(); - expect(element.querySelector('#bpm-user-detail-image')).toBeDefined(); - expect(element.querySelector('#bpm-user-detail-image').getAttribute('src')) - .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('#bpm-tenant').textContent).toContain('fake-tenant-name'); + let bpmTab = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'))[1]; + bpmTab.triggerEventHandler('click', null); + fixture.detectChanges(); + let bpmUsername = fixture.debugElement.query(By.css('#bpm-username')); + let bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image')); + + expect(element.querySelector('#userinfo_container')).not.toBeNull(); + 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(element.querySelector('#ecm_title')).toBeDefined(); - 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('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name'); - expect(element.querySelector('#ecm-job-title').textContent).toContain('job-ecm-test'); + expect(ecmUsername).not.toBeNull(); + expect(ecmImage).not.toBeNull(); + expect(ecmImage.properties.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(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.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(); - expect(element.querySelector('#tab-bar-env')).not.toBeNull(); - expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull(); - expect(element.querySelector('#ecm-tab')).not.toBeNull(); - expect(element.querySelector('#bpm-tab')).not.toBeNull(); + let tabGroup = fixture.debugElement.query(By.css('#tab-group-env')); + let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label')); + + expect(tabGroup).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(); - expect(element.querySelector('#tab-bar-env')).not.toBeNull(); - expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull(); - let bpmTab = element.querySelector('#bpm-tab'); - bpmTab.click(); - expect(element.querySelector('#user-profile-lists')).not.toBeNull(); + let tabGroup = fixture.debugElement.query(By.css('#tab-group-env')); + let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label')); + + expect(tabGroup).not.toBeNull(); + tabs[1].triggerEventHandler('click', null); + fixture.detectChanges(); + expect(fixture.debugElement.query(By.css('#user-profile-lists'))).not.toBeNull(); }); }); }); diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts index 1535799c94..5a28d05463 100644 --- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts +++ b/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'], - templateUrl: './user-info.component.html' + styleUrls: ['./user-info.component.scss'], + 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; diff --git a/ng2-components/ng2-alfresco-userinfo/src/material.module.ts b/ng2-components/ng2-alfresco-userinfo/src/material.module.ts new file mode 100644 index 0000000000..0ad9e1fbd2 --- /dev/null +++ b/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 {} diff --git a/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.spec.ts b/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.spec.ts index 16f786e860..8d8e4116b8 100644 --- a/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.spec.ts +++ b/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';