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
Show 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,22 +52,28 @@
></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()">
<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>
<ul ngbDropdownMenu class="dropdown-content dropdown-list"
[style]="{'display':showMenu ? 'inline-block':'none'}">
<li ngbDropdownItem pTooltip="Display end-user license agreement (EULA)." tooltipPosition="left"
<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()"><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>
(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
......
src/app/components/analysis-panel/analysis-panel.component.scss
+ 21
− 17
View file @ 3aebf0bf
......@@ -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;
}
}
}
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
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);
}
}
src/app/components/network/network.component.html
+ 21
− 15
View file @ 3aebf0bf
......@@ -33,21 +33,27 @@
></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()">
<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>
<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"
<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()"><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>
(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>
......
src/app/components/network/network.component.scss
+ 21
− 21
View file @ 3aebf0bf
......@@ -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
+ 0
− 8
View file @ 3aebf0bf
......@@ -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);
}
}
src/stylesheets/variables.scss
+ 1
− 0
View file @ 3aebf0bf
......@@ -71,3 +71,4 @@ $toast-z: 2147483647;
$loading-overlay-z: 2147483647;
$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