mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
Merged PR 803: #2120 Dashboard Coveranzeige scrollbar
#2120 Dashboard Coveranzeige scrollbar Related work items: #2120
This commit is contained in:
Andreas Schickinger
committed by
Nino Righi
Nino Righi
parent
f19df87ba0
commit
79a62b4db9
@@ -1,51 +1,23 @@
|
||||
<div class="feed-container">
|
||||
<lib-icon
|
||||
class="recommendation-icon"
|
||||
name="recommendation_tag"
|
||||
alt="recommendation icon"
|
||||
type="png"
|
||||
height="48px"
|
||||
*ngIf="card.showRecommIcon"
|
||||
></lib-icon>
|
||||
<div class="info">
|
||||
<div class="title">{{ card.cardTitle }}</div>
|
||||
<div class="heading">{{ card.headline }}</div>
|
||||
<div class="text" [innerHtml]="card.text | safeHtml"></div>
|
||||
</div>
|
||||
<div class="books" #books (scroll)="scrollHandler($event)">
|
||||
<div
|
||||
class="book-layer-fade-start-plain"
|
||||
(mouseover)="showBackIcon()"
|
||||
(mouseleave)="hideBackIcon($event)"
|
||||
*ngIf="showBackContainer && !showBack"
|
||||
></div>
|
||||
<div
|
||||
class="book-layer-fade-start"
|
||||
(mouseover)="showBackIcon()"
|
||||
(mouseleave)="hideBackIcon($event)"
|
||||
*ngIf="showBackContainer && showBack"
|
||||
></div>
|
||||
<div class="icon-start" (mouseleave)="hideBackIcon($event)" *ngIf="showBack && showBackContainer">
|
||||
<lib-icon class="icon-start" width="50px" name="tab_Arrow_3" type="png" (click)="scrollBack($event)"></lib-icon>
|
||||
</div>
|
||||
<ng-container *ngFor="let book of card.books; let last = last">
|
||||
<img [src]="book.ean | bookImageUrl | async" class="book-image" alt="book image" (click)="details(book.ean, book.name)" />
|
||||
<div class="last" *ngIf="last"></div>
|
||||
</ng-container>
|
||||
<lib-icon
|
||||
class="recommendation-icon"
|
||||
name="recommendation_tag"
|
||||
alt="recommendation icon"
|
||||
type="png"
|
||||
height="48px"
|
||||
*ngIf="card.showRecommIcon"
|
||||
></lib-icon>
|
||||
<div
|
||||
class="book-layer-fade-plain"
|
||||
(mouseover)="showFowardIcon()"
|
||||
(mouseleave)="hideFowardIcon($event)"
|
||||
*ngIf="!showForward && showForwarContainer"
|
||||
></div>
|
||||
<div
|
||||
class="book-layer-fade"
|
||||
(mouseover)="showFowardIcon()"
|
||||
(mouseleave)="hideFowardIcon($event)"
|
||||
*ngIf="showForward && showForwarContainer"
|
||||
></div>
|
||||
<div class="icon" (mouseleave)="hideFowardIcon($event)" *ngIf="showForward && showForwarContainer">
|
||||
<lib-icon class="icon" width="50px" name="tab_Arrow_2" type="png" (click)="scrollForward($event)"></lib-icon>
|
||||
</div>
|
||||
<div class="books" #books>
|
||||
<ui-slider>
|
||||
<ng-container *ngFor="let book of card.books; let last = last">
|
||||
<img [src]="book.ean | bookImageUrl | async" class="book-image" alt="book image" (click)="details(book.ean, book.name)" />
|
||||
<div class="last" *ngIf="last"></div>
|
||||
</ng-container>
|
||||
</ui-slider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -66,87 +66,17 @@
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.book-layer-fade {
|
||||
position: absolute;
|
||||
min-height: 155px;
|
||||
min-width: 55px;
|
||||
z-index: 20;
|
||||
right: 0px;
|
||||
opacity: 0.7;
|
||||
background-color: white;
|
||||
box-shadow: -8px 0px 14px 3px white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.book-layer-fade-plain {
|
||||
position: absolute;
|
||||
min-height: 155px;
|
||||
min-width: 55px;
|
||||
z-index: 20;
|
||||
right: 0px;
|
||||
opacity: 0.7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.book-layer-fade-start {
|
||||
position: absolute;
|
||||
min-height: 155px;
|
||||
min-width: 55px;
|
||||
z-index: 20;
|
||||
left: 55%;
|
||||
opacity: 0.7;
|
||||
background-color: white;
|
||||
box-shadow: 3px 0 14px 8px white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.book-layer-fade-start-plain {
|
||||
position: absolute;
|
||||
min-height: 155px;
|
||||
min-width: 55px;
|
||||
z-index: 20;
|
||||
left: 55%;
|
||||
opacity: 0.7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-start {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 55%;
|
||||
z-index: 30;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recommendation-icon {
|
||||
position: absolute;
|
||||
z-index: 25;
|
||||
right: 30px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.last {
|
||||
display: block;
|
||||
height: 140px;
|
||||
min-width: 53px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.icon-start {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.recommendation-icon {
|
||||
position: absolute;
|
||||
z-index: 25;
|
||||
right: 30px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, OnInit, Input, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, ElementRef, HostListener } from '@angular/core';
|
||||
import { Component, Input, ChangeDetectionStrategy, ViewChild, ElementRef } from '@angular/core';
|
||||
import { FeedCard } from '../../../../core/models/feed-card.model';
|
||||
import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
|
||||
import { AddBreadcrumb, PopBreadcrumbsBeforeCurrent } from '../../../../core/store/actions/breadcrumb.actions';
|
||||
@@ -8,7 +8,6 @@ import { Router } from '@angular/router';
|
||||
import { Process } from '../../../../core/models/process.model';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ProcessSelectors } from '../../../../core/store/selectors/process.selectors';
|
||||
import { WindowRef } from 'apps/sales/src/app/core/services/window-ref.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-book-card',
|
||||
@@ -16,33 +15,12 @@ import { WindowRef } from 'apps/sales/src/app/core/services/window-ref.service';
|
||||
styleUrls: ['./book-card.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class BookCardComponent implements OnInit {
|
||||
export class BookCardComponent {
|
||||
@ViewChild('books', { read: ElementRef, static: true }) public books: ElementRef<any>;
|
||||
@Select(ProcessSelectors.getProcesses) processes$: Observable<Process[]>;
|
||||
@Input() card: FeedCard;
|
||||
isIPad: boolean;
|
||||
private iPadDetected = false;
|
||||
private iPadEventRecieved = false;
|
||||
showForward = false;
|
||||
showForwarContainer = true;
|
||||
showBack = false;
|
||||
showBackContainer = false;
|
||||
offset: number;
|
||||
|
||||
constructor(private store: Store, private router: Router, private cdrf: ChangeDetectorRef, private windowRef: WindowRef) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.isIPad = this.isIPadEnv();
|
||||
if (this.isIPad) {
|
||||
this.showForwarContainer = false;
|
||||
this.showBackContainer = false;
|
||||
}
|
||||
if (this.card && this.card.books && this.card.books.length < 4) {
|
||||
this.showForwarContainer = false;
|
||||
this.showBackContainer = false;
|
||||
}
|
||||
this.offset = Math.ceil(this.books.nativeElement.clientWidth / 2);
|
||||
}
|
||||
constructor(private store: Store, private router: Router) {}
|
||||
|
||||
details(ean: string, name: string) {
|
||||
const processExist = this.store.selectSnapshot(ProcessSelectors.getProcesses).length > 0;
|
||||
@@ -75,91 +53,4 @@ export class BookCardComponent implements OnInit {
|
||||
};
|
||||
this.store.dispatch(new AddProcess(newProcess));
|
||||
}
|
||||
|
||||
showFowardIcon() {
|
||||
if (this.card && this.card.books && this.card.books.length < 4) {
|
||||
return;
|
||||
}
|
||||
this.showForward = true;
|
||||
this.cdrf.detectChanges();
|
||||
}
|
||||
|
||||
hideFowardIcon(event) {
|
||||
const e = event.toElement || event.relatedTarget;
|
||||
if (e && e.classList && (e.classList[0] === 'icon' || e.classList[0] === 'ng-star-inserted')) {
|
||||
return;
|
||||
}
|
||||
this.showForward = false;
|
||||
}
|
||||
|
||||
showBackIcon() {
|
||||
this.showBack = true;
|
||||
}
|
||||
|
||||
hideBackIcon(event) {
|
||||
const e = event.toElement || event.relatedTarget;
|
||||
if (e && e.classList && (e.classList[0] === 'icon' || e.classList[0] === 'ng-star-inserted')) {
|
||||
return;
|
||||
}
|
||||
this.showBack = false;
|
||||
}
|
||||
|
||||
scrollForward(event) {
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
const newScrollLeftPosition = this.books.nativeElement.scrollLeft + 102 * 3;
|
||||
const scrollLeft =
|
||||
newScrollLeftPosition + this.offset * 2 > this.books.nativeElement.scrollWidth
|
||||
? this.books.nativeElement.scrollWidth
|
||||
: newScrollLeftPosition;
|
||||
this.books.nativeElement.scrollTo({
|
||||
left: scrollLeft,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
this.showForwarContainer = scrollLeft + this.offset * 2 < this.books.nativeElement.scrollWidth;
|
||||
this.showBackContainer = true;
|
||||
this.showBack = false;
|
||||
}
|
||||
}
|
||||
|
||||
scrollBack(event) {
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
const newScrollLeftPosition = this.books.nativeElement.scrollLeft - 102 * 3;
|
||||
const scrollLeft = newScrollLeftPosition + this.offset * 2 < 0 ? this.books.nativeElement.scrollWidth : newScrollLeftPosition;
|
||||
this.books.nativeElement.scrollTo({
|
||||
left: scrollLeft,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
this.showBackContainer = this.books.nativeElement.scrollLeft - this.offset > 0;
|
||||
this.showForwarContainer = true;
|
||||
this.showForward = false;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:scroll', ['$event'])
|
||||
scrollHandler(event) {
|
||||
event.stopPropagation();
|
||||
if (this.isIPad) {
|
||||
return;
|
||||
}
|
||||
if (this.books.nativeElement.scrollLeft > 0) {
|
||||
this.showBackContainer = true;
|
||||
} else {
|
||||
this.showBackContainer = false;
|
||||
}
|
||||
this.showBack = false;
|
||||
this.showForwarContainer = this.books.nativeElement.scrollLeft + this.offset * 2 < this.books.nativeElement.scrollWidth;
|
||||
this.showForward = false;
|
||||
}
|
||||
|
||||
isIPadEnv() {
|
||||
const navigator = this.windowRef.nativeWindow.navigator as Navigator;
|
||||
const standalone = (navigator as any).standalone,
|
||||
userAgent = navigator.userAgent.toLowerCase(),
|
||||
ios = /iphone|ipod|ipad/.test(userAgent);
|
||||
|
||||
this.iPadDetected = ios && !standalone;
|
||||
return this.iPadDetected || this.iPadEventRecieved;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,8 +10,9 @@ import { SharedModule } from '../../shared/shared.module';
|
||||
import { LoadingModule, IconModule } from '@libs/ui';
|
||||
import { KpiCardComponent } from './components/kpi-card/kpi-card.component';
|
||||
import { UiProgressModule } from 'apps/ui/progress/src/lib/ui-progress.module';
|
||||
import { UiSliderModule } from '@ui/slider';
|
||||
@NgModule({
|
||||
imports: [CommonModule, SharedModule, LoadingModule, IconModule, UiProgressModule],
|
||||
imports: [CommonModule, SharedModule, LoadingModule, IconModule, UiProgressModule, UiSliderModule],
|
||||
exports: [DashboardComponent],
|
||||
declarations: [
|
||||
DashboardComponent,
|
||||
|
||||
Reference in New Issue
Block a user