Fix dropdown menu active indicator (CC-90)
parent
5a3a419d73
commit
4ec33481cd
|
@ -2,12 +2,14 @@
|
|||
<mat-sidenav-container>
|
||||
<mat-sidenav-content>
|
||||
<app-header (sidenavToggle)="sidenav.toggle()"
|
||||
(userLogout)="logout()">
|
||||
(userLogout)="logout()"
|
||||
[currentUrl]="currentUrl">
|
||||
</app-header>
|
||||
</mat-sidenav-content>
|
||||
<mat-sidenav #sidenav role="navigation">
|
||||
<app-sidenav-list (sidenavClose)="sidenav.close()"
|
||||
(userLogout)="logout()">
|
||||
(userLogout)="logout()"
|
||||
[currentUrl]="currentUrl">
|
||||
</app-sidenav-list>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
|
|
|
@ -7,7 +7,7 @@ import {SpinnerService} from './services/user-interface/spinner/spinner.service'
|
|||
import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
|
||||
import {Observable} from 'rxjs';
|
||||
import {LoginService} from './services/app-user-service/login-service';
|
||||
import {BaseConfig, RouteConfig} from './app.config';
|
||||
import {RouteConfig} from './app.config';
|
||||
|
||||
|
||||
@Component({
|
||||
|
@ -23,6 +23,8 @@ export class AppComponent implements OnInit {
|
|||
|
||||
scrollBtnVisibleVal = 100;
|
||||
|
||||
currentUrl = '';
|
||||
|
||||
// a map of svgIcon names and associated svg file names
|
||||
// to load from assets/icon folder
|
||||
svgIcons = {
|
||||
|
@ -83,10 +85,10 @@ export class AppComponent implements OnInit {
|
|||
}
|
||||
if (event instanceof NavigationEnd) {
|
||||
this.spinnerService.deactivate();
|
||||
const currentUrl = this.router.url;
|
||||
this.currentUrl = this.router.url;
|
||||
|
||||
// scroll to top on route from army overview to user detail and back
|
||||
if (currentUrl.includes('/overview') || currentUrl.includes('/public')) {
|
||||
if (this.currentUrl.includes('/overview') || this.currentUrl.includes('/public')) {
|
||||
this.scrollToTop();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,7 +29,8 @@
|
|||
<li routerLinkActive="active">
|
||||
<a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>
|
||||
</li>
|
||||
<li *ngIf="loginService.hasPermission(2)">
|
||||
<li *ngIf="loginService.hasPermission(2)"
|
||||
[ngClass]="{'active': currentUrl.includes('/manage/')}">
|
||||
<mat-list-item [matMenuTriggerFor]="menuManagement">
|
||||
<a matline>
|
||||
{{'navigation.top.management' | translate}}
|
||||
|
@ -37,21 +38,26 @@
|
|||
</a>
|
||||
</mat-list-item>
|
||||
<mat-menu #menuManagement="matMenu">
|
||||
<button routerLink='{{config.manageUserPath}}' mat-menu-item>
|
||||
<button routerLink='{{config.manageUserPath}}'
|
||||
routerLinkActive="active" mat-menu-item>
|
||||
{{'navigation.top.management.users' | translate}}
|
||||
</button>
|
||||
<button routerLink='{{config.manageSquadPath}}' mat-menu-item>
|
||||
<button routerLink='{{config.manageSquadPath}}'
|
||||
routerLinkActive="active" mat-menu-item>
|
||||
{{'navigation.top.management.squads' | translate}}
|
||||
</button>
|
||||
<button routerLink='{{config.manageDecorationPath}}' mat-menu-item>
|
||||
<button routerLink='{{config.manageDecorationPath}}'
|
||||
routerLinkActive="active" mat-menu-item>
|
||||
{{'navigation.top.management.decorations' | translate}}
|
||||
</button>
|
||||
<button routerLink='{{config.manageRankPath}}' mat-menu-item>
|
||||
<button routerLink='{{config.manageRankPath}}'
|
||||
routerLinkActive="active" mat-menu-item>
|
||||
{{'navigation.top.management.ranks' | translate}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
</li>
|
||||
<li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()">
|
||||
<li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
|
||||
[ngClass]="{'active': currentUrl.includes('/request/')}">
|
||||
<mat-list-item [matMenuTriggerFor]="menuSqlRequest">
|
||||
<a matline>
|
||||
{{'navigation.top.request' | translate}}
|
||||
|
@ -59,18 +65,22 @@
|
|||
</a>
|
||||
</mat-list-item>
|
||||
<mat-menu #menuSqlRequest="matMenu">
|
||||
<button routerLink="{{config.request}}/{{config.sqlDashboardPath}}" mat-menu-item>
|
||||
<button routerLink="{{config.request}}/{{config.sqlDashboardPath}}"
|
||||
routerLinkActive="active" mat-menu-item>
|
||||
{{'navigation.top.request.open' | translate}}
|
||||
</button>
|
||||
<button routerLink="{{config.request}}/{{config.requestPromotionPath}}" mat-menu-item>
|
||||
<button routerLink="{{config.request}}/{{config.requestPromotionPath}}"
|
||||
routerLinkActive="active" mat-menu-item>
|
||||
{{'navigation.top.request.promotion' | translate}}
|
||||
</button>
|
||||
<button routerLink="{{config.request}}/{{config.requestAwardPath}}" mat-menu-item>
|
||||
<button routerLink="{{config.request}}/{{config.requestAwardPath}}"
|
||||
routerLinkActive="active" mat-menu-item>
|
||||
{{'navigation.top.request.award' | translate}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
</li>
|
||||
<li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()">
|
||||
<li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()"
|
||||
[ngClass]="{'active': currentUrl.includes('/request/')}">
|
||||
<mat-list-item [matMenuTriggerFor]="menuRequests">
|
||||
<a [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
|
||||
matline>
|
||||
|
@ -80,10 +90,12 @@
|
|||
</mat-list-item>
|
||||
<mat-menu #menuRequests="matMenu">
|
||||
<button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
|
||||
routerLinkActive="active"
|
||||
routerLink="{{config.request}}/{{config.confirmPromotionPath}}" mat-menu-item>
|
||||
{{'navigation.top.request.promotion' | translate}}
|
||||
</button>
|
||||
<button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
|
||||
routerLinkActive="active"
|
||||
routerLink="{{config.request}}/{{config.confirmAwardPath}}" mat-menu-item>
|
||||
{{'navigation.top.request.award' | translate}}
|
||||
</button>
|
||||
|
@ -93,7 +105,8 @@
|
|||
</div>
|
||||
<div fxFlex fxLayout fxLayoutAlign="end" fxHide.lt-md>
|
||||
<ul fxLayout fxLayoutGap="15px" class="navigation-items">
|
||||
<li *ngIf="loginService.hasPermission(4)">
|
||||
<li *ngIf="loginService.hasPermission(4)"
|
||||
[ngClass]="{'active': currentUrl.includes('/admin-panel/')}">
|
||||
<mat-list-item [matMenuTriggerFor]="menuAdmin">
|
||||
<a matline>
|
||||
{{'navigation.top.admin' | translate}}
|
||||
|
@ -101,7 +114,7 @@
|
|||
</a>
|
||||
</mat-list-item>
|
||||
<mat-menu #menuAdmin="matMenu">
|
||||
<button routerLink='{{config.adminPanelAppUsersPath}}' mat-menu-item>
|
||||
<button routerLinkActive="active" routerLink='{{config.adminPanelAppUsersPath}}' mat-menu-item>
|
||||
{{'navigation.top.management.users' | translate}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
|
|
@ -66,5 +66,8 @@ mat-toolbar {
|
|||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button.active {
|
||||
background: #dadada;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
import {BaseConfig, RouteConfig} from '../../app.config';
|
||||
import {environment} from '../../../environments/environment';
|
||||
import {LoginService} from '../../services/app-user-service/login-service';
|
||||
|
@ -20,13 +20,15 @@ export class NavigationHeaderComponent implements OnInit {
|
|||
|
||||
@Output() userLogout = new EventEmitter();
|
||||
|
||||
@Input() currentUrl;
|
||||
|
||||
readonly features = environment.features;
|
||||
|
||||
readonly availableLanguages = BaseConfig.i18n.availableLanguages;
|
||||
|
||||
readonly version = require('./../../../../../package.json').version;
|
||||
|
||||
config = RouteConfig;
|
||||
readonly config = RouteConfig;
|
||||
|
||||
language;
|
||||
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
</a>
|
||||
|
||||
<mat-list-item *ngIf="loginService.hasPermission(2)"
|
||||
[ngClass]="{'active': currentUrl.includes('/manage/')}"
|
||||
[matMenuTriggerFor]="menuManagement">
|
||||
<a matline>
|
||||
<span class="nav-caption">{{'navigation.top.management' | translate}}</span>
|
||||
|
@ -23,21 +24,23 @@
|
|||
</a>
|
||||
</mat-list-item>
|
||||
<mat-menu #menuManagement="matMenu">
|
||||
<button routerLink='{{config.manageUserPath}}' mat-menu-item (click)="onSidenavClose()">
|
||||
<button routerLink='{{config.manageUserPath}}' routerLinkActive="active" mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.management.users' | translate}}
|
||||
</button>
|
||||
<button routerLink='{{config.manageSquadPath}}' mat-menu-item (click)="onSidenavClose()">
|
||||
<button routerLink='{{config.manageSquadPath}}' routerLinkActive="active" mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.management.squads' | translate}}
|
||||
</button>
|
||||
<button routerLink='{{config.manageDecorationPath}}' mat-menu-item (click)="onSidenavClose()">
|
||||
<button routerLink='{{config.manageDecorationPath}}' routerLinkActive="active"
|
||||
mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.management.decorations' | translate}}
|
||||
</button>
|
||||
<button routerLink='{{config.manageRankPath}}' mat-menu-item (click)="onSidenavClose()">
|
||||
<button routerLink='{{config.manageRankPath}}' routerLinkActive="active" mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.management.ranks' | translate}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-list-item *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
|
||||
[ngClass]="{'active': currentUrl.includes('/request/')}"
|
||||
[matMenuTriggerFor]="menuSqlRequest">
|
||||
<a matline>
|
||||
<span class="nav-caption">{{'navigation.top.request' | translate}}</span>
|
||||
|
@ -45,19 +48,22 @@
|
|||
</a>
|
||||
</mat-list-item>
|
||||
<mat-menu #menuSqlRequest="matMenu">
|
||||
<button routerLink="{{config.request}}/{{config.sqlDashboardPath}}" mat-menu-item (click)="onSidenavClose()">
|
||||
<button routerLink="{{config.request}}/{{config.sqlDashboardPath}}" routerLinkActive="active"
|
||||
mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.request.open' | translate}}
|
||||
</button>
|
||||
<button routerLink="{{config.request}}/{{config.requestPromotionPath}}" mat-menu-item (click)="onSidenavClose()">
|
||||
<button routerLink="{{config.request}}/{{config.requestPromotionPath}}" routerLinkActive="active"
|
||||
mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.request.promotion' | translate}}
|
||||
</button>
|
||||
<button routerLink="{{config.request}}/{{config.requestAwardPath}}" mat-menu-item (click)="onSidenavClose()">
|
||||
<button routerLink="{{config.request}}/{{config.requestAwardPath}}" routerLinkActive="active"
|
||||
mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.request.award' | translate}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-list-item *ngIf="loginService.hasPermission(2) && loginService.hasSquad()"
|
||||
[ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
|
||||
[ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards, 'active': currentUrl.includes('/request/')}"
|
||||
[matMenuTriggerFor]="menuRequests">
|
||||
<a matline>
|
||||
<span class="nav-caption">{{'navigation.top.request.manage' | translate}}</span>
|
||||
|
@ -66,25 +72,30 @@
|
|||
</mat-list-item>
|
||||
<mat-menu #menuRequests="matMenu">
|
||||
<button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
|
||||
routerLink="{{config.request}}/{{config.confirmPromotionPath}}" mat-menu-item (click)="onSidenavClose()">
|
||||
routerLink="{{config.request}}/{{config.confirmPromotionPath}}" routerLinkActive="active"
|
||||
mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.request.promotion' | translate}}
|
||||
</button>
|
||||
<button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
|
||||
routerLink="{{config.request}}/{{config.confirmAwardPath}}" mat-menu-item (click)="onSidenavClose()">
|
||||
routerLink="{{config.request}}/{{config.confirmAwardPath}}" routerLinkActive="active"
|
||||
mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.request.award' | translate}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item *ngIf="loginService.hasPermission(4)" [matMenuTriggerFor]="menuAdmin">
|
||||
<mat-list-item *ngIf="loginService.hasPermission(4)"
|
||||
[ngClass]="{'active': currentUrl.includes('/admin-panel/')}"
|
||||
[matMenuTriggerFor]="menuAdmin">
|
||||
<a matline>
|
||||
<span class="nav-caption">{{'navigation.top.admin' | translate}}</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
<mat-menu #menuAdmin="matMenu">
|
||||
<button routerLink='{{config.adminPanelAppUsersPath}}' mat-menu-item (click)="onSidenavClose()">
|
||||
<button routerLink='{{config.adminPanelAppUsersPath}}' routerLinkActive="active"
|
||||
mat-menu-item (click)="onSidenavClose()">
|
||||
{{'navigation.top.management.users' | translate}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
|
|
@ -23,3 +23,7 @@ mat-divider {
|
|||
margin: 15% 0;
|
||||
border-color: #9d9d9d;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background: #dadada;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
import {BaseConfig, RouteConfig} from '../../app.config';
|
||||
import {LoginService} from '../../services/app-user-service/login-service';
|
||||
import {PromotionService} from '../../services/army-management/promotion.service';
|
||||
|
@ -18,6 +18,8 @@ export class SidenavListComponent implements OnInit {
|
|||
|
||||
@Output() userLogout = new EventEmitter();
|
||||
|
||||
@Input() currentUrl;
|
||||
|
||||
readonly features = environment.features;
|
||||
|
||||
readonly availableLanguages = BaseConfig.i18n.availableLanguages;
|
||||
|
|
Loading…
Reference in New Issue