mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
user-info component fixes (#1694)
* 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
Mario Romano
parent
ed4351a805
commit
b2848a5ca8
@ -49,11 +49,6 @@ span.role-label-user{
|
||||
color: rgba(0,0,0,.87);
|
||||
}
|
||||
|
||||
.custom-role-style{
|
||||
font-size: 14px;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.truncate-long-names{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@ -83,3 +78,9 @@ img.profile-picture {
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.user-info__job-title {
|
||||
align-items: flex-start;
|
||||
font-size: 14px;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
@ -8,20 +8,20 @@
|
||||
class="profile-image"/>
|
||||
</div>
|
||||
<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-right]="menuOpenType === 'right'? true : false"
|
||||
[class.mdl-menu--bottom-left]="menuOpenType === 'left'"
|
||||
[class.mdl-menu--bottom-right]="menuOpenType === 'right'"
|
||||
for="user-profile" (click)="stopClosing($event)">
|
||||
<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)">
|
||||
<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>
|
||||
</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="demo-card-wide mdl-card">
|
||||
<div class="card-title__option mdl-card__title"
|
||||
id="ecm-background-image"
|
||||
[style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/assets/images/ecm-background.png')+')'">
|
||||
[style.background-image]="'url(' + ecmBackgroundImage + ')'">
|
||||
<img class="profile-picture"
|
||||
id="ecm-user-detail-image"
|
||||
alt="ecm-profile-image"
|
||||
@ -32,27 +32,24 @@
|
||||
<div class="mdl-card__supporting-text">
|
||||
<li class="mdl-list__item mdl-list__item--two-line">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<span id="ecm-full-name" class="truncate-long-names">
|
||||
{{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
|
||||
</span>
|
||||
<span id="ecm-full-name" class="truncate-long-names">{{getEcmFullName()}}</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 custom-role-style">
|
||||
<span
|
||||
class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
|
||||
{{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
|
||||
<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>
|
||||
</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="demo-card-wide mdl-card">
|
||||
<div class="card-title__option mdl-card__title"
|
||||
id="bpm-background-image"
|
||||
[style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/assets/images/bpm-background.png')+')'">
|
||||
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
|
||||
<img class="profile-picture"
|
||||
id="bpm-user-detail-image"
|
||||
alt="bpm-profile-image"
|
||||
@ -63,14 +60,12 @@
|
||||
<div class="mdl-card__supporting-text">
|
||||
<li class="mdl-list__item mdl-list__item--two-line">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<span id="bpm-full-name" class="truncate-long-names">
|
||||
{{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
|
||||
</span>
|
||||
<span id="bpm-full-name" class="truncate-long-names">{{ getBpmFullName() }}</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 custom-role-style">
|
||||
<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}}
|
||||
{{ bpmUser.tenantName }}
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
@ -119,10 +119,9 @@ describe('User info component', () => {
|
||||
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');
|
||||
expect(res).toBeDefined();
|
||||
expect(res).toBeNull();
|
||||
expect(res).toBe('');
|
||||
});
|
||||
|
||||
it('should return the value when it is not null string', () => {
|
||||
|
||||
@ -32,11 +32,13 @@ declare let componentHandler: any;
|
||||
})
|
||||
export class UserInfoComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
ecmBackgroundImage: string;
|
||||
private baseComponentPath = module.id.replace('components/user-info.component.js', '');
|
||||
|
||||
@Input()
|
||||
bpmBackgroundImage: string;
|
||||
ecmBackgroundImage: string = this.baseComponentPath + 'assets/images/ecm-background.png';
|
||||
|
||||
@Input()
|
||||
bpmBackgroundImage: string = this.baseComponentPath + 'assets/images/bpm-background.png';
|
||||
|
||||
@Input()
|
||||
menuOpenType: string = 'right';
|
||||
@ -44,16 +46,10 @@ export class UserInfoComponent implements OnInit {
|
||||
@Input()
|
||||
fallBackThumbnailImage: string;
|
||||
|
||||
private baseComponentPath = module.id.replace('components/user-info.component.js', '');
|
||||
|
||||
ecmUser: EcmUserModel;
|
||||
|
||||
bpmUser: BpmUserModel;
|
||||
|
||||
anonymousImageUrl: string = this.baseComponentPath + '/assets/images/anonymous.gif';
|
||||
|
||||
anonymousImageUrl: string = this.baseComponentPath + 'assets/images/anonymous.gif';
|
||||
bpmUserImage: any;
|
||||
|
||||
ecmUserImage: any;
|
||||
|
||||
constructor(private ecmUserService: EcmUserService,
|
||||
@ -119,7 +115,21 @@ export class UserInfoComponent implements OnInit {
|
||||
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') {
|
||||
return this.ecmUser.firstName || this.ecmUser.lastName;
|
||||
}
|
||||
@ -148,6 +158,6 @@ export class UserInfoComponent implements OnInit {
|
||||
}
|
||||
|
||||
formatValue(value: string) {
|
||||
return value === 'null' ? null : value;
|
||||
return value && value !== 'null' ? value : '';
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user