NAS-125535 / 24.04 / Make username and settings icon in topbar one it…

…em (#9292) * NAS-125535: Make username and settings icon in topbar one item * NAS-125535: PR update * NAS-125535: PR update
truenas · Dec 8, 2023 · ffc5a66 · ffc5a66
1 parent f1547cf
commit ffc5a66
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/app/modules/layout/components/topbar/user-menu/user-menu.component.html b/src/app/modules/layout/components/topbar/user-menu/user-menu.component.html
@@ -1,12 +1,4 @@
 <div *ngIf="(loggedInUser$ | async) as user" class="user-menu-wrapper">
-  <span
-    *ngIf="user?.username"
-    [matTooltip]="user.username"
-    [matMenuTriggerFor]="userMenu"
-  >
-    {{ user.username }}
-  </span>
-
   <button
     name="Settings"
     mat-icon-button
@@ -15,6 +7,15 @@
     [matTooltip]="tooltips.settings | translate"
     [matMenuTriggerFor]="userMenu"
   >
+    <span
+      *ngIf="user?.username"
+      class="username"
+      [matTooltip]="user.username"
+      [matMenuTriggerFor]="userMenu"
+    >
+      {{ user.username }}
+    </span>
+
     <ix-icon name="account_circle"></ix-icon>
   </button>
 

diff --git a/src/app/modules/layout/components/topbar/user-menu/user-menu.component.scss b/src/app/modules/layout/components/topbar/user-menu/user-menu.component.scss
@@ -4,13 +4,19 @@
   align-items: center;
   display: flex;
 
-  > span {
+  > button {
+    border-radius: 4px !important;
+    padding: 4px !important;
+    width: inherit !important;
+  }
+
+  .username {
     -webkit-box-orient: vertical;
     cursor: pointer;
     display: inline-box;
     font-size: 14px;
     -webkit-line-clamp: 1;
-    margin-left: 0.5rem;
+    margin-right: 0.5rem;
     max-width: 200px;
     overflow: hidden;
     white-space: normal;

diff --git a/src/app/modules/layout/components/topbar/user-menu/user-menu.component.spec.ts b/src/app/modules/layout/components/topbar/user-menu/user-menu.component.spec.ts
@@ -54,9 +54,9 @@ describe('UserMenuComponent', () => {
     });
 
     it('should display correct username to the left of user icon in top bar', () => {
-      const usernameSpan = spectator.query('span');
-      expect(usernameSpan).toBeTruthy();
-      expect(usernameSpan.textContent).toContain('root');
+      const button = spectator.query('button');
+      expect(button).toBeTruthy();
+      expect(button.textContent).toContain('root');
     });
   });