Skip to content
Snippets Groups Projects
Commit 3aebf0bf authored by AndiMajore's avatar AndiMajore
Browse files

fixed menu issues

parent 8795be30
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 86 additions and 86 deletions
src/app/components/analysis-panel/analysis-panel.component.html
+ 22
− 16
View file @ 3aebf0bf
...@@ -52,23 +52,29 @@ ...@@ -52,23 +52,29 @@
></app-fa-solid-icon> ></app-fa-solid-icon>
</button> </button>
</p> </p>
<div class="control dropdown" ngbDropdown> <div class="control dropdown is-hoverable">
<button ngbDropdownToggle <div class="dropdown-trigger">
class="button is-rounded is-small is-outlined highlight-primary" <button
type="button" (click)="showMenu = !showMenu" aria-haspopup="true"
[class]="{'dropdown-toggle-enabled': showMenu}" (focusout)="hideMenu()"> attr.aria-controls="controls-menu-button"
<app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon> class="button is-rounded is-small is-outlined highlight-primary">
</button> <app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon>
<ul ngbDropdownMenu class="dropdown-content dropdown-list" </button>
[style]="{'display':showMenu ? 'inline-block':'none'}"> <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu">
<li ngbDropdownItem pTooltip="Display end-user license agreement (EULA)." tooltipPosition="left" <div class="dropdown-content inner-dropdown">
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'" <a class="dropdown-item" pTooltip="Display end-user license agreement (EULA)."
(click)="showEULA()"><a>Show EULA</a></li> tooltipPosition="left"
<li ngbDropdownItem pTooltip="Opens Drugst.One website" tooltipPosition="left" [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"><a target="_blank" [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
href="https://drugst.one/home">About Drugst.One</a></li> (click)="showEULA()">Show EULA</a>
</ul> <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>
<p class="control"> <p class="control">
<button <button
class="button is-rounded is-small is-outlined highlight-danger has-text-danger" class="button is-rounded is-small is-outlined highlight-danger has-text-danger"
......
src/app/components/analysis-panel/analysis-panel.component.scss
+ 21
− 17
View file @ 3aebf0bf
...@@ -79,30 +79,34 @@ ...@@ -79,30 +79,34 @@
z-index: $analysis-network-legend-z !important; z-index: $analysis-network-legend-z !important;
} }
.dropdown-toggle-enabled { div.dropdown-list {
background-color: var(--drgstn-primary) !important;
app-fa-solid-icon {
color: var(--drgstn-text-secondary)
}
}
ul.dropdown-list {
right: 0; right: 0;
left: auto !important; left: auto !important;
background-color: var(--drgstn-background); background-color: var(--drgstn-background);
min-width: $menu-width !important; min-width: $menu-width !important;
z-index: calc($loading-overlay-z + 1);
width: auto; width: auto;
li {
display: flex;
width: 100%;
justify-content: center;
a {
color: var(--drgstn-text-primary) !important;
}
}
} }
div.control.dropdown { div.control.dropdown {
margin-bottom: 0.4rem; 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
+ 0
− 8
View file @ 3aebf0bf
...@@ -112,8 +112,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit ...@@ -112,8 +112,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
public loading = false; 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) { 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 ...@@ -548,10 +546,4 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.drugstoneConfig.showLicense = true; 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
+ 0
− 1
View file @ 3aebf0bf
...@@ -19,5 +19,4 @@ ...@@ -19,5 +19,4 @@
} }
} }
} }
src/app/components/network/network.component.html
+ 21
− 15
View file @ 3aebf0bf
...@@ -33,22 +33,28 @@ ...@@ -33,22 +33,28 @@
></app-fa-solid-icon> ></app-fa-solid-icon>
</button> </button>
</p> </p>
<div class="control dropdown" ngbDropdown> <div class="control dropdown is-hoverable">
<button ngbDropdownToggle <div class="dropdown-trigger">
class="button is-rounded is-small is-outlined highlight-primary" (click)="showMenu = !showMenu" <button
[class]="{'dropdown-toggle-enabled': showMenu}" (focusout)="hideMenu()"> aria-haspopup="true"
<app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon> attr.aria-controls="controls-menu-button"
</button> class="button is-rounded is-small is-outlined highlight-primary">
<ul ngbDropdownMenu class="dropdown-content dropdown-list dropdown-menu" <app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon>
[style]="{'display':showMenu ? 'inline-block':'none'}"> </button>
<li ngbDropdownItem class="dropdown-item" pTooltip="Display end-user license agreement (EULA)." tooltipPosition="left" <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu">
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'" <div class="dropdown-content inner-dropdown">
(click)="showEULA()"><a>Show EULA</a></li> <a class="dropdown-item" pTooltip="Display end-user license agreement (EULA)."
<li ngbDropdownItem class="dropdown-item" pTooltip="Opens Drugst.One website" tooltipPosition="left" tooltipPosition="left"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"><a target="_blank" [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
href="https://drugst.one/home">About Drugst.One</a></li> [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
</ul> (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>
</div> </div>
</span> </span>
</header> </header>
......
src/app/components/network/network.component.scss
+ 21
− 21
View file @ 3aebf0bf
...@@ -11,34 +11,34 @@ ...@@ -11,34 +11,34 @@
} }
} }
.dropdown-menu { div.dropdown-list {
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 {
right: 0; right: 0;
left: auto !important; left: auto !important;
background-color: var(--drgstn-background); background-color: var(--drgstn-background);
min-width: $menu-width !important; min-width: $menu-width !important;
z-index: calc($loading-overlay-z + 1);
width: auto; width: auto;
li {
display: flex;
width: 100%;
justify-content: center;
a {
color: var(--drgstn-text-primary) !important;
}
}
} }
div.control.dropdown { div.control.dropdown {
margin-bottom: 0.4rem; 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
+ 0
− 8
View file @ 3aebf0bf
...@@ -68,8 +68,6 @@ export class NetworkComponent implements OnInit { ...@@ -68,8 +68,6 @@ export class NetworkComponent implements OnInit {
public queryItems: Wrapper[] = []; public queryItems: Wrapper[] = [];
public showMenu: boolean = false;
public networkPositions: any; public networkPositions: any;
public highlightSeeds = false; public highlightSeeds = false;
...@@ -647,10 +645,4 @@ export class NetworkComponent implements OnInit { ...@@ -647,10 +645,4 @@ export class NetworkComponent implements OnInit {
public showEULA() { public showEULA() {
this.drugstoneConfig.showLicense = true; this.drugstoneConfig.showLicense = true;
} }
public hideMenu() {
setTimeout(() => {
this.showMenu = false;
}, 100);
}
} }
src/stylesheets/variables.scss
+ 1
− 0
View file @ 3aebf0bf
...@@ -71,3 +71,4 @@ $toast-z: 2147483647; ...@@ -71,3 +71,4 @@ $toast-z: 2147483647;
$loading-overlay-z: 2147483647; $loading-overlay-z: 2147483647;
$menu-width: 150px; $menu-width: 150px;
$menu-z-index: calc(2147483647 - 1)
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment