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

Last batch of bugfixes (#1262)

Browse source 
* Refactored code to show action bar instead of drawer in immersive mode

* Card grid

* adding margin for pagination gap

* Fixed a rare routing case that wouldn't redirect

* Fixed a bug where series detail would show blank filtering

* Fixing image scaling and library card spacing

* Refactored some methods to be static

* Adding card grid to series detail

* Fixed a bug with webtoon going to non-webtoon mode, resulting in black screen.

* Ensure emails are trimmed when trying to invite.

* Don't show More In if there is only 1 item in there on library recommended tab

* Fixed some bugs around locking metadata fields where the correct param wasn't being sent to backend.

* Added some UI error messaging when the email doesn't match the confirm-email (or rather any email in the system).

* Fixed some pages where actions weren't working (library detail) and removed some actionable buttons where they didn't make sense

* Refactored the series detail to use Robbie's new grid system.

* some styling fixes

* Styling fixes

- Removing select border gap
- fixing switches on lite theme
- fixing search result text-light

* better css var naming

* changing search lite text color override

* fixing as per feedback

* Removing boolean from being visible in bookreader

* Fixed some bugs in bulk operations not being visible on light/eink screens. Added --bulk-selection-highlight-text-color and --bulk-selection-text-color.

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joseph Milazzo 2022-05-18 19:31:49 -05:00 • committed by GitHub
parent 6f23a3bc6d
commit 1961b41268
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 195 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

6
UI/Web/src/app/manga-reader/manga-reader.component.html
View file

@ -41,13 +41,13 @@
<div class="pagination-area">
<!-- Pagination controls and screen hints-->
<div class="{{readerMode === ReaderMode.LeftRight ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? WindowHeight: 25 + '%')}">
<div class="{{readerMode === ReaderMode.LeftRight ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? ImageHeight: 25 + '%')}">
<div *ngIf="showClickOverlay">
<i class="fa fa-angle-{{readingDirection === ReadingDirection.RightToLeft ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'left' : 'up'}}"
title="Previous Page" aria-hidden="true"></i>
</div>
</div>
<div class="{{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? WindowHeight: 25 + '%')}">
<div class="{{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? ImageHeight: 25 + '%')}">
<div *ngIf="showClickOverlay">
<i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
title="Next Page" aria-hidden="true"></i>
@ -60,7 +60,7 @@
'fit-to-height-double-offset': this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.HEIGHT && ShouldRenderDoublePage,
'original-double-offset' : this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.ORIGINAL && ShouldRenderDoublePage,
'reverse': ShouldRenderReverseDouble}">
<img [src]="canvasImage.src" id="image-1"
<img #image [src]="canvasImage.src" id="image-1"
class="{{getFittingOptionClass()}} {{readerMode === ReaderMode.LeftRight || readerMode === ReaderMode.UpDown ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}">
<ng-container *ngIf="ShouldRenderDoublePage && (this.pageNum + 1 <= maxPages - 1 && this.pageNum > 0)">

16
UI/Web/src/app/manga-reader/manga-reader.component.ts
View file

@ -118,6 +118,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('reader') reader!: ElementRef;
@ViewChild('readingArea') readingArea!: ElementRef;
@ViewChild('content') canvas: ElementRef | undefined;
@ViewChild('image') image!: ElementRef;
private ctx!: CanvasRenderingContext2D;
/**
* Used to render a page on the canvas or in the image tag. This Image element is prefetched by the cachedImages buffer
@ -286,6 +287,9 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
return this.readingArea?.nativeElement.scrollHeight + 'px';
}
get ImageHeight() {
return this.image?.nativeElement.height + 'px';
}
get splitIconClass() {
if (this.isSplitLeftToRight()) {
@ -438,6 +442,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
this.ctx = this.canvas.nativeElement.getContext('2d', { alpha: false });
this.canvasImage.onload = () => this.renderPage();
this.getWindowDimensions();
}
ngOnDestroy() {
@ -1050,6 +1055,8 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
|| document.documentElement.clientHeight
|| document.body.clientHeight;
console.log(windowHeight);
const needsSplitting = this.isCoverImage();
let newScale = this.generalSettingsForm.get('fittingOption')?.value;
const widthRatio = windowWidth / (this.canvasImage.width / (needsSplitting ? 2 : 1));
@ -1106,8 +1113,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
loadPage() {
if (!this.canvas || !this.ctx) { return; }
this.isLoading = true;
this.canvasImage = this.cachedImages.current();
@ -1128,6 +1133,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.renderPage();
}
this.prefetch();
this.isLoading = false;
}
setReadingDirection() {
@ -1264,6 +1270,12 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
break;
}
// We must set this here because loadPage from render doesn't call if we aren't page splitting
if (this.readerMode !== ReaderMode.Webtoon) {
this.canvasImage = this.cachedImages.current();
this.isLoading = true;
}
this.updateForm();
this.render();