Improve new menus

static/src/app/app.component.html

@@ -1,10 +1,14 @@
 <div>
   <mat-sidenav-container>
     <mat-sidenav-content>
-      <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
+      <app-header (sidenavToggle)="sidenav.toggle()"
+                  (userLogout)="logout()">
+      </app-header>
     </mat-sidenav-content>
     <mat-sidenav #sidenav role="navigation">
-      <app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
+      <app-sidenav-list (sidenavClose)="sidenav.close()"
+                        (userLogout)="logout()">
+      </app-sidenav-list>
     </mat-sidenav>
   </mat-sidenav-container>
 

static/src/app/app.component.ts

@@ -6,6 +6,8 @@ import {MatIconRegistry} from '@angular/material';
 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';
 
 
 @Component({
@@ -64,6 +66,7 @@ export class AppComponent implements OnInit {
   };
 
   constructor(private router: Router,
+              private loginService: LoginService,
               private iconRegistry: MatIconRegistry,
               private sanitizer: DomSanitizer,
               private spinnerService: SpinnerService,
@@ -108,6 +111,14 @@ export class AppComponent implements OnInit {
     });
   }
 
+  logout() {
+    this.loginService.logout();
+    setTimeout(() => {
+      this.router.navigate([RouteConfig.overviewPath]);
+    }, 500);
+  }
+
+
   scrollToTop() {
     this.document.body.scrollTop = 0; // For Safari
     this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

static/src/app/app.config.ts

@@ -1,7 +1,5 @@
 export class AppConfig {
-
   public readonly apiUrl = '/api';
-
   public readonly apiAppUserPath = this.apiUrl + '/account/';
   public readonly apiAuthenticationPath = this.apiUrl + '/authenticate';
   public readonly apiAwardPath = this.apiUrl + '/awardings';
@@ -44,6 +42,14 @@ export const RouteConfig = {
   decorationOverviewPath: 'public/decorations',
 };
 
-export const ResponsiveConfig = {
-  breakpointPx: 959,
+export const BaseConfig = {
+  responsive: {
+    breakpointPx: 959,
+  },
+  i18n: {
+    availableLanguages: [
+      'de',
+      'en'
+    ]
+  }
 };

static/src/app/common/navigation/navigation-header.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">
-  <div fxHide.gt-sm>
+  <div fxHide.gt-sm style="position:absolute;">
     <button mat-icon-button (click)="onToggleSidenav()">
       <mat-icon svgIcon="menu"></mat-icon>
     </button>
@@ -11,7 +11,7 @@
     <span class="version-label">v{{version}}</span>
   </div>
   <div fxHide.lt-md>
-    <ul fxLayout="row" fxLayoutGap="15px" class="navigation-items">
+    <ul fxLayout="row" class="navigation-items">
       <li routerLinkActive="active">
         <a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
       </li>
@@ -107,7 +107,7 @@
         </mat-menu>
       </li>
       <li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
-        <a (click)="logout()">{{'navigation.top.logout' | translate}}</a>
+        <a (click)="doUserLogout()">{{'navigation.top.logout' | translate}}</a>
       </li>
       <li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
         <a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
@@ -120,13 +120,13 @@
           </a>
         </mat-list-item>
         <mat-menu #menuLanguage="matMenu">
-          <button mat-menu-item (click)="setLanguage(languages[0])">
-            <mat-icon svgIcon="flag-{{languages[0]}}"></mat-icon>
-            <span class="text-uppercase">{{languages[0]}}</span>
+          <button mat-menu-item (click)="setLanguage(availableLanguages[0])">
+            <mat-icon svgIcon="flag-{{availableLanguages[0]}}"></mat-icon>
+            <span class="text-uppercase">{{availableLanguages[0]}}</span>
           </button>
-          <button mat-menu-item (click)="setLanguage(languages[1])">
-            <mat-icon svgIcon="flag-{{languages[1]}}"></mat-icon>
-            <span class="text-uppercase">{{languages[1]}}</span>
+          <button mat-menu-item (click)="setLanguage(availableLanguages[1])">
+            <mat-icon svgIcon="flag-{{availableLanguages[1]}}"></mat-icon>
+            <span class="text-uppercase">{{availableLanguages[1]}}</span>
           </button>
         </mat-menu>
       </li>

static/src/app/common/navigation/navigation-header.component.scss

@@ -1,6 +1,8 @@
 li {
   height: 50px;
   line-height: 46px;
+  padding: 0 10px;
+  cursor: pointer;
 }
 
 li a {
@@ -14,12 +16,18 @@ li mat-list-item {
   cursor: pointer;
 }
 
-li:hover, li.active {
+li:hover {
   a {
     color: white;
   }
 }
 
+li.active {
+  @extend li:hover;
+
+  background: #000000;
+}
+
 .navigation-items {
   list-style-type: none;
   padding: 0;

static/src/app/common/navigation/navigation-header.component.ts

@@ -1,8 +1,7 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {RouteConfig} from '../../app.config';
+import {BaseConfig, RouteConfig} from '../../app.config';
 import {environment} from '../../../environments/environment';
 import {LoginService} from '../../services/app-user-service/login-service';
-import {Router} from '@angular/router';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {SettingsService} from '../../services/settings.service';
@@ -17,20 +16,21 @@ declare function require(url: string);
 })
 export class NavigationHeaderComponent implements OnInit {
 
-  @Output() public sidenavToggle = new EventEmitter();
+  @Output() sidenavToggle = new EventEmitter();
+
+  @Output() userLogout = new EventEmitter();
 
   readonly features = environment.features;
 
+  readonly availableLanguages = BaseConfig.i18n.availableLanguages;
+
   config = RouteConfig;
 
   language;
 
-  languages = ['de', 'en'];
-
   version = require('./../../../../../package.json').version;
 
   constructor(public loginService: LoginService,
-              private router: Router,
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private translate: TranslateService,
@@ -49,21 +49,18 @@ export class NavigationHeaderComponent implements OnInit {
     }
   }
 
-  public onToggleSidenav = () => {
+  public onToggleSidenav() {
     this.sidenavToggle.emit();
   };
 
+  public doUserLogout() {
+    this.userLogout.emit()
+  };
+
   setLanguage(language: string) {
     if (language) {
       this.language = language;
       this.settingsService.setLanguage(language);
     }
   }
-
-  logout() {
-    this.loginService.logout();
-    setTimeout(() => {
-      this.router.navigate([RouteConfig.overviewPath]);
-    }, 500);
-  }
 }

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

@@ -96,23 +96,23 @@
     </a>
   </mat-list-item>
   <mat-menu #menuLanguage="matMenu">
-    <button mat-menu-item (click)="setLanguage(languages[0])">
-      <mat-icon svgIcon="flag-{{languages[0]}}"></mat-icon>
-      <span class="text-uppercase">{{languages[0]}}</span>
+    <button mat-menu-item (click)="setLanguage(availableLanguages[0])">
+      <mat-icon svgIcon="flag-{{availableLanguages[0]}}"></mat-icon>
+      <span class="text-uppercase">{{availableLanguages[0]}}</span>
     </button>
-    <button mat-menu-item (click)="setLanguage(languages[1])">
-      <mat-icon svgIcon="flag-{{languages[1]}}"></mat-icon>
-      <span class="text-uppercase">{{languages[1]}}</span>
+    <button mat-menu-item (click)="setLanguage(availableLanguages[1])">
+      <mat-icon svgIcon="flag-{{availableLanguages[1]}}"></mat-icon>
+      <span class="text-uppercase">{{availableLanguages[1]}}</span>
     </button>
   </mat-menu>
 
 
   <a mat-list-item *ngIf="loginService.isLoggedIn()"
-    (click)="logout(); onSidenavClose()">
+    (click)="doUserLogout(); onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.logout' | translate}}</span>
   </a>
   <a mat-list-item *ngIf="!loginService.isLoggedIn()"
-    routerLink='{{config.loginPath}}' (click)="onSidenavClose()">
+     routerLinkActive="active" routerLink='{{config.loginPath}}' (click)="onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.login' | translate}}</span>
   </a>
 

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

@@ -3,6 +3,10 @@ mat-list-item.mat-list-item, a.mat-list-item {
   text-decoration: none;
   color: #9d9d9d;
 
+  &.active {
+    background: #000000;
+  }
+
   &:hover, &.active {
     color: #ffffff;
   }

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

@@ -1,12 +1,11 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {RouteConfig} from '../../app.config';
+import {BaseConfig, RouteConfig} from '../../app.config';
 import {LoginService} from '../../services/app-user-service/login-service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {environment} from '../../../environments/environment';
 import {TranslateService} from '@ngx-translate/core';
 import {SettingsService} from '../../services/settings.service';
-import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-sidenav-list',
@@ -17,18 +16,19 @@ export class SidenavListComponent implements OnInit {
 
   @Output() sidenavClose = new EventEmitter();
 
+  @Output() userLogout = new EventEmitter();
+
   readonly features = environment.features;
 
+  readonly availableLanguages = BaseConfig.i18n.availableLanguages;
+
   config = RouteConfig;
 
   language;
 
-  languages = ['de', 'en'];
-
   constructor(public loginService: LoginService,
-              private router: Router,
-              private promotionService: PromotionService,
-              private awardingService: AwardingService,
+              public promotionService: PromotionService,
+              public awardingService: AwardingService,
               private translate: TranslateService,
               private settingsService: SettingsService) {
   }
@@ -40,21 +40,18 @@ export class SidenavListComponent implements OnInit {
     });
   }
 
-  public onSidenavClose = () => {
+  public onSidenavClose() {
     this.sidenavClose.emit();
   };
 
+  public doUserLogout() {
+    this.userLogout.emit()
+  };
+
   setLanguage(language: string) {
     if (language) {
       this.language = language;
       this.settingsService.setLanguage(language);
     }
   }
-
-  logout() {
-    this.loginService.logout();
-    setTimeout(() => {
-      this.router.navigate([RouteConfig.overviewPath]);
-    }, 500);
-  }
 }

static/src/app/statistic/stats.component.ts

@@ -6,7 +6,7 @@ import {TranslateService} from '@ngx-translate/core';
 import {SettingsService} from '../services/settings.service';
 import {WarService} from '../services/logs/war.service';
 import {Observable} from 'rxjs';
-import {ResponsiveConfig} from '../app.config';
+import {BaseConfig} from '../app.config';
 
 @Component({
   selector: 'cc-stats',
@@ -33,21 +33,21 @@ export class StatisticComponent implements OnInit {
   }
 
   ngOnInit() {
-    Observable.fromEvent(window, 'resize').subscribe(event => {
-      if (event.target['innerWidth'] <= ResponsiveConfig.breakpointPx) {
-        this.collapsed = true;
-        this.collapseBtnVisible = false;
-      } else {
-        this.collapseBtnVisible = true;
-      }
-    });
-
     this.campaignService.getAllCampaigns()
         .filter(campaigns => campaigns.length !== 0)
         .subscribe((campaigns) => {
           this.campaigns = campaigns;
           this.resolveCampaignFromUrl();
         });
+
+    Observable.fromEvent(window, 'resize').subscribe(event => {
+      if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) {
+        this.collapsed = true;
+        this.collapseBtnVisible = false;
+      } else {
+        this.collapseBtnVisible = true;
+      }
+    });
   }
 
   resolveCampaignFromUrl() {