Merge pull request #337 from usnistgov/fix/floating-menu

Fix floating menu bug showing up in Safari
usnistgov · Jul 18, 2024 · 5f3f859 · 5f3f859
2 parents d2095ab + a7171ec
commit 5f3f859
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 39 deletions.
diff --git a/angular/src/app/landing/landingpage.component.html b/angular/src/app/landing/landingpage.component.html
@@ -23,48 +23,31 @@
             <!-- div to keep track of the menu button position -->
             <div #stickyButton></div>
 
-            <!-- <button #menubtn *ngIf="md !== null && inBrowser && mobileMode" type="button" pButton icon="faa faa-list"
-                class="ui-button ui-button-icon-only sticky-menu"
-                (click)="menu3.togglePopup($event)">
-            </button> -->
-
             <button #menubtn *ngIf="md !== null && inBrowser && mobileMode"
                 [ngClass]="windowScrolled ? 'sticky-button' : 'rightmenu-button'" type="button" pButton
-                icon="faa faa-list" class="ui-button ui-button-icon-only" (click)="menu3.togglePopup($event)">
+                icon="faa faa-list" class="ui-button ui-button-icon-only"
+                (click)="toggleMenu($event)">
             </button>
 
-            <tools-menu #menu3 
-                [record]="md" 
-                [isPopup]="true" 
-                [collection]="collection" 
-                [appendTo]="menubtn" 
-                [theme]="theme"
-                (toggle_citation)="toggleCitation('small')" 
-                (scroll)="goToSection($event)">
-            </tools-menu>
+            <app-menu [record]="md" class="sticky-menu-popup" *ngIf="showStickMenu && mobileMode" [collection]="collection"
+                [theme]="theme" [inBrowser]="inBrowser" [metricsData]="metricsData" [showMetrics]="showMetrics" (scroll)="goToSection($event)" (toggle_citation)="toggleCitation('large')">
+            </app-menu>
         </div>
         <div #stickyMenu></div>
         <div *ngIf="_showData">
-            <!-- <div class="grid111"> -->
-            <!-- side tool menu (for tablets and desktop displays  -->
-
-            <!-- <div [ngClass]="windowScrolled ? 'sticky-menu' : 'rightmenu'"> -->
             <div class="sticky-menu">
-                <!-- <div style="position: sticky; top: 1em;width: 20%;display: inline-block;"> -->
-                <!-- <div class="col-12"> -->
                 <div *ngIf="inBrowser" class="d-none d-md-block d-lg-block d-xl-block ">
 
-                    <tools-menu #menu2 [record]="md" [isPopup]="false" [collection]="collection"
-                        (toggle_citation)="toggleCitation('large')" (scroll)="goToSection($event)">
-                    </tools-menu>
+                    <app-menu [record]="md" [collection]="collection" [theme]="theme" [inBrowser]="inBrowser" [metricsData]="metricsData" [showMetrics]="showMetrics" (scroll)="goToSection($event)"
+                        (toggle_citation)="toggleCitation('large')">
+                    </app-menu>
 
-                    <app-metricsinfo *ngIf="theme != scienceTheme" [inBrowser]="inBrowser" [record]="md"
+                    <!-- <app-metricsinfo *ngIf="theme != scienceTheme" [inBrowser]="inBrowser" [record]="md"
                         [metricsData]="metricsData" [showMetrics]="showMetrics">
-                    </app-metricsinfo>
+                    </app-metricsinfo> -->
 
                     <app-downloadstatus [inBrowser]="inBrowser"></app-downloadstatus>
                 </div>
-                <!-- </div> -->
             </div>
 
             <!-- landing page content -->

diff --git a/angular/src/app/landing/landingpage.component.scss b/angular/src/app/landing/landingpage.component.scss
@@ -52,6 +52,16 @@
     z-index: 10;
 }
 
