From 4d6e1cba1b2aa4dacb0982110c4c945eedc3619a Mon Sep 17 00:00:00 2001 From: Cilibiu Bogdan Date: Thu, 15 Mar 2018 09:18:13 +0200 Subject: [PATCH] [ACA-1216] Sidenav - hide in preview (#238) * hide sidebar in preview * indentation --- .../layout/layout-container.component.html | 1 + .../layout/layout-container.component.scss | 6 ++++-- .../components/layout/layout-container.component.ts | 12 +++++------- src/app/components/layout/layout.component.html | 5 +++-- src/app/components/layout/layout.component.ts | 11 ++++++++++- src/app/components/sidenav/sidenav.component.scss | 3 +++ 6 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/app/components/layout/layout-container.component.html b/src/app/components/layout/layout-container.component.html index a46869a6a..7b475c801 100644 --- a/src/app/components/layout/layout-container.component.html +++ b/src/app/components/layout/layout-container.component.html @@ -1,5 +1,6 @@ diff --git a/src/app/components/layout/layout-container.component.scss b/src/app/components/layout/layout-container.component.scss index a030bc344..fe5137823 100644 --- a/src/app/components/layout/layout-container.component.scss +++ b/src/app/components/layout/layout-container.component.scss @@ -18,6 +18,10 @@ ng-content { overflow: hidden; } +.sidenav--hide { + visibility: hidden !important; +} + .mat-sidenav-container { display: block; width: 100%; @@ -26,8 +30,6 @@ ng-content { } .mat-sidenav { - background: #fafafa; - border-right: 1px solid rgba(0, 0, 0, 0.07); overflow: hidden; } diff --git a/src/app/components/layout/layout-container.component.ts b/src/app/components/layout/layout-container.component.ts index 6631e5428..0c154aeaa 100644 --- a/src/app/components/layout/layout-container.component.ts +++ b/src/app/components/layout/layout-container.component.ts @@ -37,12 +37,11 @@ import { miniSidenavAnimation } from './animations'; }) export class LayoutContainerComponent implements OnInit, OnDestroy { static STEP_OVER = 600; - static COMPACT = true; @Input() sidenavMin: number; @Input() sidenavMax: number; - @Input() sidenavCompact: boolean = LayoutContainerComponent.COMPACT; @Input() stepOver: number; + @Input() hideSidenav: boolean = false; @ViewChild(MatSidenav) sidenav: MatSidenav; @@ -56,7 +55,6 @@ export class LayoutContainerComponent implements OnInit, OnDestroy { ngOnInit() { const stepOver = this.stepOver || LayoutContainerComponent.STEP_OVER; - this.mobileQuery = this.mediaMatcher.matchMedia(`(max-width: ${stepOver}px)`); this.mobileQuery.addListener(this.mobileQueryListener); this.sidenavAnimationState = { value: 'expanded', params: { width: this.sidenavMax } }; @@ -68,13 +66,13 @@ export class LayoutContainerComponent implements OnInit, OnDestroy { toggleMenu(): void { - if (!this.mobileQuery.matches && this.sidenavCompact) { + if (!this.mobileQuery.matches) { this.isMenuMinimized = !this.isMenuMinimized; this.sidenavAnimationState = - this.sidenavAnimationState.value === 'expanded' - ? { value: 'compact', params: {width: this.sidenavMin } } - : { value: 'expanded', params: { width: this.sidenavMax } }; + this.sidenavAnimationState.value === 'expanded' + ? { value: 'compact', params: {width: this.sidenavMin } } + : { value: 'expanded', params: { width: this.sidenavMax } }; } else { this.isMenuMinimized = false; diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index d1b47ead7..b62133652 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -9,6 +9,7 @@ sidenavMin="70" sidenavMax="320" [stepOver]="600" + [hideSidenav]="isPreview" class="layout__content"> - + - + diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts index 5be6ea1ce..a098e2d0e 100644 --- a/src/app/components/layout/layout.component.ts +++ b/src/app/components/layout/layout.component.ts @@ -24,6 +24,7 @@ */ import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Router, NavigationEnd } from '@angular/router'; import { Subscription } from 'rxjs/Rx'; import { MinimalNodeEntryEntity } from 'alfresco-js-api'; import { ContentService } from '@alfresco/adf-core'; @@ -36,12 +37,20 @@ import { BrowsingFilesService } from '../../common/services/browsing-files.servi }) export class LayoutComponent implements OnInit, OnDestroy { node: MinimalNodeEntryEntity; + isPreview: boolean = false; private subscriptions: Subscription[] = []; constructor( + private router: Router, private contentService: ContentService, - private browsingFilesService: BrowsingFilesService) {} + private browsingFilesService: BrowsingFilesService) { + this.router.events + .filter(event => event instanceof NavigationEnd) + .subscribe( (event: any ) => { + this.isPreview = event.urlAfterRedirects.includes('preview'); + }); + } ngOnInit() { this.subscriptions.concat([ diff --git a/src/app/components/sidenav/sidenav.component.scss b/src/app/components/sidenav/sidenav.component.scss index a9af2e45d..e65f5b46e 100644 --- a/src/app/components/sidenav/sidenav.component.scss +++ b/src/app/components/sidenav/sidenav.component.scss @@ -13,6 +13,9 @@ $sidenav-menu-item--icon-size: 24px; display: flex; flex: 1; flex-direction: column; + background: #fafafa; + border-right: 1px solid rgba(0, 0, 0, 0.07); + height: 100%; &__section:last-child { border-bottom: 0;