* Revert to legacy load indicator and improve it

* Fix enter submit of forgotten forms
pull/43/head
HardiReady 2018-07-17 11:34:32 +02:00
parent f2e2133496
commit d72db1ed4f
13 changed files with 42 additions and 69 deletions

View File

@ -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;

View File

@ -96,9 +96,9 @@
<div>
<button mat-icon-button
class="sidebar-toggle-btn"
(click)="toggleSidebar()"
*ngIf="showSidebarToggleBtn"
style="background: linear-gradient(-90deg, #e8e5e5,#ffffff);margin-left: -12px;z-index:500;">
*ngIf="showSidebarToggleBtn">
<mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
</mat-icon>
<mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">
@ -121,6 +121,6 @@
</div>
</div>
<mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
<span class="load-indicator load-arrow glyphicon-refresh-animate"></span>
<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang"></button>

View File

@ -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')) {
@ -93,7 +98,8 @@ export class AppComponent implements OnInit {
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));
});
}

View File

@ -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,

View File

@ -15,10 +15,6 @@
<span *ngIf="!loading">Anmelden</span>
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</button>
<span *ngIf="showErrorLabel"
class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
{{error}}
</span>
</div>

View File

@ -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;
});
}

View File

@ -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 {
}

View File

@ -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() {

View File

@ -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() {

View File

@ -49,6 +49,4 @@
[disabled]="!form.valid">
Bestätigen
</button>
<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
</form>

View File

@ -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);
});
}

View File

@ -2,43 +2,36 @@
position: absolute;
top: 50%;
z-index: 10000;
}
@media only screen and (max-width: 1199px) {
.load-indicator {
left: 46%;
filter: drop-shadow(3px 1px 2px #dadada);
}
}
@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 */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB