From cf50dc5f4b4a5792f8be3343a91c0f7be9215a72 Mon Sep 17 00:00:00 2001 From: georgiana-roman Date: Tue, 8 May 2018 21:06:50 +0300 Subject: [PATCH] [ADF-2626] changed logic for preserving the sidenav component state --- demo-shell/src/app.config.json | 2 +- .../app-layout/app-layout.component.html | 2 +- .../app-layout/app-layout.component.ts | 35 +++++++++++-------- docs/core/sidenav-layout.component.md | 2 +- lib/core/pipes/app-config.pipe.ts | 28 ++++++--------- lib/core/pipes/public-api.ts | 1 - .../sidenav-layout.component.ts | 19 ++++------ 7 files changed, 40 insertions(+), 49 deletions(-) diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index 63f049cb44..cda8d2a6ca 100644 --- a/demo-shell/src/app.config.json +++ b/demo-shell/src/app.config.json @@ -491,7 +491,7 @@ }, "sideNav": { - "openedSidenav": true, + "expandedSidenav": true, "preserveState": true } } diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html index 2b6cde211b..06114a9825 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.html +++ b/demo-shell/src/app/components/app-layout/app-layout.component.html @@ -1,4 +1,4 @@ - + diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts index 2745ed0725..6537f9f3a6 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.ts +++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts @@ -15,8 +15,8 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, Input } from '@angular/core'; -import { StorageService, AppConfigService } from '@alfresco/adf-core'; +import { Component, ViewEncapsulation, OnInit from '@angular/core'; +import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core'; @Component({ templateUrl: 'app-layout.component.html', @@ -27,7 +27,7 @@ import { StorageService, AppConfigService } from '@alfresco/adf-core'; encapsulation: ViewEncapsulation.None }) -export class AppLayoutComponent { +export class AppLayoutComponent implements OnInit { links: Array = [ { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' }, @@ -50,18 +50,25 @@ export class AppLayoutComponent { { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' } ]; - @Input() expandedSidenav = false; + expandedSidenav: Boolean = false; - constructor(private storage: StorageService, private config: AppConfigService) { - const preserved = this.storage.getItem('openedSidenav'); - if (preserved !== null) { - if (preserved === 'false') { - this.expandedSidenav = false; - } else { - this.expandedSidenav = true; - } - } else { - this.expandedSidenav = this.config.get('sideNav.openedSidenav'); + + ngOnInit() { + const expand = this.config.get('sideNav.expandedSidenav'); + const preserveState = this.config.get('sideNav.preserveState'); + + if (preserveState && expand) { + this.expandedSidenav = (this.userpreference.get('expandedSidenav', String(expand)) === 'true'); + } else if (expand) { + this.expandedSidenav = expand; + } + } + constructor( private userpreference: UserPreferencesService, private config: AppConfigService) { + } + + setState(state) { + if (this.config.get('sideNav.preserveState')) { + this.userpreference.set('expendedSidenav', state); } } } diff --git a/docs/core/sidenav-layout.component.md b/docs/core/sidenav-layout.component.md index 01dc1b8057..7673dc5296 100644 --- a/docs/core/sidenav-layout.component.md +++ b/docs/core/sidenav-layout.component.md @@ -121,7 +121,7 @@ Beside this, it is also possible to set the default value in the appConfig.json ``` "sideNav" : { - "openedSidenav" : true + "expandedSidenav" : true } ``` diff --git a/lib/core/pipes/app-config.pipe.ts b/lib/core/pipes/app-config.pipe.ts index 562710cb51..553ebe3fde 100644 --- a/lib/core/pipes/app-config.pipe.ts +++ b/lib/core/pipes/app-config.pipe.ts @@ -1,26 +1,18 @@ /*! * @license - * Alfresco Example Content Application + * Copyright 2016 Alfresco Software, Ltd. * - * Copyright (C) 2005 - 2018 Alfresco Software Limited + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at * - * This file is part of the Alfresco Example Content Application. - * If the software was purchased under a paid Alfresco license, the terms of - * the paid license agreement will prevail. Otherwise, the software is - * provided under the following open source license terms: + * http://www.apache.org/licenses/LICENSE-2.0 * - * The Alfresco Example Content Application is free software: you can redistribute it and/or modify - * it under the terms of the GNU Lesser General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * The Alfresco Example Content Application is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with Alfresco. If not, see . + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. */ import { Pipe, PipeTransform } from '@angular/core'; diff --git a/lib/core/pipes/public-api.ts b/lib/core/pipes/public-api.ts index 978cfe90d3..42e0d9ec9c 100644 --- a/lib/core/pipes/public-api.ts +++ b/lib/core/pipes/public-api.ts @@ -24,4 +24,3 @@ export * from './user-initial.pipe'; export * from './app-config.pipe'; export * from './pipe.module'; - diff --git a/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts b/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts index ba1cd9464a..af9153f7a5 100644 --- a/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts +++ b/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts @@ -15,16 +15,13 @@ * limitations under the License. */ -import { Component, ContentChild, Input, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef } from '@angular/core'; +import { Component, ContentChild, Input, Output, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef, EventEmitter } from '@angular/core'; import { MediaMatcher } from '@angular/cdk/layout'; import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive'; import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive'; import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { Observable } from 'rxjs/Observable'; -import { AppConfigService } from './../../../app-config/app-config.service'; -import { StorageService } from './../../../services/storage.service'; - @Component({ selector: 'adf-sidenav-layout', @@ -41,6 +38,8 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy @Input() hideSidenav = false; @Input() expandedSidenav = true; + @Output() notify = new EventEmitter(); + @ContentChild(SidenavLayoutHeaderDirective) headerDirective: SidenavLayoutHeaderDirective; @ContentChild(SidenavLayoutNavigationDirective) navigationDirective: SidenavLayoutNavigationDirective; @ContentChild(SidenavLayoutContentDirective) contentDirective: SidenavLayoutContentDirective; @@ -59,8 +58,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy isMenuMinimized: () => this.isMenuMinimized }; - constructor(private mediaMatcher: MediaMatcher, private config: AppConfigService, private storage: StorageService) { - + constructor(private mediaMatcher: MediaMatcher) { this.onMediaQueryChange = this.onMediaQueryChange.bind(this); } @@ -86,9 +84,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy this.mediaQueryList.removeListener(this.onMediaQueryChange); } - toggleMenu() { - const preserve = this.config.get('sideNav.preserveState'); - + toggleMenu(expandedSidenav) { if (!this.mediaQueryList.matches) { this.isMenuMinimized = !this.isMenuMinimized; } else { @@ -96,10 +92,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy } this.container.toggleMenu(); - - if (preserve) { - this.storage.setItem('openedSidenav', !this.isMenuMinimized); - } + this.notify.emit((!this.isMenuMinimized).toString()); } get isMenuMinimized() {