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

Added fix for first component style

Browse Source
This commit is contained in:
Vito Albano
2016-09-23 00:04:03 +01:00
parent 3b6b8ed59b
commit 9ed232df5b
5 changed files with 85 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo-shell-ng2/app/app.component.css
View File

@@ -7,3 +7,6 @@
.mdl-layout-title{
font-size: 17px;
}
.user-profile{
margin-right: 3px;
}

2
demo-shell-ng2/app/app.component.html
View File

@@ -21,7 +21,7 @@
<a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
</nav>
<div *ngIf="isLoggedIn()">
<div class="user-profile" *ngIf="isLoggedIn()">
<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
</div>

12
ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css
View File

@@ -4,11 +4,19 @@
width: 40px;
margin-right: 0%;
cursor: pointer;
border: 2px solid #999999;
border: 1px solid #999999;
}
.button-profile {
display: inline-block;
margin-right: -10px;
border: 0px;
}
.detail-user-profile-list-mdl{
margin-right: 100px;
}
.user-profile-list-mdl{
max-height: 250px;
width: 400px;
}

70
ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
View File

@@ -1,16 +1,60 @@
<span *ngIf="ecmUser">{{ecmUser.firstName}} {{ecmUser.lastName}}</span>
<span *ngIf="bpmUser">{{bpmUser.fullname}}</span>
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<div id="img_container">
<span *ngIf="ecmUser">{{ecmUser.firstName || ecmUser.lastName}}</span>
<span *ngIf="bpmUser">{{bpmUser.firstName || bpmUser.lastName || bpmUser.fullName}}</span>
<div class="button-profile" id="user-profile" data-automation-id="user-profile">
<img id="logged-user-img"
src="{{ getUserAvatar() }}"
[src]="getUserAvatar()"
class="profile-image"/>
</button>
</div>
<div 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 *ngIf="ecmUser">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content"> ECM </span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">First Name : </span>
<span class="mdl-list__item-secondary-content"> {{ecmUser.firstName}}</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">Last Name : </span>
<span class="mdl-list__item-secondary-content">{{ecmUser.lastName}}</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">Email : </span>
<span class="mdl-list__item-secondary-content"> {{ecmUser.email}}</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">Job Title : </span>
<span class="mdl-list__item-secondary-content"> {{ecmUser.jobTitle}}</span>
</li>
</div>
<div *ngIf="bpmUser">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content"> BPM </span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">First Name : </span>
<span class="mdl-list__item-secondary-content"> {{bpmUser.firstName}}</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">Last Name : </span>
<span class="mdl-list__item-secondary-content">{{bpmUser.lastName}}</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">Email : </span>
<span class="mdl-list__item-secondary-content"> {{bpmUser.email}}</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">Tenant Name : </span>
<span class="mdl-list__item-secondary-content"> {{bpmUser.tenantName}}</span>
</li>
</div>
</ul>
</div>
</div>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>

27
ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
View File

@@ -36,10 +36,11 @@ export class UserInfoComponent implements OnInit {
private ecmUser: EcmUserModel;
private bpmUser: BpmUserModel;
private baseComponentPath = __moduleName.replace('userinfo.component.js', '');
private anonymouseImageUrl: string = this.baseComponentPath + 'img/anonymous.gif';
public bpmUserImage: any;
public ecmUserImage: any;
private baseComponentPath = __moduleName.replace('userinfo.component.js', '');
constructor(private ecmUserService: ECMUserService,
private bpmUserService: BPMUserService,
@@ -52,7 +53,7 @@ export class UserInfoComponent implements OnInit {
.subscribe(
(res) => {
this.ecmUser = <EcmUserModel> res;
this.getUserProfileImage();
this.getEcmUserProfileImage();
}
);
}
@@ -61,30 +62,22 @@ export class UserInfoComponent implements OnInit {
.subscribe(
(res) => {
this.bpmUser = <BpmUserModel> res;
this.getUserProfileImage();
this.getBpmUserProfileImage();
}
);
}
}
private getUserProfileImage() {
if (this.ecmUser) {
this.ecmUserImage = this.ecmUserService.getCurrentUserProfileImageUrl(this.ecmUser.avatarId);
}
if (this.bpmUser) {
private getBpmUserProfileImage() {
this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
}
private getEcmUserProfileImage() {
this.ecmUserImage = this.ecmUserService.getCurrentUserProfileImageUrl(this.ecmUser.avatarId);
}
public getUserAvatar() {
if (this.ecmUserImage) {
return this.ecmUserImage;
}
if (this.bpmUserImage) {
return this.bpmUserImage;
}
if (!this.ecmUserImage && !this.bpmUserImage) {
return this.baseComponentPath + '/img/anonymous.gif';
}
return this.ecmUserImage || this.bpmUserImage || this.anonymouseImageUrl;
}
}