From 3aebf0bfc92b8a6b5048f26ddfbdddba549c4f9f Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Mon, 5 Dec 2022 16:20:50 +0100
Subject: [PATCH] fixed menu issues
---
.../analysis-panel.component.html | 38 ++++++++++-------
.../analysis-panel.component.scss | 38 +++++++++--------
.../analysis-panel.component.ts | 8 ----
.../download-button-inverse.component.scss | 1 -
.../components/network/network.component.html | 36 +++++++++-------
.../components/network/network.component.scss | 42 +++++++++----------
.../components/network/network.component.ts | 8 ----
src/stylesheets/variables.scss | 1 +
8 files changed, 86 insertions(+), 86 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index 1f88d22f..00baaf46 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/src/app/components/analysis-panel/analysis-panel.component.html
@@ -52,23 +52,29 @@
></app-fa-solid-icon>
</button>
</p>
- <div class="control dropdown" ngbDropdown>
- <button ngbDropdownToggle
- class="button is-rounded is-small is-outlined highlight-primary"
- type="button" (click)="showMenu = !showMenu"
- [class]="{'dropdown-toggle-enabled': showMenu}" (focusout)="hideMenu()">
- <app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon>
- </button>
- <ul ngbDropdownMenu class="dropdown-content dropdown-list"
- [style]="{'display':showMenu ? 'inline-block':'none'}">
- <li ngbDropdownItem pTooltip="Display end-user license agreement (EULA)." tooltipPosition="left"
- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
- (click)="showEULA()"><a>Show EULA</a></li>
- <li ngbDropdownItem pTooltip="Opens Drugst.One website" tooltipPosition="left"
- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"><a target="_blank"
- href="https://drugst.one/home">About Drugst.One</a></li>
- </ul>
+ <div class="control dropdown is-hoverable">
+ <div class="dropdown-trigger">
+ <button
+ aria-haspopup="true"
+ attr.aria-controls="controls-menu-button"
+ class="button is-rounded is-small is-outlined highlight-primary">
+ <app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon>
+ </button>
+ <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu">
+ <div class="dropdown-content inner-dropdown">
+ <a class="dropdown-item" pTooltip="Display end-user license agreement (EULA)."
+ tooltipPosition="left"
+ [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ (click)="showEULA()">Show EULA</a>
+ <a class="dropdown-item" pTooltip="Opens Drugst.One website"
+ [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }" tooltipPosition="left"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'" target="_blank"
+ href="https://drugst.one/home">About Drugst.One</a>
+ </div>
+ </div>
</div>
+ </div>
<p class="control">
<button
class="button is-rounded is-small is-outlined highlight-danger has-text-danger"
diff --git a/src/app/components/analysis-panel/analysis-panel.component.scss b/src/app/components/analysis-panel/analysis-panel.component.scss
index 48d3d5b7..9a219fab 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.scss
+++ b/src/app/components/analysis-panel/analysis-panel.component.scss
@@ -79,30 +79,34 @@
z-index: $analysis-network-legend-z !important;
}
-.dropdown-toggle-enabled {
- background-color: var(--drgstn-primary) !important;
- app-fa-solid-icon {
- color: var(--drgstn-text-secondary)
- }
-}
-
-ul.dropdown-list {
+div.dropdown-list {
right: 0;
left: auto !important;
background-color: var(--drgstn-background);
min-width: $menu-width !important;
- z-index: calc($loading-overlay-z + 1);
width: auto;
- li {
- display: flex;
- width: 100%;
- justify-content: center;
- a {
- color: var(--drgstn-text-primary) !important;
- }
- }
}
div.control.dropdown {
margin-bottom: 0.4rem;
}
+
+.dropdown-menu {
+ z-index: $menu-z-index !important;
+}
+
+.inner-dropdown.dropdown-menu {
+ margin-left: calc(150px - 15px);
+ width: 150px;
+ margin-top: -45px;
+
+ .dropdown-content {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+
+ .dropdown-item {
+ padding: .375rem !important;
+ }
+ }
+
+}
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 078295d8..d5cf926a 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -112,8 +112,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
public loading = false;
- public showMenu = false;
-
constructor(public legendService: LegendService, public networkHandler: NetworkHandlerService, public drugstoneConfig: DrugstoneConfigService, private http: HttpClient, public analysis: AnalysisService, public netex: NetexControllerService, public loadingScreen: LoadingScreenService) {
}
@@ -548,10 +546,4 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.drugstoneConfig.showLicense = true;
}
- public hideMenu() {
- setTimeout(() => {
- this.showMenu = false;
- }, 100);
- }
-
}
diff --git a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss
index f8a6c3af..ffd2eb88 100644
--- a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss
+++ b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss
@@ -19,5 +19,4 @@
}
}
-
}
diff --git a/src/app/components/network/network.component.html b/src/app/components/network/network.component.html
index 716b0704..ddd9d09b 100644
--- a/src/app/components/network/network.component.html
+++ b/src/app/components/network/network.component.html
@@ -33,22 +33,28 @@
></app-fa-solid-icon>
</button>
</p>
- <div class="control dropdown" ngbDropdown>
- <button ngbDropdownToggle
- class="button is-rounded is-small is-outlined highlight-primary" (click)="showMenu = !showMenu"
- [class]="{'dropdown-toggle-enabled': showMenu}" (focusout)="hideMenu()">
- <app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon>
- </button>
- <ul ngbDropdownMenu class="dropdown-content dropdown-list dropdown-menu"
- [style]="{'display':showMenu ? 'inline-block':'none'}">
- <li ngbDropdownItem class="dropdown-item" pTooltip="Display end-user license agreement (EULA)." tooltipPosition="left"
- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
- (click)="showEULA()"><a>Show EULA</a></li>
- <li ngbDropdownItem class="dropdown-item" pTooltip="Opens Drugst.One website" tooltipPosition="left"
- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"><a target="_blank"
- href="https://drugst.one/home">About Drugst.One</a></li>
- </ul>
+ <div class="control dropdown is-hoverable">
+ <div class="dropdown-trigger">
+ <button
+ aria-haspopup="true"
+ attr.aria-controls="controls-menu-button"
+ class="button is-rounded is-small is-outlined highlight-primary">
+ <app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon>
+ </button>
+ <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu">
+ <div class="dropdown-content inner-dropdown">
+ <a class="dropdown-item" pTooltip="Display end-user license agreement (EULA)."
+ tooltipPosition="left"
+ [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ (click)="showEULA()">Show EULA</a>
+ <a class="dropdown-item" pTooltip="Opens Drugst.One website" [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }" tooltipPosition="left"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'" target="_blank"
+ href="https://drugst.one/home">About Drugst.One</a>
+ </div>
+ </div>
</div>
+ </div>
</div>
</span>
</header>
diff --git a/src/app/components/network/network.component.scss b/src/app/components/network/network.component.scss
index b97f1f3c..27d62b30 100644
--- a/src/app/components/network/network.component.scss
+++ b/src/app/components/network/network.component.scss
@@ -11,34 +11,34 @@
}
}
-.dropdown-menu {
- z-index: $network-tissue-options-z !important;
-}
-
-.dropdown-toggle-enabled {
- background-color: var(--drgstn-primary) !important;
- app-fa-solid-icon {
- color: var(--drgstn-text-secondary)
- }
-}
-
-ul.dropdown-list {
+div.dropdown-list {
right: 0;
left: auto !important;
background-color: var(--drgstn-background);
min-width: $menu-width !important;
- z-index: calc($loading-overlay-z + 1);
width: auto;
- li {
- display: flex;
- width: 100%;
- justify-content: center;
- a {
- color: var(--drgstn-text-primary) !important;
- }
- }
}
div.control.dropdown {
margin-bottom: 0.4rem;
}
+
+.dropdown-menu {
+ z-index: $menu-z-index !important;
+}
+
+.inner-dropdown.dropdown-menu {
+ margin-left: calc(150px - 15px);
+ width: 150px;
+ margin-top: -45px;
+
+ .dropdown-content {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+
+ .dropdown-item {
+ padding: .375rem !important;
+ }
+ }
+
+}
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index afed865d..f337900f 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -68,8 +68,6 @@ export class NetworkComponent implements OnInit {
public queryItems: Wrapper[] = [];
- public showMenu: boolean = false;
-
public networkPositions: any;
public highlightSeeds = false;
@@ -647,10 +645,4 @@ export class NetworkComponent implements OnInit {
public showEULA() {
this.drugstoneConfig.showLicense = true;
}
-
- public hideMenu() {
- setTimeout(() => {
- this.showMenu = false;
- }, 100);
- }
}
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 8f37818a..53044816 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -71,3 +71,4 @@ $toast-z: 2147483647;
$loading-overlay-z: 2147483647;
$menu-width: 150px;
+$menu-z-index: calc(2147483647 - 1)
--
GitLab