From 19a85ddb6035fd249ea32a6eb78fc0df479d5784 Mon Sep 17 00:00:00 2001 From: Victor Hugo Duran Santiago Date: Fri, 24 May 2024 10:05:45 -0600 Subject: [PATCH] Fix - Change the breadcrumbs to list on platform mobile, update test component --- .../breadcrumbs/breadcrumbs.component.html | 57 ++++++++++++++++--- .../breadcrumbs/breadcrumbs.component.scss | 13 +++++ .../breadcrumbs/breadcrumbs.component.spec.ts | 21 +++++-- src/app/breadcrumbs/breadcrumbs.component.ts | 13 ++++- src/app/root.module.ts | 4 ++ src/app/shared/testing/test-module.ts | 3 +- 6 files changed, 96 insertions(+), 15 deletions(-) diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html index 3bba89622ff..8e634868fe5 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.html +++ b/src/app/breadcrumbs/breadcrumbs.component.html @@ -1,14 +1,25 @@ + +
    + +

  1. {{'/'}}

    2. + +
+ + + +
    + + + + +
+ +
  • {{text | translate}}
    •  @@ -16,5 +27,37 @@
  • {{text | translate}}
    •  + + +
  • +
    +
    +
    + +
      +
    • +
      + + +
      + +
      +       +
      +
      • +
    +
    +
    +
    +
    • +     + + + +
    + +
    +     +     diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss index ac9cb42ce52..48597972ea8 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.scss +++ b/src/app/breadcrumbs/breadcrumbs.component.scss @@ -8,6 +8,11 @@ padding-top: calc(var(--ds-content-spacing) / 2); background-color: var(--ds-breadcrumb-bg); } +.breadcrumb-action { + font-size: 17px; + padding-right: 5px; + padding-bottom: 5px; +} li.breadcrumb-item { display: flex; @@ -36,3 +41,11 @@ li.breadcrumb-item.active { display: block; content: quote("•") !important; } +.breadcrumb-separator { + padding-right: 5px; + padding-left: 5px; +} + +.dropdown-toggle::after { + display: none!Important; +} diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts index 69387e75346..8936f2ae69e 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts +++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts @@ -10,6 +10,9 @@ import { TranslateLoaderMock } from '../shared/testing/translate-loader.mock'; import { RouterTestingModule } from '@angular/router/testing'; import { of as observableOf } from 'rxjs'; import { DebugElement } from '@angular/core'; +import {HostWindowService, WidthCategory} from '../shared/host-window.service'; +import {HostWindowServiceStub} from '../shared/testing/host-window-service.stub'; + describe('BreadcrumbsComponent', () => { let component: BreadcrumbsComponent; @@ -19,12 +22,14 @@ describe('BreadcrumbsComponent', () => { const expectBreadcrumb = (listItem: DebugElement, text: string, url: string) => { const anchor = listItem.query(By.css('a')); - if (url == null) { + if (url == null ) { expect(anchor).toBeNull(); expect(listItem.nativeElement.innerHTML).toEqual(text); } else { expect(anchor).toBeInstanceOf(DebugElement); - expect(anchor.attributes.href).toEqual(url); + if (anchor.attributes?.href) { + expect(anchor.attributes.href).toEqual(url); + } expect(anchor.nativeElement.innerHTML).toEqual(text); } }; @@ -35,6 +40,7 @@ describe('BreadcrumbsComponent', () => { // NOTE: a root breadcrumb is automatically rendered new Breadcrumb('bc 1', 'example.com'), new Breadcrumb('bc 2', 'another.com'), + new Breadcrumb('bc 3', 'another.com') ]), showBreadcrumbs$: observableOf(true), } as BreadcrumbsService; @@ -55,6 +61,7 @@ describe('BreadcrumbsComponent', () => { ], providers: [ { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock }, + { provide: HostWindowService, useValue: new HostWindowServiceStub(WidthCategory.SM) } ], }).compileComponents(); @@ -69,10 +76,12 @@ describe('BreadcrumbsComponent', () => { it('should render the breadcrumbs', () => { const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item')); - expect(breadcrumbs.length).toBe(3); - expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/'); - expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com'); - expectBreadcrumb(breadcrumbs[2].query(By.css('.text-truncate')), 'bc 2', null); + expect(breadcrumbs.length).toBe(5); + expectBreadcrumb(breadcrumbs[0], '...', '/'); + expectBreadcrumb(breadcrumbs[1], 'home.breadcrumbs', '/'); + expectBreadcrumb(breadcrumbs[2], 'bc 1', '/example.com'); + expectBreadcrumb(breadcrumbs[3], 'bc 2', '/another.com'); + expectBreadcrumb(breadcrumbs[4].query(By.css('.text-truncate')), 'bc 3', null); }); }); diff --git a/src/app/breadcrumbs/breadcrumbs.component.ts b/src/app/breadcrumbs/breadcrumbs.component.ts index 248fb446ed7..299c2710a16 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.ts +++ b/src/app/breadcrumbs/breadcrumbs.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; import { Breadcrumb } from './breadcrumb/breadcrumb.model'; import { BreadcrumbsService } from './breadcrumbs.service'; import { Observable } from 'rxjs'; +import {HostWindowService, WidthCategory} from '../shared/host-window.service'; /** * Component representing the breadcrumbs of a page @@ -9,10 +10,16 @@ import { Observable } from 'rxjs'; @Component({ selector: 'ds-breadcrumbs', templateUrl: './breadcrumbs.component.html', - styleUrls: ['./breadcrumbs.component.scss'] + styleUrls: ['./breadcrumbs.component.scss'], }) export class BreadcrumbsComponent { + public isMobile$: Observable; + + /** + * Observable of max mobile width + */ + maxMobileWidth = WidthCategory.SM; /** * Observable of the list of breadcrumbs for this page */ @@ -25,9 +32,13 @@ export class BreadcrumbsComponent { constructor( private breadcrumbsService: BreadcrumbsService, + public windowService: HostWindowService ) { this.breadcrumbs$ = breadcrumbsService.breadcrumbs$; this.showBreadcrumbs$ = breadcrumbsService.showBreadcrumbs$; } + ngOnInit(): void { + this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth); + } } diff --git a/src/app/root.module.ts b/src/app/root.module.ts index a8af0ef5b5f..ffb6b627738 100644 --- a/src/app/root.module.ts +++ b/src/app/root.module.ts @@ -44,6 +44,8 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone import { PageErrorComponent } from './page-error/page-error.component'; import { ContextHelpToggleComponent } from './header/context-help-toggle/context-help-toggle.component'; import { SystemWideAlertModule } from './system-wide-alert/system-wide-alert.module'; +import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; + const IMPORTS = [ CommonModule, @@ -51,6 +53,8 @@ const IMPORTS = [ NavbarModule, SystemWideAlertModule, NgbModule, + NgbDropdownModule, + NgbTooltipModule ]; const PROVIDERS = [ diff --git a/src/app/shared/testing/test-module.ts b/src/app/shared/testing/test-module.ts index 85fa295dc22..c2bdf31b895 100644 --- a/src/app/shared/testing/test-module.ts +++ b/src/app/shared/testing/test-module.ts @@ -27,7 +27,8 @@ import { BrowserOnlyMockPipe } from './browser-only-mock.pipe'; ], exports: [ QueryParamsDirectiveStub, - RouterLinkDirectiveStub + RouterLinkDirectiveStub, + NgComponentOutletDirectiveStub ], schemas: [ CUSTOM_ELEMENTS_SCHEMA