all: smoother profile toolbar (fixes #7627) (#7642)

Co-authored-by: mutugiii <[email protected]> Co-authored-by: dogi <[email protected]>
open-learning-exchange · Nov 1, 2024 · a063656 · a063656
1 parent 3eb6f14
commit a063656
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.22",
+  "version": "0.15.23",
   "myplanet": {
-    "latest": "v0.20.75",
-    "min": "v0.19.75"
+    "latest": "v0.20.76",
+    "min": "v0.19.76"
   },
   "scripts": {
     "ng": "ng",

diff --git a/src/app/users/users-profile/users-profile.component.html b/src/app/users/users-profile/users-profile.component.html
@@ -1,20 +1,36 @@
 <mat-toolbar *ngIf="!isDialog">
-  <button mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
-  <span i18n>Member Profile</span>
-  <span class="toolbar-fill"></span>
+  <mat-toolbar-row>
+    <button mat-icon-button (click)="goBack()">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <span i18n>Member Profile</span>
+    <span class="toolbar-fill"></span>
+  </mat-toolbar-row>
 </mat-toolbar>
 
 <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" *ngIf="isMobile; else actionButtons">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu" class="actions-menu">
+      <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
+    </mat-menu>
+  </mat-toolbar>
+  <ng-template #actionButtons>
     <button mat-stroked-button class="margin-lr-3" *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" *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" *ngIf="editable && !isDialog" i18n [planetChangePassword]="userDetail">Change Password</a>
-  </mat-toolbar>
+    <button mat-raised-button color="accent" class="margin-lr-3" *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" *ngIf="editable && !isDialog" i18n [planetChangePassword]="userDetail">
+      Change Password
+    </a>
+  </ng-template>
   <div class="view-container">
     <div class="profile-container">
       <div class="profile-image-section">

diff --git a/src/app/users/users-profile/users-profile.component.ts b/src/app/users/users-profile/users-profile.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -9,6 +9,7 @@ import { UsersAchievementsService } from '../users-achievements/users-achievemen
 import { findDocuments } from '../../shared/mangoQueries';
 import { StateService } from '../../shared/state.service';
 import { educationLevel } from '../user-constants';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 
 @Component({
   selector: 'planet-users-profile',
@@ -27,6 +28,8 @@ export class UsersProfileComponent implements OnInit, OnDestroy {
   totalLogins = 0;
   lastLogin = 0;
   educationLevel = educationLevel;
+  deviceType: DeviceType;
+  isMobile: boolean;
   private onDestroy$ = new Subject<void>();
   @Input() planetCode: string | null = null;
   @Input() isDialog: boolean;
@@ -38,8 +41,12 @@ export class UsersProfileComponent implements OnInit, OnDestroy {
     private userService: UserService,
     private router: Router,
     private usersAchievementsService: UsersAchievementsService,
-    private stateService: StateService
-  ) { }
+    private stateService: StateService,
+    private deviceInfoService: DeviceInfoService
+  ) {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+    this.isMobile = this.deviceType === DeviceType.MOBILE;
+  }
 
   ngOnInit() {
     this.user = this.userService.get();
@@ -56,6 +63,12 @@ export class UsersProfileComponent implements OnInit, OnDestroy {
     });
   }
 
+  @HostListener('window:resize')
+  onResize() {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+    this.isMobile = this.deviceType === DeviceType.MOBILE;
+  }
+
   ngOnDestroy() {
     this.onDestroy$.next();
     this.onDestroy$.complete();