diff --git a/static/src/app/app.component.css b/static/src/app/app.component.css index d14f402..e5407e4 100644 --- a/static/src/app/app.component.css +++ b/static/src/app/app.component.css @@ -8,6 +8,12 @@ li { display: inline; } +.sidebar-toggle-btn { + background: linear-gradient(-90deg, #e8e5e5, #ffffff); + margin-left: -12px; + z-index: 500; +} + .content { padding-left: 15px; padding-right: 15px; diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 3e7b1f9..5a699ae 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -96,9 +96,9 @@
- + diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index 7743739..8c24bb5 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -34,6 +34,8 @@ export class AppComponent implements OnInit { leftBoxShadow; + // a map of svgIcon names and associated svg file names + // to load from assets/icon folder svgIcons = { 'add': 'outline-add_box-24px', 'add-user': 'twotone-person_add-24px', @@ -63,17 +65,20 @@ export class AppComponent implements OnInit { this.spinnerService.activate(); } if (event instanceof NavigationEnd) { + this.spinnerService.deactivate(); const currentUrl = this.router.url; - this.spinnerService.deactivate(); // scroll to top on route from army overview to user detail and back if (currentUrl.includes('/overview')) { this.scrollToTop(); } + // show sidebar menu on initial page access this.sidebarOpen = true; this.showSidebarToggleBtn = currentUrl.includes('/stats'); + // remove sidebar styling for components that are rendered inside, + // but not really shown as sidebar (legacy) if (currentUrl.includes('/login') || currentUrl.includes('/signup') || currentUrl.endsWith('/404')) { @@ -87,13 +92,14 @@ export class AppComponent implements OnInit { }); } - toggleSpinner(active){ + toggleSpinner(active) { this.loading = active; } initMaterialSvgIcons() { Object.keys(this.svgIcons).forEach(key => { - const fileUri = '../assets/icon/' + this.svgIcons[key] + '.svg'; + const fileUri = '../assets/icon/'.concat(this.svgIcons[key]) + .concat('.svg'); this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(fileUri)); }); } diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index 10c897b..5c8f9c6 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -23,13 +23,13 @@ import {UserService} from './services/army-management/user.service'; import {UserStore} from './services/stores/user.store'; import {CookieService} from 'ngx-cookie-service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; -import {MaterialComponentsModule} from './material-components.module'; import {HttpClientModule} from '@angular/common/http'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; +import {MatSnackBarModule} from '@angular/material'; @NgModule({ imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule, - ClipboardModule, MaterialComponentsModule], + ClipboardModule, MatSnackBarModule], providers: [ HttpClient, LoginService, diff --git a/static/src/app/login/login.component.html b/static/src/app/login/login.component.html index 92de22e..2b588bd 100644 --- a/static/src/app/login/login.component.html +++ b/static/src/app/login/login.component.html @@ -15,10 +15,6 @@ Anmelden - - {{error}} - diff --git a/static/src/app/login/login.component.ts b/static/src/app/login/login.component.ts index c801702..b5e48e6 100644 --- a/static/src/app/login/login.component.ts +++ b/static/src/app/login/login.component.ts @@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core'; import {Router} from '@angular/router'; import {LoginService} from '../services/app-user-service/login-service'; import {RouteConfig} from '../app.config'; +import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service'; @Component({ @@ -12,16 +13,13 @@ import {RouteConfig} from '../app.config'; export class LoginComponent implements OnInit { - showErrorLabel = false; - - error: string; - loading = false; returnUrl: string; constructor(private router: Router, - private loginService: LoginService) { + private loginService: LoginService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -40,11 +38,7 @@ export class LoginComponent implements OnInit { this.router.navigate([this.returnUrl]); }, error => { - this.error = error._body; - this.showErrorLabel = true; - setTimeout(() => { - this.showErrorLabel = false; - }, 4000); + this.snackBarService.showError(error._body, 15000); this.loading = false; }); } diff --git a/static/src/app/material-components.module.ts b/static/src/app/material-components.module.ts deleted file mode 100644 index b21a508..0000000 --- a/static/src/app/material-components.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Angular material imports - */ - -import {NgModule} from '@angular/core'; -import {MatProgressSpinnerModule, MatSnackBarModule} from '@angular/material'; - -@NgModule({ - imports: [ - MatSnackBarModule, - MatProgressSpinnerModule, - ], - exports: [ - MatSnackBarModule, - MatProgressSpinnerModule, - ] -}) - -export class MaterialComponentsModule { -} diff --git a/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts b/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts index 31e3420..5820889 100644 --- a/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts +++ b/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts @@ -44,7 +44,7 @@ export class CampaignSubmitComponent { this.snackBarService.showSuccess(Message.SUCCESS_SAVE); this.router.navigate([redirectSuccessUrl + campaign._id], {relativeTo: this.route}); }, - error => this.snackBarService.showError(error._body.error.message, 30000)); + error => this.snackBarService.showError(error._body.error.message, 15000)); } cancel() { diff --git a/static/src/app/statistic/war/war-edit/war-edit.component.ts b/static/src/app/statistic/war/war-edit/war-edit.component.ts index 634d3fa..d0e18c2 100644 --- a/static/src/app/statistic/war/war-edit/war-edit.component.ts +++ b/static/src/app/statistic/war/war-edit/war-edit.component.ts @@ -12,8 +12,7 @@ import {Message} from '../../../i18n/de.messages'; @Component({ selector: 'war-edit', templateUrl: './war-edit.component.html', - styleUrls: ['./war-edit.component.css', '../../../style/load-indicator.css', - '../../../style/entry-form.css', '../../../style/overview.css'] + styleUrls: ['./war-edit.component.css', '../../../style/entry-form.css', '../../../style/overview.css'] }) export class WarEditComponent { @@ -43,7 +42,7 @@ export class WarEditComponent { this.snackBarService.showSuccess(Message.SUCCESS_SAVE); this.router.navigate(['../../war/' + war._id], {relativeTo: this.route}); }, - error => this.snackBarService.showError(error._body.error.message, 30000)); + error => this.snackBarService.showError(error._body.error.message, 15000)); } cancel() { diff --git a/static/src/app/statistic/war/war-submit/war-submit.component.html b/static/src/app/statistic/war/war-submit/war-submit.component.html index 2708d55..b3566e4 100644 --- a/static/src/app/statistic/war/war-submit/war-submit.component.html +++ b/static/src/app/statistic/war/war-submit/war-submit.component.html @@ -49,6 +49,4 @@ [disabled]="!form.valid"> Bestätigen - - diff --git a/static/src/app/statistic/war/war-submit/war-submit.component.ts b/static/src/app/statistic/war/war-submit/war-submit.component.ts index 798e445..09c4edd 100644 --- a/static/src/app/statistic/war/war-submit/war-submit.component.ts +++ b/static/src/app/statistic/war/war-submit/war-submit.component.ts @@ -5,13 +5,13 @@ import {WarService} from '../../../services/logs/war.service'; import {War} from '../../../models/model-interfaces'; import {CampaignService} from '../../../services/logs/campaign.service'; import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service'; +import {SpinnerService} from '../../../services/user-interface/spinner/spinner.service'; @Component({ selector: 'war-submit', templateUrl: './war-submit.component.html', - styleUrls: ['./war-submit.component.css', '../../../style/load-indicator.css', - '../../../style/entry-form.css', '../../../style/overview.css'] + styleUrls: ['./war-submit.component.css', '../../../style/entry-form.css', '../../../style/overview.css'] }) export class WarSubmitComponent { @@ -25,14 +25,13 @@ export class WarSubmitComponent { loading = false; - error; - @ViewChild(NgForm) form: NgForm; constructor(private route: ActivatedRoute, private router: Router, private warService: WarService, private snackBarService: SnackBarService, + private spinnerService: SpinnerService, public campaignService: CampaignService) { } @@ -53,15 +52,17 @@ export class WarSubmitComponent { } const file: File = this.fileList[0]; this.loading = true; + this.spinnerService.activate(); this.warService.submitWar(this.war, file) .subscribe(war => { this.router.navigate(['../war/' + war._id], {relativeTo: this.route}); }, error => { + this.spinnerService.deactivate(); this.loading = false; const errorMsg = JSON.parse(error._body).error.message; - this.snackBarService.showError('Error: '.concat(errorMsg), 10000); + this.snackBarService.showError('Error: '.concat(errorMsg), 15000); }); } diff --git a/static/src/app/style/load-indicator.css b/static/src/app/style/load-indicator.css index 526fcaf..362096e 100644 --- a/static/src/app/style/load-indicator.css +++ b/static/src/app/style/load-indicator.css @@ -2,43 +2,36 @@ position: absolute; top: 50%; z-index: 10000; + left: 46%; + filter: drop-shadow(3px 1px 2px #dadada); } -@media only screen and (max-width: 1199px) { - .load-indicator { - left: 46%; - } -} + @media only screen and (min-width: 1200px) { .load-indicator { - left: 46%; + left: 47.4%; } } @media only screen and (min-width: 1376px) { .load-indicator { - left: 46.5%; + left: 48%; } } @media only screen and (min-width: 1600px) { .load-indicator { - left: 47.5%; + left: 48.2%; } } @media only screen and (min-width: 1925px) { .load-indicator { - left: 48%; + left: 48.7%; } } -:host /deep/ .mat-progress-spinner circle, .mat-spinner circle { - stroke: #303030 !important; - stroke-linecap: round; -} - .load-arrow { background: url(../../assets/loading.png) no-repeat; display: block; - width: 80px; - height: 80px; + width: 70px; + height: 70px; } /* Loading Animation */ diff --git a/static/src/assets/loading.png b/static/src/assets/loading.png index adcf3c6..4a484da 100644 Binary files a/static/src/assets/loading.png and b/static/src/assets/loading.png differ