- 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';
-
+
+
+
+
+ ![ecm-profile-image]()
+
+
+
+
+
+
+
+
+ ![bpm-profile-image]()
+
+
+
+
+
+
+
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 =
- ![user-info-profile-button]()
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
- ![ecm-profile-image]()
-
- {{ecmUser.fullNameDisplay}}
-
-
-
- {{ecmUser.fullNameDisplay}}
- {{ecmUser.email}}
-
-
-
-
-
-
-
-
-
-
-
- ![bpm-profile-image]()
-
- {{bpmUser.fullNameDisplay}}
-
-
-
- {{ bpmUser.fullNameDisplay }}
- {{bpmUser.email}}
-
-
-
-
- {{ecmUser.fullNameDisplay}}
+
+
+
+ {{ecmUser.fullNameDisplay}}
+ {{ecmUser.email}}
+
+
+
+ {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
+ {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }}
+
+
+ {{bpmUser.fullNameDisplay}}
+
+
+
+ {{ bpmUser.fullNameDisplay }}
+ {{bpmUser.email}}
+
+
+
+ {{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
+ {{ bpmUser.tenantName ? bpmUser.tenantName : 'N/A' }}
+
+
+