diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index 1f88d22f15bc2c27d6647b193b71856c0257a017..00baaf46e673139a199b38d5610e725d5ccc8a45 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 48d3d5b78ef701b54320d5071a16e5e2c42d0fdf..9a219fab5c3f0b8d9df6070ef1fbb7641bc655ee 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 078295d82561d31a13aee8d2750ef8ad74c1f094..d5cf926a367753bf09887681282e541a21798318 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 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 afed865d1b04cc43ef199c7afff18066d3878622..f337900f963accca059da6e0152dc74d35117362 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 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)