alfresco-ng2-components/lib/core/userinfo/components/user-info.component.html

<div id="userinfo_container"
    [class.adf-userinfo-name-right]="showOnRight()"
    class="adf-userinfo-container" *ngIf="isLoggedIn()">
    <span *ngIf="ecmUser && showName" id="adf-userinfo-ecm-name-display"
          class="adf-userinfo-name">{{ecmUser.fullNameDisplay}}</span>
    <span *ngIf="bpmUser && !ecmUser && showName" id="adf-userinfo-bpm-name-display"
          class="adf-userinfo-name">{{bpmUser.fullNameDisplay}}</span>
    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button" data-automation-id="adf-user-profile">
        <div class="adf-userinfo-button-profile" id="user-profile">
            <div *ngIf="bpmUser && !ecmUser" id="bpm-user-image">
                <div *ngIf="!hasBpmUserPictureId()" [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
                <div *ngIf="hasBpmUserPictureId()" class="adf-userinfo-profile-container">
                    <img id="logged-user-img" [src]="bpmUserImage" alt="user-info-profile-button"
                        class="adf-userinfo-profile-image"/>
                </div>
            </div>
            <div *ngIf="ecmUser" id="ecm-user-image">
                    <div *ngIf="!hasEcmUserAvatarId()"
                         [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
                    <div *ngIf="hasEcmUserAvatarId()" class="adf-userinfo-profile-container">
                        <img id="logged-user-img" [src]="ecmUserImage" alt="user-info-profile-button"
                            class="adf-userinfo-profile-image"/>
                    </div>
            </div>
    </div>
</button>
    <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu">
        <mat-tab-group id="tab-group-env" (click)="stopClosing($event)"
            class="adf-userinfo-tab" [class.adf-hide-tab]="!bpmUser || !ecmUser">
            <mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}" *ngIf="ecmUser">
                <mat-card class="adf-userinfo-card">
                    <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
                        <div *ngIf="!hasEcmUserAvatarId()"
                             [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'">
                        </div>
                        <div *ngIf="hasEcmUserAvatarId()" class="adf-userinfo-profile-container adf-hide-small">
                            <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
                                alt="ecm-profile-image" [src]="ecmUserImage" />
                        </div>
                       <div class="adf-userinfo-title" id="ecm-username">{{ecmUser.fullNameDisplay}}</div>
                    </mat-card-header>
                    <mat-card-content>
                        <div class="adf-userinfo-supporting-text">
                                <div class="adf-userinfo-detail">
                                    <span id="ecm-full-name" class="adf-userinfo__detail-title">{{ecmUser.fullNameDisplay}}</span>
                                    <span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
                                </div>
                                <div class="adf-userinfo-detail">
                                    <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
                                        {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
                                        <span id="ecm-job-title" class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
                                    </span>
                                </div>
                        </div>
                    </mat-card-content>
                </mat-card>
            </mat-tab>
            <mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" *ngIf="bpmUser">
            <mat-card class="adf-userinfo-card">
                <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
                    <div *ngIf="!hasBpmUserPictureId()" [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                    <img *ngIf="hasBpmUserPictureId()" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
                            alt="bpm-profile-image" [src]="bpmUserImage"/>
                   <div class="adf-userinfo-title" id="bpm-username">{{bpmUser.fullNameDisplay}}</div>
                </mat-card-header>
                <mat-card-content>
                    <div class="adf-userinfo-supporting-text">
                            <div class="adf-userinfo-detail">
                                <span id="bpm-full-name" class="adf-userinfo__detail-title">{{ bpmUser.fullNameDisplay }}</span>
                                <span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
                            </div>
                            <div class="adf-userinfo-detail">
                                <span id="bpm-tenant" class="adf-userinfo__secondary-info">
                                    {{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
                                    <span class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
                                </span>
                            </div>
                    </div>
                </mat-card-content>
            </mat-card>
            </mat-tab>
        </mat-tab-group>
    </mat-menu>
</div>