From 440c6665835307c6c9a801cbdc0869db5217afe3 Mon Sep 17 00:00:00 2001 From: Georgiana Roman <38908609+georgiana-roman@users.noreply.github.com> Date: Thu, 10 May 2018 12:21:30 +0300 Subject: [PATCH] [ADF-2626] added preserved state functionality for sidenav component (#3278) * [ADF-2626] added preserved state functionality for sidenav component * [ADF-2626] changed logic for preserving the sidenav component state * [ADF-2626] added missing curly brace } * [ADF-2626] small changes on logic based on pr comments * [ADF-2843] added tooltip for create folder and edit folder icons from Content Services * Revert "[ADF-2843] added tooltip for create folder and edit folder icons from Content Services" This reverts commit d5a7abb65b5bbfd024b44aa7e331e688aa13eb60. * [ADF-2626] changed casting * [ADF-2626] updated documentation with event * [ADF-2626] removed app-config pipe because it was not being used --- demo-shell/src/app.config.json | 5 +++ .../app-layout/app-layout.component.html | 2 +- .../app-layout/app-layout.component.ts | 27 ++++++++++++++-- docs/core/sidenav-layout.component.md | 32 +++++++++++++++++-- .../sidenav-layout.component.html | 2 +- .../sidenav-layout.component.ts | 6 +++- 6 files changed, 65 insertions(+), 9 deletions(-) diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index d8d0bccd87..1808fd637c 100644 --- a/demo-shell/src/app.config.json +++ b/demo-shell/src/app.config.json @@ -492,5 +492,10 @@ "adf-version-manager": { "allowComments": true, "allowDownload": true + }, + + "sideNav": { + "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 8bf84aede3..8b46a8b43e 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 c1cf9ade45..8c322da7af 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,7 +15,8 @@ * limitations under the License. */ -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, ViewEncapsulation, OnInit } from '@angular/core'; +import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core'; @Component({ templateUrl: 'app-layout.component.html', @@ -25,7 +26,8 @@ import { Component, ViewEncapsulation } from '@angular/core'; }, encapsulation: ViewEncapsulation.None }) -export class AppLayoutComponent { + +export class AppLayoutComponent implements OnInit { links: Array = [ { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' }, @@ -48,6 +50,25 @@ export class AppLayoutComponent { { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' } ]; - constructor() { + expandedSidenav = false; + + + ngOnInit() { + const expand = this.config.get('sideNav.expandedSidenav'); + const preserveState = this.config.get('sideNav.preserveState'); + + if (preserveState && expand) { + this.expandedSidenav = (this.userpreference.get('expandedSidenav', expand.toString()) === '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('expandedSidenav', state); + } } } diff --git a/docs/core/sidenav-layout.component.md b/docs/core/sidenav-layout.component.md index 34e040f03e..47d65404c4 100644 --- a/docs/core/sidenav-layout.component.md +++ b/docs/core/sidenav-layout.component.md @@ -18,7 +18,8 @@ Displays the standard three-region ADF application layout. [sidenavMax]="220" [stepOver]="600" [hideSidenav]="false" - [expandedSidenav]="true"> + [expandedSidenav]="true" + (expanded)="setState($event)"> @@ -54,7 +55,7 @@ Displays the standard three-region ADF application layout. | sidenavMax | `number` | | (**required**) Width in pixels when expanded | | stepOver | `number` | | (**required**) "Breakpoint" size (ie, number of pixels for selecting between mobile and desktop layouts) | | hideSidenav | `boolean` | false | Toggles showing/hiding the navigation region | -| expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? | +| expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? | ## Details @@ -88,6 +89,11 @@ Mobile layout (screen width less than the `stepOver` value): | --- | --- | --- | --- | | menuOpenState$ | Observable<boolean> | true | Another way to listen to menu open/closed state | +### Events + +| Name | Type | Description | +| expanded | `EventEmitter` | Emmitted when the menu toggle and the collapsed/expanded state of the sideNav changes + ### Template context Each template is given a context containing the following methods: @@ -105,4 +111,24 @@ Beside the template context's **isMenuMinimized** variable, another way to liste Every time the menu state is changed, the following values are emitted: - true, if the menu got into opened state -- false, if the menu git into closed state \ No newline at end of file +- false, if the menu git into closed state + +### Preserving the menu state + +It is possible to preserve the state of the menu between sessions. This require to first set a property in the appConfig.json file. + +``` + "sideNav" : { + "preserveState" : true + } +``` +If this property is set, the collapsed/expanded state will be stored in the local storage, and it will be restored with page reload or the next time the user visits the app. +Beside this, it is also possible to set the default value in the appConfig.json file: + +``` + "sideNav" : { + "expandedSidenav" : true + } +``` + +By default the collapsed/exapnded state should be read from the application configuration file, but only if there is no value for the collapsed/expanded state in the local storage. \ No newline at end of file diff --git a/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.html b/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.html index 55ff07fc51..bec4ecc281 100644 --- a/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.html +++ b/lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.html @@ -23,4 +23,4 @@ - \ No newline at end of file + 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 e831b937f3..003ed2c4af 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,7 +15,7 @@ * 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'; @@ -38,6 +38,8 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy @Input() hideSidenav = false; @Input() expandedSidenav = true; + @Output() expanded = new EventEmitter(); + @ContentChild(SidenavLayoutHeaderDirective) headerDirective: SidenavLayoutHeaderDirective; @ContentChild(SidenavLayoutNavigationDirective) navigationDirective: SidenavLayoutNavigationDirective; @ContentChild(SidenavLayoutContentDirective) contentDirective: SidenavLayoutContentDirective; @@ -57,6 +59,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy }; constructor(private mediaMatcher: MediaMatcher) { + this.onMediaQueryChange = this.onMediaQueryChange.bind(this); } @@ -89,6 +92,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy } this.container.toggleMenu(); + this.expanded.emit(!this.isMenuMinimized); } get isMenuMinimized() {