Update users-profile.component.html

Moved everything to secondary toolbar.
open-learning-exchange · Oct 25, 2024 · c78be3b · c78be3b
1 parent 50cb634
commit c78be3b
Showing 1 changed file with 32 additions and 26 deletions.
diff --git a/src/app/users/users-profile/users-profile.component.html b/src/app/users/users-profile/users-profile.component.html
@@ -4,34 +4,40 @@
   </button>
   <span i18n>Member Profile</span>
   <span class="toolbar-fill"></span>
-  <button mat-icon-button [matMenuTriggerFor]="menu" class="mobile-only">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <button mat-stroked-button class="margin-lr-3 desktop-only" *ngIf="hasAchievement && (user.name === urlName || user.isUserAdmin) && !isDialog" [routerLink]="['achievements', { planet: userDetail.planetCode }]">
-    <mat-icon class="margin-lr-3">visibility</mat-icon>
-    <span i18n>View Achievements</span>
-  </button>
-  <button mat-raised-button color="accent" class="margin-lr-3 desktop-only" *ngIf="editable && !isDialog" [routerLink]="['../../update/', urlName]">
-    <mat-icon>mode_edit</mat-icon>
-    <span i18n>Edit Profile</span>
-  </button>
-  <a mat-raised-button color="accent" class="margin-lr-3 desktop-only" *ngIf="editable && !isDialog" i18n [planetChangePassword]="userDetail">Change Password</a>
 </mat-toolbar>
-<mat-menu #menu="matMenu">
-  <button mat-menu-item *ngIf="hasAchievement && (user.name === urlName || user.isUserAdmin) && !isDialog" [routerLink]="['achievements', { planet: userDetail.planetCode }]">
-    <mat-icon>visibility</mat-icon>
-    <span i18n>View Achievements</span>
-  </button>
-  <button mat-menu-item *ngIf="editable && !isDialog" [routerLink]="['../../update/', urlName]">
-    <mat-icon>mode_edit</mat-icon>
-    <span i18n>Edit Profile</span>
-  </button>
-  <button mat-menu-item *ngIf="editable && !isDialog" [planetChangePassword]="userDetail">
-    <mat-icon>lock</mat-icon>
-    <span i18n>Change Password</span>
-  </button>
-</mat-menu>
+
 <div class="space-container">
+  <mat-toolbar class="primary-color font-size-1">
+    <span>{{userDetail.name}}</span>
+    <mat-icon class="margin-lr-5" *ngIf="userDetail.gender" svgIcon="{{userDetail.gender.toLowerCase()}}"></mat-icon>
+    <span class="toolbar-fill"></span>
+    <button mat-icon-button [matMenuTriggerFor]="menu" class="mobile-only">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <button mat-stroked-button class="margin-lr-3 desktop-only" *ngIf="hasAchievement && (user.name === urlName || user.isUserAdmin) && !isDialog" [routerLink]="['achievements', { planet: userDetail.planetCode }]">
+      <mat-icon class="margin-lr-3">visibility</mat-icon><span i18n>View Achievements</span>
+    </button>
+    <button mat-raised-button color="accent" class="margin-lr-3 desktop-only" *ngIf="editable && !isDialog" [routerLink]="['../../update/', urlName]">
+      <mat-icon>mode_edit</mat-icon><span i18n>Edit Profile</span>
+    </button>
+    <a mat-raised-button color="accent" class="margin-lr-3 desktop-only" *ngIf="editable && !isDialog" i18n [planetChangePassword]="userDetail">
+      Change Password
+    </a>
+  </mat-toolbar>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item *ngIf="hasAchievement && (user.name === urlName || user.isUserAdmin) && !isDialog" [routerLink]="['achievements', { planet: userDetail.planetCode }]">
+      <mat-icon>visibility</mat-icon>
+      <span i18n>View Achievements</span>
+    </button>
+    <button mat-menu-item *ngIf="editable && !isDialog" [routerLink]="['../../update/', urlName]">
+      <mat-icon>mode_edit</mat-icon>
+      <span i18n>Edit Profile</span>
+    </button>
+    <button mat-menu-item *ngIf="editable && !isDialog" [planetChangePassword]="userDetail">
+      <mat-icon>lock</mat-icon>
+      <span i18n>Change Password</span>
+    </button>
+  </mat-menu>
   <div class="view-container">
     <div class="profile-container">
       <div class="profile-image-section">