more fixes for speed-dial

frontend/src/app/components/fab/speed-dial/open-manager.ts

@@ -0,0 +1,55 @@
+export class OpenManager {
+  private _isOpen = false;
+
+  private _isAnimating = false;
+  private _wantsOpen = false;
+
+  public get isOpen(): boolean {
+    return this._isOpen;
+  }
+
+  public set isAnimating(val: boolean) {
+    this._isAnimating = val;
+    if (val === false && this._wantsOpen !== this._isOpen) {
+      this._isOpen = this._wantsOpen;
+    }
+  }
+
+  public get isAnimating(): boolean {
+    return this._isAnimating;
+  }
+
+  public set wantsOpen(val: boolean) {
+    this._wantsOpen = val;
+    if (!this._isAnimating) {
+      this._isOpen = val;
+    }
+  }
+
+  public get wantsOpen(): boolean {
+    return this._wantsOpen;
+  }
+
+  public toggle(): boolean {
+    this.wantsOpen = !this.wantsOpen;
+    return this.wantsOpen;
+  }
+
+  public open(): boolean {
+    this.wantsOpen = true;
+    return this.wantsOpen;
+  }
+
+  public close(): boolean {
+    this.wantsOpen = false;
+    return this.wantsOpen;
+  }
+
+  public animationStart(): void {
+    this.isAnimating = true;
+  }
+
+  public animationDone(): void {
+    this.isAnimating = false;
+  }
+}

frontend/src/app/components/fab/speed-dial/speed-dial-option.directive.ts

@@ -1,11 +1,16 @@
 import { Directive, Host, Optional } from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import { MatTooltip } from '@angular/material/tooltip';
 
 @Directive({
-  selector: 'speed-dial (button[mat-mini-fab], button[mat-fab])',
+  selector: 'speed-dial button[mat-mini-fab]',
 })
 export class SpeedDialOptionDirective {
-  constructor(@Host() @Optional() test?: MatTooltip) {
+  constructor(
+    @Host() @Optional() test?: MatTooltip,
+    @Host() @Optional() test2?: MatButton
+  ) {
     if (test) test.position = 'left';
+    if (test2) test2.color = 'primary';
   }
 }

frontend/src/app/components/fab/speed-dial/speed-dial.component.html

@@ -1,18 +1,18 @@
 <div class="fab-wrapper">
   <div
     class="fab-position"
-    (mouseenter)="enter()"
-    (mouseleave)="leave()"
-    [class.speed-dial-is-open]="isOpen"
+    (mouseenter)="enter($event)"
+    (mouseleave)="leave($event)"
+    [class.speed-dial-is-open]="openManager.isOpen"
   >
     <div
       class="speed-dial-options"
       [@speedDialAnimation]
-      (@speedDialAnimation.start)="animStart()"
-      (@speedDialAnimation.done)="animDone()"
-      *ngIf="isOpen"
+      (@speedDialAnimation.start)="openManager.animationStart()"
+      (@speedDialAnimation.done)="openManager.animationDone()"
+      *ngIf="openManager.isOpen"
     >
-      <ng-content select="[mat-mini-fab]"></ng-content>
+      <ng-content select="button[mat-mini-fab]"></ng-content>
     </div>
 
     <button
@@ -20,8 +20,9 @@
       [color]="color"
       class="speed-dial-main-button fullanimate mat-elevation-z6"
       [matTooltip]="tooltip"
-      [matTooltipDisabled]="!isOpen"
-      (click)="click()"
+      matTooltipPosition="left"
+      [matTooltipDisabled]="!openManager.isOpen"
+      (click)="click($event)"
       aria-label=""
     >
       <mat-icon

frontend/src/app/components/fab/speed-dial/speed-dial.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input, Output } from '@angular/core';
+import { Component, HostListener, Input, Output } from '@angular/core';
 import { Subject } from 'rxjs';
+import { OpenManager } from './open-manager';
 import { SpeedDialAnimation } from './speed-dial.animation';
 
 @Component({
@@ -18,60 +19,40 @@ export class SpeedDialComponent {
 
   @Output('main-click') clickEmitter = new Subject<void>();
 
-  public isOpen = false;
+  public openManager = new OpenManager();
 
-  private _isAnimating = false;
-  private _wantsOpen = false;
+  private lastMouseEvent: number = 0;
 
-  private set isAnimating(val: boolean) {
-    this._isAnimating = val;
-    if (val === false && this._wantsOpen !== this.isOpen) {
-      this.isOpen = this._wantsOpen;
-    }
+  @HostListener('document:click', ['$event'])
+  anyClick(e: MouseEvent) {
+    if (!this.openManager.isOpen) return;
+    if (this.lastMouseEvent === e.timeStamp) return;
+
+    this.openManager.close();
   }
 
-  private set wantsOpen(val: boolean) {
-    this._wantsOpen = val;
-    if (!this._isAnimating) {
-      this.isOpen = val;
-    }
-  }
+  click(e: MouseEvent) {
+    if (this.lastMouseEvent === e.timeStamp) return;
 
-  click() {
-    if (this._isAnimating) return;
+    this.lastMouseEvent = e.timeStamp;
+    const value = this.openManager.toggle();
 
-    this.wantsOpen = !this._wantsOpen;
-
-    if (this._wantsOpen === false) {
+    if (value === false) {
       this.clickEmitter.next();
     }
   }
 
-  enter() {
+  enter(e: MouseEvent) {
     if (this.openOnHover) {
-      this.wantsOpen = true;
+      this.lastMouseEvent = e.timeStamp;
+      this.openManager.open();
     }
   }
 
-  leave() {
+  leave(e: MouseEvent) {
     if (this.openOnHover) {
-      this.wantsOpen = false;
+      this.lastMouseEvent = e.timeStamp;
+      this.openManager.close();
     }
   }
-
-  animStart() {
-    this.isAnimating = true;
-  }
-
-  animDone() {
-    this.isAnimating = false;
-  }
-
-  open() {
-    this.wantsOpen = true;
-  }
-
-  close() {
-    this.wantsOpen = false;
-  }
 }

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

@@ -46,20 +46,14 @@
   tooltip="Download the image"
   [open-on-hover]="true"
   (main-click)="download()"
-  #speedDial
 >
-  <button
-    mat-mini-fab
-    matTooltip="Close menu"
-    color="primary"
-    (click)="speedDial.close()"
-  >
+  <button mat-mini-fab matTooltip="Close menu">
     <mat-icon>close</mat-icon>
   </button>
-  <button mat-mini-fab matTooltip="Info about the action" color="primary">
+  <button mat-mini-fab matTooltip="Info about the action">
     <mat-icon>edit</mat-icon>
   </button>
-  <button mat-mini-fab matTooltip="Info about the action" color="primary">
+  <button mat-mini-fab matTooltip="Info about the action">
     <mat-icon>filter_list</mat-icon>
   </button>
 </speed-dial>