inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved user-info design

Browse Source
This commit is contained in:
Vito Albano 2016-11-04 20:32:34 +00:00
parent 15455276f9
commit 6521326fec
7 changed files with 123 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@
cursor: pointer; cursor: pointer;
border: 1px solid #999999; border: 1px solid #999999;
vertical-align: middle; vertical-align: middle;
background-color:white;;
} }
.button-profile { .button-profile {
@ -16,7 +17,6 @@
} }
.detail-user-profile-list-mdl{ .detail-user-profile-list-mdl{
margin-right: 10px;
padding: 0px 0; padding: 0px 0;
} }
@ -24,6 +24,7 @@
max-height: 450px; max-height: 450px;
min-width: 450px; min-width: 450px;
overflow: auto; overflow: auto;
padding:0px;
} }
.header-profile{ .header-profile{
@ -53,3 +54,33 @@ span.role-label-user{
.truncate-long-names{ .truncate-long-names{
text-overflow: ellipsis; 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;
}
.menu-container__items{
}

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

@ -1,65 +1,74 @@
<div id="userinfo_container"> <div id="userinfo_container">
<span id="ecm_username" *ngIf="ecmUser">{{ecmUser.firstName || ecmUser.lastName}}</span> <div class="button-profile" id="user-profile" data-automation-id="user-profile">
<span id="bpm_username" *ngIf="bpmUser && !ecmUser"> <img id="logged-user-img"
{{ formatValue(bpmUser.firstName) || [src]="getUserAvatar()"
formatValue(bpmUser.lastName) || (error)="onImageLoadingError($event)"
formatValue(bpmUser.fullname) }} class="profile-image"/>
</span>
<div *ngIf="ecmUser || bpmUser" class="button-profile" id="user-profile" data-automation-id="user-profile">
<img id="logged-user-img"
[src]="getUserAvatar()"
class="profile-image"/>
</div> </div>
<div *ngIf="ecmUser || bpmUser" id="user-profile-lists" class="user-profile-list-mdl <div id="user-profile-lists" class="user-profile-list-mdl
mdl-menu mdl-menu--bottom-right mdl-menu mdl-menu--bottom-right
mdl-js-menu mdl-js-ripple-effect" mdl-js-menu mdl-js-ripple-effect"
for="user-profile"> for="user-profile" (click)="stopClosing($event)">
<ul class='detail-user-profile-list-mdl mdl-list'> <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
<div id="ecm-user-detail" *ngIf="ecmUser"> <div class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
<hr class="title-start"> <a href="#ecm-panel" class="mdl-tabs__tab is-active">ECM</a>
<span id="ecm_title" class="header-profile"><b>ECM</b></span> <a href="#bpm-panel" class="mdl-tabs__tab">BPM</a>
<li class="mdl-list__item mdl-list__item--two-line"> </div>
<div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" 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"
[style.background-image]="'url(' + baseComponentPath + '/../img/orangeBanner.png)'">
<img class="profile-picture"
(error)="onImageLoadingError($event)"
[src]="getEcmUserAvatar()"/>
<h2 class="mdl-card__title-text">{{getUserNameHeaderFor('ECM')}}</h2>
</div>
<div class="mdl-card__supporting-text">
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content"> <span class="mdl-list__item-primary-content">
<i class="mdl-list__item-avatar">
<img id="ecm-user-detail-image"
[src]="getEcmUserAvatar()"
class="profile-image"/>
</i>
<span id="ecm-full-name" class="truncate-long-names"> <span id="ecm-full-name" class="truncate-long-names">
{{ecmUser.firstName}} {{ecmUser.lastName}} {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
</span> </span>
<span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span> <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
</span> </span>
<span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style"> <span id="ecm-tenant" class="mdl-list__item-secondary-content custom-role-style">
<span class="role-label-user">Job Role</span> <span class="role-label-user">Job Title</span>
{{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} {{ecmUser.jobTitle}}
</span> </span>
</li> </li>
<br> </div>
</div>
</div> </div>
<div id="bpm-user-detail" *ngIf="bpmUser"> </div>
<hr class="title-start"> <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
<span id="bpm_title" class="header-profile"><b>BPM</b></span> <div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
<li class="mdl-list__item mdl-list__item--two-line"> <div class="demo-card-wide mdl-card">
<div class="card-title__option mdl-card__title"
[style.background-image]="'url(' + baseComponentPath + '/../img/blueBanner.png)'">
<img class="profile-picture"
(error)="onImageLoadingError($event)"
[src]="getEcmUserAvatar()"/>
<h2 class="mdl-card__title-text">{{getUserNameHeaderFor('BPM')}}</h2>
</div>
<div class="mdl-card__supporting-text">
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content"> <span class="mdl-list__item-primary-content">
<i class="mdl-list__item-avatar"> <span id="ecm-full-name" class="truncate-long-names">
<img id="bpm-user-detail-image"
[src]="getBpmUserAvatar()"
class="profile-image"/>
</i>
<span id="bpm-full-name" class="truncate-long-names">
{{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }} {{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
</span> </span>
<span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span> <span id="ecm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
</span> </span>
<span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style"> <span id="ecm-tenant" class="mdl-list__item-secondary-content custom-role-style">
<span class="role-label-user">Tenant</span> <span class="role-label-user">Job Title</span>
{{bpmUser.tenantName}} {{bpmUser.tenantName}}
</span> </span>
</li> </li>
</div>
</div>
</div> </div>
</ul> </div>
</div>
</div> </div>
</div> </div>

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

@ -61,12 +61,30 @@ export class UserInfoComponent implements OnInit {
.subscribe((res) => { .subscribe((res) => {
this.bpmUser = <BpmUserModel> res; this.bpmUser = <BpmUserModel> res;
}); });
this.bpmUserService.getCurrentUserProfileImage() this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
.subscribe( }
(res) => { }
this.bpmUserImage = res;
} onImageLoadingError(event) {
); if (event) {
let element = <any> event.target;
element.src = this.anonymousImageUrl;
}
}
stopClosing(event) {
event.stopPropagation();
}
getUserNameHeaderFor(env: string) {
if (this.ecmUser && env === 'ECM') {
return this.ecmUser.firstName || this.ecmUser.lastName;
}
if (this.bpmUser && env === 'BPM') {
return this.formatValue(this.bpmUser.firstName) ||
this.formatValue(this.bpmUser.lastName) ||
this.formatValue(this.bpmUser.fullname);
} }
} }
@ -75,15 +93,15 @@ export class UserInfoComponent implements OnInit {
} }
getUserAvatar() { getUserAvatar() {
return this.ecmUserImage || this.bpmUserImage || this.anonymousImageUrl; return this.ecmUserImage || this.bpmUserImage;
} }
getBpmUserAvatar() { getBpmUserAvatar() {
return this.bpmUserImage || this.anonymousImageUrl; return this.bpmUserImage;
} }
getEcmUserAvatar() { getEcmUserAvatar() {
return this.ecmUserImage || this.anonymousImageUrl; return this.ecmUserImage;
} }
formatValue(value: string) { formatValue(value: string) {

BIN
ng2-components/ng2-alfresco-userinfo/src/img/blueBanner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
ng2-components/ng2-alfresco-userinfo/src/img/orangeBanner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

5
ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.spec.ts
View File

@ -25,7 +25,7 @@ declare let jasmine: any;
describe('Bpm User service', () => { describe('Bpm User service', () => {
let service, injector, authService; let service, injector, authService, apiService;
beforeEach(() => { beforeEach(() => {
injector = ReflectiveInjector.resolveAndCreate([ injector = ReflectiveInjector.resolveAndCreate([
@ -39,6 +39,7 @@ describe('Bpm User service', () => {
beforeEach(() => { beforeEach(() => {
service = injector.get(BpmUserService); service = injector.get(BpmUserService);
authService = injector.get(AlfrescoAuthenticationService); authService = injector.get(AlfrescoAuthenticationService);
apiService = injector.get(AlfrescoApiService);
jasmine.Ajax.install(); jasmine.Ajax.install();
}); });
@ -47,7 +48,7 @@ describe('Bpm User service', () => {
}); });
it('can instantiate service with authorization', () => { it('can instantiate service with authorization', () => {
let serviceTest = new BpmUserService(authService); let serviceTest = new BpmUserService(authService, apiService);
expect(serviceTest instanceof BpmUserService).toBe(true, 'new service should be ok'); expect(serviceTest instanceof BpmUserService).toBe(true, 'new service should be ok');
}); });

17
ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.ts
View File

@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core'; import { AlfrescoApiService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Response } from '@angular/http'; import { Response } from '@angular/http';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@ -29,7 +29,8 @@ import { BpmUserModel } from '../models/bpm-user.model';
@Injectable() @Injectable()
export class BpmUserService { export class BpmUserService {
constructor(private authService: AlfrescoAuthenticationService) { constructor(private authService: AlfrescoAuthenticationService,
private alfrescoJsApi: AlfrescoApiService) {
} }
/** /**
@ -37,19 +38,13 @@ export class BpmUserService {
* @param userName - the user name * @param userName - the user name
*/ */
getCurrentUserInfo(): Observable<BpmUserModel> { getCurrentUserInfo(): Observable<BpmUserModel> {
return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.profileApi.getProfile()) return Observable.fromPromise(this.alfrescoJsApi.getInstance().activiti.profileApi.getProfile())
.map((data) => <BpmUserModel> data) .map((data) => <BpmUserModel> data)
.catch(this.handleError); .catch(this.handleError);
} }
getCurrentUserProfileImage(): Observable<any> { getCurrentUserProfileImage(): string {
return Observable.fromPromise(this.callGetProfilePictureApi()) return this.alfrescoJsApi.getInstance().activiti.profileApi.getProfilePictureUrl();
.map((data) => data)
.catch(this.handleError);
}
private callGetProfilePictureApi() {
return this.authService.getAlfrescoApi().activiti.profileApi.getProfilePicture();
} }
/** /**