diff --git a/projects/aca-content/src/lib/aca-content.module.ts b/projects/aca-content/src/lib/aca-content.module.ts index 90d368c4f..e7ed7e7d3 100644 --- a/projects/aca-content/src/lib/aca-content.module.ts +++ b/projects/aca-content/src/lib/aca-content.module.ts @@ -97,7 +97,6 @@ import { LocationLinkComponent } from './components/common/location-link/locatio import { LogoutComponent } from './components/common/logout/logout.component'; import { ToggleSharedComponent } from './components/common/toggle-shared/toggle-shared.component'; import { CustomNameColumnComponent } from './components/dl-custom-components/name-column/name-column.component'; -import { AppHeaderComponent } from './components/header/header.component'; import { CommentsTabComponent } from './components/info-drawer/comments-tab/comments-tab.component'; import { LibraryMetadataTabComponent } from './components/info-drawer/library-metadata-tab/library-metadata-tab.component'; import { MetadataTabComponent } from './components/info-drawer/metadata-tab/metadata-tab.component'; @@ -114,7 +113,6 @@ import { ViewNodeComponent } from './components/toolbar/view-node/view-node.comp import { CONTENT_ROUTES } from './aca-content.routes'; import { RouterModule } from '@angular/router'; import { UploadFilesDialogComponent } from './components/upload-files-dialog/upload-files-dialog.component'; -import { SidenavWrapperComponent } from './components/sidenav/sidenav-wrapper/sidenav-wrapper.component'; import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component'; import { AppTrashcanModule } from './components/trashcan/trashcan.module'; import { AppSharedLinkViewModule } from './components/shared-link-view/shared-link-view.module'; @@ -123,6 +121,7 @@ import { TagsColumnComponent } from './components/dl-custom-components/tags-colu import { UserInfoComponent } from './components/common/user-info/user-info.component'; import { CustomIconsModule } from './extensions/custom-icons.module'; import { AppHeaderActionsModule } from './components/header-actions/header-actions.module'; +import { SidenavComponent } from './components/sidenav/sidenav.component'; registerLocaleData(localeFr); registerLocaleData(localeDe); @@ -210,8 +209,9 @@ export class ContentServiceExtensionModule { extensions.setComponents({ 'app.layout.main': AppLayoutComponent, - 'app.layout.header': AppHeaderComponent, - 'app.layout.sidenav': SidenavWrapperComponent, + // This allows providing custom application header, disabled for ACA the time being + // 'app.layout.header': AppHeaderComponent, + 'app.layout.sidenav': SidenavComponent, 'app.shell.sibling': UploadFilesDialogComponent, 'app.components.tabs.metadata': MetadataTabComponent, 'app.components.tabs.library.metadata': LibraryMetadataTabComponent, diff --git a/projects/aca-content/src/lib/components/header/header.component.html b/projects/aca-content/src/lib/components/header/header.component.html index e69de29bb..a0d9a0d84 100644 --- a/projects/aca-content/src/lib/components/header/header.component.html +++ b/projects/aca-content/src/lib/components/header/header.component.html @@ -0,0 +1,18 @@ + +
+ + + + + + + + +
diff --git a/projects/aca-content/src/lib/components/header/header.component.ts b/projects/aca-content/src/lib/components/header/header.component.ts index 001ee8baa..63aa1f1ef 100644 --- a/projects/aca-content/src/lib/components/header/header.component.ts +++ b/projects/aca-content/src/lib/components/header/header.component.ts @@ -33,6 +33,7 @@ import { takeUntil } from 'rxjs/operators'; import { AppConfigService, SidenavLayoutComponent } from '@alfresco/adf-core'; import { isContentServiceEnabled } from '@alfresco/aca-shared/rules'; +/** @deprecated */ @Component({ selector: 'app-header', templateUrl: './header.component.html', diff --git a/projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html b/projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html index 9cab121c1..26bc39a92 100644 --- a/projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html +++ b/projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html @@ -18,7 +18,7 @@ diff --git a/projects/aca-content/src/lib/components/layout/layout.module.ts b/projects/aca-content/src/lib/components/layout/layout.module.ts index 5bb1275a5..0b93e4646 100644 --- a/projects/aca-content/src/lib/components/layout/layout.module.ts +++ b/projects/aca-content/src/lib/components/layout/layout.module.ts @@ -26,6 +26,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CoreModule } from '@alfresco/adf-core'; +import { SHELL_NAVBAR_MIN_WIDTH } from '@alfresco/adf-core/shell'; import { AppLayoutComponent } from './app-layout/app-layout.component'; import { ContentModule } from '@alfresco/adf-content-services'; import { RouterModule } from '@angular/router'; @@ -48,6 +49,7 @@ import { PageLayoutModule } from '@alfresco/aca-shared'; PageLayoutModule ], declarations: [AppLayoutComponent], - exports: [AppLayoutComponent, PageLayoutModule] + exports: [AppLayoutComponent, PageLayoutModule], + providers: [{ provide: SHELL_NAVBAR_MIN_WIDTH, useValue: 0 }] }) export class AppLayoutModule {} diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav-wrapper/sidenav-wrapper.component.html b/projects/aca-content/src/lib/components/sidenav/sidenav-wrapper/sidenav-wrapper.component.html deleted file mode 100644 index c52e69d20..000000000 --- a/projects/aca-content/src/lib/components/sidenav/sidenav-wrapper/sidenav-wrapper.component.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav-wrapper/sidenav-wrapper.component.ts b/projects/aca-content/src/lib/components/sidenav/sidenav-wrapper/sidenav-wrapper.component.ts deleted file mode 100644 index 2f7eed7d4..000000000 --- a/projects/aca-content/src/lib/components/sidenav/sidenav-wrapper/sidenav-wrapper.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -/*! - * @license - * Alfresco Example Content Application - * - * Copyright (C) 2005 - 2020 Alfresco Software Limited - * - * 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: - * - * 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 . - */ - -import { Component, Input } from '@angular/core'; - -/** - * This wrapper is designated to be used with 'adf-dynamic-component'. - * It forwards the dynamic component inputs to original sidenav. - */ -@Component({ - selector: 'aca-sidenav-wrapper', - templateUrl: './sidenav-wrapper.component.html' -}) -export class SidenavWrapperComponent { - @Input() - data: { mode?: 'collapsed' | 'expanded' } = {}; -} diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html index ae3af7708..09a195cfb 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html @@ -1,5 +1,5 @@ -
- +
+
+
-
+
diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss index dd5d5e535..fb9e300b1 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss @@ -1,14 +1,10 @@ .sidenav { - width: 289px; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--theme-sidenav-background-color); display: flex; + flex: 1; flex-direction: column; height: 100%; + overflow-y: hidden; + background: var(--theme-sidenav-background-color); &-header { padding: 32px 0; @@ -136,25 +132,3 @@ } } } - -.adf-sidenav-layout { - .mat-sidenav { - width: 0 !important; - } -} - -@media screen and (max-width: 587px) { - .adf-sidenav-layout { - .adf-container-full-width { - margin-left: 0px !important; - } - } -} - -@media screen and (min-width: 600px) { - .adf-sidenav-layout { - .adf-container-full-width { - margin-left: 289px !important; - } - } -} diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.ts b/projects/aca-content/src/lib/components/sidenav/sidenav.component.ts index d302926a7..b4f46b752 100755 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.ts +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.ts @@ -30,6 +30,7 @@ import { AppStore, getSideNavState } from '@alfresco/aca-shared/store'; import { Subject } from 'rxjs'; import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators'; import { AppExtensionService, AppService } from '@alfresco/aca-shared'; +import { SidenavLayoutComponent } from '@alfresco/adf-core'; @Component({ selector: 'app-sidenav', @@ -40,13 +41,15 @@ import { AppExtensionService, AppService } from '@alfresco/aca-shared'; }) export class SidenavComponent implements OnInit, OnDestroy { @Input() - mode: 'collapsed' | 'expanded' = 'expanded'; - hideSidenav: boolean; + data: { + layout?: SidenavLayoutComponent; + mode?: 'collapsed' | 'expanded'; + } = {}; groups: Array = []; private onDestroy$ = new Subject(); - constructor(private store: Store, private extensions: AppExtensionService, private appServices: AppService) {} + constructor(private store: Store, private extensions: AppExtensionService, private appService: AppService) {} ngOnInit() { this.store @@ -55,7 +58,9 @@ export class SidenavComponent implements OnInit, OnDestroy { .subscribe(() => { this.groups = this.extensions.getApplicationNavigation(this.extensions.navbar); }); - this.appServices.cast.subscribe((data) => (this.hideSidenav = data)); + + this.appService.appNavNarMode$.next(this.data.mode); + this.appService.toggleAppNavBar$.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.toggleNavBar()); } trackByGroupId(_: number, obj: NavBarGroupRef): string { @@ -67,8 +72,12 @@ export class SidenavComponent implements OnInit, OnDestroy { } toggleClick() { - this.hideSidenav = !this.hideSidenav; - this.appServices.getSidenavValue(this.hideSidenav); + this.toggleNavBar(); + } + + private toggleNavBar() { + this.data.layout.toggleMenu(); + this.appService.appNavNarMode$.next(this.data.layout.isMenuMinimized ? 'collapsed' : 'expanded'); } ngOnDestroy() { diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts b/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts index 01c8283f4..e7ebc9f4f 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts @@ -38,7 +38,6 @@ import { ExpandMenuComponent } from './components/expand-menu.component'; import { ButtonMenuComponent } from './components/button-menu.component'; import { ActionDirective } from './directives/action.directive'; import { MainActionModule } from '../main-action/main-action.module'; -import { SidenavWrapperComponent } from './sidenav-wrapper/sidenav-wrapper.component'; import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component'; @NgModule({ @@ -59,7 +58,6 @@ import { NavigationMenuComponent } from './navigation-menu/navigation-menu.compo ExpandMenuComponent, ButtonMenuComponent, SidenavComponent, - SidenavWrapperComponent, NavigationMenuComponent ], exports: [ diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts index 7739700a5..3ac5bfdbd 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts @@ -11,7 +11,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { throwError } from 'rxjs'; -import { AppService } from '@alfresco/aca-shared'; @Component({ selector: 'app-view-profile', @@ -36,7 +35,7 @@ export class ViewProfileComponent implements OnInit { contactSectionButtonsToggle = true; hideSidenav: boolean; - constructor(private router: Router, apiService: AlfrescoApiService, private appService: AppService) { + constructor(private router: Router, apiService: AlfrescoApiService) { this.peopleApi = new PeopleApi(apiService.getInstance()); } @@ -51,7 +50,6 @@ export class ViewProfileComponent implements OnInit { .catch((error) => { throwError(error); }); - this.appService.cast.subscribe((data) => (this.hideSidenav = data)); } populateForm(userInfo: Person) { diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html index ae02a0f6b..e9207b5f8 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html @@ -1,6 +1,6 @@
-
+
menu
diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss index 1fd2b6554..d55032568 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss @@ -29,10 +29,6 @@ margin-top: 2px; } - .aca-menu-hidden { - display: none; - } - .aca-page-layout-header { display: flex; align-items: center; diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts index d8c9c6b7a..3acbb77b8 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts @@ -23,7 +23,9 @@ * along with Alfresco. If not, see . */ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core'; +import { Component, ViewEncapsulation, Input, OnDestroy } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { AppService } from '../../services/app.service'; @Component({ @@ -31,26 +33,25 @@ import { AppService } from '../../services/app.service'; templateUrl: './page-layout.component.html', styleUrls: ['./page-layout.component.scss'], encapsulation: ViewEncapsulation.None, - host: { class: 'aca-page-layout' }, - changeDetection: ChangeDetectionStrategy.OnPush + host: { class: 'aca-page-layout' } }) -export class PageLayoutComponent { +export class PageLayoutComponent implements OnDestroy { @Input() hasError = false; - hideSidenav: boolean; - constructor(private appService: AppService, private ref: ChangeDetectorRef) { - setInterval(() => { - this.ref.detectChanges(); - }); - } + private onDestroy$ = new Subject(); + appNavNarMode$: Observable<'collapsed' | 'expanded'>; - ngOnInit() { - this.appService.cast.subscribe((data) => (this.hideSidenav = data)); + constructor(private appService: AppService) { + this.appNavNarMode$ = appService.appNavNarMode$.pipe(takeUntil(this.onDestroy$)); } toggleClick() { - this.hideSidenav = !this.hideSidenav; - this.appService.getSidenavValue(this.hideSidenav); + this.appService.toggleAppNavBar$.next(); + } + + ngOnDestroy() { + this.onDestroy$.next(true); + this.onDestroy$.complete(); } } diff --git a/projects/aca-shared/src/lib/services/app.service.ts b/projects/aca-shared/src/lib/services/app.service.ts index 675f06cee..e11794606 100644 --- a/projects/aca-shared/src/lib/services/app.service.ts +++ b/projects/aca-shared/src/lib/services/app.service.ts @@ -66,11 +66,11 @@ export class AppService implements OnDestroy { private ready: BehaviorSubject; ready$: Observable; - public hideSidenav = new BehaviorSubject(false); - cast = this.hideSidenav.asObservable(); - pageHeading$: Observable; + appNavNarMode$: Subject<'collapsed' | 'expanded'> = new BehaviorSubject('expanded'); + toggleAppNavBar$ = new Subject(); + hideSidenavConditions = ['/preview/']; minimizeSidenavConditions = ['search']; @@ -121,10 +121,6 @@ export class AppService implements OnDestroy { ); } - getSidenavValue(str: boolean) { - this.hideSidenav.next(str); - } - ngOnDestroy(): void { this.onDestroy$.next(true); this.onDestroy$.complete();