hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Fix initial sidebar view on route change

pull/43/head
HardiReady 2018-07-17 08:32:01 +02:00
parent 478dfef4de
commit e548d6821c
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/src/app/app.component.html
View File

@ -97,7 +97,7 @@
<div> <div>
<button mat-icon-button <button mat-icon-button
(click)="toggleSidebar()" (click)="toggleSidebar()"
*ngIf="router.url.includes('/stats')" *ngIf="showSidebarToggleBtn"
style="background: linear-gradient(-90deg, #e8e5e5,#ffffff);margin-left: -12px;"> style="background: linear-gradient(-90deg, #e8e5e5,#ffffff);margin-left: -12px;">
<mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen"> <mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
</mat-icon> </mat-icon>

43
static/src/app/app.component.ts
View File

@ -23,10 +23,22 @@ export class AppComponent implements OnInit {
sidebarOpen = true; sidebarOpen = true;
showSidebarToggleBtn = false;
scrollTopVisible = false; scrollTopVisible = false;
scrollBtnVisibleVal = 100; scrollBtnVisibleVal = 100;
svgIcons = {
'add': 'outline-add_box-24px',
'add-user': 'twotone-person_add-24px',
'edit': 'twotone-edit-24px',
'delete': 'twotone-delete-24px',
'stats-detail': 'round-assessment-24px',
'chevron-left': 'baseline-chevron_left-24px',
'chevron-right': 'baseline-chevron_right-24px'
};
version = 'v'.concat(require('./../../../package.json').version); version = 'v'.concat(require('./../../../package.json').version);
constructor(public loginService: LoginService, constructor(public loginService: LoginService,
@ -36,20 +48,7 @@ export class AppComponent implements OnInit {
private iconRegistry: MatIconRegistry, private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
@Inject(DOCUMENT) private document) { @Inject(DOCUMENT) private document) {
this.iconRegistry.addSvgIcon('add', this.initMaterialSvgIcons();
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/outline-add_box-24px.svg'));
this.iconRegistry.addSvgIcon('add-user',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-person_add-24px.svg'));
this.iconRegistry.addSvgIcon('edit',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-edit-24px.svg'));
this.iconRegistry.addSvgIcon('delete',
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 => { router.events.subscribe(event => {
if (event instanceof NavigationStart) { if (event instanceof NavigationStart) {
@ -58,13 +57,27 @@ export class AppComponent implements OnInit {
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
this.loading = false; this.loading = false;
// scroll to top on route from army overview to user detail and back // scroll to top on route from army overview to user detail and back
if (router.url.includes('overview')) { if (router.url.includes('/overview')) {
this.scrollToTop(); this.scrollToTop();
} }
// show sidebar menu on initial stats page access
if (router.url.includes('/stats')) {
this.showSidebarToggleBtn = true;
this.sidebarOpen = true;
} else {
this.showSidebarToggleBtn = false;
}
} }
}); });
} }
initMaterialSvgIcons() {
Object.keys(this.svgIcons).forEach(key => {
const fileUri = '../assets/icon/' + this.svgIcons[key] + '.svg';
this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(fileUri));
});
}
@HostListener('window:scroll', []) @HostListener('window:scroll', [])
onWindowScroll() { onWindowScroll() {
this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal