From bd616fbcb74a49c3b6edf36032d0adec19c59285 Mon Sep 17 00:00:00 2001
From: Patrick Pacher <patrick.pacher@gmail.com>
Date: Mon, 4 Apr 2022 15:41:26 +0200
Subject: [PATCH] Change current menu to be based on new dropdown module

---
 .../portmaster/src/app/shared/menu/index.ts   |  1 +
 .../src/app/shared/menu/menu-group.scss       | 13 +++
 .../src/app/shared/menu/menu-item.scss        | 17 ++++
 .../src/app/shared/menu/menu-trigger.scss     |  2 +-
 .../portmaster/src/app/shared/menu/menu.html  | 17 +---
 .../src/app/shared/menu/menu.module.ts        | 26 +++++
 .../portmaster/src/app/shared/menu/menu.scss  | 40 --------
 .../portmaster/src/app/shared/menu/menu.ts    | 98 ++-----------------
 8 files changed, 73 insertions(+), 141 deletions(-)
 create mode 100644 modules/portmaster/src/app/shared/menu/menu-group.scss
 create mode 100644 modules/portmaster/src/app/shared/menu/menu-item.scss
 create mode 100644 modules/portmaster/src/app/shared/menu/menu.module.ts
 delete mode 100644 modules/portmaster/src/app/shared/menu/menu.scss

diff --git a/modules/portmaster/src/app/shared/menu/index.ts b/modules/portmaster/src/app/shared/menu/index.ts
index 179925b0..bb5dcd95 100644
--- a/modules/portmaster/src/app/shared/menu/index.ts
+++ b/modules/portmaster/src/app/shared/menu/index.ts
@@ -1 +1,2 @@
 export { MenuComponent, MenuTriggerComponent, MenuItemComponent, MenuGroupComponent } from './menu';
+export * from './menu.module';
diff --git a/modules/portmaster/src/app/shared/menu/menu-group.scss b/modules/portmaster/src/app/shared/menu/menu-group.scss
new file mode 100644
index 00000000..c2cd7063
--- /dev/null
+++ b/modules/portmaster/src/app/shared/menu/menu-group.scss
@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  width: 100%;
+
+  @apply p-1;
+  @apply px-4;
+  @apply text-secondary;
+
+  display: block;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  opacity: .7;
+}
diff --git a/modules/portmaster/src/app/shared/menu/menu-item.scss b/modules/portmaster/src/app/shared/menu/menu-item.scss
new file mode 100644
index 00000000..fdba9c32
--- /dev/null
+++ b/modules/portmaster/src/app/shared/menu/menu-item.scss
@@ -0,0 +1,17 @@
+:host {
+  @apply block w-full;
+
+  cursor: pointer;
+  @apply p-2;
+  @apply px-4 text-primary text-xxs;
+  font-weight: 500;
+
+  &:hover {
+    @apply bg-gray-300;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
diff --git a/modules/portmaster/src/app/shared/menu/menu-trigger.scss b/modules/portmaster/src/app/shared/menu/menu-trigger.scss
index 90cccfb4..77cc16b0 100644
--- a/modules/portmaster/src/app/shared/menu/menu-trigger.scss
+++ b/modules/portmaster/src/app/shared/menu/menu-trigger.scss
@@ -36,6 +36,6 @@ div {
 }
 
 :host.active {
-  @apply bg-gray-500;
+  @apply bg-gray-400;
   color: white !important;
 }
diff --git a/modules/portmaster/src/app/shared/menu/menu.html b/modules/portmaster/src/app/shared/menu/menu.html
index 0a12039f..6af9fa83 100644
--- a/modules/portmaster/src/app/shared/menu/menu.html
+++ b/modules/portmaster/src/app/shared/menu/menu.html
@@ -1,12 +1,5 @@
-<ng-template [ngIf]="!!trigger">
-
-  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger!.origin!" [cdkConnectedOverlayOpen]="isOpen"
-    (detach)="onOverlayClosed()" [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
-    [cdkConnectedOverlayMinWidth]="minWidth" [cdkConnectedOverlayPositions]="positions"
-    (overlayOutsideClick)="onOutsideClick($event)">
-    <div class="item-list" [@fadeIn] [@fadeOut]>
-      <ng-content></ng-content>
-    </div>
-  </ng-template>
-
-</ng-template>
+<sfng-dropdown externalTrigger="true" #dropdown="sfngDropdown" offsetY="0">
+  <div class="flex flex-col flex-grow w-full h-full bg-gray-400 shadow select-none">
+    <ng-content></ng-content>
+  </div>
+</sfng-dropdown>
diff --git a/modules/portmaster/src/app/shared/menu/menu.module.ts b/modules/portmaster/src/app/shared/menu/menu.module.ts
new file mode 100644
index 00000000..1e074acb
--- /dev/null
+++ b/modules/portmaster/src/app/shared/menu/menu.module.ts
@@ -0,0 +1,26 @@
+import { OverlayModule } from "@angular/cdk/overlay";
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { SfngDropDownModule } from "../dropdown/dropdown.module";
+import { MenuComponent, MenuGroupComponent, MenuItemComponent, MenuTriggerComponent } from "./menu";
+
+@NgModule({
+  imports: [
+    SfngDropDownModule,
+    CommonModule,
+    OverlayModule,
+  ],
+  declarations: [
+    MenuComponent,
+    MenuGroupComponent,
+    MenuTriggerComponent,
+    MenuItemComponent,
+  ],
+  exports: [
+    MenuComponent,
+    MenuGroupComponent,
+    MenuTriggerComponent,
+    MenuItemComponent,
+  ],
+})
+export class SfngMenuModule { }
diff --git a/modules/portmaster/src/app/shared/menu/menu.scss b/modules/portmaster/src/app/shared/menu/menu.scss
deleted file mode 100644
index c709f3b7..00000000
--- a/modules/portmaster/src/app/shared/menu/menu.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.item-list {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  @apply bg-gray-500;
-  @apply shadow-xl;
-  user-select: none;
-
-  app-menu-item,
-  app-menu-group {
-    display: block;
-    width: 100%;
-  }
-
-  app-menu-item {
-    cursor: pointer;
-    @apply p-2;
-    @apply px-4 text-primary text-xxs;
-    font-weight: 500;
-
-    &:hover {
-      @apply bg-gray-300;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-
-  app-menu-group {
-    @apply p-1;
-    @apply px-4;
-    display: block;
-    text-transform: uppercase;
-    @apply text-secondary;
-    font-size: 0.7rem;
-    opacity: .7;
-  }
-}
diff --git a/modules/portmaster/src/app/shared/menu/menu.ts b/modules/portmaster/src/app/shared/menu/menu.ts
index b4261f2c..8070859d 100644
--- a/modules/portmaster/src/app/shared/menu/menu.ts
+++ b/modules/portmaster/src/app/shared/menu/menu.ts
@@ -2,6 +2,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { CdkOverlayOrigin, ConnectedPosition, ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, QueryList, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
 import { fadeInAnimation, fadeOutAnimation } from '../animations';
+import { SfngDropdown } from '../dropdown/dropdown';
 
 @Component({
   selector: 'app-menu-trigger',
@@ -11,7 +12,7 @@ import { fadeInAnimation, fadeOutAnimation } from '../animations';
 })
 export class MenuTriggerComponent {
   @ViewChild(CdkOverlayOrigin, { static: true })
-  origin: CdkOverlayOrigin | null = null;
+  origin!: CdkOverlayOrigin;
 
   @Input()
   menu: MenuComponent | null = null;
@@ -29,34 +30,25 @@ export class MenuTriggerComponent {
       return false;
     }
 
-    return this.menu.isOpen;
+    return this.menu.dropdown.isOpen;
   }
 
   constructor(
     public changeDetectorRef: ChangeDetectorRef,
-    public elementRef: ElementRef,
   ) { }
 
   toggle(event: MouseEvent) {
     event.preventDefault();
     event.stopPropagation();
 
-    if (!this.menu) {
-      return;
-    }
-
-    if (this.menu.isOpen) {
-      this.menu.close();
-      return;
-    }
-
-    this.menu.show(this);
+    this.menu?.dropdown.toggle(this.origin)
   }
 }
 
 @Component({
   selector: 'app-menu-item',
   template: '<ng-content></ng-content>',
+  styleUrls: ['./menu-item.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuItemComponent {
@@ -74,7 +66,7 @@ export class MenuItemComponent {
       return;
     }
     this.onActivate.next(event);
-    this.menu.close();
+    this.menu.dropdown.close();
   }
 
   /**
@@ -91,6 +83,7 @@ export class MenuItemComponent {
 @Component({
   selector: 'app-menu-group',
   template: '<ng-content></ng-content>',
+  styleUrls: ['./menu-group.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuGroupComponent { }
@@ -99,83 +92,12 @@ export class MenuGroupComponent { }
   selector: 'app-menu',
   exportAs: 'appMenu',
   templateUrl: './menu.html',
-  styleUrls: ['./menu.scss'],
-  encapsulation: ViewEncapsulation.None,
-  animations: [
-    fadeInAnimation,
-    fadeOutAnimation,
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuComponent {
   @ContentChildren(MenuItemComponent)
   items: QueryList<MenuItemComponent> | null = null;
 
-  scrollStrategy: ScrollStrategy;
-  minWidth: number = 0;
-
-  positions: ConnectedPosition[] = [
-    {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'top',
-    },
-    {
-      originX: 'end',
-      originY: 'top',
-      overlayX: 'end',
-      overlayY: 'bottom',
-    },
-  ]
-
-  trigger: MenuTriggerComponent | null = null;
-
-  isOpen = false;
-
-  onOverlayClosed() {
-    this.close()
-  }
-
-  onOutsideClick(event: MouseEvent) {
-    if (!!this.trigger) {
-      const triggerEl = this.trigger.origin!.elementRef.nativeElement;
-
-      let node = event.target;
-      while (!!node) {
-        if (node === triggerEl) {
-          return;
-        }
-        node = this.renderer.parentNode(node);
-      }
-    }
-
-    this.close();
-  }
-
-  constructor(
-    scrollOptions: ScrollStrategyOptions,
-    private renderer: Renderer2,
-  ) {
-    this.scrollStrategy = scrollOptions.reposition();
-  }
-
-  close() {
-    this.isOpen = false;
-    if (!!this.trigger) {
-      this.trigger.changeDetectorRef.markForCheck();
-    }
-  }
-
-  show(t: MenuTriggerComponent | null) {
-    if (this.isOpen) {
-      return;
-    }
-
-    if (!!t) {
-      this.trigger = t;
-      const rect = (this.trigger.elementRef.nativeElement as HTMLElement).getBoundingClientRect()
-      this.minWidth = rect ? rect.width : 0;
-    }
-    this.isOpen = true;
-  }
+  @ViewChild(SfngDropdown, { static: true })
+  dropdown!: SfngDropdown;
 }