Merge pull request #137 from NuvandaPV/master

Rethink sidebars to aid #136.
valomedia · Oct 31, 2017 · 98455b7 · 98455b7
2 parents 65a1dcf + a2132c8
commit 98455b7
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 5 deletions.
diff --git a/src/app/_layout.component.html b/src/app/_layout.component.html
@@ -1,11 +1,22 @@
 <!-- HTML template for the LayoutComponent -->
 <div [class.dark]='settingsService.settings.ui.dark'>
     <mat-sidenav-container id='main'>
-        <mat-sidenav #nav id='nav' mode='over'>
+        <mat-sidenav #nav id='nav' [mode]='appUxService.navMode'>
             <mat-toolbar>
                 <span class='app-toolbar-title'>Seiten</span>
+                <span class='app-toolbar-filler'></span>
+                <button
+                        *ngIf='appUxService.navMode === SIDE'
+                        mat-button
+                        class='app-icon-button close-btn'
+                        matTooltip="Schließen"
+                        matTooltipShowDelay='1500'
+                        matTooltipHideDelay='1500'
+                        (click)='nav.close()'>
+                    <mat-icon>close</mat-icon>
+                </button>
             </mat-toolbar>
-            <div (click)='nav.close()'>
+            <div (click)='appUxService.navMode === OVER && nav.close()'>
                 <ng-content select='nav'></ng-content>
             </div>
         </mat-sidenav>
@@ -17,6 +28,7 @@
                 (close)='appRoutingService.params = {post: null}'>
             <mat-toolbar>
                 <button
+                        *ngIf='appUxService.asideMode === PUSH'
                         mat-button
                         class='app-icon-button back-btn'
                         matTooltip="Zurück"
@@ -47,6 +59,7 @@
                     <mat-icon>open_in_browser</mat-icon>
                 </a>
                 <button
+                        *ngIf='appUxService.asideMode === SIDE'
                         mat-button
                         class='app-icon-button close-btn'
                         matTooltip="Schließen"

diff --git a/src/app/app-ux.service.ts b/src/app/app-ux.service.ts
@@ -7,16 +7,21 @@ import {Injectable} from '@angular/core';
 @Injectable()
 export class AppUxService {
     /*
-     * Calculates whether the aside will show as sidebar.
+     * Calculates whether the AsideComponent will show as sidebar.
      */
-    get asideMode() { return window.innerWidth >= 1264 ? 'side' : 'push'; }
+    get asideMode() { return window.innerWidth >= 1584 ? 'side' : 'push'; }
+
+    /*
+     * Calculates whether the NavComponent will show as sidebar.
+     */
+    get navMode() { return window.innerWidth >= 1904 ? 'side' : 'over' }
 
     /*
      * Calculates the number of columns in the layout.
      */
     get cols() {
         if (window.innerWidth < 600) { return 4; }
-        if (window.innerWidth < 840) { return 8; }
+        if (window.innerWidth < 960) { return 8; }
         return 12;
     }
 

diff --git a/src/app/layout.component.ts b/src/app/layout.component.ts
@@ -44,6 +44,34 @@ export class LayoutComponent implements OnInit {
 
     protected _params: Params = {};
 
+    /*
+     * Shorthand for appService.SIDE.
+     *
+     * This is used in the template, because it is shorter.
+     */
+    protected SIDE = this.appService.SIDE;
+
+    /*
+     * Shorthand for appService.PUSH.
+     *
+     * This is used in the template, because it is shorter.
+     */
+    protected PUSH = this.appService.PUSH;
+
+    /*
+     * Shorthand for appService.OVER.
+     *
+     * This is used in the template, because it is shorter.
+     */
+    protected OVER = this.appService.OVER;
+
+    /*
+     * Shorthand for appService.POST.
+     *
+     * This is used in the template, because it is shorter.
+     */
+    protected POST = this.appService.POST;
+
     /*
      * The route parameters.
      */
@@ -79,7 +107,11 @@ export class LayoutComponent implements OnInit {
     @ViewChild('aside')
     aside: MatSidenav;
 
+    @ViewChild('nav')
+    nav: MatSidenav;
+
     ngOnInit() {
+        if (this.appUxService.navMode === this.SIDE) { this.nav.open(); }
         this.appRoutingService
             .events
             .filter(Boolean)