diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index b8c248d66865c8fee952b340a27e1a81eccc638a..100ab091212351ef47ada2183022b5be8be4a22f 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/src/app/components/analysis-panel/analysis-panel.component.html
@@ -55,50 +55,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 6cf2ef5e1eeab043ae94451166d20888861ed922..da40983a429e5870b025c069f7c7b59f7ffcabed 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.scss
+++ b/src/app/components/analysis-panel/analysis-panel.component.scss
@@ -81,30 +81,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 75c46f27760b0fba31ccc61d72336c5879c7c532..b278a0b21a308536014e40cc2121afb1875933b3 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) {
}
@@ -555,10 +553,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 f8a6c3af7c02c19667f67a3fc4947de828ff00a4..ffd2eb881f29b0d6143a3e9ea460d3918d730b9d 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 716b0704f60660eebb7a671fad989144e5bd7dca..ddd9d09b03578e407bf033cc960767d12ede2cec 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 b97f1f3c6f4024160b8e2de80fe17fa861f87594..27d62b30dbabc9a04d00e27c8aab7f0b775a2adc 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 c2c4c1512e175586c6d07ce32ee2e710d573433e..ba14317dfc546bc92f581e305f878caf2825794f 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -70,8 +70,6 @@ export class NetworkComponent implements OnInit {
public queryItems: Wrapper[] = [];
- public showMenu: boolean = false;
-
public networkPositions: any;
public highlightSeeds = false;
@@ -655,10 +653,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 8f37818afc5aecbd9143f0de77edfbc561f78720..53044816f5041be881e8f3c63e57fcc5f638fa9d 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)