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

Next Estimated Chapter (#2342)

Browse source
This commit is contained in:
Joe Milazzo 2023-10-22 10:44:26 -05:00 • committed by GitHub
parent ca5afe94d3
commit de9b09c71f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 433 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/cards/card-item/card-item.component.html
View file

@ -34,7 +34,7 @@
<span class="badge bg-primary">{{count}}</span>
</div>
<div class="card-overlay"></div>
<div class="overlay-information" *ngIf="overlayInformation !== '' || overlayInformation !== undefined">
<div class="overlay-information {{centerOverlay ? 'overlay-information--centered' : ''}}" *ngIf="overlayInformation !== '' || overlayInformation !== undefined">
<div class="position-relative">
<span class="card-title library mx-auto" style="width: auto;" [ngbTooltip]="overlayInformation" placement="top">{{overlayInformation}}</span>
</div>

15
UI/Web/src/app/cards/card-item/card-item.component.scss
View file

@ -77,7 +77,7 @@ $image-width: 160px;
position: absolute;
top: 0;
width: 158px;
}
.not-read-badge {
@ -111,6 +111,8 @@ $image-width: 160px;
}
}
.overlay-information {
position: absolute;
top: 5px;
@ -118,13 +120,18 @@ $image-width: 160px;
border-radius: 15px;
padding: 0 10px;
background-color: var(--card-bg-color);
&.overlay-information--centered {
top: 95px;
left: 36px;
}
}
.overlay {
height: $image-height;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
&:hover {
visibility: visible;
@ -138,11 +145,11 @@ $image-width: 160px;
z-index: 100;
}
}
.overlay-item {
visibility: hidden;
}
z-index: 10;
.count {

31
UI/Web/src/app/cards/card-item/card-item.component.ts
View file

@ -39,8 +39,10 @@ import {MangaFormatIconPipe} from "../../pipe/manga-format-icon.pipe";
import {SentenceCasePipe} from "../../pipe/sentence-case.pipe";
import {CommonModule} from "@angular/common";
import {RouterLink} from "@angular/router";
import {TranslocoModule} from "@ngneat/transloco";
import {translate, TranslocoModule} from "@ngneat/transloco";
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
import {NextExpectedChapter} from "../../_models/series-detail/next-expected-chapter";
import {UtcToLocalTimePipe} from "../../pipe/utc-to-local-time.pipe";
@Component({
selector: 'app-card-item',
@ -96,7 +98,7 @@ export class CardItemComponent implements OnInit {
/**
* This is the entity we are representing. It will be returned if an action is executed.
*/
@Input({required: true}) entity!: Series | Volume | Chapter | CollectionTag | PageBookmark | RecentlyAddedItem;
@Input({required: true}) entity!: Series | Volume | Chapter | CollectionTag | PageBookmark | RecentlyAddedItem | NextExpectedChapter;
/**
* If the entity is selected or not.
*/
@ -117,6 +119,10 @@ export class CardItemComponent implements OnInit {
* Additional information to show on the overlay area. Will always render.
*/
@Input() overlayInformation: string = '';
/**
* If overlay is enabled, should the text be centered or not
*/
@Input() centerOverlay = false;
/**
* Event emitted when item is clicked
*/
@ -210,8 +216,29 @@ export class CardItemComponent implements OnInit {
}
} else if (this.utilityService.isSeries(this.entity)) {
this.tooltipTitle = this.title || (this.utilityService.asSeries(this.entity).name);
} else if (this.entity.hasOwnProperty('expectedDate')) {
this.suppressArchiveWarning = true;
this.imageUrl = '';
const nextDate = (this.entity as NextExpectedChapter);
// if (nextDate.volumeNumber > 0 && nextDate.chapterNumber === 0) {
// this.overlayInformation = 'Volume ' + nextDate.volumeNumber;
//
// } else {
// this.overlayInformation = 'Chapter ' + nextDate.chapterNumber;
// }
this.overlayInformation = nextDate.title;
this.centerOverlay = true;
if (nextDate.expectedDate) {
const utcPipe = new UtcToLocalTimePipe();
this.title = utcPipe.transform(nextDate.expectedDate);
}
this.cdRef.markForCheck();
}
this.filterSendTo();
this.accountService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(user => {
this.user = user;