Added expand and collapse functionality

2025-09-17 14:21:14 +00:00 · 2023-02-09 17:40:52 +00:00
parent 9734d1606a
commit a00ebef5cc
14 changed files with 122 additions and 26 deletions
--- a/projects/aca-about/src/lib/about.component.html
+++ b/projects/aca-about/src/lib/about.component.html
@@ -1,5 +1,4 @@
-<aca-page-layout>
-  <aca-page-layout-content [scrollable]="true">
+  <aca-page-layout-content [scrollable]="true" [ngClass]="{'app-about-container' : hideSidenav === true}">
    <adf-about>
      <adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
        <ng-template>
@@ -26,4 +25,3 @@
      </adf-about-panel>
    </adf-about>
  </aca-page-layout-content>
-</aca-page-layout>
--- a/projects/aca-about/src/lib/about.component.scss
+++ b/projects/aca-about/src/lib/about.component.scss
@@ -2,3 +2,13 @@ adf-about {
  padding: 10px;
  width: 100%;
 }
+
+.app-about-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+}
--- a/projects/aca-about/src/lib/about.component.ts
+++ b/projects/aca-about/src/lib/about.component.ts
@@ -30,6 +30,7 @@ import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions';
 import { AuthenticationService, RepositoryInfo } from '@alfresco/adf-core';
 import { DiscoveryApiService } from '@alfresco/adf-content-services';
 import { PACKAGE_JSON } from './package-json.token';
+import { ContentServiceExtensionService } from '../../../aca-content/src/lib/services/content-service-extension.service';

