From 2e193dff323bd05d183be3692876d2e5297bd15b Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 23 Feb 2019 20:53:17 +0100 Subject: [PATCH 1/7] Rework basic nav header incl functionality --- package-lock.json | 2 +- server/package-lock.json | 28 +- static/package-lock.json | 42 +-- static/package.json | 5 +- static/src/app/app.component.html | 307 ++++++++++-------- static/src/app/app.component.scss | 23 +- static/src/app/app.component.ts | 60 +--- static/src/app/app.module.ts | 9 +- static/src/app/app.routing.ts | 5 +- .../navigation-header.component.html | 134 ++++++++ .../navigation-header.component.scss | 57 ++++ .../navigation/navigation-header.component.ts | 71 ++++ .../navigation/sidenav-list.component.html | 11 + .../navigation/sidenav-list.component.scss | 13 + .../navigation/sidenav-list.component.ts | 20 ++ .../common/not-found/not-found.component.ts | 11 +- static/src/app/shared.module.ts | 7 +- static/src/app/style/background-image.scss | 2 - static/src/assets/icon/baseline-menu-24px.svg | 1 + static/src/styles.scss | 13 +- 20 files changed, 550 insertions(+), 271 deletions(-) create mode 100644 static/src/app/common/navigation/navigation-header.component.html create mode 100644 static/src/app/common/navigation/navigation-header.component.scss create mode 100644 static/src/app/common/navigation/navigation-header.component.ts create mode 100644 static/src/app/common/navigation/sidenav-list.component.html create mode 100644 static/src/app/common/navigation/sidenav-list.component.scss create mode 100644 static/src/app/common/navigation/sidenav-list.component.ts create mode 100644 static/src/assets/icon/baseline-menu-24px.svg diff --git a/package-lock.json b/package-lock.json index 1dd5d96..473308a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "opt-cc", - "version": "1.9.2", + "version": "1.9.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/server/package-lock.json b/server/package-lock.json index e036c75..ad5b7d3 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -3984,14 +3984,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4006,20 +4004,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -4136,8 +4131,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -4149,7 +4143,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4164,7 +4157,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4172,14 +4164,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4198,7 +4188,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4279,8 +4268,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -4292,7 +4280,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4414,7 +4401,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/static/package-lock.json b/static/package-lock.json index 987f494..fdd1f2c 100644 --- a/static/package-lock.json +++ b/static/package-lock.json @@ -533,6 +533,14 @@ "tslib": "^1.9.0" } }, + "@angular/flex-layout": { + "version": "6.0.0-beta.18", + "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-6.0.0-beta.18.tgz", + "integrity": "sha512-1Alv3YSIZYp0CTUIESIaSQLoSVyLzuNKPa5bGM/RzOmeSrndm5plVgI9wopGfJUDiwM18R97rq/4XjDvNT/+ig==", + "requires": { + "tslib": "^1.7.1" + } + }, "@angular/forms": { "version": "6.1.10", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.10.tgz", @@ -4636,13 +4644,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4655,18 +4661,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -4769,8 +4772,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -4780,7 +4782,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4793,20 +4794,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.2.4", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4823,7 +4821,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4896,8 +4893,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -4907,7 +4903,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -5013,7 +5008,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -11767,9 +11761,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz", - "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==" + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", + "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==" }, "underscore": { "version": "1.7.0", diff --git a/static/package.json b/static/package.json index 6ce0161..6848f3c 100644 --- a/static/package.json +++ b/static/package.json @@ -22,6 +22,7 @@ "@angular/compiler": "^6.1.10", "@angular/compiler-cli": "^6.1.10", "@angular/core": "^6.1.10", + "@angular/flex-layout": "^6.0.0-beta.18", "@angular/forms": "^6.1.10", "@angular/http": "^6.1.10", "@angular/material": "^6.1.10", @@ -42,6 +43,7 @@ "ngx-infinite-scroll": "^7.0.1", "rxjs-compat": "^6.2.1", "ts-helpers": "^1.1.2", + "typescript": "^2.9.2", "zone.js": "^0.8.26" }, "devDependencies": { @@ -58,7 +60,6 @@ "protractor": "^5.4.1", "protractor-jasmine2-screenshot-reporter": "^0.3.2", "ts-node": "1.2.1", - "tslint": "^5.10.0", - "typescript": "^2.7.2" + "tslint": "^5.10.0" } } diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index f059a83..ca95249 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -1,148 +1,31 @@ -
- -
-
- + + + +
+
+ -
- -
+
+ +
- -
+ +
+ + + + + +
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss index 31ab521..e555101 100644 --- a/static/src/app/app.component.scss +++ b/static/src/app/app.component.scss @@ -1,5 +1,13 @@ @import "style/load-indicator.scss"; +mat-sidenav-container, mat-sidenav-content, mat-sidenav { + height: 100%; +} + +mat-sidenav { + width: 250px; +} + ul { list-style-type: none; margin: 0; @@ -21,21 +29,6 @@ li { overflow-x: hidden; } -.navbar-brand mat-icon { - color: #dadada; - width: 135px; - height: 40px; - stroke: #dadada; -} - -.version-label { - position: absolute; - top: 27px; - left: 115px; - font-size: 12px; - color: #bebebe; -} - #scrollTopBtn { position: fixed; bottom: 20px; diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index 701ce2b..50b7b78 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -1,19 +1,12 @@ -import {Component, HostListener, Inject, OnInit} from '@angular/core'; +import {Component, Inject, OnInit} from '@angular/core'; import {NavigationEnd, NavigationStart, Router} from '@angular/router'; -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 {RouteConfig} from './app.config'; import {DOCUMENT} from '@angular/common'; import {DomSanitizer} from '@angular/platform-browser'; import {MatIconRegistry} from '@angular/material'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; -import {TranslateService} from '@ngx-translate/core'; -import {SettingsService} from './services/settings.service'; -import {environment} from '../environments/environment'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; +import {Observable} from 'rxjs'; -declare function require(url: string); @Component({ selector: 'app-root', @@ -22,10 +15,6 @@ declare function require(url: string); }) export class AppComponent implements OnInit { - readonly features = environment.features; - - config = RouteConfig; - loading = false; scrollTopVisible = false; @@ -37,6 +26,7 @@ export class AppComponent implements OnInit { svgIcons = { 'opt-logo': 'general/opt-logo', 'opt-logo-core': 'general/opt-logo-core', + 'menu': 'baseline-menu-24px', 'add': 'outline-add_box-24px', 'add-user': 'twotone-person_add-24px', 'award': 'award', @@ -73,21 +63,10 @@ export class AppComponent implements OnInit { 'flag-en': 'locale/en', }; - language; - - languages = ['de', 'en']; - - version = 'v'.concat(require('./../../../package.json').version); - - constructor(public loginService: LoginService, - private promotionService: PromotionService, - private awardingService: AwardingService, - private router: Router, + constructor(private router: Router, private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer, private spinnerService: SpinnerService, - private translate: TranslateService, - private settingsService: SettingsService, private snackBarService: SnackBarService, @Inject(DOCUMENT) private document) { this.initMaterialSvgIcons(); @@ -112,15 +91,10 @@ export class AppComponent implements OnInit { } ngOnInit() { - this.settingsService.getLanguage().subscribe((language) => { - this.language = language; - this.translate.setDefaultLang(language) + Observable.fromEvent(this.document, "scroll").subscribe(e => { + this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal + || document.documentElement.scrollTop > this.scrollBtnVisibleVal; }); - if (this.loginService.hasPermission(2)) { - const fraction = this.loginService.getCurrentUser().squad.fraction; - this.promotionService.checkUnconfirmedPromotions(fraction); - this.awardingService.checkUnprocessedAwards(fraction); - } } toggleSpinner(active) { @@ -134,29 +108,9 @@ export class AppComponent implements OnInit { }); } - @HostListener('window:scroll', []) - onWindowScroll() { - this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal - || document.documentElement.scrollTop > this.scrollBtnVisibleVal; - } - - 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 } - - setLanguage(language: string) { - if (language) { - this.language = language; - this.settingsService.setLanguage(language); - } - } } diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index d8a986e..792b881 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -20,9 +20,10 @@ import {CookieService} from 'ngx-cookie-service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {HttpClientModule} from '@angular/common/http'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; -import {MatSelectModule, MatSnackBarModule} from '@angular/material'; import {SettingsService} from './services/settings.service'; import {HttpGateway} from './services/http-gateway'; +import {MatListModule, MatSidenavModule, MatToolbarModule} from '@angular/material'; +import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ imports: [ @@ -33,8 +34,10 @@ import {HttpGateway} from './services/http-gateway'; HttpModule, HttpClientModule, ClipboardModule, - MatSnackBarModule, - MatSelectModule, + MatSidenavModule, + MatToolbarModule, + MatListModule, + FlexLayoutModule, ], providers: [ diff --git a/static/src/app/app.routing.ts b/static/src/app/app.routing.ts index bc8468e..ae4fc77 100644 --- a/static/src/app/app.routing.ts +++ b/static/src/app/app.routing.ts @@ -4,6 +4,8 @@ import {LoginComponent, LoginGuardAdmin, LoginGuardHL, LoginGuardMT} from './log import {armyRoutes, armyRoutingComponents} from './army/army.routing'; import {SignupComponent} from './login/signup.component'; import {RouteConfig} from './app.config'; +import {NavigationHeaderComponent} from './common/navigation/navigation-header.component'; +import {SidenavListComponent} from './common/navigation/sidenav-list.component'; export const appRoutes: Routes = [ { @@ -58,6 +60,7 @@ export const appRoutes: Routes = [ export const appRouting = RouterModule.forRoot(appRoutes); -export const routingComponents = [...armyRoutingComponents, LoginComponent, SignupComponent, NotFoundComponent]; +export const routingComponents = [...armyRoutingComponents, LoginComponent, SignupComponent, NotFoundComponent, + NavigationHeaderComponent, SidenavListComponent]; export const routingProviders = [LoginGuardHL, LoginGuardMT, LoginGuardAdmin]; diff --git a/static/src/app/common/navigation/navigation-header.component.html b/static/src/app/common/navigation/navigation-header.component.html new file mode 100644 index 0000000..f92bdd8 --- /dev/null +++ b/static/src/app/common/navigation/navigation-header.component.html @@ -0,0 +1,134 @@ + +
+ +
+ +
+ +
+
+ +
+ diff --git a/static/src/app/common/navigation/navigation-header.component.scss b/static/src/app/common/navigation/navigation-header.component.scss new file mode 100644 index 0000000..6857758 --- /dev/null +++ b/static/src/app/common/navigation/navigation-header.component.scss @@ -0,0 +1,57 @@ +li { + height: 50px; + line-height: 46px; +} + +li > a { + font-size: 16px; + text-decoration: none; + color: #9d9d9d; + padding: 16px 5px; +} + +li:hover, li.active{ + > a { + color: white; + } +} + +.navigation-items{ + list-style-type: none; + padding: 0; + margin: 0; +} + +.mat-toolbar.mat-primary { + background: #222222; +} + +mat-toolbar{ + height: 2.5em; + min-height: 50px; +} + +.brand-logo { + padding-top: 6px; + margin-right: -10px; +} + +.brand-logo mat-icon { + color: #dadada; + width: 135px; + height: 40px; + stroke: #dadada; +} + +.version-label { + position: relative; + left: -42px; + font-size: 12px; + color: #bebebe; +} + +@media all and (max-width : 599px) { + .brand-logo { + margin: auto; + } +} diff --git a/static/src/app/common/navigation/navigation-header.component.ts b/static/src/app/common/navigation/navigation-header.component.ts new file mode 100644 index 0000000..67acc72 --- /dev/null +++ b/static/src/app/common/navigation/navigation-header.component.ts @@ -0,0 +1,71 @@ +import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core'; +import {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'; +import {TranslateService} from '@ngx-translate/core'; +import {DOCUMENT} from '@angular/common'; + +declare function require(url: string); + +@Component({ + selector: 'app-header', + templateUrl: 'navigation-header.component.html', + styleUrls: ['navigation-header.component.scss'] +}) +export class NavigationHeaderComponent implements OnInit { + + @Output() public sidenavToggle = new EventEmitter(); + + readonly features = environment.features; + + 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, + private settingsService: SettingsService, + @Inject(DOCUMENT) private document) { + } + + ngOnInit() { + this.settingsService.getLanguage().subscribe((language) => { + this.language = language; + this.translate.setDefaultLang(language) + }); + if (this.loginService.hasPermission(2)) { + const fraction = this.loginService.getCurrentUser().squad.fraction; + this.promotionService.checkUnconfirmedPromotions(fraction); + this.awardingService.checkUnprocessedAwards(fraction); + } + } + + public onToggleSidenav = () => { + this.sidenavToggle.emit(); + }; + + setLanguage(language: string) { + if (language) { + this.language = language; + this.settingsService.setLanguage(language); + } + } + + logout() { + this.loginService.logout(); + setTimeout(() => { + this.router.navigate([RouteConfig.overviewPath]); + }, 500); + } +} diff --git a/static/src/app/common/navigation/sidenav-list.component.html b/static/src/app/common/navigation/sidenav-list.component.html new file mode 100644 index 0000000..e845859 --- /dev/null +++ b/static/src/app/common/navigation/sidenav-list.component.html @@ -0,0 +1,11 @@ + + + home Home + + + assignment_ind Owner Actions + + + account_balanceAccount Actions + + diff --git a/static/src/app/common/navigation/sidenav-list.component.scss b/static/src/app/common/navigation/sidenav-list.component.scss new file mode 100644 index 0000000..569e4a6 --- /dev/null +++ b/static/src/app/common/navigation/sidenav-list.component.scss @@ -0,0 +1,13 @@ +a { + text-decoration: none; + color: white; +} + +a:hover, a:active{ + color: lightgray; +} + +.nav-caption{ + display: inline-block; + padding-left: 6px; +} diff --git a/static/src/app/common/navigation/sidenav-list.component.ts b/static/src/app/common/navigation/sidenav-list.component.ts new file mode 100644 index 0000000..00a59cb --- /dev/null +++ b/static/src/app/common/navigation/sidenav-list.component.ts @@ -0,0 +1,20 @@ +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; + +@Component({ + selector: 'app-sidenav-list', + templateUrl: './sidenav-list.component.html', + styleUrls: ['./sidenav-list.component.scss'] +}) +export class SidenavListComponent implements OnInit { + + @Output() sidenavClose = new EventEmitter(); + + constructor() { } + + ngOnInit() { + } + + public onSidenavClose = () => { + this.sidenavClose.emit(); + } +} diff --git a/static/src/app/common/not-found/not-found.component.ts b/static/src/app/common/not-found/not-found.component.ts index c65903a..02eeb8b 100644 --- a/static/src/app/common/not-found/not-found.component.ts +++ b/static/src/app/common/not-found/not-found.component.ts @@ -1,16 +1,9 @@ -import {Component, OnInit} from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-not-found', templateUrl: 'not-found.component.html', styleUrls: ['not-found.component.scss'] }) -export class NotFoundComponent implements OnInit { - - constructor() { - } - - ngOnInit() { - } - +export class NotFoundComponent { } diff --git a/static/src/app/shared.module.ts b/static/src/app/shared.module.ts index 298a752..4957104 100644 --- a/static/src/app/shared.module.ts +++ b/static/src/app/shared.module.ts @@ -4,8 +4,10 @@ import {ShowErrorComponent} from './common/show-error/show-error.component'; import {CommonModule} from '@angular/common'; import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component'; import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component'; -import {MatButtonToggleModule, MatTooltipModule, MatSlideToggleModule, MatFormFieldModule, MatOptionModule, MatSelectModule, - MatInputModule} from '@angular/material'; +import { + MatButtonToggleModule, MatTooltipModule, MatSlideToggleModule, MatFormFieldModule, MatOptionModule, MatSelectModule, + MatInputModule, MatSidenavModule, MatSnackBarModule +} from '@angular/material'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; @@ -35,6 +37,7 @@ export function createTranslateLoader(http: HttpClient) { MatFormFieldModule, MatOptionModule, MatSelectModule, + MatSnackBarModule, MatInputModule, TranslateModule.forRoot({ diff --git a/static/src/app/style/background-image.scss b/static/src/app/style/background-image.scss index be906f7..61a435c 100644 --- a/static/src/app/style/background-image.scss +++ b/static/src/app/style/background-image.scss @@ -4,8 +4,6 @@ min-height: 100vh; width: 100%; min-width: fit-content; - margin-top: -23px; - padding-top: 23px; padding-bottom: 23px; background-image: url('../../assets/bg.jpg'); background-size: cover; diff --git a/static/src/assets/icon/baseline-menu-24px.svg b/static/src/assets/icon/baseline-menu-24px.svg new file mode 100644 index 0000000..fd6e253 --- /dev/null +++ b/static/src/assets/icon/baseline-menu-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/src/styles.scss b/static/src/styles.scss index 6e15c51..378bf51 100644 --- a/static/src/styles.scss +++ b/static/src/styles.scss @@ -1,5 +1,14 @@ -body { - padding-top: 50px; +// mat-core() mixin: +@import '~@angular/material/theming'; +$custom-typography: mat-typography-config( + $font-family: 'Roboto, monospace' +); +@include mat-core($custom-typography); + +/* for sidenav to take a whole page */ +html, body { + margin: 0; + height: 100%; } .tabs-container { -- 2.25.1 From 430d4ce7da54b9a2bce6f6d9e1b13a2af6ae7aad Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 23 Feb 2019 20:56:54 +0100 Subject: [PATCH 2/7] clean up --- static/src/app/app.component.html | 213 +++++------------------------- static/src/app/app.component.ts | 2 +- 2 files changed, 32 insertions(+), 183 deletions(-) diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index ca95249..b4dcee0 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -1,188 +1,37 @@
- - - -
-
- + + + +
+
+ -
- +
+ +
+ +
+
+ + + + + - -
-
- - - - - +
+
+ +
-
-
- +
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index 50b7b78..b96b106 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -91,7 +91,7 @@ export class AppComponent implements OnInit { } ngOnInit() { - Observable.fromEvent(this.document, "scroll").subscribe(e => { + Observable.fromEvent(this.document, 'scroll').subscribe(e => { this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal || document.documentElement.scrollTop > this.scrollBtnVisibleVal; }); -- 2.25.1 From e9ca404f85745cf0baf9c517c6350e68e78d2fe2 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sun, 24 Feb 2019 02:08:56 +0100 Subject: [PATCH 3/7] Add sidebar navigation --- static/src/app/app.component.html | 24 ++- static/src/app/app.component.scss | 61 +------ static/src/app/app.module.ts | 3 +- .../navigation-header.component.html | 171 +++++++++--------- .../navigation-header.component.scss | 47 ++++- .../navigation/sidenav-list.component.html | 105 ++++++++++- .../navigation/sidenav-list.component.scss | 4 +- .../navigation/sidenav-list.component.ts | 11 +- .../search-field/search-field.component.scss | 4 + .../war/war-list/war-list.component.html | 7 +- .../war/war-list/war-list.component.scss | 3 - static/src/styles.scss | 6 +- 12 files changed, 269 insertions(+), 177 deletions(-) diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index b4dcee0..7ebb66e 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -2,25 +2,23 @@ -
-
- - -
- -
- - -
-
+
+ +
+ +
+ + +
+
diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss index e555101..3ac6808 100644 --- a/static/src/app/app.component.scss +++ b/static/src/app/app.component.scss @@ -1,73 +1,24 @@ @import "style/load-indicator.scss"; mat-sidenav-container, mat-sidenav-content, mat-sidenav { - height: 100%; + height: 100vh; + display: inline; + background: #fdfdfd; } mat-sidenav { + top: 50px; width: 250px; } -ul { - list-style-type: none; - margin: 0; - padding: 0; -} - -li { - display: inline; -} - -.content { - padding-left: 15px; - padding-right: 15px; -} - -.scrollable-menu { - height: auto; - max-height: 200px; - overflow-x: hidden; -} - #scrollTopBtn { position: fixed; bottom: 20px; right: 30px; z-index: 99; background: rgba(16, 16, 16, 0.8); -} -#scrollTopBtn:hover { - background: #101010; -} - -.unprocessed { - -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */ - -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ - animation-name: color-blink; - animation-duration: 4s; - animation-iteration-count: infinite; -} - -.unprocessed-child { - background-color: orange; -} - -/* Safari 4.0 - 8.0 */ -@-webkit-keyframes color-blink { - from { - background-color: #222222; - } - to { - background-color: orange; - } -} - -@keyframes color-blink { - from { - background-color: #222222; - } - to { - background-color: orange; + &:hover { + background: #101010; } } diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index 792b881..ac162dc 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -22,7 +22,7 @@ import {HttpClientModule} from '@angular/common/http'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; import {SettingsService} from './services/settings.service'; import {HttpGateway} from './services/http-gateway'; -import {MatListModule, MatSidenavModule, MatToolbarModule} from '@angular/material'; +import {MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material'; import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ @@ -37,6 +37,7 @@ import {FlexLayoutModule} from '@angular/flex-layout'; MatSidenavModule, MatToolbarModule, MatListModule, + MatMenuModule, FlexLayoutModule, ], diff --git a/static/src/app/common/navigation/navigation-header.component.html b/static/src/app/common/navigation/navigation-header.component.html index f92bdd8..143f2f8 100644 --- a/static/src/app/common/navigation/navigation-header.component.html +++ b/static/src/app/common/navigation/navigation-header.component.html @@ -29,85 +29,82 @@
  • {{'navigation.top.statistics' | translate}}
    • -
  • - - +
  • + + + {{'navigation.top.management' | translate}} + + + + + + + + +
    • -
  • - - +
  • + + + {{'navigation.top.request' | translate}} + + + + + + + +
    • -
  • - - +
  • + + + {{'navigation.top.request.manage' | translate}} + + + + + + +
    • diff --git a/static/src/app/common/navigation/navigation-header.component.scss b/static/src/app/common/navigation/navigation-header.component.scss index 6857758..d3816be 100644 --- a/static/src/app/common/navigation/navigation-header.component.scss +++ b/static/src/app/common/navigation/navigation-header.component.scss @@ -3,20 +3,24 @@ li { line-height: 46px; } -li > a { +li a { font-size: 16px; text-decoration: none; color: #9d9d9d; padding: 16px 5px; } -li:hover, li.active{ - > a { +li mat-list-item { + cursor: pointer; +} + +li:hover, li.active { + a { color: white; } } -.navigation-items{ +.navigation-items { list-style-type: none; padding: 0; margin: 0; @@ -26,7 +30,7 @@ li:hover, li.active{ background: #222222; } -mat-toolbar{ +mat-toolbar { height: 2.5em; min-height: 50px; } @@ -50,8 +54,39 @@ mat-toolbar{ color: #bebebe; } -@media all and (max-width : 599px) { +@media all and (max-width: 599px) { .brand-logo { margin: auto; } } + +.unprocessed { + -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */ + -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ + animation-name: color-blink; + animation-duration: 4s; + animation-iteration-count: infinite; +} + +.unprocessed-child { + background-color: orange; +} + +/* Safari 4.0 - 8.0 */ +@-webkit-keyframes color-blink { + from { + background-color: #222222; + } + to { + background-color: orange; + } +} + +@keyframes color-blink { + from { + background-color: #222222; + } + to { + background-color: orange; + } +} diff --git a/static/src/app/common/navigation/sidenav-list.component.html b/static/src/app/common/navigation/sidenav-list.component.html index e845859..682b90d 100644 --- a/static/src/app/common/navigation/sidenav-list.component.html +++ b/static/src/app/common/navigation/sidenav-list.component.html @@ -1,11 +1,104 @@ - - home Home + + {{'navigation.top.overview' | translate}} - - assignment_ind Owner Actions + + {{'navigation.top.ranks' | translate}} - - account_balanceAccount Actions + + {{'navigation.top.decorations' | translate}} + + + {{'navigation.top.statistics' | translate}} + + + + + {{'navigation.top.management' | translate}} + + + + + + + + + + + + + {{'navigation.top.request' | translate}} + + + + + + + + + + + + {{'navigation.top.request.manage' | translate}} + + + + + + + + + + + + + + {{'navigation.top.admin' | translate}} + + + + + + + + + {{'navigation.top.logout' | translate}} + + + {{'navigation.top.login' | translate}} + + + + {{'navigation.top.board' | translate}} diff --git a/static/src/app/common/navigation/sidenav-list.component.scss b/static/src/app/common/navigation/sidenav-list.component.scss index 569e4a6..460a29b 100644 --- a/static/src/app/common/navigation/sidenav-list.component.scss +++ b/static/src/app/common/navigation/sidenav-list.component.scss @@ -3,11 +3,11 @@ a { color: white; } -a:hover, a:active{ +a:hover, a:active { color: lightgray; } -.nav-caption{ +.nav-caption { display: inline-block; padding-left: 6px; } diff --git a/static/src/app/common/navigation/sidenav-list.component.ts b/static/src/app/common/navigation/sidenav-list.component.ts index 00a59cb..1c7b8a2 100644 --- a/static/src/app/common/navigation/sidenav-list.component.ts +++ b/static/src/app/common/navigation/sidenav-list.component.ts @@ -1,4 +1,8 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {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'; @Component({ selector: 'app-sidenav-list', @@ -9,7 +13,12 @@ export class SidenavListComponent implements OnInit { @Output() sidenavClose = new EventEmitter(); - constructor() { } + config = RouteConfig; + + constructor(public loginService: LoginService, + private promotionService: PromotionService, + private awardingService: AwardingService) { + } ngOnInit() { } diff --git a/static/src/app/common/user-interface/search-field/search-field.component.scss b/static/src/app/common/user-interface/search-field/search-field.component.scss index 04be8be..b010b31 100644 --- a/static/src/app/common/user-interface/search-field/search-field.component.scss +++ b/static/src/app/common/user-interface/search-field/search-field.component.scss @@ -2,3 +2,7 @@ width: 100%; padding-bottom: 20px; } + +input.form-control { + z-index: 0; +} diff --git a/static/src/app/statistic/war/war-list/war-list.component.html b/static/src/app/statistic/war/war-list/war-list.component.html index bb0781e..be50ca0 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.html +++ b/static/src/app/statistic/war/war-list/war-list.component.html @@ -47,8 +47,7 @@ [selected]="war._id == selectedWarId"> - - -
    +
    +
    diff --git a/static/src/app/statistic/war/war-list/war-list.component.scss b/static/src/app/statistic/war/war-list/war-list.component.scss index a840a37..4937254 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.scss +++ b/static/src/app/statistic/war/war-list/war-list.component.scss @@ -88,9 +88,6 @@ } .fill-vertical-border { - width: 20%; - top: 0; - z-index: -20; position: fixed; border-right: 1px solid #dadada; height: 100vh; diff --git a/static/src/styles.scss b/static/src/styles.scss index 378bf51..7dd1afd 100644 --- a/static/src/styles.scss +++ b/static/src/styles.scss @@ -48,12 +48,16 @@ form { #left { max-width: 20%; - min-width: min-content; + min-width: 345px; margin: 0; position: static; float: left; border-right: thin solid #dadada; box-shadow: #dadada 1px 1px 6px; + + @media all and (max-width: 599px) { + // TODO + } } #right { -- 2.25.1 From 4d2ea25fe99bcc43334fe27572780a6416344537 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sun, 24 Feb 2019 12:59:59 +0100 Subject: [PATCH 4/7] Finish sidebar navigation --- static/src/app/app.component.scss | 1 + static/src/app/app.config.ts | 4 ++ .../navigation-header.component.html | 6 +-- .../navigation-header.component.scss | 28 +++++------ .../navigation/navigation-header.component.ts | 6 +-- .../navigation/sidenav-list.component.html | 34 ++++++++++---- .../navigation/sidenav-list.component.scss | 47 +++++++++++++++++-- .../navigation/sidenav-list.component.ts | 33 ++++++++++++- .../decoration-overview.component.scss | 5 ++ static/src/app/statistic/stats.component.html | 2 +- static/src/app/statistic/stats.component.ts | 13 +++++ .../war/war-list/war-item.component.html | 2 +- .../war/war-list/war-list.component.scss | 1 - 13 files changed, 143 insertions(+), 39 deletions(-) diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss index 3ac6808..0a1a3e7 100644 --- a/static/src/app/app.component.scss +++ b/static/src/app/app.component.scss @@ -7,6 +7,7 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav { } mat-sidenav { + background: #222222; top: 50px; width: 250px; } diff --git a/static/src/app/app.config.ts b/static/src/app/app.config.ts index 9f2cf84..548c0dd 100644 --- a/static/src/app/app.config.ts +++ b/static/src/app/app.config.ts @@ -43,3 +43,7 @@ export const RouteConfig = { rankOverviewPath: 'public/ranks', decorationOverviewPath: 'public/decorations', }; + +export const ResponsiveConfig = { + breakpointPx: 959, +}; diff --git a/static/src/app/common/navigation/navigation-header.component.html b/static/src/app/common/navigation/navigation-header.component.html index 143f2f8..34f3515 100644 --- a/static/src/app/common/navigation/navigation-header.component.html +++ b/static/src/app/common/navigation/navigation-header.component.html @@ -1,5 +1,5 @@ -
    +
    @@ -10,7 +10,7 @@ v{{version}}
    -
    + -
    +