FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor menu panel
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma
2020-01-07 16:33:56 +01:00
parent 58f7c99ddc
commit e077aa34df
4 changed files with 145 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
projects/common/src/fm/components/app/app.component.html
View File

@@ -1,14 +1,27 @@
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
<ul class="navbar-nav">
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
</ul>
<router-outlet name="menu"></router-outlet>
</nav>
<div class="body">
<router-outlet></router-outlet>
</div>
<fm-resumable-file-upload></fm-resumable-file-upload>
</div>
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
<ul class="navbar-nav">
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
</ul>
<router-outlet name="menu"></router-outlet>
</nav>
<div class="body">
<router-outlet></router-outlet>
</div>
<fm-side-panel [visible]="menuVisible|async" class="menu">
<div class="container-fluid">
<div class="body">
<div class="d-flex flex-row">
<div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
<div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
</div>
<div class="d-flex flex-column cards">
<router-outlet name="side-panel-menu"></router-outlet>
</div>
</div>
</div>
</fm-side-panel>
<fm-resumable-file-upload></fm-resumable-file-upload>
</div>

6
projects/common/src/fm/components/app/app.component.ts
View File

@@ -36,6 +36,7 @@ export class AppComponent implements OnInit, OnDestroy {
public fileDroptarget: any;
public fullScreen: Observable<boolean>;
public routeLoading: Observable<boolean>;
public menuVisible:Observable<boolean>;
constructor(
private router: Router,
@@ -88,6 +89,7 @@ export class AppComponent implements OnInit, OnDestroy {
ngOnInit() {
this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
this.menuVisible = this.store.select(appReducers.SelectGetMenuVisible);
this.InstallRouteEventHandler();
this.InstallEventServiceEventHandler();
}
@@ -129,5 +131,9 @@ export class AppComponent implements OnInit, OnDestroy {
handleClick(event: MouseEvent) {
this.store.dispatch(new commonActions.Escape(false,true));
}
handleToggleMenu(event) {
this.store.dispatch(new commonActions.ToggleMenu());
}
}