diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html
index 735a09135..732ad9707 100644
--- a/src/app/components/layout/layout.component.html
+++ b/src/app/components/layout/layout.component.html
@@ -1,23 +1,21 @@
+ (expanded)="onExpanded($event)">
diff --git a/src/app/components/layout/layout.component.spec.ts b/src/app/components/layout/layout.component.spec.ts
index 70fb752d2..2c873de7c 100644
--- a/src/app/components/layout/layout.component.spec.ts
+++ b/src/app/components/layout/layout.component.spec.ts
@@ -27,7 +27,6 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
import { LayoutComponent } from './layout.component';
-import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
import { AppTestingModule } from '../../testing/app-testing.module';
describe('LayoutComponent', () => {
@@ -39,7 +38,7 @@ describe('LayoutComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [AppTestingModule],
- declarations: [LayoutComponent, SidenavViewsManagerDirective],
+ declarations: [LayoutComponent],
schemas: [NO_ERRORS_SCHEMA]
});
diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts
index 0dc1f8b7b..780f4001c 100644
--- a/src/app/components/layout/layout.component.ts
+++ b/src/app/components/layout/layout.component.ts
@@ -23,21 +23,25 @@
* along with Alfresco. If not, see .
*/
+import {
+ AppConfigService,
+ SidenavLayoutComponent,
+ UserPreferencesService
+} from '@alfresco/adf-core';
import {
Component,
- OnInit,
OnDestroy,
+ OnInit,
ViewChild,
ViewEncapsulation
} from '@angular/core';
-import { Subject } from 'rxjs';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
-import { NodePermissionService } from '../../services/node-permission.service';
-import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
+import { NavigationEnd, Router } from '@angular/router';
import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+import { NodePermissionService } from '../../services/node-permission.service';
import { currentFolder } from '../../store/selectors/app.selectors';
-import { takeUntil } from 'rxjs/operators';
+import { AppStore } from '../../store/states';
@Component({
selector: 'app-layout',
@@ -47,39 +51,105 @@ import { takeUntil } from 'rxjs/operators';
host: { class: 'app-layout' }
})
export class LayoutComponent implements OnInit, OnDestroy {
- @ViewChild(SidenavViewsManagerDirective)
- manager: SidenavViewsManagerDirective;
+ @ViewChild('layout')
+ layout: SidenavLayoutComponent;
onDestroy$: Subject = new Subject();
expandedSidenav: boolean;
- node: MinimalNodeEntryEntity;
+ currentFolderId: string;
canUpload = false;
+ minimizeSidenav = false;
+ hideSidenav = false;
+
+ private minimizeConditions: string[] = ['search'];
+ private hideConditions: string[] = ['preview'];
+
constructor(
protected store: Store,
- private permission: NodePermissionService
+ private permission: NodePermissionService,
+ private router: Router,
+ private userPreferenceService: UserPreferencesService,
+ private appConfigService: AppConfigService
) {}
ngOnInit() {
- if (!this.manager.minimizeSidenav) {
- this.expandedSidenav = this.manager.sidenavState;
+ if (!this.minimizeSidenav) {
+ this.expandedSidenav = this.getSidenavState();
} else {
this.expandedSidenav = false;
}
- this.manager.run(true);
-
this.store
.select(currentFolder)
.pipe(takeUntil(this.onDestroy$))
.subscribe(node => {
- this.node = node;
+ this.currentFolderId = node ? node.id : null;
this.canUpload = node && this.permission.check(node, ['create']);
});
+
+ this.router.events
+ .pipe(
+ filter(event => event instanceof NavigationEnd),
+ takeUntil(this.onDestroy$)
+ )
+ .subscribe((event: any) => {
+ this.minimizeSidenav = this.minimizeConditions.some(el =>
+ event.urlAfterRedirects.includes(el)
+ );
+ this.hideSidenav = this.hideConditions.some(el =>
+ event.urlAfterRedirects.includes(el)
+ );
+
+ this.updateState();
+ });
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
+
+ private updateState() {
+ if (this.minimizeSidenav && !this.layout.isMenuMinimized) {
+ this.layout.isMenuMinimized = true;
+ this.layout.container.toggleMenu();
+ }
+
+ if (!this.minimizeSidenav) {
+ if (this.getSidenavState() && this.layout.isMenuMinimized) {
+ this.layout.isMenuMinimized = false;
+ this.layout.container.toggleMenu();
+ }
+ }
+ }
+
+ onExpanded(state) {
+ if (
+ !this.minimizeSidenav &&
+ this.appConfigService.get('sideNav.preserveState')
+ ) {
+ this.userPreferenceService.set('expandedSidenav', state);
+ }
+ }
+
+ private getSidenavState(): boolean {
+ const expand = this.appConfigService.get(
+ 'sideNav.expandedSidenav',
+ true
+ );
+ const preserveState = this.appConfigService.get(
+ 'sideNav.preserveState',
+ true
+ );
+
+ if (preserveState) {
+ return (
+ this.userPreferenceService.get('expandedSidenav', expand.toString()) ===
+ 'true'
+ );
+ }
+
+ return expand;
+ }
}
diff --git a/src/app/components/layout/layout.module.ts b/src/app/components/layout/layout.module.ts
index 5719f47f5..8d179ee6b 100644
--- a/src/app/components/layout/layout.module.ts
+++ b/src/app/components/layout/layout.module.ts
@@ -27,7 +27,6 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core';
import { LayoutComponent } from './layout.component';
-import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
import { ContentModule } from '@alfresco/adf-content-services';
import { RouterModule } from '@angular/router';
import { AppSidenavModule } from '../sidenav/sidenav.module';
@@ -44,7 +43,7 @@ import { AppHeaderModule } from '../header/header.module';
AppSidenavModule,
AppHeaderModule
],
- declarations: [LayoutComponent, SidenavViewsManagerDirective],
+ declarations: [LayoutComponent],
exports: [LayoutComponent]
})
export class AppLayoutModule {}
diff --git a/src/app/components/layout/sidenav-views-manager.directive.spec.ts b/src/app/components/layout/sidenav-views-manager.directive.spec.ts
index d304cfc8b..2b3114478 100644
--- a/src/app/components/layout/sidenav-views-manager.directive.spec.ts
+++ b/src/app/components/layout/sidenav-views-manager.directive.spec.ts
@@ -23,6 +23,7 @@
* along with Alfresco. If not, see .
*/
+/*
import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
import { NavigationEnd } from '@angular/router';
import { Subject } from 'rxjs';
@@ -78,3 +79,4 @@ describe('SidenavViewsManagerDirective', () => {
});
});
});
+*/
diff --git a/src/app/components/layout/sidenav-views-manager.directive.ts b/src/app/components/layout/sidenav-views-manager.directive.ts
deleted file mode 100644
index 64848a0cc..000000000
--- a/src/app/components/layout/sidenav-views-manager.directive.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Directive, ContentChild } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-import {
- UserPreferencesService,
- AppConfigService,
- SidenavLayoutComponent
-} from '@alfresco/adf-core';
-import { filter } from 'rxjs/operators';
-
-@Directive({
- selector: '[acaSidenavManager]',
- exportAs: 'acaSidenavManager'
-})
-export class SidenavViewsManagerDirective {
- @ContentChild(SidenavLayoutComponent)
- sidenavLayout: SidenavLayoutComponent;
-
- minimizeSidenav = false;
- hideSidenav = false;
-
- private _run = false;
- private minimizeConditions: string[] = ['search'];
- private hideConditions: string[] = ['preview'];
-
- constructor(
- private router: Router,
- private userPreferenceService: UserPreferencesService,
- private appConfigService: AppConfigService
- ) {
- this.router.events
- .pipe(filter(event => event instanceof NavigationEnd))
- .subscribe((event: any) => {
- this.minimizeSidenav = this.minimizeConditions.some(el =>
- event.urlAfterRedirects.includes(el)
- );
- this.hideSidenav = this.hideConditions.some(el =>
- event.urlAfterRedirects.includes(el)
- );
-
- if (this._run) {
- this.manageSidenavState();
- }
- });
- }
-
- run(shouldRun) {
- this._run = shouldRun;
- }
-
- manageSidenavState() {
- if (this.minimizeSidenav && !this.sidenavLayout.isMenuMinimized) {
- this.sidenavLayout.isMenuMinimized = true;
- this.sidenavLayout.container.toggleMenu();
- }
-
- if (!this.minimizeSidenav) {
- if (this.sidenavState && this.sidenavLayout.isMenuMinimized) {
- this.sidenavLayout.isMenuMinimized = false;
- this.sidenavLayout.container.toggleMenu();
- }
- }
- }
-
- setState(state) {
- if (
- !this.minimizeSidenav &&
- this.appConfigService.get('sideNav.preserveState')
- ) {
- this.userPreferenceService.set('expandedSidenav', state);
- }
- }
-
- get sidenavState(): boolean {
- const expand = this.appConfigService.get(
- 'sideNav.expandedSidenav',
- true
- );
- const preserveState = this.appConfigService.get(
- 'sideNav.preserveState',
- true
- );
-
- if (preserveState) {
- return (
- this.userPreferenceService.get('expandedSidenav', expand.toString()) ===
- 'true'
- );
- }
-
- return expand;
- }
-}