Skip to content
Snippets Groups Projects
Commit ecc28fd9 authored by Kawtar Laariche's avatar Kawtar Laariche
Browse files

#19: add breadcrumb navigation component

parent 1005b4af
No related branches found
No related tags found
No related merge requests found
<ul class="c-breadcrumb">
<li>
<a (click)="onFirstNavigationLabelClick()">{{ firstNavigationLabel }}</a>
</li>
<li>
<a (click)="onSecondNavigationClick()">{{ secondNavigationLabel }}</a>
</li>
<li>
<span
class="md-breadcrumb-item"
matTooltip="{{ solution?.name?.toString()?.split('_')?.join(' ') }}"
>{{ solution?.name?.toString()?.split("_")?.join(" ") }}</span
>
</li>
<li>
<gp-solution-id [solutionId]="solution.solutionId"></gp-solution-id>
</li>
</ul>
.c-breadcrumb {
list-style-type: none;
clear: both;
padding: 0;
margin: 0;
}
.c-breadcrumb li:first-child {
margin-left: 0;
padding-left: 0;
}
.c-breadcrumb li {
display: inline-block;
padding: 0 5px;
}
.c-breadcrumb li:first-child:before {
content: "";
}
.c-breadcrumb li:before {
content: "/";
position: relative;
left: -6px;
}
.c-breadcrumb li a {
color: #2e2f2f;
text-decoration: none;
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
.c-breadcrumb li span.md-breadcrumb-item {
max-width: 300px;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
float: right;
}
.c-breadcrumb li:last-child,
.c-breadcrumb li:last-child a {
font-weight: normal;
color: #8f8f8f;
font-size: 13px;
}
.c-breadcrumb li {
display: inline-block;
padding: 0 5px;
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BreadcrumbNavigationComponent } from './breadcrumb-navigation.component';
describe('BreadcrumbNavigationComponent', () => {
let component: BreadcrumbNavigationComponent;
let fixture: ComponentFixture<BreadcrumbNavigationComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [BreadcrumbNavigationComponent]
})
.compileComponents();
fixture = TestBed.createComponent(BreadcrumbNavigationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SolutionIdComponent } from '../solution-id/solution-id.component';
import { PublicSolutionDetailsModel } from '../../models';
import { MatTooltipModule } from '@angular/material/tooltip';
@Component({
selector: 'gp-breadcrumb-navigation',
standalone: true,
imports: [CommonModule, SolutionIdComponent, MatTooltipModule],
templateUrl: './breadcrumb-navigation.component.html',
styleUrl: './breadcrumb-navigation.component.scss',
})
export class BreadcrumbNavigationComponent {
@Input() firstNavigationLabel!: string;
@Input() secondNavigationLabel!: string;
@Input() solution!: PublicSolutionDetailsModel;
@Output() firstNavigationClicked = new EventEmitter<void>();
@Output() secondNavigationClicked = new EventEmitter<void>();
onFirstNavigationLabelClick(): void {
this.firstNavigationClicked.emit();
}
onSecondNavigationClick(): void {
this.secondNavigationClicked.emit();
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment