From 6f375b0a5c8611378b110b4d010e9bef59dc1683 Mon Sep 17 00:00:00 2001
From: Vito Albano <valbano@MacPro.local>
Date: Fri, 23 Sep 2016 15:49:41 +0100
Subject: [PATCH] Added more style improvements

---
 .../src/userinfo.component.css                |  35 +++++-
 .../src/userinfo.component.html               | 105 +++++++-----------
 .../src/userinfo.component.ts                 |  12 ++
 3 files changed, 82 insertions(+), 70 deletions(-)

diff --git a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css
index dbf99bfc30..93254d00fa 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css
+++ b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css
@@ -5,20 +5,49 @@
   margin-right: 0%;
   cursor: pointer;
   border: 1px solid #999999;
+  vertical-align: middle;
 }
 
 .button-profile {
   display: inline-block;
   border: 0px;
+  vertical-align: middle;
 }
 
 .detail-user-profile-list-mdl{
-    margin-right: 100px;
+    margin-right: 10px;
 }
 
 .user-profile-list-mdl{
     max-height: 450px;
-    max-width: 450px;
-    min-width: 410px;
+    min-width: 450px;
     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;
+}
diff --git a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
index 8311349814..74e47e341f 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
+++ b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
@@ -1,6 +1,10 @@
 <div id="img_container">
     <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">
                 <img id="logged-user-img"
                      [src]="getUserAvatar()"
@@ -9,79 +13,46 @@
     <div class="user-profile-list-mdl
                 mdl-menu mdl-menu--bottom-right
                 mdl-js-menu mdl-js-ripple-effect"
-         for="user-profile">
+                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" style="color: rgb(255,152,0);"> ECM </span>
-                    </li>
-                    <li class="mdl-list__item mdl-list__item-two-line">
-                        <span class="mdl-list__item-secondary-content">
-                            <strong> First Name : </strong>
+                    <span class="header-profile"><b>ECM</b></span>
+                    <hr class="title-start">
+                    <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="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  class="mdl-list__item-secondary-content">
-                            <i>{{ecmUser.firstName}}</i>
-                        </span>
-                    </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 class="mdl-list__item-secondary-content custom-role-style">
+                            <span class="role-label-user">Job Role</span>
+                            {{ecmUser.jobTitle}}
                         </span>
                     </li>
                 </div>
-                    <div *ngIf="bpmUser">
-                    <li class="mdl-list__item">
-                        <span class="mdl-list__item-primary-content" style="color: rgb(255,152,0);"> BPM </span>
-                    </li>
-                    <li class="mdl-list__item mdl-list__item-two-line">
-                        <span class="mdl-list__item-secondary-content">
-                            <strong>First Name : </strong>
+                <br>
+                <div *ngIf="bpmUser">
+                    <span class="header-profile"><b>BPM</b></span>
+                    <hr class="title-start">
+                    <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="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  class="mdl-list__item-secondary-content">
-                            <i>{{bpmUser.firstName}}</i>
-                        </span>
-                    </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 class="mdl-list__item-secondary-content custom-role-style">
+                            <span class="role-label-user">Tenant</span>
+                            {{bpmUser.tenantName}}
                         </span>
                     </li>
                 </div>
diff --git a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
index 4ed268af9b..f991d8825f 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
@@ -80,4 +80,16 @@ export class UserInfoComponent implements OnInit {
         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;
+    }
+
 }