+.sticky-menu-popup {
+    float: right;
+    position: sticky;
+    margin-top: 4em;
+    right: 2em;
+    width: 10em;
+    height: 2.3em;
+    z-index: 10;
+}
+
 .sticky-menu {
     float: right;
     position: sticky;

diff --git a/angular/src/app/landing/landingpage.component.ts b/angular/src/app/landing/landingpage.component.ts
@@ -103,6 +103,15 @@ export class LandingPageComponent implements OnInit, AfterViewInit {
 
     buttonTop: number = 20;
 
+    showStickMenu: boolean = false;
+
+
+    @HostListener('document:click', ['$event'])
+    documentClick(event: MouseEvent) {
+        event.stopPropagation();
+        this.showStickMenu = false;
+    }
+
     @ViewChild(LandingBodyComponent)
     landingBodyComponent: LandingBodyComponent;
 
@@ -578,10 +587,9 @@ export class LandingPageComponent implements OnInit, AfterViewInit {
      * sections.  
      */
     goToSection(sectionId: string) {
-        // If sectionID is "Metadata", scroll to About This Dataset and display JSON viewer
         this.showJsonViewer = (sectionId == "Metadata");
         if(sectionId == "Metadata") sectionId = "about";
-
+      
         setTimeout(() => {
             this.landingBodyComponent.goToSection(sectionId);
         }, 50);
@@ -637,4 +645,9 @@ export class LandingPageComponent implements OnInit, AfterViewInit {
             "col-10 md:col-10 lg:col-10 sm:flex-nowrap";
         }
     }
+
+    toggleMenu(event){
+        event.stopPropagation(); 
+        this.showStickMenu = !this.showStickMenu
+    }
 }
diff --git a/angular/src/app/landing/landingpage.module.ts b/angular/src/app/landing/landingpage.module.ts
@@ -19,7 +19,7 @@ import { DoneComponent } from './done/done.component';
 import { DownloadstatusComponent } from './downloadstatus/downloadstatus.component';
 import { TaxonomyListService } from '../shared/taxonomy-list'
 import { ErrorComponent, UserErrorComponent } from './error.component';
-import { MetricsinfoComponent } from './metricsinfo/metricsinfo.component';
+
 // import { ForensicslandingbodyModule } from './forensicslandingbody/forensicslandingbody.module';
 // import { ForensicssearchresultModule } from './forensicssearchresult/forensicssearchresult.module';
 import { SearchresultModule } from './searchresult/searchresult.module';
@@ -43,7 +43,7 @@ import { CollectionService } from '../shared/collection-service/collection.servi
     ],
     declarations: [
         LandingPageComponent, LandingBodyComponent, DoneComponent, DownloadstatusComponent,
-        ErrorComponent, UserErrorComponent, NoidComponent, NerdmComponent, MetricsinfoComponent
+        ErrorComponent, UserErrorComponent, NoidComponent, NerdmComponent
     ],
     providers: [
         MetadataUpdateService, TaxonomyListService, DatePipe, CollectionService

diff --git a/angular/src/app/landing/metricsinfo/metricsinfo.module.ts b/angular/src/app/landing/metricsinfo/metricsinfo.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MetricsinfoComponent } from './metricsinfo.component';
+
+
+@NgModule({
+  declarations: [MetricsinfoComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [ MetricsinfoComponent ]
+})
+export class MetricsinfoModule { }
diff --git a/angular/src/app/landing/tools/toolmenu.component.css b/angular/src/app/landing/tools/toolmenu.component.css
@@ -51,6 +51,12 @@
 
 }
 
+:host ::ng-deep .rightMenuStylePop>.p-menu .p-tieredmenu .p-submenu-list {
+    position: absolute;
+    top: 1000px !important;
+    left: unset;
+}
+
 :host ::ng-deep .rightMenuStylePop>.p-menu .p-menuitem-link {
     padding: 0.5em 0.2em 0.5em 0.5em;
     font-size: 14px;

diff --git a/angular/src/app/landing/tools/toolmenu.component.ts b/angular/src/app/landing/tools/toolmenu.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, OnChanges, ViewChild, EventEmitter, SimpleChanges } from '@angular/core';
+import { Component, Input, Output, OnChanges, ViewChild, EventEmitter, SimpleChanges, ElementRef } from '@angular/core';
 
 import { MenuItem } from 'primeng/api';
 import { Menu } from 'primeng/menu';
@@ -30,7 +30,9 @@ import { CollectionService } from '../../shared/collection-service/collection.se
                [style.--background-default]="defaultColor"
                [style.--background-lighter]="lighterColor"
                [style.--background-hover]="hoverColor"
-               [popup]="isPopup" [model]="items" [appendTo]="appendTo"></p-menu>
+               [popup]="isPopup" [model]="items" 
+               [appendTo]="appendTo"
+               ></p-menu>
 `,
     styleUrls: ['./toolmenu.component.css']
 })
@@ -41,13 +43,14 @@ export class ToolMenuComponent implements OnChanges {
     hoverColor: string;
     //  Object that hold all themes: Forensics, NIST, ...
     allCollections: any = {};
+    buttonTop = 0;
 
     // the resource record metadata that the tool menu data is drawn from
     @Input() record : NerdmRes|null = null;
 
     // true if this menu should appear as a popup
     @Input() isPopup : boolean = false;
-    @Input() appendTo : boolean = false;
+    @Input() appendTo;
     @Input() theme: string = "nist"
     @Input() collection: string = Collections.DEFAULT;
 
@@ -66,6 +69,7 @@ export class ToolMenuComponent implements OnChanges {
     public CART_CONSTANTS: any = CartConstants.cartConst;
     globalCartUrl: string = "/datacart/" + this.CART_CONSTANTS.GLOBAL_CART_NAME;
     editEnabled: any;
+    parentContext: ElementRef;
 
     /**
      * create the component.
@@ -80,6 +84,7 @@ export class ToolMenuComponent implements OnChanges {
     }
 
     ngOnInit(): void {
+        console.log("appendTo", this.appendTo);
         this.allCollections = this.collectionService.loadCollections(this.collection.toLowerCase());
 
         this.setColor();

diff --git a/angular/src/app/landing/tools/tools.module.ts b/angular/src/app/landing/tools/tools.module.ts
@@ -1,9 +1,9 @@
 import { NgModule }     from '@angular/core';
 import { CommonModule } from '@angular/common';
-
 import { MenuModule } from 'primeng/menu';
-
 import { ToolMenuComponent } from './toolmenu.component';
+import { MenuComponent } from './menu.component';
+import { MetricsinfoModule } from '../metricsinfo/metricsinfo.module';
 
 /**
  * A module providing tools for interacting with the landing page's record metadata.  
@@ -14,13 +14,16 @@ import { ToolMenuComponent } from './toolmenu.component';
 @NgModule({
     imports: [
         CommonModule,
-        MenuModule
+        MenuModule,
+        MetricsinfoModule
     ],
     declarations: [
-        ToolMenuComponent
+        ToolMenuComponent,
+        MenuComponent
     ],
     exports: [
-        ToolMenuComponent
+        ToolMenuComponent,
+        MenuComponent
     ]
 })
 export class ToolsModule { }