hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Fix dropdown menu active indicator (CC-90)

pull/56/head
HardiReady 2019-02-25 10:10:41 +01:00
parent 5a3a419d73
commit 4ec33481cd
8 changed files with 72 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/src/app/app.component.html
View File

@ -2,12 +2,14 @@
<mat-sidenav-container> <mat-sidenav-container>
<mat-sidenav-content> <mat-sidenav-content>
<app-header (sidenavToggle)="sidenav.toggle()" <app-header (sidenavToggle)="sidenav.toggle()"
(userLogout)="logout()"> (userLogout)="logout()"
[currentUrl]="currentUrl">
</app-header> </app-header>
</mat-sidenav-content> </mat-sidenav-content>
<mat-sidenav #sidenav role="navigation"> <mat-sidenav #sidenav role="navigation">
<app-sidenav-list (sidenavClose)="sidenav.close()" <app-sidenav-list (sidenavClose)="sidenav.close()"
(userLogout)="logout()"> (userLogout)="logout()"
[currentUrl]="currentUrl">
</app-sidenav-list> </app-sidenav-list>
</mat-sidenav> </mat-sidenav>
</mat-sidenav-container> </mat-sidenav-container>

8
static/src/app/app.component.ts
View File

@ -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 {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
import {Observable} from 'rxjs'; import {Observable} from 'rxjs';
import {LoginService} from './services/app-user-service/login-service'; import {LoginService} from './services/app-user-service/login-service';
import {BaseConfig, RouteConfig} from './app.config'; import {RouteConfig} from './app.config';
@Component({ @Component({
@ -23,6 +23,8 @@ export class AppComponent implements OnInit {
scrollBtnVisibleVal = 100; scrollBtnVisibleVal = 100;
currentUrl = '';
// a map of svgIcon names and associated svg file names // a map of svgIcon names and associated svg file names
// to load from assets/icon folder // to load from assets/icon folder
svgIcons = { svgIcons = {
@ -83,10 +85,10 @@ export class AppComponent implements OnInit {
} }
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
this.spinnerService.deactivate(); 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 // 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(); this.scrollToTop();
} }
} }

37
static/src/app/common/navigation/navigation-header.component.html
View File

@ -29,7 +29,8 @@
<li routerLinkActive="active"> <li routerLinkActive="active">
<a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a> <a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>
</li> </li>
<li *ngIf="loginService.hasPermission(2)"> <li *ngIf="loginService.hasPermission(2)"
[ngClass]="{'active': currentUrl.includes('/manage/')}">
<mat-list-item [matMenuTriggerFor]="menuManagement"> <mat-list-item [matMenuTriggerFor]="menuManagement">
<a matline> <a matline>
{{'navigation.top.management' | translate}} {{'navigation.top.management' | translate}}
@ -37,21 +38,26 @@
</a> </a>
</mat-list-item> </mat-list-item>
<mat-menu #menuManagement="matMenu"> <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}} {{'navigation.top.management.users' | translate}}
</button> </button>
<button routerLink='{{config.manageSquadPath}}' mat-menu-item> <button routerLink='{{config.manageSquadPath}}'
routerLinkActive="active" mat-menu-item>
{{'navigation.top.management.squads' | translate}} {{'navigation.top.management.squads' | translate}}
</button> </button>
<button routerLink='{{config.manageDecorationPath}}' mat-menu-item> <button routerLink='{{config.manageDecorationPath}}'
routerLinkActive="active" mat-menu-item>
{{'navigation.top.management.decorations' | translate}} {{'navigation.top.management.decorations' | translate}}
</button> </button>
<button routerLink='{{config.manageRankPath}}' mat-menu-item> <button routerLink='{{config.manageRankPath}}'
routerLinkActive="active" mat-menu-item>
{{'navigation.top.management.ranks' | translate}} {{'navigation.top.management.ranks' | translate}}
</button> </button>
</mat-menu> </mat-menu>
</li> </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"> <mat-list-item [matMenuTriggerFor]="menuSqlRequest">
<a matline> <a matline>
{{'navigation.top.request' | translate}} {{'navigation.top.request' | translate}}
@ -59,18 +65,22 @@
</a> </a>
</mat-list-item> </mat-list-item>
<mat-menu #menuSqlRequest="matMenu"> <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}} {{'navigation.top.request.open' | translate}}
</button> </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}} {{'navigation.top.request.promotion' | translate}}
</button> </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}} {{'navigation.top.request.award' | translate}}
</button> </button>
</mat-menu> </mat-menu>
</li> </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"> <mat-list-item [matMenuTriggerFor]="menuRequests">
<a [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}" <a [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
matline> matline>
@ -80,10 +90,12 @@
</mat-list-item> </mat-list-item>
<mat-menu #menuRequests="matMenu"> <mat-menu #menuRequests="matMenu">
<button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}" <button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
routerLinkActive="active"
routerLink="{{config.request}}/{{config.confirmPromotionPath}}" mat-menu-item> routerLink="{{config.request}}/{{config.confirmPromotionPath}}" mat-menu-item>
{{'navigation.top.request.promotion' | translate}} {{'navigation.top.request.promotion' | translate}}
</button> </button>
<button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}" <button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
routerLinkActive="active"
routerLink="{{config.request}}/{{config.confirmAwardPath}}" mat-menu-item> routerLink="{{config.request}}/{{config.confirmAwardPath}}" mat-menu-item>
{{'navigation.top.request.award' | translate}} {{'navigation.top.request.award' | translate}}
</button> </button>
@ -93,7 +105,8 @@
</div> </div>
<div fxFlex fxLayout fxLayoutAlign="end" fxHide.lt-md> <div fxFlex fxLayout fxLayoutAlign="end" fxHide.lt-md>
<ul fxLayout fxLayoutGap="15px" class="navigation-items"> <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"> <mat-list-item [matMenuTriggerFor]="menuAdmin">
<a matline> <a matline>
{{'navigation.top.admin' | translate}} {{'navigation.top.admin' | translate}}
@ -101,7 +114,7 @@
</a> </a>
</mat-list-item> </mat-list-item>
<mat-menu #menuAdmin="matMenu"> <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}} {{'navigation.top.management.users' | translate}}
</button> </button>
</mat-menu> </mat-menu>

