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

user-info component fixes (#1694)

Browse Source 
* user-info fixes

- fix image paths to be relative rather than rooted (for user info,
refs #1606)
- fix full name rendering
- fix styling for ‘job title’

* fix unit tests
This commit is contained in:
Denys Vuika 2017-03-08 12:04:27 +00:00 committed by Mario Romano
parent ed4351a805
commit b2848a5ca8
4 changed files with 49 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,11 +49,6 @@ span.role-label-user{
color: rgba(0,0,0,.87); color: rgba(0,0,0,.87);
} }
.custom-role-style{
font-size: 14px;
color: #9e9e9e;
}
.truncate-long-names{ .truncate-long-names{
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -83,3 +78,9 @@ img.profile-picture {
margin-left: 0px; margin-left: 0px;
margin-right: 8px; margin-right: 8px;
} }
.user-info__job-title {
align-items: flex-start;
font-size: 14px;
color: #9e9e9e;
}

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

@ -8,20 +8,20 @@
class="profile-image"/> class="profile-image"/>
</div> </div>
<div mdl id="user-profile-lists" class="user-profile-list-mdl mdl-menu mdl-js-menu mdl-js-ripple-effect" <div mdl id="user-profile-lists" class="user-profile-list-mdl mdl-menu mdl-js-menu mdl-js-ripple-effect"
[class.mdl-menu--bottom-left]="menuOpenType === 'left'? true : false" [class.mdl-menu--bottom-left]="menuOpenType === 'left'"
[class.mdl-menu--bottom-right]="menuOpenType === 'right'? true : false" [class.mdl-menu--bottom-right]="menuOpenType === 'right'"
for="user-profile" (click)="stopClosing($event)"> for="user-profile" (click)="stopClosing($event)">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items"> <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
<div id="tab-bar-env" class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)"> <div id="tab-bar-env" class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
<a href="#ecm-panel" id="ecm-tab" class="mdl-tabs__tab is-active">Content Services</a> <a href="#ecm-panel" id="ecm-tab" class="mdl-tabs__tab is-active">Content Services</a>
<a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">Process Services</a> <a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">Process Services</a>
</div> </div>
<div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" id="ecm-panel"> <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="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
<div class="demo-card-wide mdl-card"> <div class="demo-card-wide mdl-card">
<div class="card-title__option mdl-card__title" <div class="card-title__option mdl-card__title"
id="ecm-background-image" id="ecm-background-image"
[style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/assets/images/ecm-background.png')+')'"> [style.background-image]="'url(' + ecmBackgroundImage + ')'">
<img class="profile-picture" <img class="profile-picture"
id="ecm-user-detail-image" id="ecm-user-detail-image"
alt="ecm-profile-image" alt="ecm-profile-image"
@ -32,27 +32,24 @@
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
<li class="mdl-list__item mdl-list__item--two-line"> <li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content"> <span class="mdl-list__item-primary-content">
<span id="ecm-full-name" class="truncate-long-names"> <span id="ecm-full-name" class="truncate-long-names">{{getEcmFullName()}}</span>
{{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }} <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
</span> </span>
<span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span> <span id="ecm-job-title" class="mdl-list__item-secondary-content user-info__job-title">
</span> <span class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
<span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }}
<span
class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
{{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
</span> </span>
</li> </li>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel"> <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser" id="bpm-panel">
<div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser"> <div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
<div class="demo-card-wide mdl-card"> <div class="demo-card-wide mdl-card">
<div class="card-title__option mdl-card__title" <div class="card-title__option mdl-card__title"
id="bpm-background-image" id="bpm-background-image"
[style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/assets/images/bpm-background.png')+')'"> [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<img class="profile-picture" <img class="profile-picture"
id="bpm-user-detail-image" id="bpm-user-detail-image"
alt="bpm-profile-image" alt="bpm-profile-image"
@ -62,16 +59,14 @@
</div> </div>
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
<li class="mdl-list__item mdl-list__item--two-line"> <li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content"> <span class="mdl-list__item-primary-content">
<span id="bpm-full-name" class="truncate-long-names"> <span id="bpm-full-name" class="truncate-long-names">{{ getBpmFullName() }}</span>
{{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }} <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
</span> </span>
<span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span> <span id="bpm-tenant" class="mdl-list__item-secondary-content user-info__job-title">
</span> <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
<span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style"> {{ bpmUser.tenantName }}
<span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span> </span>
{{bpmUser.tenantName}}
</span>
</li> </li>
</div> </div>
</div> </div>

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

@ -119,10 +119,9 @@ describe('User info component', () => {
expect(element.querySelector('#user-profile-lists')).toBeNull(); expect(element.querySelector('#user-profile-lists')).toBeNull();
}); });
it('should format null string values in null value', () => { it('should format null string values in empty value', () => {
let res = userInfoComp.formatValue('null'); let res = userInfoComp.formatValue('null');
expect(res).toBeDefined(); expect(res).toBe('');
expect(res).toBeNull();
}); });
it('should return the value when it is not null string', () => { it('should return the value when it is not null string', () => {

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

@ -32,11 +32,13 @@ declare let componentHandler: any;
}) })
export class UserInfoComponent implements OnInit { export class UserInfoComponent implements OnInit {
@Input() private baseComponentPath = module.id.replace('components/user-info.component.js', '');
ecmBackgroundImage: string;
@Input() @Input()
bpmBackgroundImage: string; ecmBackgroundImage: string = this.baseComponentPath + 'assets/images/ecm-background.png';
@Input()
bpmBackgroundImage: string = this.baseComponentPath + 'assets/images/bpm-background.png';
@Input() @Input()
menuOpenType: string = 'right'; menuOpenType: string = 'right';
@ -44,16 +46,10 @@ export class UserInfoComponent implements OnInit {
@Input() @Input()
fallBackThumbnailImage: string; fallBackThumbnailImage: string;
private baseComponentPath = module.id.replace('components/user-info.component.js', '');
ecmUser: EcmUserModel; ecmUser: EcmUserModel;
bpmUser: BpmUserModel; bpmUser: BpmUserModel;
anonymousImageUrl: string = this.baseComponentPath + 'assets/images/anonymous.gif';
anonymousImageUrl: string = this.baseComponentPath + '/assets/images/anonymous.gif';
bpmUserImage: any; bpmUserImage: any;
ecmUserImage: any; ecmUserImage: any;
constructor(private ecmUserService: EcmUserService, constructor(private ecmUserService: EcmUserService,
@ -119,7 +115,21 @@ export class UserInfoComponent implements OnInit {
event.stopPropagation(); event.stopPropagation();
} }
getUserNameHeaderFor(env: string) { getEcmFullName(): string {
if (this.ecmUser) {
return `${this.formatValue(this.ecmUser.firstName)} ${this.formatValue(this.ecmUser.lastName)}`.trim();
}
return 'N/A';
}
getBpmFullName(): string {
if (this.bpmUser) {
return `${this.formatValue(this.bpmUser.firstName)} ${this.formatValue(this.bpmUser.lastName)}`.trim();
}
return 'N/A';
}
getUserNameHeaderFor(env: string): string {
if (this.ecmUser && env === 'ECM') { if (this.ecmUser && env === 'ECM') {
return this.ecmUser.firstName || this.ecmUser.lastName; return this.ecmUser.firstName || this.ecmUser.lastName;
} }
@ -148,6 +158,6 @@ export class UserInfoComponent implements OnInit {
} }
formatValue(value: string) { formatValue(value: string) {
return value === 'null' ? null : value; return value && value !== 'null' ? value : '';
} }
} }