improve a bunch of ui

frontend/src/app/components/fab/normal/fab.component.html

@@ -2,6 +2,8 @@
   <button
     mat-fab
     [color]="color"
+    [matTooltip]="tooltip"
+    matTooltipPosition="left"
     class="fab-position fullanimate mat-elevation-z6"
     (click)="onClick()"
     aria-label=""

frontend/src/app/components/fab/normal/fab.component.ts

@@ -8,6 +8,7 @@ export class FabComponent {
   @Input('aria-label') ariaLabel: string = 'Floating Action Button';
   @Input() icon: string = 'add';
   @Input() color: string = 'accent';
+  @Input('tooltip') tooltip: string;
   @Input() onClick: () => void = () => {};
 
   constructor() {}

frontend/src/app/components/header/header.component.html

@@ -19,6 +19,17 @@
   <span class="spacer"></span>
 
   <button
+    matTooltip="Upload an image"
+    *ngIf="canUpload"
+    mat-icon-button
+    class="me-3"
+    (click)="doUpload()"
+  >
+    <mat-icon fontSet="material-icons-outlined">upload</mat-icon>
+  </button>
+
+  <button
+    [matTooltip]="canRegister ? 'Login or Register' : 'Login to your account'"
     *ngIf="!isLoggedIn && canLogIn"
     mat-stroked-button
     (click)="doLogin()"
@@ -26,10 +37,15 @@
     Login
   </button>
 
-  <span *ngIf="isLoggedIn" class="me-3 d-none d-sm-block">
+  <!-- <span *ngIf="isLoggedIn" class="me-3 d-none d-sm-block">
     {{ user?.username }}
-  </span>
-  <button *ngIf="isLoggedIn" mat-icon-button [matMenuTriggerFor]="menu">
+  </span> -->
+  <button
+    matTooltip="Your account"
+    *ngIf="isLoggedIn"
+    mat-icon-button
+    [matMenuTriggerFor]="menu"
+  >
     <mat-icon fontSet="material-icons-outlined">account_circle</mat-icon>
   </button>
 

frontend/src/app/components/header/header.component.ts

@@ -4,7 +4,7 @@ import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { Permission } from 'picsur-shared/dist/dto/permissions.dto';
 import { EUser } from 'picsur-shared/dist/entities/user.entity';
 import { HasFailed } from 'picsur-shared/dist/types';
-import { SnackBarType } from "src/app/models/dto/snack-bar-type.dto";
+import { SnackBarType } from 'src/app/models/dto/snack-bar-type.dto';
 import { PermissionService } from 'src/app/services/api/permission.service';
 import { UserService } from 'src/app/services/api/user.service';
 import { UtilService } from 'src/app/util/util-module/util.service';
@@ -19,7 +19,11 @@ export class HeaderComponent implements OnInit {
   @Output('onHamburgerClick') onHamburgerClick = new EventEmitter<void>();
 
   private currentUser: EUser | null = null;
-  private permissions: string[] = [];
+
+  public canLogIn: boolean = false;
+  public canAccessSettings: boolean = false;
+  public canUpload: boolean = false;
+  public canRegister: boolean = false;
 
   public get user() {
     return this.currentUser;
@@ -29,14 +33,6 @@ export class HeaderComponent implements OnInit {
     return this.currentUser !== null;
   }
 
-  public get canLogIn() {
-    return this.permissions.includes(Permission.UserLogin);
-  }
-
-  public get canAccessSettings() {
-    return this.permissions.includes(Permission.Settings);
-  }
-
   constructor(
     private router: Router,
     private userService: UserService,
@@ -59,7 +55,10 @@ export class HeaderComponent implements OnInit {
   @AutoUnsubscribe()
   subscribePermissions() {
     return this.permissionService.live.subscribe((permissions) => {
-      this.permissions = permissions;
+      this.canLogIn = permissions.includes(Permission.UserLogin);
+      this.canAccessSettings = permissions.includes(Permission.Settings);
+      this.canUpload = permissions.includes(Permission.ImageUpload);
+      this.canRegister = permissions.includes(Permission.UserRegister);
     });
   }
 
@@ -80,4 +79,8 @@ export class HeaderComponent implements OnInit {
   doSettings() {
     this.router.navigate(['/settings']);
   }
+
+  doUpload() {
+    this.router.navigate(['/upload']);
+  }
 }

frontend/src/app/components/header/header.module.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { HeaderComponent } from './header.component';
 
@@ -15,6 +16,7 @@ import { HeaderComponent } from './header.component';
     RouterModule,
     MatIconModule,
     MatMenuModule,
+    MatTooltipModule
   ],
   declarations: [HeaderComponent],
   exports: [HeaderComponent],

frontend/src/app/routes/settings/roles/settings-roles.component.html

@@ -80,4 +80,8 @@
 >
 </mat-paginator>
 
-<fab aria-label="Add Role" (click)="addRole()"></fab>
+<fab
+  aria-label="Add Role"
+  (click)="addRole()"
+  tooltip="Create a new role"
+></fab>

frontend/src/app/routes/settings/users/settings-users.component.html

@@ -7,7 +7,9 @@
   </ng-container>
 
   <ng-container matColumnDef="roles">
-    <mat-header-cell class="d-none d-md-flex" *matHeaderCellDef>Roles</mat-header-cell>
+    <mat-header-cell class="d-none d-md-flex" *matHeaderCellDef
+      >Roles</mat-header-cell
+    >
     <mat-cell class="d-none d-md-flex" *matCellDef="let user">
       <mat-chip-list aria-label="User Roles">
         <mat-chip
@@ -72,4 +74,9 @@
 >
 </mat-paginator>
 
-<fab aria-label="Add User" (click)="addUser()" icon="person_add"></fab>
+<fab
+  aria-label="Add User"
+  (click)="addUser()"
+  icon="person_add"
+  tooltip="Create a new user"
+></fab>

frontend/src/app/routes/view/view.component.html

@@ -23,20 +23,6 @@
     <div class="col-md-6 col-12">
       <copy-field label="Rst" [value]="imageLinks.rst"></copy-field>
     </div>
-    <div class="col-12">
-      <button mat-raised-button class="m-1" color="accent" (click)="download()">
-        Download
-      </button>
-
-      <button
-        mat-raised-button
-        class="m-1"
-        color="primary"
-        (click)="goBackHome()"
-      >
-        Upload Another
-      </button>
-    </div>
   </div>
 </div>