5
static/src/app/common/navigation/navigation-header.component.scss
View File

@ -66,5 +66,8 @@ mat-toolbar {
margin: auto; margin: auto;
} }
} }
}
button.active {
background: #dadada;
} }

6
static/src/app/common/navigation/navigation-header.component.ts
View File

@ -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 {BaseConfig, RouteConfig} from '../../app.config';
import {environment} from '../../../environments/environment'; import {environment} from '../../../environments/environment';
import {LoginService} from '../../services/app-user-service/login-service'; import {LoginService} from '../../services/app-user-service/login-service';
@ -20,13 +20,15 @@ export class NavigationHeaderComponent implements OnInit {
@Output() userLogout = new EventEmitter(); @Output() userLogout = new EventEmitter();
@Input() currentUrl;
readonly features = environment.features; readonly features = environment.features;
readonly availableLanguages = BaseConfig.i18n.availableLanguages; readonly availableLanguages = BaseConfig.i18n.availableLanguages;
readonly version = require('./../../../../../package.json').version; readonly version = require('./../../../../../package.json').version;
config = RouteConfig; readonly config = RouteConfig;
language; language;

35
static/src/app/common/navigation/sidenav-list.component.html
View File

@ -16,6 +16,7 @@
</a> </a>
<mat-list-item *ngIf="loginService.hasPermission(2)" <mat-list-item *ngIf="loginService.hasPermission(2)"
[ngClass]="{'active': currentUrl.includes('/manage/')}"
[matMenuTriggerFor]="menuManagement"> [matMenuTriggerFor]="menuManagement">
<a matline> <a matline>
<span class="nav-caption">{{'navigation.top.management' | translate}}</span> <span class="nav-caption">{{'navigation.top.management' | translate}}</span>
@ -23,21 +24,23 @@
</a> </a>
</mat-list-item> </mat-list-item>
<mat-menu #menuManagement="matMenu"> <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}} {{'navigation.top.management.users' | translate}}
</button> </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}} {{'navigation.top.management.squads' | translate}}
</button> </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}} {{'navigation.top.management.decorations' | translate}}
</button> </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}} {{'navigation.top.management.ranks' | translate}}
</button> </button>
</mat-menu> </mat-menu>
<mat-list-item *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()" <mat-list-item *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
[ngClass]="{'active': currentUrl.includes('/request/')}"
[matMenuTriggerFor]="menuSqlRequest"> [matMenuTriggerFor]="menuSqlRequest">
<a matline> <a matline>
<span class="nav-caption">{{'navigation.top.request' | translate}}</span> <span class="nav-caption">{{'navigation.top.request' | translate}}</span>
@ -45,19 +48,22 @@
</a> </a>
</mat-list-item> </mat-list-item>
<mat-menu #menuSqlRequest="matMenu"> <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}} {{'navigation.top.request.open' | translate}}
</button> </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}} {{'navigation.top.request.promotion' | translate}}
</button> </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}} {{'navigation.top.request.award' | translate}}
</button> </button>
</mat-menu> </mat-menu>
<mat-list-item *ngIf="loginService.hasPermission(2) && loginService.hasSquad()" <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"> [matMenuTriggerFor]="menuRequests">
<a matline> <a matline>
<span class="nav-caption">{{'navigation.top.request.manage' | translate}}</span> <span class="nav-caption">{{'navigation.top.request.manage' | translate}}</span>
@ -66,25 +72,30 @@
</mat-list-item> </mat-list-item>
<mat-menu #menuRequests="matMenu"> <mat-menu #menuRequests="matMenu">
<button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}" <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}} {{'navigation.top.request.promotion' | translate}}
</button> </button>
<button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}" <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}} {{'navigation.top.request.award' | translate}}
</button> </button>
</mat-menu> </mat-menu>
<mat-divider></mat-divider> <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> <a matline>
<span class="nav-caption">{{'navigation.top.admin' | translate}}</span> <span class="nav-caption">{{'navigation.top.admin' | translate}}</span>
<span class="caret"></span> <span class="caret"></span>
</a> </a>
</mat-list-item> </mat-list-item>
<mat-menu #menuAdmin="matMenu"> <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}} {{'navigation.top.management.users' | translate}}
</button> </button>
</mat-menu> </mat-menu>

4
static/src/app/common/navigation/sidenav-list.component.scss
View File

@ -23,3 +23,7 @@ mat-divider {
margin: 15% 0; margin: 15% 0;
border-color: #9d9d9d; border-color: #9d9d9d;
} }
button.active {
background: #dadada;
}

4
static/src/app/common/navigation/sidenav-list.component.ts
View File

@ -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 {BaseConfig, RouteConfig} from '../../app.config';
import {LoginService} from '../../services/app-user-service/login-service'; import {LoginService} from '../../services/app-user-service/login-service';
import {PromotionService} from '../../services/army-management/promotion.service'; import {PromotionService} from '../../services/army-management/promotion.service';
@ -18,6 +18,8 @@ export class SidenavListComponent implements OnInit {
@Output() userLogout = new EventEmitter(); @Output() userLogout = new EventEmitter();
@Input() currentUrl;
readonly features = environment.features; readonly features = environment.features;
readonly availableLanguages = BaseConfig.i18n.availableLanguages; readonly availableLanguages = BaseConfig.i18n.availableLanguages;