Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Tidying up (#1944)

Browse Source 
* Fixing nav logo

* Adding emulate book for single renderer

* enabling control

* forcing hardware acceleration on infinite scroller

* Fixing review comments

- Refactoring bookshadow to use shared css
- Adding issue comment for hardware acceleration hack

* Fixing bookshadow happening on first and last page
This commit is contained in:
Robbie Davis 2023-04-26 10:48:23 -04:00 committed by GitHub
parent d14e8823c8
commit f88f62afcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
UI/Web/src/_manga-reader-common.scss
View File

@ -71,7 +71,7 @@ img {
}
::ng-deep .image-container.book-shadow.center-double:before {
::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before {
content: '';
position: absolute;
top: 0;
@ -85,7 +85,7 @@ img {
}
@supports (-moz-appearance:none) {
::ng-deep .image-container.book-shadow.center-double:before {
::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before {
box-shadow:
0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%),
0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),

1
UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts
View File

@ -132,6 +132,7 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer
if (value[0] && value[1].fitting === FITTING_OPTION.WIDTH) return 'fit-to-width-double-offset';
if (value[0] && value[1].fitting === FITTING_OPTION.HEIGHT) return 'fit-to-height-double-offset';
if (value[0] && value[1].fitting === FITTING_OPTION.ORIGINAL) return 'original-double-offset';
if (this.mangaReaderService.isWidePage(this.pageNum) ) return 'double-offset';
return '';
}),
filter(_ => this.isValid()),

1
UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts
View File

@ -133,6 +133,7 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR
if (value[0] && value[1].fitting === FITTING_OPTION.WIDTH) return 'fit-to-width-double-offset';
if (value[0] && value[1].fitting === FITTING_OPTION.HEIGHT) return 'fit-to-height-double-offset';
if (value[0] && value[1].fitting === FITTING_OPTION.ORIGINAL) return 'original-double-offset';
if (this.mangaReaderService.isWidePage(this.pageNum) ) return 'double-offset';
return '';
}),
filter(_ => this.isValid()),

7
UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
View File

@ -31,7 +31,12 @@ img, .full-width {
height: auto;
}
// This is to force hardware acceleration to help address https://github.com/Kareadita/Kavita/issues/1848
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@keyframes move-up-down {
0%, 100% {

2
UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts
View File

@ -527,7 +527,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.generalSettingsForm.get('pageSplitOption')?.setValue(this.user.preferences.pageSplitOption);
this.generalSettingsForm.get('pageSplitOption')?.enable();
this.generalSettingsForm.get('fittingOption')?.enable();
this.generalSettingsForm.get('emulateBook')?.disable();
this.generalSettingsForm.get('emulateBook')?.enable();
} else {
this.generalSettingsForm.get('pageSplitOption')?.setValue(PageSplitOption.NoSplit);
this.generalSettingsForm.get('pageSplitOption')?.disable();

2
UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html
View File

@ -1,5 +1,5 @@
<ng-container *ngIf="isValid() && !this.mangaReaderService.shouldSplit(this.currentImage, this.pageSplit)">
<div class="image-container {{imageFitClass$ | async}}"
<div class="image-container {{imageFitClass$ | async}} {{emulateBookClass$ | async}}"
[style.filter]="(darkenss$ | async) ?? '' | safeStyle" [style.height]="(imageContainerHeight$ | async) ?? '' | safeStyle">
<ng-container *ngIf="currentImage">
<img alt=" "

10
UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.ts
View File

@ -31,6 +31,7 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer
showClickOverlayClass$!: Observable<string>;
readerModeClass$!: Observable<string>;
darkenss$: Observable<string> = of('brightness(100%)');
emulateBookClass$!: Observable<string>;
currentImage!: HTMLImageElement;
layoutMode: LayoutMode = LayoutMode.Single;
pageSplit: PageSplitOption = PageSplitOption.FitSplit;
@ -54,6 +55,13 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer
takeUntil(this.onDestroy)
);
this.emulateBookClass$ = this.readerSettings$.pipe(
map(data => data.emulateBook),
map(enabled => enabled ? 'book-shadow' : ''),
filter(_ => this.isValid()),
takeUntil(this.onDestroy)
);
this.imageContainerHeight$ = this.readerSettings$.pipe(
map(values => values.fitting),
map(mode => {
@ -119,7 +127,7 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer
this.mangaReaderService.shouldRenderAsFitSplit(this.pageSplit)
) {
// Rewriting to fit to width for this cover image
return FITTING_OPTION.WIDTH + ' fit-to-screen';
return FITTING_OPTION.WIDTH + ' fit-to-screen wide';
}
return fit;

2
UI/Web/src/app/nav/_components/nav-header/nav-header.component.html
View File

@ -3,7 +3,7 @@
<a class="visually-hidden-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">Skip to main content</a>
<a class="side-nav-toggle" *ngIf="navService?.sideNavVisibility$ | async" (click)="hideSideNav()"><i class="fas fa-bars"></i></a>
<a class="navbar-brand dark-exempt" routerLink="/libraries" routerLinkActive="active">
<img width="28px" height="28px" class="logo" src="../../assets/images/logo.png" alt="kavita icon" aria-hidden="true"/>
<img width="28px" height="28px" class="logo" src="assets/images/logo.png" alt="kavita icon" aria-hidden="true"/>
<span class="d-none d-md-inline logo"> Kavita</span>
</a>
<ul class="navbar-nav col me-auto">