Misc UI Fixes (#1450)

* Fixed collection cover images not rendering

* added a try/catch on sending email, so we fail silently if it doesn't send.

* Fixed Go Back not returning to last scroll position due to layoutmode change resetting, despite nothing changing.

* Fixed a bug where when turning between pages on default mode, the height calculations could get skewed.

* Fixed a missing case for card item where it wouldn't show tooltip title for series.
This commit is contained in:
Joseph Milazzo 2022-08-19 10:23:12 -05:00 committed by GitHub
parent df094f58c9
commit 0c9c20a094
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 16 deletions

View File

@ -480,6 +480,8 @@ namespace API.Controllers
var host = _environment.IsDevelopment() ? "localhost:4200" : Request.Host.ToString();
var accessible = await _emailService.CheckIfAccessible(host);
if (accessible)
{
try
{
await _emailService.SendConfirmationEmail(new ConfirmationEmailDto()
{
@ -487,6 +489,7 @@ namespace API.Controllers
InvitingUser = adminUser.UserName,
ServerConfirmationLink = emailLink
});
} catch(Exception) {/* Swallow exception */}
}
user.ConfirmationToken = token;

View File

@ -35,8 +35,14 @@ enum TabID {
}
interface HistoryPoint {
/**
* Page Number
*/
page: number;
scrollOffset: number;
/**
* XPath to scroll to
*/
scrollPart: string;
}
const TOP_OFFSET = -50 * 1.5; // px the sticky header takes up // TODO: Do I need this or can I change it with new fixed top height
@ -372,7 +378,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
get PageHeightForPagination() {
if (this.layoutMode === BookPageLayoutMode.Default) {
return (this.readingSectionElemRef?.nativeElement?.scrollHeight || 0) - ((this.topOffset * (this.immersiveMode ? 0 : 1)) * 2) + 'px';
return (this.readingHtml?.nativeElement?.scrollHeight || 0) - ((this.topOffset * (this.immersiveMode ? 0 : 1)) * 2) + 'px';
}
if (this.immersiveMode) return this.windowHeight + 'px';
@ -714,7 +720,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (!e.target.attributes.hasOwnProperty('kavita-page')) { return; }
var page = parseInt(e.target.attributes['kavita-page'].value, 10);
if (this.adhocPageHistory.peek()?.page !== this.pageNum) {
this.adhocPageHistory.push({page: this.pageNum, scrollOffset: window.pageYOffset});
this.adhocPageHistory.push({page: this.pageNum, scrollPart: this.lastSeenScrollPartPath});
}
var partValue = e.target.attributes.hasOwnProperty('kavita-part') ? e.target.attributes['kavita-part'].value : undefined;
@ -862,7 +868,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
const page = this.adhocPageHistory.pop();
if (page !== undefined) {
this.setPageNum(page.page);
this.loadPage(undefined, page.scrollOffset);
this.loadPage(page.scrollPart);
}
}
}
@ -1139,7 +1145,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (this.layoutMode === BookPageLayoutMode.Default) {
const fromTopOffset = element.getBoundingClientRect().top + window.pageYOffset + TOP_OFFSET;
// We need to use a delay as webkit browsers (aka apple devices) don't always have the document rendered by this point
setTimeout(() => this.scrollService.scrollTo(fromTopOffset, this.reader.nativeElement), 10); // BUG: This is broken
setTimeout(() => this.scrollService.scrollTo(fromTopOffset, this.reader.nativeElement), 10);
} else {
setTimeout(() => (element as Element).scrollIntoView({'block': 'start', 'inline': 'start'}));
}
@ -1207,6 +1213,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
updateLayoutMode(mode: BookPageLayoutMode) {
const layoutModeChanged = mode !== this.layoutMode;
this.layoutMode = mode;
this.cdRef.markForCheck();
@ -1224,7 +1231,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
});
// When I switch layout, I might need to resume the progress point.
if (mode === BookPageLayoutMode.Default) {
if (mode === BookPageLayoutMode.Default && layoutModeChanged) {
const lastSelector = this.lastSeenScrollPartPath;
setTimeout(() => this.scrollTo(lastSelector));
}

View File

@ -1,9 +1,8 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { Observable, Subject } from 'rxjs';
import { filter, finalize, map, take, takeUntil, takeWhile } from 'rxjs/operators';
import { Download } from 'src/app/shared/_models/download';
import { DownloadEntityType, DownloadEvent, DownloadService } from 'src/app/shared/_services/download.service';
import { filter, map, takeUntil } from 'rxjs/operators';
import { DownloadEvent, DownloadService } from 'src/app/shared/_services/download.service';
import { UtilityService } from 'src/app/shared/_services/utility.service';
import { Chapter } from 'src/app/_models/chapter';
import { CollectionTag } from 'src/app/_models/collection-tag';
@ -166,6 +165,8 @@ export class CardItemComponent implements OnInit, OnDestroy {
if (this.tooltipTitle === '') {
this.tooltipTitle = vol.name;
}
} else if (this.utilityService.isSeries(this.entity)) {
this.tooltipTitle = this.title || (this.utilityService.asSeries(this.entity).name);
}
this.accountService.currentUser$.pipe(takeUntil(this.onDestroy)).subscribe(user => {
this.user = user;

View File

@ -11,6 +11,6 @@
[jumpBarKeys]="jumpbarKeys"
>
<ng-template #cardItem let-item let-position="idx">
<app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="item.coverImage" (clicked)="loadCollection(item)"></app-card-item>
<app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="imageSerivce.getCollectionCoverImage(item.id)" (clicked)="loadCollection(item)"></app-card-item>
</ng-template>
</app-card-detail-layout>

View File

@ -9,6 +9,7 @@ import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
import { Tag } from 'src/app/_models/tag';
import { ActionItem, ActionFactoryService, Action } from 'src/app/_services/action-factory.service';
import { CollectionTagService } from 'src/app/_services/collection-tag.service';
import { ImageService } from 'src/app/_services/image.service';
@Component({
@ -29,7 +30,7 @@ export class AllCollectionsComponent implements OnInit {
constructor(private collectionService: CollectionTagService, private router: Router,
private actionFactoryService: ActionFactoryService, private modalService: NgbModal,
private titleService: Title, private utilityService: UtilityService,
private readonly cdRef: ChangeDetectorRef) {
private readonly cdRef: ChangeDetectorRef, public imageSerivce: ImageService) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.titleService.setTitle('Kavita - Collections');
}