fix: add fix for ShellBar user menu button using Avatar (#3468)

* fix: add fix for ShellBar user menu button using Avatar * address PR review comments
SAP · Oct 1, 2020 · d2ddddc · d2ddddc
1 parent f612532
commit d2ddddc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 32 deletions.
diff --git a/libs/core/src/lib/avatar/avatar.component.html b/libs/core/src/lib/avatar/avatar.component.html
@@ -1,12 +1,11 @@
 {{ abbreviate }}
 
-<i *ngIf="zoomGlyph"
-   role="presentation"
-   class="fd-avatar__zoom-icon"
-   [ngClass]="zoomGlyph ? ' sap-icon--' + zoomGlyph : ''">
-</i>
-<i *ngIf="glyph"
-   class="fd-avatar__icon"
-   [ngClass]="glyph ? ' sap-icon--' + glyph : ''"
-   role="presentation">
+<i
+    *ngIf="zoomGlyph"
+    role="presentation"
+    class="fd-avatar__zoom-icon"
+    [ngClass]="zoomGlyph ? ' sap-icon--' + zoomGlyph : ''"
+>
 </i>
+<i *ngIf="glyph" class="fd-avatar__icon" [ngClass]="glyph ? ' sap-icon--' + glyph : ''" role="presentation"> </i>
+<i *ngIf="showDefault" class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"> </i>
diff --git a/libs/core/src/lib/avatar/avatar.component.ts b/libs/core/src/lib/avatar/avatar.component.ts
@@ -118,8 +118,8 @@ export class AvatarComponent implements OnChanges, OnInit, CssClassBuilder {
     /** @hidden */
     private _bgImage: string = null;
 
-    /** @hidden */
-    private get showDefault(): boolean {
+    /** If a default placeholder should be displayed */
+    get showDefault(): boolean {
         return !this.abbreviate && !this._image && !this.glyph;
     }
 
@@ -145,7 +145,6 @@ export class AvatarComponent implements OnChanges, OnInit, CssClassBuilder {
         return [
             'fd-avatar',
             this.size ? `fd-avatar--${this.size}` : '',
-            this.showDefault ? 'sap-icon--person-placeholder' : '',
             this.colorAccent ? `fd-avatar--accent-color-${this.colorAccent}` : '',
             this.circle ? 'fd-avatar--circle' : '',
             this.border ? 'fd-avatar--border' : '',

diff --git a/libs/core/src/lib/shellbar/user-menu/shellbar-user-menu.component.html b/libs/core/src/lib/shellbar/user-menu/shellbar-user-menu.component.html
@@ -1,37 +1,38 @@
 <div class="fd-shellbar__action fd-shellbar__action--show-always" *ngIf="user">
     <div class="fd-user-menu">
-        <button class="fd-button fd-shellbar__button fd-shellbar__button--user-menu"
-                [disabled]="disabled"
-                [fdMenuTrigger]="menu">
+        <button
+            class="fd-button fd-shellbar__button fd-shellbar__button--user-menu"
+            [disabled]="disabled"
+            [fdMenuTrigger]="menu"
+        >
             <fd-avatar
                 size="xs"
                 *ngIf="!user.image"
-                colorAccent={{user.colorAccent}}
+                colorAccent="{{ user.colorAccent }}"
                 [circle]="true"
-                label={{user.fullName}}
+                label="{{ user.fullName }}"
             >
-                {{ user.initials }}
             </fd-avatar>
             <fd-avatar
-                colorAccent={{user.colorAccent}}
+                colorAccent="{{ user.colorAccent }}"
                 [circle]="true"
                 size="xs"
                 *ngIf="user.image"
-                image={{user.image}}
+                image="{{ user.image }}"
             ></fd-avatar>
         </button>
-        <fd-menu #menu
-                 [options]="options"
-                 [compact]="compact"
-                 [triggers]="triggers"
-                 [placement]="placement"
-                 [fillControlMode]="fillControlMode"
-                 [closeOnEscapeKey]="closeOnEscapeKey"
-                 [noArrow]="false"
-                 [closeOnOutsideClick]="closeOnOutsideClick">
-            <li fd-menu-item
-                *ngFor="let item of userMenu"
-                (click)="itemClick(item, $event)">
+        <fd-menu
+            #menu
+            [options]="options"
+            [compact]="compact"
+            [triggers]="triggers"
+            [placement]="placement"
+            [fillControlMode]="fillControlMode"
+            [closeOnEscapeKey]="closeOnEscapeKey"
+            [noArrow]="false"
+            [closeOnOutsideClick]="closeOnOutsideClick"
+        >
+            <li fd-menu-item *ngFor="let item of userMenu" (click)="itemClick(item, $event)">
                 <div fd-menu-interactive>
                     <span fd-menu-title>{{ item.text }}</span>
                 </div>