improve a bunch of ui
This commit is contained in:
parent
5bc9e1460f
commit
1e692506bd
|
@ -2,6 +2,8 @@
|
|||
<button
|
||||
mat-fab
|
||||
[color]="color"
|
||||
[matTooltip]="tooltip"
|
||||
matTooltipPosition="left"
|
||||
class="fab-position fullanimate mat-elevation-z6"
|
||||
(click)="onClick()"
|
||||
aria-label=""
|
||||
|
|
|
@ -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() {}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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']);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue