diff --git a/frontend/src/app/components/fab/speed-dial/speed-dial.component.ts b/frontend/src/app/components/fab/speed-dial/speed-dial.component.ts index 0d55308..8cbc90e 100644 --- a/frontend/src/app/components/fab/speed-dial/speed-dial.component.ts +++ b/frontend/src/app/components/fab/speed-dial/speed-dial.component.ts @@ -36,14 +36,12 @@ export class SpeedDialComponent { @HostListener('document:click', ['$event']) @HostListener('document:keydown.escape', ['$event']) anyClick(e: Event) { - console.log(e); if (!this.openManager.isOpen || this.openManager.isAnimating) return; this.openManager.close(); } click(e: MouseEvent) { - console.log(e); if (!this.openManager.isOpen) { this.openManager.open(); } else { diff --git a/frontend/src/app/util/util-module/util.service.ts b/frontend/src/app/util/util-module/util.service.ts index df3cfff..e0e95e3 100644 --- a/frontend/src/app/util/util-module/util.service.ts +++ b/frontend/src/app/util/util-module/util.service.ts @@ -3,7 +3,7 @@ import { Injectable } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Router } from '@angular/router'; -import { HasFailed } from 'picsur-shared/dist/types'; +import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator'; import { map, Observable } from 'rxjs'; import { ApiService } from 'src/app/services/api/api.service'; import { Logger } from 'src/app/services/logger/logger.service'; @@ -20,6 +20,7 @@ export class UtilService { private readonly logger = new Logger('UtilService'); private isDesktopObservable: Observable; + private isDesktopVariable: boolean = true; constructor( private snackBar: MatSnackBar, @@ -31,6 +32,15 @@ export class UtilService { this.isDesktopObservable = this.breakPointObserver .observe(['(min-width: 576px)']) // Bootstrap breakpoints .pipe(map((result) => result.matches)); + + this.subscribeToIsDesktop(); + } + + @AutoUnsubscribe() + private subscribeToIsDesktop() { + return this.isDesktopObservable.subscribe((isDesktop) => { + this.isDesktopVariable = isDesktop; + }); } public quitError(message: string) { @@ -46,13 +56,22 @@ export class UtilService { return this.isDesktopObservable.pipe(map((isDesktop) => !isDesktop)); } + public isDesktopSnapshot(): boolean { + return this.isDesktopVariable; + } + + public isMobileSnapshot(): boolean { + return !this.isDesktopVariable; + } + public showSnackBar( message: string, type: SnackBarType = SnackBarType.Default, duration: number | undefined | null = null ) { - this.snackBar.open(message, '', { + let ref = this.snackBar.open(message, '', { panelClass: ['mat-toolbar', 'snackbar', type], + verticalPosition: this.isDesktopSnapshot() ? 'bottom' : 'top', ...(duration !== null ? { duration } : {}), }); } @@ -92,35 +111,35 @@ export class UtilService { return; } - let image = await this.api.getBuffer(url); - if (HasFailed(image)){ - this.showSnackBar( - 'Sharing is not supported on your device', - SnackBarType.Warning - ); - return; - } + // let image = await this.api.getBuffer(url); + // if (HasFailed(image)){ + // this.showSnackBar( + // 'Sharing is not supported on your device', + // SnackBarType.Warning + // ); + // return; + // } - let file = new File([image], 'image.gif', { type: 'image/gif' }); + // let file = new File([image], 'image.gif', { type: 'image/gif' }); - let a = navigator.canShare({ - title: 'test', - files: [file], - }); - console.log(a); + // let a = navigator.canShare({ + // title: 'test', + // files: [file], + // }); + // console.log(a); - try { - await navigator.share({ - title: 'test', - files: [file], - }); - } catch (e) { - this.logger.error(e); - this.showSnackBar( - 'Sharing is not supported on your device', - SnackBarType.Warning - ); - } + // try { + // await navigator.share({ + // title: 'test', + // files: [file], + // }); + // } catch (e) { + // this.logger.error(e); + // this.showSnackBar( + // 'Sharing is not supported on your device', + // SnackBarType.Warning + // ); + // } } public async sleep(ms: number) { diff --git a/frontend/src/scss/snackbar.scss b/frontend/src/scss/snackbar.scss index 78e1440..7d7360d 100644 --- a/frontend/src/scss/snackbar.scss +++ b/frontend/src/scss/snackbar.scss @@ -3,7 +3,7 @@ color: white; &.snack-success { - background: #274E29; + background: #274e29; } &.snack-error { @@ -11,14 +11,18 @@ } &.snack-warning { - background: #934D06; + background: #934d06; } &.snack-info { - background: #125E87; + background: #125e87; } &.snack-default { background: #272727; } } + +.mat-snack-bar-handset { + transform: translateY(64px); +}