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

Added more style improvements

Browse Source
This commit is contained in:
Vito Albano
2016-09-23 15:49:41 +01:00
parent 078e7659af
commit 6f375b0a5c
3 changed files with 82 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,20 +5,49 @@
margin-right: 0%; margin-right: 0%;
cursor: pointer; cursor: pointer;
border: 1px solid #999999; border: 1px solid #999999;
vertical-align: middle;
} }
.button-profile { .button-profile {
display: inline-block; display: inline-block;
border: 0px; border: 0px;
vertical-align: middle;
} }
.detail-user-profile-list-mdl{ .detail-user-profile-list-mdl{
margin-right: 100px; margin-right: 10px;
} }
.user-profile-list-mdl{ .user-profile-list-mdl{
max-height: 450px; max-height: 450px;
max-width: 450px; min-width: 450px;
min-width: 410px;
overflow: auto; overflow: auto;
} }
.header-profile{
color: rgb(255,152,0);
margin-left: 10px;
}
hr.title-start {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
span.role-label-user{
font-weight: 400;
line-height: 1;
letter-spacing: 0;
color: rgba(0,0,0,.87);
}
.custom-role-style{
font-size: 14px;
color: #9e9e9e;
}
.truncate-long-names{
text-overflow: ellipsis;
}

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

@@ -1,6 +1,10 @@
<div id="img_container"> <div id="img_container">
<span *ngIf="ecmUser">{{ecmUser.firstName || ecmUser.lastName}}</span> <span *ngIf="ecmUser">{{ecmUser.firstName || ecmUser.lastName}}</span>
<span *ngIf="bpmUser">{{bpmUser.firstName || bpmUser.lastName || bpmUser.fullName}}</span> <span *ngIf="bpmUser">
{{ formatValue(bpmUser.firstName) ||
formatValue(bpmUser.lastName) ||
formatValue(bpmUser.fullName) }}
</span>
<div class="button-profile" id="user-profile" data-automation-id="user-profile"> <div class="button-profile" id="user-profile" data-automation-id="user-profile">
<img id="logged-user-img" <img id="logged-user-img"
[src]="getUserAvatar()" [src]="getUserAvatar()"
@@ -9,79 +13,46 @@
<div class="user-profile-list-mdl <div 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">
<ul class='detail-user-profile-list-mdl mdl-list'> <ul class='detail-user-profile-list-mdl mdl-list'>
<div *ngIf="ecmUser"> <div *ngIf="ecmUser">
<li class="mdl-list__item"> <span class="header-profile"><b>ECM</b></span>
<span class="mdl-list__item-primary-content" style="color: rgb(255,152,0);"> ECM </span> <hr class="title-start">
</li> <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-secondary-content"> <i class="mdl-list__item-avatar">
<strong> First Name : </strong> <img id="logged-user-img"
[src]="getEcmUserDetailAvatarUrl()"
class="profile-image"/>
</i>
<span class="truncate-long-names">{{ecmUser.firstName}} {{ecmUser.lastName}}</span>
<span class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
</span> </span>
<span class="mdl-list__item-secondary-content"> <span class="mdl-list__item-secondary-content custom-role-style">
<i>{{ecmUser.firstName}}</i> <span class="role-label-user">Job Role</span>
</span> {{ecmUser.jobTitle}}
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">
<strong>Last Name :</strong>
</span>
<span class="mdl-list__item-secondary-content">
<i>{{ecmUser.lastName}}</i>
</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">
<strong>Email : </strong>
</span>
<span class="mdl-list__item-secondary-content">
<i>{{ecmUser.email}}</i>
</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">
<strong> Job Title : </strong>
</span>
<span class="mdl-list__item-secondary-content">
<i> {{ecmUser.jobTitle}}</i>
</span> </span>
</li> </li>
</div> </div>
<div *ngIf="bpmUser"> <br>
<li class="mdl-list__item"> <div *ngIf="bpmUser">
<span class="mdl-list__item-primary-content" style="color: rgb(255,152,0);"> BPM </span> <span class="header-profile"><b>BPM</b></span>
</li> <hr class="title-start">
<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-secondary-content"> <span class="mdl-list__item-primary-content">
<strong>First Name : </strong> <i class="mdl-list__item-avatar">
<img id="logged-user-img"
[src]="getBpmUserDetailAvatarUrl()"
class="profile-image"/>
</i>
<span class="truncate-long-names">
{{formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
</span>
<span class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
</span> </span>
<span class="mdl-list__item-secondary-content"> <span class="mdl-list__item-secondary-content custom-role-style">
<i>{{bpmUser.firstName}}</i> <span class="role-label-user">Tenant</span>
</span> {{bpmUser.tenantName}}
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">
<strong>Last Name : </strong>
</span>
<span class="mdl-list__item-secondary-content">
<i>{{bpmUser.lastName}}</i>
</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">
<strong>Email : </strong>
</span>
<span class="mdl-list__item-secondary-content">
<i>{{bpmUser.email}}</i>
</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-secondary-content">
<strong>Tenant Name : </strong>
</span>
<span class="mdl-list__item-secondary-content">
<i>{{bpmUser.tenantName}}</i>
</span> </span>
</li> </li>
</div> </div>

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

@@ -80,4 +80,16 @@ export class UserInfoComponent implements OnInit {
return this.ecmUserImage || this.bpmUserImage || this.anonymouseImageUrl; return this.ecmUserImage || this.bpmUserImage || this.anonymouseImageUrl;
} }
public getBpmUserDetailAvatarUrl() {
return this.bpmUserImage || this.anonymouseImageUrl;
}
public getEcmUserDetailAvatarUrl() {
return this.ecmUserImage || this.anonymouseImageUrl;
}
public formatValue(value: string) {
return value === 'null' ? null : value;
}
} }