[ACS-3742] extra cfg support for shell navbar (#8256)

This commit is contained in:
Denys Vuika 2023-02-14 14:22:56 +00:00 committed by GitHub
parent bcfa488940
commit 0ba076722f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 7 deletions

View File

@ -1,7 +1,7 @@
<adf-sidenav-layout <adf-sidenav-layout
#layout #layout
[sidenavMin]="70" [sidenavMin]="sidenavMin"
[sidenavMax]="320" [sidenavMax]="sidenavMax"
[stepOver]="600" [stepOver]="600"
[hideSidenav]="hideSidenav" [hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav" [expandedSidenav]="expandedSidenav"
@ -28,7 +28,7 @@
> >
<adf-dynamic-component <adf-dynamic-component
id="app.layout.sidenav" id="app.layout.sidenav"
[data]="{ mode: layout.isMenuMinimized ? 'collapsed' : 'expanded'}" [data]="{ layout, mode: layout.isMenuMinimized ? 'collapsed' : 'expanded'}"
> >
</adf-dynamic-component> </adf-dynamic-component>
</div> </div>

View File

@ -16,13 +16,13 @@
*/ */
import { AppConfigService, SidenavLayoutComponent } from '@alfresco/adf-core'; import { AppConfigService, SidenavLayoutComponent } from '@alfresco/adf-core';
import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { Component, Inject, OnDestroy, OnInit, Optional, ViewChild, ViewEncapsulation } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
import { Subject, Observable } from 'rxjs'; import { Subject, Observable } from 'rxjs';
import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators'; import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
import { BreakpointObserver } from '@angular/cdk/layout'; import { BreakpointObserver } from '@angular/cdk/layout';
import { Directionality } from '@angular/cdk/bidi'; import { Directionality } from '@angular/cdk/bidi';
import { SHELL_APP_SERVICE, ShellAppService } from '../../services/shell-app.service'; import { SHELL_APP_SERVICE, ShellAppService, SHELL_NAVBAR_MIN_WIDTH, SHELL_NAVBAR_MAX_WIDTH } from '../../services/shell-app.service';
@Component({ @Component({
selector: 'app-shell', selector: 'app-shell',
@ -41,14 +41,21 @@ export class ShellLayoutComponent implements OnInit, OnDestroy {
expandedSidenav: boolean; expandedSidenav: boolean;
minimizeSidenav = false; minimizeSidenav = false;
hideSidenav = false; hideSidenav = false;
sidenavMin: number;
sidenavMax: number;
direction: Directionality; direction: Directionality;
constructor( constructor(
private router: Router, private router: Router,
private appConfigService: AppConfigService, private appConfigService: AppConfigService,
private breakpointObserver: BreakpointObserver, private breakpointObserver: BreakpointObserver,
@Inject(SHELL_APP_SERVICE) private shellService: ShellAppService @Inject(SHELL_APP_SERVICE) private shellService: ShellAppService,
) {} @Optional() @Inject(SHELL_NAVBAR_MIN_WIDTH) navBarMinWidth: number,
@Optional() @Inject(SHELL_NAVBAR_MAX_WIDTH) navbarMaxWidth: number
) {
this.sidenavMin = navBarMinWidth ?? 70;
this.sidenavMax = navbarMaxWidth ?? 320;
}
ngOnInit() { ngOnInit() {
this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches)); this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches));

View File

@ -34,3 +34,5 @@ export interface ShellAppService {
export const SHELL_APP_SERVICE = new InjectionToken<ShellAppService>('SHELL_APP_SERVICE'); export const SHELL_APP_SERVICE = new InjectionToken<ShellAppService>('SHELL_APP_SERVICE');
export const SHELL_AUTH_TOKEN = new InjectionToken<CanActivate & CanActivateChild>('SHELL_AUTH_TOKEN'); export const SHELL_AUTH_TOKEN = new InjectionToken<CanActivate & CanActivateChild>('SHELL_AUTH_TOKEN');
export const SHELL_NAVBAR_MIN_WIDTH = new InjectionToken<number>('SHELL_NAVBAR_MIN_WIDTH');
export const SHELL_NAVBAR_MAX_WIDTH = new InjectionToken<number>('SHELL_NAVBAR_MAX_WIDTH');