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

Infinite Scroll + List View + Cover Upload Redesign (#1319)

Browse source 
* Started with the redesign of the cover image chooser redesign to be less click intensive for volume/chapter images.

Made some headings bold in card detail drawer.

* Tweaked the styles

* Moved where the info cards show

* Added an ability to open a page settings drawer

* Cleaned up some old code that isn't needed anymore.

* Started implementing a list view. Refactored some title code to a dedicated component

* List view implemented but way too many API calls. Either need caching or adjusting the SeriesDetail api.

* Fixed a bug where if the progress bar didn't render on a card item while a download was in progress, the download indicator would be removed.

* Large refactor to move a lot of the needed fields to the chapter and volume dtos for series detail. All fields are noted when only used in series detail.

* Implemented cards for other tabs (except related)

* Fixed the unit test which needed a mocked reader service call.

* More cleanup around age rating and removing old code from the refactor. Commented out sorting till i feel motivated to work on that.

* Some cleanup and restored cards as initial layout. Time to test this out and see if there is value add.

* Added ability for Chapters tab to show the volume chapters belong to (if applicable)

* Adding style fixes

* Cover image updates, don't allow the first image (which is what is currently set) to respond to cover changes.

Hide the ID field on list item for series detail.

* Refactored the title for list item to be injectable

* Cleaned up the selection code to make it less finicky on mobile when tap scrolling.

* Refactored chapter tab to show volume as well on list view.

* Ensure word count shows for Volumes

* Started adding virtual scrolling, pushing up so Robbie can mess around

* Started adding virtual scrolling, pushing up so Robbie can mess around

* Fixed a bug where all chapters would come under specials

* Show title data as accent if set.

* Style fixes for virtual scroller

* Restyling scroll

* Implemented a way to show storyline with virtual scrolling

* Show Word Count for chapters and cleaned up some logics.

* I might have card layout working with virtual scroll code.

* Some cleanup to hide more system like properties from info bar on series detail page. Fixed some missing time estimate info on storyline chapters.

* Fixed a regression on series service when I integrated VolumeTitle.

* Refactored read time to the backend. Added WordCount to the volume itself so we don't need to calculate on frontend. When asking to analyze files from a series, force the calculation.

* Fixed SeriesDetail api code

* Fixed up the code in the drawer to better update list/card mode

* Basic infinite scroll implemented, however due to how we are updating the list to render, we are re-rending cards that haven't been touched.

* Updated how we render and layout data for infinite scroll on library detail. It's almost there.

* Started laying foundation for loading pages backwards.

Removed lazy loading of images since we are now using virtual paging.

* Hooked in some basic code to allow user to load a prev page with infinite scroll.

* Fixed up series detail api and undid the non-lazy loaded images.

Changed the router to help with this infinite loading on Firefox issue.

* Fixed up some naming issues with Series Detail and added a new test.

* This is an infinite scroll without pagination implementation. It is not fully done, but off to a good start. Virtual scroller with jump bar is working pretty well, def needs more polishing and tweaking. There are hacks in this implementation that need to be revisited.

* Refactored code so that we don't use any pagination and load all results by default.

* Misc code cleanup from build warnings.

* Cleaned up some logic for how to display titles in list view.

* More title cleanup for specials

* Hooked up page layout to user preferences and renamed an existing user pref name to match the dto.

* Swapped out everything but storyline with virtual-scroller over CDK

* Removed CDK from series detail.

* Default value for migration on page layout

* Updating card layout for library detail page

* fixing height for mobile

* Moved scrollbar

* Tweaked some styling for layouts when there is no data

* Refactored the series cards into their own component to make it re-usable.

* More tweaks on series info cards layout and enhanced a few pages with trackby functions.

* Removed some dead code

* Added download on series detail to actionables to fit in with new scroll strategy.

* Fixed language not being updated and sent to the backend for series update.

* Fixed a bad migration (if you ran any prior migration in this branch, you need to undo before you use this commit)

* Adding sticky tabs

* fixed mobile gap on sticky tab

* Enhanced the card title for books to show number up front.

* Adjusted the gutters on admin dashboard

* Removed debug code

* Removing duplicate book title

* Cleaned up old references to cdk scroller

* Implemented a basic jump bar scaling algorithm. Not perfect, but works pretty well.

* Code smells

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joseph Milazzo 2022-06-13 16:37:49 -05:00 • committed by GitHub
parent f0f0e23e88
commit bbc48a5f5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
122 changed files with 7863 additions and 2097 deletions
Download patch file Download diff file Expand all files Collapse all files

5
UI/Web/src/app/shared/_services/filter-utilities.service.ts
View file

@ -71,10 +71,11 @@ export class FilterUtilitiesService {
/**
* Will fetch current page from route if present
* @param ActivatedRouteSnapshot to fetch page from. Must be from component else may get stale data
* @param itemsPerPage If you want pagination, pass non-zero number
* @returns A default pagination object
*/
pagination(snapshot: ActivatedRouteSnapshot): Pagination {
return {currentPage: parseInt(snapshot.queryParamMap.get('page') || '1', 10), itemsPerPage: 30, totalItems: 0, totalPages: 1};
pagination(snapshot: ActivatedRouteSnapshot, itemsPerPage: number = 0): Pagination {
return {currentPage: parseInt(snapshot.queryParamMap.get('page') || '1', 10), itemsPerPage, totalItems: 0, totalPages: 1};
}

19
UI/Web/src/app/shared/circular-loader/circular-loader.component.html
View file

@ -1,18 +1,3 @@
<!-- <div class="circular">
<div class="inner"></div>
<div class="number">
<span class="visually-hidden">{{currentValue}}%</span>
<i class="fa fa-angle-double-down" style="font-size: 36px;" aria-hidden="true"></i>
</div>
<div class="circle">
<div class="bar left" #left>
<div class="progress"></div>
</div>
<div class="bar right" #right>
<div class="progress"></div>
</div>
</div>
</div> -->
<ng-container *ngIf="currentValue > 0">
<div class="number">
@ -28,11 +13,11 @@
[backgroundPadding]="0"
outerStrokeLinecap="butt"
[outerStrokeColor]="'#4ac694'"
[innerStrokeColor]="'transparent'"
[innerStrokeColor]="innerStrokeColor"
titleFontSize= "24"
unitsFontSize= "24"
[showSubtitle] = "false"
[animation]="true"
[animation]="animation"
[animationDuration]="300"
[startFromZero]="false"
[responsive]="true"

6
UI/Web/src/app/shared/circular-loader/circular-loader.component.ts
View file

@ -1,4 +1,4 @@
import { Component, ElementRef, Input, OnChanges, OnInit, Renderer2, ViewChild } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-circular-loader',
@ -9,8 +9,10 @@ export class CircularLoaderComponent implements OnInit {
@Input() currentValue: number = 0;
@Input() maxValue: number = 0;
@Input() animation: boolean = true;
@Input() innerStrokeColor: string = 'transparent';
constructor(private renderer: Renderer2) { }
constructor() { }
ngOnInit(): void {
}

4
UI/Web/src/app/shared/image/image.component.html
View file

@ -1,3 +1,5 @@
<img #img class="lazyload" [src]="imageService.placeholderImage" [attr.data-src]="imageUrl"
(error)="imageService.updateErroredImage($event)"
aria-hidden="true">
aria-hidden="true">
<!-- TODO: Need to think about how to not lazyload but also handle broken images-->
<!-- <img #img [src]="imageUrl" aria-hidden="true"> -->

3
UI/Web/src/app/shared/image/image.component.scss
View file

@ -1,3 +1,4 @@
img {
width: 100%;
}
}

39
UI/Web/src/app/shared/image/image.component.ts
View file

@ -1,4 +1,4 @@
import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
import { Component, ElementRef, Input, OnChanges, OnDestroy, Renderer2, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CoverUpdateEvent } from 'src/app/_models/events/cover-update-event';
@ -39,6 +39,10 @@ export class ImageComponent implements OnChanges, OnDestroy {
* Border Radius of the image. If not defined, will not be applied
*/
@Input() borderRadius: string = '';
/**
* If the image component should respond to cover updates
*/
@Input() processEvents: boolean = true;
@ViewChild('img', {static: true}) imgElem!: ElementRef<HTMLImageElement>;
@ -46,27 +50,28 @@ export class ImageComponent implements OnChanges, OnDestroy {
constructor(public imageService: ImageService, private renderer: Renderer2, private hubService: MessageHubService) {
this.hubService.messages$.pipe(takeUntil(this.onDestroy)).subscribe(res => {
if (res.event === EVENTS.CoverUpdate) {
const updateEvent = res.payload as CoverUpdateEvent;
if (this.imageUrl === undefined || this.imageUrl === null || this.imageUrl === '') return;
const enityType = this.imageService.getEntityTypeFromUrl(this.imageUrl);
if (enityType === updateEvent.entityType) {
const tokens = this.imageUrl.split('?')[1].split('&');
if (!this.processEvents) return;
if (res.event === EVENTS.CoverUpdate) {
const updateEvent = res.payload as CoverUpdateEvent;
if (this.imageUrl === undefined || this.imageUrl === null || this.imageUrl === '') return;
const enityType = this.imageService.getEntityTypeFromUrl(this.imageUrl);
if (enityType === updateEvent.entityType) {
const tokens = this.imageUrl.split('?')[1].split('&');
//...seriesId=123&random=
let id = tokens[0].replace(enityType + 'Id=', '');
if (id.includes('&')) {
id = id.split('&')[0];
}
if (id === (updateEvent.id + '')) {
this.imageUrl = this.imageService.randomize(this.imageUrl);
}
//...seriesId=123&random=
let id = tokens[0].replace(enityType + 'Id=', '');
if (id.includes('&')) {
id = id.split('&')[0];
}
if (id === (updateEvent.id + '')) {
this.imageUrl = this.imageService.randomize(this.imageUrl);
}
}
});
}
});
}
ngOnChanges(changes: SimpleChanges): void {
ngOnChanges(): void {
if (this.width != '') {
this.renderer.setStyle(this.imgElem.nativeElement, 'width', this.width);
}