@Component({
  selector: 'app-about-page',
@@ -41,6 +42,7 @@ export class AboutComponent implements OnInit {
  dev = false;
  extensions$: Observable<ExtensionRef[]>;
  repository: RepositoryInfo = null;
+  hideSidenav: boolean;

  constructor(
    @Inject(DEV_MODE_TOKEN) devMode,
@@ -49,7 +51,8 @@ export class AboutComponent implements OnInit {
    public packageJson,
    private authService: AuthenticationService,
    private appExtensions: AppExtensionService,
-    private discovery: DiscoveryApiService
+    private discovery: DiscoveryApiService,
+    private contentServices: ContentServiceExtensionService
  ) {
    this.dev = !devMode;
    this.extensions$ = this.appExtensions.references$;
@@ -59,6 +62,7 @@ export class AboutComponent implements OnInit {
    if (this.authService.isEcmLoggedIn()) {
      this.setECMInfo();
    }
+    this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
  }

  setECMInfo() {
--- a/projects/aca-content/assets/i18n/en.json
+++ b/projects/aca-content/assets/i18n/en.json
@@ -427,7 +427,8 @@
        "TOOLTIPS": {
            "COLLAPSE_NAVIGATION": "Collapse navigation menu",
            "OPTIONS_SETTINGS": "Options and settings",
-            "MY_PROFILE": "My profile"
+            "MY_PROFILE": "My profile",
+            "EXPAND_NAVIGATION": "Expand navigation"
          }
    },
    "NODE_SELECTOR": {
--- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html
+++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html
@@ -1,8 +1,8 @@
-<div class="sidenav">
+<div class="sidenav" *ngIf="!hideSidenav">
  <ng-container [ngSwitch]="mode">
    <div class="sidenav-header">
      <div class="sidenav-header-title">
-        <div class="sidenav-header-title-logo">
+        <div class="sidenav-header-title-logo" (click)="toggleClick()">
          <mat-icon svgIcon="workspace"
            title="{{'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate}}"></mat-icon>
        </div>
--- 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 } from '@alfresco/aca-shared';
+import { ContentServiceExtensionService } from '../../services/content-service-extension.service';

@Component({
  selector: 'app-sidenav',
@@ -41,11 +42,12 @@ import { AppExtensionService } from '@alfresco/aca-shared';
 export class SidenavComponent implements OnInit, OnDestroy {
  @Input()
  mode: 'collapsed' | 'expanded' = 'expanded';
+  hideSidenav: boolean;

  groups: Array<NavBarGroupRef> = [];
  private onDestroy$ = new Subject<boolean>();

-  constructor(private store: Store<AppStore>, private extensions: AppExtensionService) {}
+  constructor(private store: Store<AppStore>, private extensions: AppExtensionService, private contentServices: ContentServiceExtensionService) {}

  ngOnInit() {
    this.store
@@ -54,6 +56,7 @@ export class SidenavComponent implements OnInit, OnDestroy {
      .subscribe(() => {
        this.groups = this.extensions.getApplicationNavigation(this.extensions.navbar);
      });
+      this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
  }

  trackByGroupId(_: number, obj: NavBarGroupRef): string {
@@ -64,6 +67,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
    return obj.id;
  }

+  toggleClick() {
+    this.hideSidenav = !this.hideSidenav;
+    this.contentServices.push(this.hideSidenav);
+  }
+
  ngOnDestroy() {
    this.onDestroy$.next(true);
    this.onDestroy$.complete();
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
@@ -1,4 +1,4 @@
-<div class="app-profile-container">
+<div class="app-profile-container" [ngClass]="{'app-view-profile-container' : hideSidenav === true}">
  <div class="app-profile-row">
    <div class="app-profile-title">
      <mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
@@ -191,4 +191,14 @@ app-view-profile {
    padding-top: 2rem;
    padding-left: .5rem;
  }
+
+  .app-view-profile-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+  }
 }
--- 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,6 +11,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { throwError } from 'rxjs';
+import { ContentServiceExtensionService } from '../../services/content-service-extension.service';

@Component({
  selector: 'app-view-profile',
@@ -33,8 +34,9 @@ export class ViewProfileComponent implements OnInit {

  contactSectionDropdown = false;
  contactSectionButtonsToggle = true;
+  hideSidenav: boolean;

-  constructor(private router: Router, apiService: AlfrescoApiService) {
+  constructor(private router: Router, apiService: AlfrescoApiService, private contentServices: ContentServiceExtensionService) {
    this.peopleApi = new PeopleApi(apiService.getInstance());
  }

@@ -49,6 +51,7 @@ export class ViewProfileComponent implements OnInit {
      .catch((error) => {
        throwError(error);
      });
+      this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
  }

  populateForm(userInfo: Person) {
--- a/projects/aca-content/src/lib/services/content-service-extension.service.ts
+++ b/projects/aca-content/src/lib/services/content-service-extension.service.ts
@@ -9,15 +9,23 @@
 import { Injectable } from '@angular/core';
 import { AppConfigService } from '@alfresco/adf-core';
 import { take } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
 })
 export class ContentServiceExtensionService {
+  public hideSidenav = new BehaviorSubject<boolean>(false);
+  cast = this.hideSidenav.asObservable();
+
  constructor(private appConfigService: AppConfigService) {
    this.updateContentServiceAvailability();
  }

+  push(str: boolean) {
+    this.hideSidenav.next(str);
+  }
+
  updateContentServiceAvailability() {
    this.appConfigService.onLoad.pipe(take(1)).subscribe((config) => {
      if (config.plugins && config.plugins.contentService === false) {
--- 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,3 +1,11 @@
-<ng-content select="aca-page-layout-header"></ng-content>
-<ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
-<ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
+<div class="aca-content-container" [ngClass]="{'aca-page-layout-container' : hideSidenav}">
+    <div class="aca-content-header">
+        <div class="aca-menu-icon" [ngClass]="{'aca-display-menu' : !hideSidenav}" (click)="toggleClick()">
+            <mat-icon title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">menu</mat-icon>
+        </div>
+        <ng-content select="aca-page-layout-header">
+        </ng-content>
+    </div>
+    <ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
+    <ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
+</div>
--- 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
@@ -3,14 +3,42 @@
 .aca-page-layout {
  @include flex-column;

+  .aca-content-header {
+    border-left: none;
+    border-right: none;
+    background: var(--theme-page-layout-header-background-color);
+    height: 96px;
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+  }
+
+  .aca-menu-icon {
+    cursor: pointer;
+    transform: scale(1.1);
+    padding: 32px 12px 32px 0;
+    margin-top: 2px;
+  }
+
+  .aca-display-menu {
+    display: none;
+  }
+
+  .aca-page-layout-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+  }
+
  .aca-page-layout-header {
    display: flex;
    align-items: center;
-    flex: 0 0 65px;
-    flex-basis: 96px;
-    background: var(--theme-page-layout-header-background-color);
-    border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
-    padding: 0 24px;
+    flex: auto;
+    width: 100%;
    
    .adf-breadcrumb-item {
      font-size: 20px !important;
--- 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,8 @@
 * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { ContentServiceExtensionService } from '../../../../../aca-content/src/lib/services/content-service-extension.service';

@Component({
  selector: 'aca-page-layout',
@@ -36,4 +37,20 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@a
 export class PageLayoutComponent {
  @Input()
  hasError = false;
+  hideSidenav: boolean;
+
+  constructor(private contentServices: ContentServiceExtensionService, private ref: ChangeDetectorRef) {
+    setInterval(() => {
+      this.ref.detectChanges();
+    });
+  }
+
+  ngOnInit() {
+    this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
+  }
+
+  toggleClick() {
+    this.hideSidenav = !this.hideSidenav;
+    this.contentServices.push(this.hideSidenav);
+  }
 }
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts
@@ -29,9 +29,10 @@ import { PageLayoutErrorComponent } from './page-layout-error.component';
 import { PageLayoutHeaderComponent } from './page-layout-header.component';
 import { PageLayoutComponent } from './page-layout.component';
 import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';

@NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, CoreModule.forChild()],
  declarations: [PageLayoutContentComponent, PageLayoutErrorComponent, PageLayoutHeaderComponent, PageLayoutComponent],
  exports: [PageLayoutContentComponent, PageLayoutErrorComponent, PageLayoutHeaderComponent, PageLayoutComponent]
 })