sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

[HIMA-75] created breadcrumb animation

Browse Source
This commit is contained in:
Peter Skrlj
2019-02-13 20:53:09 +01:00
parent c6e63eb84a
commit f742d4acc7
3 changed files with 96 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/app/components/breadcrumbs/breadcrumbs.component.html
View File

@@ -1,29 +1,33 @@
<div class="breadacrumb-grid" [ngClass]="{'grid-with-arrow': !backArrow}">
<app-back-arrow *ngIf="backArrow" (back)="goBack(breadcrumbs[breadcrumbs.length - 2])" class="align-right back-arrow"></app-back-arrow>
<div class="align-center breadcrumb-container" [ngClass]="{'with-arrow': backArrow}">
<ng-container *ngIf="bredcrumbDots">
<span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 4])">...
<img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
</span>
<span class="breadcrumb"
(click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 3])">{{ breadcrumbs[breadcrumbs.length - 3].name }}
<img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
</span>
<span class="breadcrumb"
(click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 2])">{{ breadcrumbs[breadcrumbs.length - 2].name }}
<img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
</span>
<span class="breadcrumb selected"
(click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 1])">{{ breadcrumbs[breadcrumbs.length - 1].name }}</span>
</ng-container>
<ng-container *ngIf="!bredcrumbDots">
<span *ngFor="let breadcrumb of breadcrumbs; let i = index" class="breadcrumb"
(click)="selectBreadcrumb(breadcrumb)"
[ngClass]="{ 'selected': breadcrumb.path.indexOf(currentRoute) >= 0 }">{{ breadcrumb.name }}
<img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next"
*ngIf="breadcrumbs.length > 1 && breadcrumbs.length !== (i + 1)">
</span>
</ng-container>
</div>
</div>
<div class="breadacrumb-grid" [ngClass]="{ 'grid-with-arrow': !backArrow }">
<!-- <app-back-arrow (back)="addOne()"></app-back-arrow> TESTING ANIMATION PURPOSES-->
<app-back-arrow
*ngIf="backArrow"
(back)="goBack(breadcrumbs[breadcrumbs.length - 2])"
class="align-right back-arrow"
></app-back-arrow>
<div
class="align-center breadcrumb-container"
[ngClass]="{ 'with-arrow': backArrow }"
>
<span
*ngFor="let breadcrumb of breadcrumbs; let i = index"
class="breadcrumb hide"
(click)="selectBreadcrumb(breadcrumb)"
[ngClass]="{ selected: breadcrumb.path.indexOf(currentRoute) >= 0 }"
>
<span
class="breadcrumb more"
*ngIf="i == breadcrumbs.length - 3 && breadcrumbs.length > 3"
(click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 4])"
>...
</span>
<img
class="next"
src="../../../assets/images/Arrow_Next.svg"
alt="next"
*ngIf="breadcrumbs.length > 1 && i != 0 && i !== breadcrumbs.length - 4"
/>
<span>{{ breadcrumb.name }}</span>
</span>
</div>
</div>

69
src/app/components/breadcrumbs/breadcrumbs.component.scss
View File

@@ -1,41 +1,76 @@
@import "../../../assets/scss/variables";
@import '../../../assets/scss/variables';
.breadacrumb-grid {
display: grid;
grid-template-columns: min-content auto;
display: grid;
grid-template-columns: min-content auto;
}
.grid-with-arrow {
grid-template-columns: auto;
grid-template-columns: auto;
}
.breadcrumb-container {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
}
.with-arrow {
width: 86.5%;
width: 86.5%;
}
.breadcrumb {
outline: none;
font-size: 16px;
color: #5a728a;
line-height: 21px;
padding: 10px 0;
outline: none;
font-size: 16px;
color: #5a728a;
line-height: 21px;
padding: 10px 0;
}
.hide {
display: none;
opacity: 0;
&:nth-last-child(4) {
/*declarations*/
display: block;
overflow: hidden;
opacity: 0;
flex: 0.0001;
animation: fadeSlide 400ms;
}
&:nth-last-child(-n + 3) {
/*declarations*/
opacity: 1;
display: block;
}
}
@keyframes fadeSlide {
0% {
opacity: 1;
transform: translateX(80px);
flex: 0.5;
overflow: hidden;
}
50% {
opacity: 0;
}
100% {
transform: translateX(0);
flex: 0.0001;
}
}
.back-arrow {
padding: 10px 0;
padding: 10px 0;
}
.next {
padding: 0 7px;
padding: 0 7px;
}
.selected {
font-weight: bold;
}
font-weight: bold;
}

21
src/app/components/breadcrumbs/breadcrumbs.component.ts
View File

@@ -13,22 +13,18 @@ import { Router } from '@angular/router';
styleUrls: ['./breadcrumbs.component.scss']
})
export class BreadcrumbsComponent implements OnInit {
@Select(ProcessState.getProcesses) processes$: Observable<Process[]>;
breadcrumbs: Breadcrumb[] = [];
bredcrumbDots = false;
// breadcrumbs: Breadcrumb[] = ['one'].map(i => ({ name: i, path: './i' }));
currentRoute = '';
get backArrow() {
return this.router.url.substring(0, 16) === '/product-details';
}
constructor(
private store: Store,
private router: Router
) {
this.processes$.subscribe(
(data: Process[]) => this.getBreadcrumbsFromCurentProcess(data)
constructor(private store: Store, private router: Router) {
this.processes$.subscribe((data: Process[]) =>
this.getBreadcrumbsFromCurentProcess(data)
);
}
@@ -37,7 +33,6 @@ export class BreadcrumbsComponent implements OnInit {
if (currentProcess) {
this.currentRoute = `${currentProcess.currentRoute}`;
this.breadcrumbs = currentProcess.breadcrumbs;
this.bredcrumbDots = currentProcess.breadcrumbs.length > 3;
}
}
@@ -51,6 +46,12 @@ export class BreadcrumbsComponent implements OnInit {
this.router.navigate(['/search-results#start']);
}
ngOnInit() {
ngOnInit() {}
addOne() {
this.breadcrumbs.push({
name: 'test' + this.breadcrumbs.length,
path: './i'
});
}
}