Add basic side panel toggle for stats

pull/40/head
HardiReady 2018-07-15 15:38:33 +02:00
parent 612c894e6a
commit 3672bfe112
9 changed files with 50 additions and 55 deletions

View File

@ -148,6 +148,7 @@ users.route('/:id')
res.locals.items = item; res.locals.items = item;
} else { } else {
err.status = codes.wrongrequest; err.status = codes.wrongrequest;
console.log(err);
err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors); err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
} }

View File

@ -21,7 +21,7 @@
<a [routerLink]="[config.publicPath,{outlets:{right:'ranks'}}]" class="link">Ränge</a> <a [routerLink]="[config.publicPath,{outlets:{right:'ranks'}}]" class="link">Ränge</a>
</li> </li>
<!--<li routerLinkActive="active">--> <!--<li routerLinkActive="active">-->
<!--<a [routerLink]="[config.publicPath,{outlets:{right:'decorations'}}]" class="link">Auszeichnungen</a>--> <!--<a [routerLink]="[config.publicPath,{outlets:{right:'decorations'}}]" class="link">Auszeichnungen</a>-->
<!--</li>--> <!--</li>-->
<li routerLinkActive="active"> <li routerLinkActive="active">
<a routerLink='{{config.statsPath}}' class="link">Statistiken</a> <a routerLink='{{config.statsPath}}' class="link">Statistiken</a>
@ -92,20 +92,32 @@
</div> </div>
</div> </div>
</nav> </nav>
<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang"></button>
</div> </div>
<div> <div>
<mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner> <button mat-icon-button
<div id="left"> (click)="toggleSidebar()"
*ngIf="router.url.includes('/stats')"
style="background: linear-gradient(-90deg, #dadada,transparent);">
<mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
</mat-icon>
<mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">
</mat-icon>
</button>
<div id="left" *ngIf="sidebarOpen">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<div id="right"> <div id="right">
<router-outlet name="right"></router-outlet> <router-outlet name="right"></router-outlet>
</div> </div>
<div id="footer"> <div id="footer">
<router-outlet name="footer"></router-outlet> <router-outlet name="footer"></router-outlet>
</div> </div>
</div> </div>
<mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang"></button>

View File

@ -21,6 +21,8 @@ export class AppComponent implements OnInit {
loading = false; loading = false;
sidebarOpen = true;
scrollTopVisible = false; scrollTopVisible = false;
scrollBtnVisibleVal = 100; scrollBtnVisibleVal = 100;
@ -44,6 +46,10 @@ export class AppComponent implements OnInit {
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg')); sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg'));
this.iconRegistry.addSvgIcon('stats-detail', this.iconRegistry.addSvgIcon('stats-detail',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/round-assessment-24px.svg')); sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/round-assessment-24px.svg'));
this.iconRegistry.addSvgIcon('chevron-left',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/baseline-chevron_left-24px.svg'));
this.iconRegistry.addSvgIcon('chevron-right',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/baseline-chevron_right-24px.svg'));
router.events.subscribe(event => { router.events.subscribe(event => {
if (event instanceof NavigationStart) { if (event instanceof NavigationStart) {
@ -65,6 +71,9 @@ export class AppComponent implements OnInit {
|| document.documentElement.scrollTop > this.scrollBtnVisibleVal; || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
} }
toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen;
}
ngOnInit() { ngOnInit() {
if (this.loginService.hasPermission(2)) { if (this.loginService.hasPermission(2)) {

View File

@ -2,54 +2,19 @@
* Angular material imports * Angular material imports
*/ */
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { import {MatProgressSpinnerModule, MatSnackBarModule} from '@angular/material';
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatCheckboxModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatIconModule,
MatSnackBarModule,
MatToolbarModule,
MatExpansionModule,
MatProgressSpinnerModule
} from '@angular/material';
@NgModule({ @NgModule({
imports: [ imports: [
// MatSidenavModule,
// MatFormFieldModule,
// MatInputModule,
// MatButtonModule,
// MatCheckboxModule,
// MatTableModule,
// MatPaginatorModule,
// MatSortModule,
// MatIconModule,
MatSnackBarModule, MatSnackBarModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
// MatToolbarModule,
// MatExpansionModule
], ],
exports: [ exports: [
// MatSidenavModule,
// MatFormFieldModule,
// MatInputModule,
// MatButtonModule,
// MatCheckboxModule,
// MatTableModule,
// MatPaginatorModule,
// MatSortModule,
// MatIconModule,
MatSnackBarModule, MatSnackBarModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
// MatToolbarModule,
// MatExpansionModule
] ]
}) })
export class MaterialComponentsModule {} export class MaterialComponentsModule {
}

View File

@ -1,7 +1,7 @@
.load-indicator { .load-indicator {
position: absolute; position: absolute;
top: 50%; top: 50%;
z-index: 1; z-index: 10000;
} }
@media only screen and (max-width: 1199px) { @media only screen and (max-width: 1199px) {
.load-indicator { .load-indicator {

View File

@ -106,14 +106,14 @@ export class EditUserComponent implements OnInit {
this.userService.submitUser(updateObject) this.userService.submitUser(updateObject)
.subscribe(user => { .subscribe(user => {
this.router.navigate(['..'], {relativeTo: this.route}); this.router.navigate(['..'], {relativeTo: this.route});
this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
return true; return true;
}, },
error => { error => {
// duplicated user error message // duplicated user error message
if (error._body.includes('duplicate')) { const errorMessage = error._body.includes('duplicate') ? Message.DUPLICATED_NAME_ERR : error._body;
this.snackBarService.showError(Message.DUPLICATED_NAME_ERR, 10000); this.snackBarService.showError(errorMessage, 10000);
} })
});
} }
} }

View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>

After

Width:  |  Height:  |  Size: 195 B

View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>

After

Width:  |  Height:  |  Size: 196 B

View File

@ -45,7 +45,7 @@ form {
min-width: 350px; min-width: 350px;
max-width: 450px; max-width: 450px;
float: left; float: left;
background: #ececec; background: #f9f9f9;
box-shadow: 2px 1px 5px grey; box-shadow: 2px 1px 5px grey;
} }
@ -69,13 +69,13 @@ form {
} }
.custom-snack-bar > simple-snack-bar { .custom-snack-bar > simple-snack-bar {
display: block; display: flex;
} }
.snack-bar-button button { .snack-bar-button button {
color: white; color: #ffffff;
border: 2px solid; border: 1px solid;
padding: 3px 10px; margin-left: 10px;
} }
/* Icon theme */ /* Icon theme */