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

Release Shakeout (#1266)

Browse source 
* Fixed an issue with fit to screen where spread images would fail to generate a paging area long enough.

* Fixed pagination placement on original scaling

* Fixed an issue with webtoon reader not reporting scroll events due to a fix from manga reader.

* Fixing select on black book-reader theme

* Fixing canvas split centering

* Fixed a bug with white mode in book reader not rendering correctly. When bookmarking new pages after previously have viewing bookmarks for a series, ensure we clear out the temp cache else your new files wont be visible till next day.

* Use grid on related tab

* Clear bookmarks was not hooked up. Bulk add to collection didn't have label hidden

* Fixed bug where filter might stay open between pages

* Fixed typo on relationship for Adaptation

* Contains was missing from series relation modal

* Tweaked some methods and wording on reading list page

* Cleaned up the phrasing when we abort a scan.

* Fixed issue where typeahead wasn't reopening and it wasn't filtering selected options

* Fixed some typeahead bugs and decreased interval for docker health check

* Cleaned up and fixed some logic with receiving cover image update events

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joseph Milazzo 2022-05-20 17:50:17 -05:00 • committed by GitHub
parent 49d8a7c6ca
commit a062341564
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 90 additions and 144 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

@ -31,9 +31,9 @@
</div>
</ng-container>
<div (click)="toggleMenu()" class="reading-area" [ngStyle]="{'background-color': backgroundColor}" #readingArea>
<div (click)="toggleMenu()" class="reading-area" [ngStyle]="{'background-color': backgroundColor, 'height': readerMode === ReaderMode.Webtoon ? 'inherit' : 'calc(var(--vh)*100)'}" #readingArea>
<ng-container *ngIf="readerMode !== ReaderMode.Webtoon; else webtoon">
<div [ngClass]="{'d-none': !renderWithCanvas }">
<div class="image-container" [ngClass]="{'d-none': !renderWithCanvas }">
<canvas #content class="{{getFittingOptionClass()}}"
ondragstart="return false;" onselectstart="return false;">
</canvas>
@ -47,7 +47,7 @@
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 ? ImageHeight: 25 + '%')}">
<div class="{{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? ImageHeight: 25 + '%'), 'left': (readerMode === ReaderMode.LeftRight && (this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.ORIGINAL) ? ImageWidth: 'inherit')}">
<div *ngIf="showClickOverlay">
<i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
title="Next Page" aria-hidden="true"></i>

13
UI/Web/src/app/manga-reader/manga-reader.component.scss
View file

@ -20,7 +20,7 @@ img {
.reading-area {
position: relative;
overflow: auto;
height: calc(var(--vh)*100);
//height: calc(var(--vh)*100); // this needs to be applied on the DOM because it breaks infinite scroller
}
.image-container {
@ -248,6 +248,9 @@ img {
width: 100%;
}
//$pagination-bg: rgba(0, 0, 0, 0);
$pagination-bg: rgba(0, 0, 255, 0.4);
.pagination-area {
cursor: pointer;
z-index: 2;
@ -262,7 +265,7 @@ img {
right: 0px;
top: 0px;
width: $side-width;
background: rgba(0, 0, 0, 0);
background: $pagination-bg;
}
.top {
@ -270,7 +273,7 @@ img {
right: 0px;
top: 0px;
width: 100%;
background: rgba(0, 0, 0, 0);
background: $pagination-bg;
}
.left {
@ -278,7 +281,7 @@ img {
left: 0px;
top: 0px;
width: $side-width;
background: rgba(0, 0, 0, 0);
background: $pagination-bg;
}
.bottom {
@ -286,7 +289,7 @@ img {
left: 0px;
bottom: 0px;
width: 100%;
background: rgba(0, 0, 0, 0);
background: $pagination-bg;
}
}

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

@ -283,12 +283,24 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
return this.bookmarks.hasOwnProperty(this.pageNum);
}
get WindowWidth() {
return this.readingArea?.nativeElement.scrollWidth + 'px';
}
get WindowHeight() {
return this.readingArea?.nativeElement.scrollHeight + 'px';
}
get ImageWidth() {
return this.image?.nativeElement.width + 'px';
}
get ImageHeight() {
return this.image?.nativeElement.height + 'px';
// If we are a cover image and implied fit to screen, then we need to take screen height rather than image height
if (this.isCoverImage()) {
return this.WindowHeight;
}
return this.image?.nativeElement.height + 'px';
}
get splitIconClass() {
@ -1018,7 +1030,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (!this.ctx || !this.canvas) { return; }
this.canvasImage.onload = null;
console.log('canvasImage: ', this.canvasImage?.height);
this.setCanvasSize();
@ -1055,8 +1066,6 @@ 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));