inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-1216] Sidenav - hide in preview (#238)

Browse Source 
* hide sidebar in preview

* indentation
This commit is contained in:
Cilibiu Bogdan 2018-03-15 09:18:13 +02:00 committed by Denys Vuika
parent 2285856c14
commit 4d6e1cba1b
6 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/components/layout/layout-container.component.html
View File

@ -1,5 +1,6 @@
<mat-sidenav-container>
<mat-sidenav
[ngClass]="{ 'sidenav--hide': hideSidenav }"
[@miniSidenavAnimation]="sidenavAnimationState"
[opened]="!mobileQuery.matches"
[mode]="mobileQuery.matches ? 'over' : 'side'">

6
src/app/components/layout/layout-container.component.scss
View File

@ -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;
}

12
src/app/components/layout/layout-container.component.ts
View File

@ -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;

5
src/app/components/layout/layout.component.html
View File

@ -9,6 +9,7 @@
sidenavMin="70"
sidenavMax="320"
[stepOver]="600"
[hideSidenav]="isPreview"
class="layout__content">
<app-sidenav
@ -16,9 +17,9 @@
[showLabel]="!container.isMenuMinimized">
</app-sidenav>
<router-outlet app-layout-content></router-outlet>
<router-outlet app-layout-content></router-outlet>
</app-layout-container>
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
</adf-upload-drag-area>
</div>

11
src/app/components/layout/layout.component.ts
View File

@ -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([

3
src/app/components/sidenav/sidenav.component.scss
View File

@ -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;