diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html index b16f46f082e..c57011929d2 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.html +++ b/src/app/breadcrumbs/breadcrumbs.component.html @@ -1,22 +1,85 @@ - @if ((showBreadcrumbs$ | async)) { + - } + + + +
    + +

  1. {{'/'}}

    2. + +
+ + + +
    + + + + +
+ -
  • {{text | translate}}
    • +
  • +
    + + {{text | translate}} + +
    +
    • -
  • {{text | translate}}
    • +
  • +
    +
    {{text | translate}}
    +
    +
    • -     + +
  • +
    +
    +
    + +
      +
    • +
      + + + +
      + +
      +       +       +
      +
      • +
    +
    +
    +
    +
    • +     + + + + +
    + +
    +     +     +     + \ No newline at end of file diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss index 7da9ad02d8c..1ad1fa92d1d 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.scss +++ b/src/app/breadcrumbs/breadcrumbs.component.scss @@ -38,3 +38,18 @@ li.breadcrumb-item.active { display: block; content: quote("•") !important; } + +.breadcrumb-action { + font-size: 17px; + padding-right: 5px; + padding-bottom: 5px; +} + +.breadcrumb-separator { + padding-right: 5px; + padding-left: 5px; +} + +.dropdown-toggle::after { + display: none !important; +} \ No newline at end of file diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts index ef5aaf36853..4af6c953d60 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts +++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts @@ -14,6 +14,7 @@ import { } from '@ngx-translate/core'; import { of } from 'rxjs'; +import { HostWindowService } from '../shared/host-window.service'; import { VarDirective } from '../shared/utils/var.directive'; import { BreadcrumbsComponent } from './breadcrumbs.component'; import { BreadcrumbsService } from './breadcrumbs.service'; @@ -46,6 +47,10 @@ describe('BreadcrumbsComponent', () => { showBreadcrumbs$: of(true), } as BreadcrumbsService; + const hostWindowServiceMock = { + isUpTo: (width: number) => true, + }; + TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([]), @@ -60,8 +65,11 @@ describe('BreadcrumbsComponent', () => { ], providers: [ { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock }, + { provide: HostWindowService, useValue: hostWindowServiceMock }, ], - }).compileComponents(); + }); + + TestBed.compileComponents(); fixture = TestBed.createComponent(BreadcrumbsComponent); component = fixture.componentInstance; diff --git a/src/app/breadcrumbs/breadcrumbs.component.ts b/src/app/breadcrumbs/breadcrumbs.component.ts index bc8dbf61cab..d36ffa23200 100644 --- a/src/app/breadcrumbs/breadcrumbs.component.ts +++ b/src/app/breadcrumbs/breadcrumbs.component.ts @@ -2,13 +2,20 @@ import { AsyncPipe, NgTemplateOutlet, } from '@angular/common'; -import { Component } from '@angular/core'; +import { + Component, + OnInit, +} from '@angular/core'; import { RouterLink } from '@angular/router'; import { Breadcrumb } from '@dspace/core/breadcrumbs/models/breadcrumb.model'; import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import { TranslateModule } from '@ngx-translate/core'; import { Observable } from 'rxjs'; +import { + HostWindowService, + WidthCategory, +} from '../shared/host-window.service'; import { VarDirective } from '../shared/utils/var.directive'; import { BreadcrumbsService } from './breadcrumbs.service'; @@ -28,7 +35,14 @@ import { BreadcrumbsService } from './breadcrumbs.service'; VarDirective, ], }) -export class BreadcrumbsComponent { +export class BreadcrumbsComponent implements OnInit { + + public isMobile$: Observable; + + /** + * Observable of max mobile width + */ + maxMobileWidth = WidthCategory.SM; /** * Observable of the list of breadcrumbs for this page @@ -42,9 +56,14 @@ 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 cd0d17da7e3..8236bcffd76 100644 --- a/src/app/root.module.ts +++ b/src/app/root.module.ts @@ -1,6 +1,10 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { + NgbDropdownModule, + NgbModule, + NgbTooltipModule, +} from '@ng-bootstrap/ng-bootstrap'; import { EAGER_THEME_COMPONENTS } from '../themes/eager-themes-components'; import { AdminSidebarComponent } from './admin/admin-sidebar/admin-sidebar.component'; @@ -33,6 +37,8 @@ import { IdleModalComponent } from './shared/idle-modal/idle-modal.component'; const IMPORTS = [ CommonModule, NgbModule, + NgbDropdownModule, + NgbTooltipModule, ]; const PROVIDERS = [ diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts index 7db690eb1ee..a2f99547f3a 100644 --- a/src/app/shared/host-window.service.ts +++ b/src/app/shared/host-window.service.ts @@ -150,3 +150,5 @@ export class HostWindowService { ); } } +export { WidthCategory }; + diff --git a/src/app/shared/test-module.ts b/src/app/shared/test-module.ts index 222b58b79d8..337469f2448 100644 --- a/src/app/shared/test-module.ts +++ b/src/app/shared/test-module.ts @@ -29,6 +29,7 @@ import { MySimpleItemActionComponent } from '../item-page/edit-item-page/simple- QueryParamsDirectiveStub, RouterLinkDirectiveStub, BrowserOnlyMockPipe, + NgComponentOutletDirectiveStub, ], schemas: [ CUSTOM_ELEMENTS_SCHEMA,