mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
Improved user-info design
This commit is contained in:
Vito Albano
parent
15455276f9
commit
6521326fec
@ -7,6 +7,7 @@
|
||||
cursor: pointer;
|
||||
border: 1px solid #999999;
|
||||
vertical-align: middle;
|
||||
background-color:white;;
|
||||
}
|
||||
|
||||
.button-profile {
|
||||
@ -16,7 +17,6 @@
|
||||
}
|
||||
|
||||
.detail-user-profile-list-mdl{
|
||||
margin-right: 10px;
|
||||
padding: 0px 0;
|
||||
}
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
max-height: 450px;
|
||||
min-width: 450px;
|
||||
overflow: auto;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
.header-profile{
|
||||
@ -53,3 +54,33 @@ span.role-label-user{
|
||||
.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;
|
||||
}
|
||||
|
||||
.menu-container__items{
|
||||
|
||||
}
|
||||
|
||||
@ -1,65 +1,74 @@
|
||||
<div id="userinfo_container">
|
||||
<span id="ecm_username" *ngIf="ecmUser">{{ecmUser.firstName || ecmUser.lastName}}</span>
|
||||
<span id="bpm_username" *ngIf="bpmUser && !ecmUser">
|
||||
{{ formatValue(bpmUser.firstName) ||
|
||||
formatValue(bpmUser.lastName) ||
|
||||
formatValue(bpmUser.fullname) }}
|
||||
</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 class="button-profile" id="user-profile" data-automation-id="user-profile">
|
||||
<img id="logged-user-img"
|
||||
[src]="getUserAvatar()"
|
||||
(error)="onImageLoadingError($event)"
|
||||
class="profile-image"/>
|
||||
</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-js-menu mdl-js-ripple-effect"
|
||||
for="user-profile">
|
||||
<ul class='detail-user-profile-list-mdl mdl-list'>
|
||||
<div id="ecm-user-detail" *ngIf="ecmUser">
|
||||
<hr class="title-start">
|
||||
<span id="ecm_title" class="header-profile"><b>ECM</b></span>
|
||||
<li class="mdl-list__item mdl-list__item--two-line">
|
||||
for="user-profile" (click)="stopClosing($event)">
|
||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
|
||||
<div class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
|
||||
<a href="#ecm-panel" class="mdl-tabs__tab is-active">ECM</a>
|
||||
<a href="#bpm-panel" class="mdl-tabs__tab">BPM</a>
|
||||
</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">
|
||||
<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">
|
||||
{{ecmUser.firstName}} {{ecmUser.lastName}}
|
||||
{{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
|
||||
</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 id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
|
||||
<span class="role-label-user">Job Role</span>
|
||||
{{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }}
|
||||
<span id="ecm-tenant" class="mdl-list__item-secondary-content custom-role-style">
|
||||
<span class="role-label-user">Job Title</span>
|
||||
{{ecmUser.jobTitle}}
|
||||
</span>
|
||||
</li>
|
||||
<br>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bpm-user-detail" *ngIf="bpmUser">
|
||||
<hr class="title-start">
|
||||
<span id="bpm_title" class="header-profile"><b>BPM</b></span>
|
||||
<li class="mdl-list__item mdl-list__item--two-line">
|
||||
</div>
|
||||
<div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" 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"
|
||||
[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">
|
||||
<i class="mdl-list__item-avatar">
|
||||
<img id="bpm-user-detail-image"
|
||||
[src]="getBpmUserAvatar()"
|
||||
class="profile-image"/>
|
||||
</i>
|
||||
<span id="bpm-full-name" class="truncate-long-names">
|
||||
<span id="ecm-full-name" class="truncate-long-names">
|
||||
{{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
|
||||
</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 id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
|
||||
<span class="role-label-user">Tenant</span>
|
||||
<span id="ecm-tenant" class="mdl-list__item-secondary-content custom-role-style">
|
||||
<span class="role-label-user">Job Title</span>
|
||||
{{bpmUser.tenantName}}
|
||||
</span>
|
||||
</li>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -61,12 +61,30 @@ export class UserInfoComponent implements OnInit {
|
||||
.subscribe((res) => {
|
||||
this.bpmUser = <BpmUserModel> res;
|
||||
});
|
||||
this.bpmUserService.getCurrentUserProfileImage()
|
||||
.subscribe(
|
||||
(res) => {
|
||||
this.bpmUserImage = res;
|
||||
}
|
||||
);
|
||||
this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
|
||||
}
|
||||
}
|
||||
|
||||
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() {
|
||||
return this.ecmUserImage || this.bpmUserImage || this.anonymousImageUrl;
|
||||
return this.ecmUserImage || this.bpmUserImage;
|
||||
}
|
||||
|
||||
getBpmUserAvatar() {
|
||||
return this.bpmUserImage || this.anonymousImageUrl;
|
||||
return this.bpmUserImage;
|
||||
}
|
||||
|
||||
getEcmUserAvatar() {
|
||||
return this.ecmUserImage || this.anonymousImageUrl;
|
||||
return this.ecmUserImage;
|
||||
}
|
||||
|
||||
formatValue(value: string) {
|
||||
|
||||
BIN
ng2-components/ng2-alfresco-userinfo/src/img/blueBanner.png
Normal file
BIN
ng2-components/ng2-alfresco-userinfo/src/img/blueBanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
ng2-components/ng2-alfresco-userinfo/src/img/orangeBanner.png
Normal file
BIN
ng2-components/ng2-alfresco-userinfo/src/img/orangeBanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
@ -25,7 +25,7 @@ declare let jasmine: any;
|
||||
|
||||
describe('Bpm User service', () => {
|
||||
|
||||
let service, injector, authService;
|
||||
let service, injector, authService, apiService;
|
||||
|
||||
beforeEach(() => {
|
||||
injector = ReflectiveInjector.resolveAndCreate([
|
||||
@ -39,6 +39,7 @@ describe('Bpm User service', () => {
|
||||
beforeEach(() => {
|
||||
service = injector.get(BpmUserService);
|
||||
authService = injector.get(AlfrescoAuthenticationService);
|
||||
apiService = injector.get(AlfrescoApiService);
|
||||
jasmine.Ajax.install();
|
||||
});
|
||||
|
||||
@ -47,7 +48,7 @@ describe('Bpm User service', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { AlfrescoApiService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Response } from '@angular/http';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
@ -29,7 +29,8 @@ import { BpmUserModel } from '../models/bpm-user.model';
|
||||
@Injectable()
|
||||
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
|
||||
*/
|
||||
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)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
getCurrentUserProfileImage(): Observable<any> {
|
||||
return Observable.fromPromise(this.callGetProfilePictureApi())
|
||||
.map((data) => data)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
private callGetProfilePictureApi() {
|
||||
return this.authService.getAlfrescoApi().activiti.profileApi.getProfilePicture();
|
||||
getCurrentUserProfileImage(): string {
|
||||
return this.alfrescoJsApi.getInstance().activiti.profileApi.getProfilePictureUrl();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user