AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX Overhaul Part 2 (#3112)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-08-16 19:37:12 -05:00 • committed by GitHub
parent 0247bc5012
commit 3d8aa2ad24
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
192 changed files with 14808 additions and 1874 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.html
View file

@ -25,7 +25,7 @@
[freeMode]="true">
@for(item of items; track item; let i = $index;) {
<ng-template swiperSlide>
<ng-container swiperSlide [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
<ng-container [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
</ng-template>
} @empty {
@if (alwaysShow) {

28
UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.ts
View file

@ -1,19 +1,31 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChild,
EventEmitter,
inject,
Input,
Output,
TemplateRef
} from '@angular/core';
import { Swiper, SwiperEvents } from 'swiper/types';
import { SwiperModule } from 'swiper/angular';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import {TranslocoDirective} from "@jsverse/transloco";
@Component({
selector: 'app-carousel-reel',
templateUrl: './carousel-reel.component.html',
styleUrls: ['./carousel-reel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
selector: 'app-carousel-reel',
templateUrl: './carousel-reel.component.html',
styleUrls: ['./carousel-reel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgClass, SwiperModule, NgTemplateOutlet, TranslocoDirective]
})
export class CarouselReelComponent {
private readonly cdRef = inject(ChangeDetectorRef);
@ContentChild('carouselItem') carouselItemTemplate!: TemplateRef<any>;
@ContentChild('promptToAdd') promptToAddTemplate!: TemplateRef<any>;
@Input() items: any[] = [];
@ -32,10 +44,6 @@ export class CarouselReelComponent {
swiper: Swiper | undefined;
constructor(private readonly cdRef: ChangeDetectorRef) {}
nextPage() {
if (this.swiper) {
if (this.swiper.isEnd) return;