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;
} else {
err.status = codes.wrongrequest;
console.log(err);
err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
}

View File

@ -92,20 +92,32 @@
</div>
</div>
</nav>
<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang"></button>
</div>
<div>
<mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
<div id="left">
<button mat-icon-button
(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>
</div>
<div id="right">
<router-outlet name="right"></router-outlet>
</div>
<div id="footer">
<router-outlet name="footer"></router-outlet>
</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;
sidebarOpen = true;
scrollTopVisible = false;
scrollBtnVisibleVal = 100;
@ -44,6 +46,10 @@ export class AppComponent implements OnInit {
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg'));
this.iconRegistry.addSvgIcon('stats-detail',
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 => {
if (event instanceof NavigationStart) {
@ -65,6 +71,9 @@ export class AppComponent implements OnInit {
|| document.documentElement.scrollTop > this.scrollBtnVisibleVal;
}
toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen;
}
ngOnInit() {
if (this.loginService.hasPermission(2)) {

View File

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

View File

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

View File

@ -106,14 +106,14 @@ export class EditUserComponent implements OnInit {
this.userService.submitUser(updateObject)
.subscribe(user => {
this.router.navigate(['..'], {relativeTo: this.route});
this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
return true;
},
error => {
// duplicated user error message
if (error._body.includes('duplicate')) {
this.snackBarService.showError(Message.DUPLICATED_NAME_ERR, 10000);
}
});
const errorMessage = error._body.includes('duplicate') ? Message.DUPLICATED_NAME_ERR : error._body;
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;
max-width: 450px;
float: left;
background: #ececec;
background: #f9f9f9;
box-shadow: 2px 1px 5px grey;
}
@ -69,13 +69,13 @@ form {
}
.custom-snack-bar > simple-snack-bar {
display: block;
display: flex;
}
.snack-bar-button button {
color: white;
border: 2px solid;
padding: 3px 10px;
color: #ffffff;
border: 1px solid;
margin-left: 10px;
}
/* Icon theme */