inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-12390] Changes needed to fix search input visibility when resizing browser window (#12137)

Browse Source 
* [ACS-12390] Changes needed to fix search input visibility when resizing browser window

* [ACS-12390] Addressed copilot comments
This commit is contained in:
AleksanderSklorz
2026-08-07 11:55:58 +02:00
committed by GitHub
parent 99c574bad6
commit 4592a8ae21
4 changed files with 116 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/shell/src/lib/components/shell/shell.component.html
+1 -1
View File
@@ -2,7 +2,7 @@
#layout
[sidenavMin]="sidenavMin"
[sidenavMax]="sidenavMax"
[stepOver]="600"
[stepOver]="smallScreenBreakpoint"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
(expanded)="onExpanded($event)"
lib/core/shell/src/lib/components/shell/shell.component.spec.ts
+104 -78
View File
@@ -20,7 +20,7 @@ import { AppConfigService } from '@alfresco/adf-core';
import { ShellLayoutComponent } from './shell.component';
import { provideRouter, RouterModule } from '@angular/router';
import { of } from 'rxjs';
import { ShellAppService, SHELL_APP_SERVICE } from '../../services/shell-app.service';
import { ShellAppService, SHELL_APP_SERVICE, SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT } from '../../services/shell-app.service';
import { RouterTestingHarness } from '@angular/router/testing';
describe('AppLayoutComponent', () => {
@@ -30,7 +30,15 @@ describe('AppLayoutComponent', () => {
let shellAppService: ShellAppService;
let routerHarness: RouterTestingHarness;
beforeEach(async () => {
const initializeShellComponent = (breakpoint?: number): void => {
if (breakpoint !== undefined) {
TestBed.overrideProvider(SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT, { useValue: breakpoint });
}
fixture = TestBed.createComponent(ShellLayoutComponent);
component = fixture.componentInstance;
};
beforeEach(() => {
const shellService: ShellAppService = {
pageHeading$: of('Title'),
hideSidenavConditions: [],
@@ -51,20 +59,21 @@ describe('AppLayoutComponent', () => {
provideRouter([{ path: 'minimize', component: ShellLayoutComponent }])
]
});
fixture = TestBed.createComponent(ShellLayoutComponent);
component = fixture.componentInstance;
appConfig = TestBed.inject(AppConfigService);
shellAppService = TestBed.inject(SHELL_APP_SERVICE);
routerHarness = await RouterTestingHarness.create();
});
beforeEach(() => {
appConfig.config.languages = [];
appConfig.config.locale = 'en';
});
describe('sidenav state', () => {
beforeEach(async () => {
initializeShellComponent();
appConfig = TestBed.inject(AppConfigService);
shellAppService = TestBed.inject(SHELL_APP_SERVICE);
routerHarness = await RouterTestingHarness.create();
});
beforeEach(() => {
appConfig.config.languages = [];
appConfig.config.locale = 'en';
});
it('should get state from configuration', () => {
appConfig.config.sideNav = {
expandedSidenav: false,
@@ -119,75 +128,92 @@ describe('AppLayoutComponent', () => {
expect(component.expandedSidenav).toBe(false);
});
it('should close menu on mobile screen size', () => {
component.minimizeSidenav = false;
component.layout.container = {
isMobileScreenSize: true,
toggleMenu: () => {}
};
spyOn(component.layout.container, 'toggleMenu');
fixture.detectChanges();
component.hideMenu({ preventDefault: () => {} } as any);
expect(component.layout.container.toggleMenu).toHaveBeenCalled();
});
it('should close menu on mobile screen size also when minimizeSidenav true', () => {
fixture.detectChanges();
component.minimizeSidenav = true;
component.layout.container = {
isMobileScreenSize: true,
toggleMenu: () => {}
};
spyOn(component.layout.container, 'toggleMenu');
fixture.detectChanges();
component.hideMenu({ preventDefault: () => {} } as any);
expect(component.layout.container.toggleMenu).toHaveBeenCalled();
});
it('should minimize menu when navigates to minimize url', async () => {
shellAppService.minimizeSidenavConditions = ['/minimize'];
component.layout.container = {
isMobileScreenSize: false,
isMenuMinimized: false,
toggleMenu: () => {}
};
spyOn(component.layout.container, 'toggleMenu');
fixture.detectChanges();
await routerHarness.navigateByUrl('/minimize');
fixture.detectChanges();
expect(component.minimizeSidenav).toBeTrue();
expect(component.layout.isMenuMinimized).toBeTrue();
expect(component.layout.container.toggleMenu).toHaveBeenCalled();
});
it('should not minimize menu again when previous and current route contain minimize url', async () => {
shellAppService.minimizeSidenavConditions = ['/minimize'];
component.layout.container = {
isMobileScreenSize: false,
isMenuMinimized: false,
toggleMenu: () => {}
};
fixture.detectChanges();
await routerHarness.navigateByUrl('/minimize?query=123');
fixture.detectChanges();
expect(component.minimizeSidenav).toBeTrue();
await routerHarness.navigateByUrl('/minimize?query=456');
fixture.detectChanges();
expect(component.minimizeSidenav).toBeFalse();
});
});
it('should close menu on mobile screen size', () => {
component.minimizeSidenav = false;
component.layout.container = {
isMobileScreenSize: true,
toggleMenu: () => {}
};
describe('SidenavLayout', () => {
it('should have assigned correct stepOver by default', () => {
initializeShellComponent();
spyOn(component.layout.container, 'toggleMenu');
fixture.detectChanges();
fixture.detectChanges();
expect(component.layout.stepOver).toBe(600);
});
component.hideMenu({ preventDefault: () => {} } as any);
it('should have assigned correct stepOver based on configured value', () => {
const breakpoint = 800;
initializeShellComponent(breakpoint);
expect(component.layout.container.toggleMenu).toHaveBeenCalled();
});
it('should close menu on mobile screen size also when minimizeSidenav true', () => {
fixture.detectChanges();
component.minimizeSidenav = true;
component.layout.container = {
isMobileScreenSize: true,
toggleMenu: () => {}
};
spyOn(component.layout.container, 'toggleMenu');
fixture.detectChanges();
component.hideMenu({ preventDefault: () => {} } as any);
expect(component.layout.container.toggleMenu).toHaveBeenCalled();
});
it('should minimize menu when navigates to minimize url', async () => {
shellAppService.minimizeSidenavConditions = ['/minimize'];
component.layout.container = {
isMobileScreenSize: false,
isMenuMinimized: false,
toggleMenu: () => {}
};
spyOn(component.layout.container, 'toggleMenu');
fixture.detectChanges();
await routerHarness.navigateByUrl('/minimize');
fixture.detectChanges();
expect(component.minimizeSidenav).toBeTrue();
expect(component.layout.isMenuMinimized).toBeTrue();
expect(component.layout.container.toggleMenu).toHaveBeenCalled();
});
it('should not minimize menu again when previous and current route contain minimize url', async () => {
shellAppService.minimizeSidenavConditions = ['/minimize'];
component.layout.container = {
isMobileScreenSize: false,
isMenuMinimized: false,
toggleMenu: () => {}
};
fixture.detectChanges();
await routerHarness.navigateByUrl('/minimize?query=123');
fixture.detectChanges();
expect(component.minimizeSidenav).toBeTrue();
await routerHarness.navigateByUrl('/minimize?query=456');
fixture.detectChanges();
expect(component.minimizeSidenav).toBeFalse();
fixture.detectChanges();
expect(component.layout.stepOver).toBe(breakpoint);
});
});
});
lib/core/shell/src/lib/components/shell/shell.component.ts
+10 -2
View File
@@ -29,7 +29,13 @@ import { Observable } from 'rxjs';
import { filter, map, withLatestFrom } from 'rxjs/operators';
import { BreakpointObserver } from '@angular/cdk/layout';
import { Directionality } from '@angular/cdk/bidi';
import { SHELL_APP_SERVICE, SHELL_NAVBAR_MAX_WIDTH, SHELL_NAVBAR_MIN_WIDTH, ShellAppService } from '../../services/shell-app.service';
import {
SHELL_APP_SERVICE,
SHELL_NAVBAR_MAX_WIDTH,
SHELL_NAVBAR_MIN_WIDTH,
SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT,
ShellAppService
} from '../../services/shell-app.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
@@ -56,6 +62,8 @@ export class ShellLayoutComponent implements OnInit {
@ViewChild('layout', { static: true })
layout: SidenavLayoutComponent;
readonly smallScreenBreakpoint = inject(SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT, { optional: true }) ?? 600;
isSmallScreen$: Observable<boolean>;
expandedSidenav: boolean;
@@ -76,7 +84,7 @@ export class ShellLayoutComponent implements OnInit {
}
ngOnInit() {
this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches));
this.isSmallScreen$ = this.breakpointObserver.observe([`(max-width: ${this.smallScreenBreakpoint}px)`]).pipe(map((result) => result.matches));
this.hideSidenav = this.shellService.hideSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
this.minimizeSidenav = this.shellService.minimizeSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
lib/core/shell/src/lib/services/shell-app.service.ts
+1
View File
@@ -36,3 +36,4 @@ export const SHELL_APP_SERVICE = new InjectionToken<ShellAppService>('SHELL_APP_
export const SHELL_AUTH_TOKEN = new InjectionToken<CanActivateFn | CanActivateChildFn>('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');
export const SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT = new InjectionToken<number>('SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT');