Merge branch 'master' of gitlab.rrz.uni-hamburg.de:cosy-bio/drugst.one/frontend

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"

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;
+    }
+  }
+
+}

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);
-  }
-
 }

src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss

@@ -19,5 +19,4 @@
     }
   }
 
-
 }

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>

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;
+    }
+  }
+
+}

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);
-  }
 }

src/stylesheets/variables.scss

@@ -71,3 +71,4 @@ $toast-z: 2147483647;
 $loading-overlay-z: 2147483647;
 
 $menu-width: 150px;
+$menu-z-index: calc(2147483647 - 1)