diff --git a/API.Tests/Services/ScannerServiceTests.cs b/API.Tests/Services/ScannerServiceTests.cs index 14626e2dc..26ba00497 100644 --- a/API.Tests/Services/ScannerServiceTests.cs +++ b/API.Tests/Services/ScannerServiceTests.cs @@ -259,7 +259,7 @@ public class ScannerServiceTests : AbstractDbTest comicInfo.AppendLine(""); // People Tags - string[] people = { /* Your list of people here */ }; + string[] people = { "Joe Shmo", "Tommy Two Hands"}; string[] genres = { /* Your list of genres here */ }; void AddRandomTag(string tagName, string[] choices) diff --git a/API/Controllers/SettingsController.cs b/API/Controllers/SettingsController.cs index e7429a9b2..8ed9fdd1c 100644 --- a/API/Controllers/SettingsController.cs +++ b/API/Controllers/SettingsController.cs @@ -164,8 +164,6 @@ public class SettingsController : BaseApiController foreach (var setting in currentSettings) { - UpdateSchedulingSettings(setting, updateSettingsDto); - if (setting.Key == ServerSettingKey.OnDeckProgressDays && updateSettingsDto.OnDeckProgressDays + string.Empty != setting.Value) { @@ -205,6 +203,8 @@ public class SettingsController : BaseApiController _unitOfWork.SettingsRepository.Update(setting); } + UpdateSchedulingSettings(setting, updateSettingsDto); + UpdateEmailSettings(setting, updateSettingsDto); @@ -293,14 +293,6 @@ public class SettingsController : BaseApiController { setting.Value = updateSettingsDto.AllowStatCollection + string.Empty; _unitOfWork.SettingsRepository.Update(setting); - if (!updateSettingsDto.AllowStatCollection) - { - _taskScheduler.CancelStatsTasks(); - } - else - { - await _taskScheduler.ScheduleStatsTasks(); - } } if (setting.Key == ServerSettingKey.TotalBackups && @@ -341,20 +333,27 @@ public class SettingsController : BaseApiController { await _unitOfWork.CommitAsync(); + if (!updateSettingsDto.AllowStatCollection) + { + _taskScheduler.CancelStatsTasks(); + } + else + { + await _taskScheduler.ScheduleStatsTasks(); + } + if (updateBookmarks) { - _directoryService.ExistOrCreate(bookmarkDirectory); - _directoryService.CopyDirectoryToDirectory(originalBookmarkDirectory, bookmarkDirectory); - _directoryService.ClearAndDeleteDirectory(originalBookmarkDirectory); + BackgroundJob.Enqueue(() => UpdateBookmarkDirectory(originalBookmarkDirectory, bookmarkDirectory)); } if (updateSettingsDto.EnableFolderWatching) { - await _libraryWatcher.StartWatching(); + BackgroundJob.Enqueue(() => _libraryWatcher.StartWatching()); } else { - _libraryWatcher.StopWatching(); + BackgroundJob.Enqueue(() => _libraryWatcher.StopWatching()); } } catch (Exception ex) @@ -366,10 +365,18 @@ public class SettingsController : BaseApiController _logger.LogInformation("Server Settings updated"); - await _taskScheduler.ScheduleTasks(); + BackgroundJob.Enqueue(() => _taskScheduler.ScheduleTasks()); + return Ok(updateSettingsDto); } + public void UpdateBookmarkDirectory(string originalBookmarkDirectory, string bookmarkDirectory) + { + _directoryService.ExistOrCreate(bookmarkDirectory); + _directoryService.CopyDirectoryToDirectory(originalBookmarkDirectory, bookmarkDirectory); + _directoryService.ClearAndDeleteDirectory(originalBookmarkDirectory); + } + private void UpdateSchedulingSettings(ServerSetting setting, ServerSettingDto updateSettingsDto) { if (setting.Key == ServerSettingKey.TaskBackup && updateSettingsDto.TaskBackup != setting.Value) diff --git a/API/Services/SeriesService.cs b/API/Services/SeriesService.cs index a6b3cb347..e040d212b 100644 --- a/API/Services/SeriesService.cs +++ b/API/Services/SeriesService.cs @@ -175,6 +175,10 @@ public class SeriesService : ISeriesService series.Metadata.Genres.Add(genre); }, () => series.Metadata.GenresLocked = true); } + else + { + series.Metadata.Genres = new List(); + } if (updateSeriesMetadataDto.SeriesMetadata?.Tags is {Count: > 0}) @@ -188,6 +192,10 @@ public class SeriesService : ISeriesService series.Metadata.Tags.Add(tag); }, () => series.Metadata.TagsLocked = true); } + else + { + series.Metadata.Tags = new List(); + } if (updateSeriesMetadataDto.SeriesMetadata != null) { diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5ccd27541..9085e9444 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,7 +3,7 @@ We're always looking for people to help make Kavita even better, there are a number of ways to contribute. ## Documentation ## -Setup guides, FAQ, the more information we have on the [wiki](https://wiki.kavitareader.com/) the better. +Setup guides, FAQ, the more information we have on the [wiki](https://wiki.kavitareader.com/contributing) the better. ## Development ## diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index 88b97ffd1..5da0a9434 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -1,3 +1,5 @@ +@import './theme/variables'; + .title { color: white; font-weight: bold; @@ -142,7 +144,7 @@ object-fit: contain; } -@media (max-width: 768px) { +@media (max-width: $grid-breakpoints-lg) { .carousel-tabs-container { mask-image: linear-gradient(transparent, black 0%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%); @@ -155,7 +157,7 @@ } /* col-lg */ -@media screen and (max-width: 991px) { +@media (max-width: $grid-breakpoints-lg) { .image-container.mobile-bg{ width: 100vw; top: calc(var(--nav-offset) - 20px); @@ -194,17 +196,9 @@ font-size: 0.9rem; } -@media (max-width: 768px) { +@media (max-width: $grid-breakpoints-lg) { .carousel-tabs-container { mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%); } } - -.under-image { - background-color: var(--breadcrumb-bg-color); - color: white; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - text-align: center; -} diff --git a/UI/Web/src/app/_models/chapter.ts b/UI/Web/src/app/_models/chapter.ts index 3e21b37a6..e52efd202 100644 --- a/UI/Web/src/app/_models/chapter.ts +++ b/UI/Web/src/app/_models/chapter.ts @@ -7,6 +7,7 @@ import {Person} from "./metadata/person"; import {IHasCast} from "./common/i-has-cast"; import {IHasReadingTime} from "./common/i-has-reading-time"; import {IHasCover} from "./common/i-has-cover"; +import {IHasProgress} from "./common/i-has-progress"; export const LooseLeafOrDefaultNumber = -100000; export const SpecialVolumeNumber = 100000; @@ -14,7 +15,7 @@ export const SpecialVolumeNumber = 100000; /** * Chapter table object. This does not have metadata on it, use ChapterMetadata which is the same Chapter but with those fields. */ -export interface Chapter extends IHasCast, IHasReadingTime, IHasCover { +export interface Chapter extends IHasCast, IHasReadingTime, IHasCover, IHasProgress { id: number; range: string; /** diff --git a/UI/Web/src/app/_models/common/i-has-progress.ts b/UI/Web/src/app/_models/common/i-has-progress.ts new file mode 100644 index 000000000..4605dc0a8 --- /dev/null +++ b/UI/Web/src/app/_models/common/i-has-progress.ts @@ -0,0 +1,4 @@ +export interface IHasProgress { + pages: number; + pagesRead: number; +} diff --git a/UI/Web/src/app/_models/series.ts b/UI/Web/src/app/_models/series.ts index ef460a9f5..8d4f773bb 100644 --- a/UI/Web/src/app/_models/series.ts +++ b/UI/Web/src/app/_models/series.ts @@ -2,8 +2,9 @@ import { MangaFormat } from './manga-format'; import { Volume } from './volume'; import {IHasCover} from "./common/i-has-cover"; import {IHasReadingTime} from "./common/i-has-reading-time"; +import {IHasProgress} from "./common/i-has-progress"; -export interface Series extends IHasCover, IHasReadingTime { +export interface Series extends IHasCover, IHasReadingTime, IHasProgress { id: number; name: string; /** diff --git a/UI/Web/src/app/_models/volume.ts b/UI/Web/src/app/_models/volume.ts index 56ca68ceb..fa4a7989b 100644 --- a/UI/Web/src/app/_models/volume.ts +++ b/UI/Web/src/app/_models/volume.ts @@ -2,8 +2,9 @@ import { Chapter } from './chapter'; import { HourEstimateRange } from './series-detail/hour-estimate-range'; import {IHasCover} from "./common/i-has-cover"; import {IHasReadingTime} from "./common/i-has-reading-time"; +import {IHasProgress} from "./common/i-has-progress"; -export interface Volume extends IHasCover, IHasReadingTime { +export interface Volume extends IHasCover, IHasReadingTime, IHasProgress { id: number; minNumber: number; maxNumber: number; diff --git a/UI/Web/src/app/_services/nav.service.ts b/UI/Web/src/app/_services/nav.service.ts index 0578fc500..2bec44706 100644 --- a/UI/Web/src/app/_services/nav.service.ts +++ b/UI/Web/src/app/_services/nav.service.ts @@ -102,6 +102,7 @@ export class NavService { this.renderer.setStyle(bodyElem, 'margin-top', 'var(--nav-offset)'); this.renderer.removeStyle(bodyElem, 'scrollbar-gutter'); this.renderer.setStyle(bodyElem, 'height', 'calc(var(--vh)*100 - var(--nav-offset))'); + this.renderer.setStyle(bodyElem, 'overflow', 'hidden'); this.renderer.setStyle(this.document.querySelector('html'), 'height', 'calc(var(--vh)*100 - var(--nav-offset))'); this.navbarVisibleSource.next(true); }, 10); @@ -114,9 +115,10 @@ export class NavService { setTimeout(() => { const bodyElem = this.document.querySelector('body'); this.renderer.removeStyle(bodyElem, 'height'); - this.renderer.removeStyle(this.document.querySelector('html'), 'height'); this.renderer.setStyle(bodyElem, 'margin-top', '0px', RendererStyleFlags2.Important); this.renderer.setStyle(bodyElem, 'scrollbar-gutter', 'initial', RendererStyleFlags2.Important); + this.renderer.removeStyle(this.document.querySelector('html'), 'height'); + this.renderer.setStyle(bodyElem, 'overflow', 'auto'); this.navbarVisibleSource.next(false); }, 10); } diff --git a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts index 2bf7dae4b..8c054c69b 100644 --- a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts +++ b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts @@ -11,7 +11,7 @@ import { import {NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle} from '@ng-bootstrap/ng-bootstrap'; import { AccountService } from 'src/app/_services/account.service'; import { Action, ActionItem } from 'src/app/_services/action-factory.service'; -import {AsyncPipe, CommonModule, NgTemplateOutlet} from "@angular/common"; +import {AsyncPipe, NgTemplateOutlet} from "@angular/common"; import {TranslocoDirective} from "@jsverse/transloco"; import {DynamicListPipe} from "./_pipes/dynamic-list.pipe"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; diff --git a/UI/Web/src/app/_single-module/cover-image/cover-image.component.html b/UI/Web/src/app/_single-module/cover-image/cover-image.component.html new file mode 100644 index 000000000..18a137cfa --- /dev/null +++ b/UI/Web/src/app/_single-module/cover-image/cover-image.component.html @@ -0,0 +1,31 @@ + + @if(mobileSeriesImgBackground === 'true') { + + } @else { + + } +
+
+
+ + +
+ +
+ +
+
+ + @if (entity.pagesRead < entity.pages && entity.pagesRead > 0) { +
+ +
+ @if (continueTitle !== '') { +
+
+ {{t('continue-from', {title: continueTitle})}} +
+
+ } + } + diff --git a/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss b/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss new file mode 100644 index 000000000..d90b194ae --- /dev/null +++ b/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss @@ -0,0 +1,139 @@ +.overlay-information { + position: relative; + top: -364px; + height: 364px; + transition: all 0.2s; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + + &:hover { + cursor: pointer; + background-color: var(--card-overlay-hover-bg-color) !important; + + .overlay-information--centered { + visibility: visible; + } + } + + .overlay-information--centered { + position: absolute; + border-radius: 15px; + background-color: rgba(0, 0, 0, 0.7); + border-radius: 50px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 115; + visibility: hidden; + + &:hover { + background-color: var(--primary-color) !important; + cursor: pointer; + } + + div { + width: 60px; + height: 60px; + i { + font-size: 1.6rem; + line-height: 60px; + width: 100%; + } + } + } +} + +.overlay-information { + position: absolute; + top: 0; + left: 12px; + width: calc(100% - 24px); + height: 100%; + transition: all 0.2s; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + + &:hover { + background-color: var(--card-overlay-hover-bg-color); + cursor: pointer; + } + + .overlay-information--centered { + position: absolute; + border-radius: 15px; + background-color: rgba(0, 0, 0, 0.7); + border-radius: 50px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 115; + + &:hover { + background-color: var(--primary-color) !important; + cursor: pointer; + } + } +} + +.series { + .overlay-information--centered { + div { + height: 32px; + width: 32px; + i { + font-size: 1.4rem; + line-height: 32px; + } + } + } +} + +::ng-deep .image-container app-image img { + border-radius: 4px 4px 0 0; +} + +.progress { + border-radius: 0; +} + +.progress-banner.series { + position: relative; +} + +::ng-deep .progress-banner.series span { + position: absolute; + left: 50%; + transform: translate(-50%, -50%); + color: white; + top: 50%; +} + +.under-image { + position: relative; + + .continue-from { + background-color: var(--breadcrumb-bg-color); + color: white; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + text-align: center; + position: absolute; + width: 100%; + } +} + +@media screen and (max-width: 991px) { + .overlay-information { + visibility: hidden; + .overlay-information--centered { + visibility: hidden !important; + } + } + .progress-banner { + display: none; + } + + .under-image { + display: none; + } +} diff --git a/UI/Web/src/app/_single-module/cover-image/cover-image.component.ts b/UI/Web/src/app/_single-module/cover-image/cover-image.component.ts new file mode 100644 index 000000000..233884223 --- /dev/null +++ b/UI/Web/src/app/_single-module/cover-image/cover-image.component.ts @@ -0,0 +1,36 @@ +import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core'; +import {DecimalPipe, NgClass} from "@angular/common"; +import {TranslocoDirective} from "@jsverse/transloco"; +import {ImageComponent} from "../../shared/image/image.component"; +import {NgbProgressbar, NgbTooltip} from "@ng-bootstrap/ng-bootstrap"; +import {IHasProgress} from "../../_models/common/i-has-progress"; + +/** + * Used for the Series/Volume/Chapter Detail pages + */ +@Component({ + selector: 'app-cover-image', + standalone: true, + imports: [ + NgClass, + TranslocoDirective, + ImageComponent, + NgbProgressbar, + DecimalPipe, + NgbTooltip + ], + templateUrl: './cover-image.component.html', + styleUrl: './cover-image.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class CoverImageComponent { + + @Input({required: true}) coverImage!: string; + @Input({required: true}) entity!: IHasProgress; + @Input() continueTitle: string = ''; + @Output() read = new EventEmitter(); + + mobileSeriesImgBackground = getComputedStyle(document.documentElement) + .getPropertyValue('--mobile-series-img-background').trim(); + +} diff --git a/UI/Web/src/app/_single-module/details-tab/details-tab.component.html b/UI/Web/src/app/_single-module/details-tab/details-tab.component.html index bed1498e2..6eb3a9c9a 100644 --- a/UI/Web/src/app/_single-module/details-tab/details-tab.component.html +++ b/UI/Web/src/app/_single-module/details-tab/details-tab.component.html @@ -1,23 +1,21 @@
- - - - {{item.title}} - +

{{t('genres-title')}}

+ + + {{item.title}} - +
- - - - {{item.title}} - +

{{t('tags-title')}}

+ + + {{item.title}} - +
diff --git a/UI/Web/src/app/_single-module/details-tab/details-tab.component.ts b/UI/Web/src/app/_single-module/details-tab/details-tab.component.ts index d93619700..39b3b1fe5 100644 --- a/UI/Web/src/app/_single-module/details-tab/details-tab.component.ts +++ b/UI/Web/src/app/_single-module/details-tab/details-tab.component.ts @@ -14,18 +14,20 @@ import {TagBadgeComponent, TagBadgeCursor} from "../../shared/tag-badge/tag-badg import {ImageComponent} from "../../shared/image/image.component"; import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe"; import {ImageService} from "../../_services/image.service"; +import {BadgeExpanderComponent} from "../../shared/badge-expander/badge-expander.component"; @Component({ selector: 'app-details-tab', standalone: true, - imports: [ - CarouselReelComponent, - PersonBadgeComponent, - TranslocoDirective, - TagBadgeComponent, - ImageComponent, - SafeHtmlPipe - ], + imports: [ + CarouselReelComponent, + PersonBadgeComponent, + TranslocoDirective, + TagBadgeComponent, + ImageComponent, + SafeHtmlPipe, + BadgeExpanderComponent + ], templateUrl: './details-tab.component.html', styleUrl: './details-tab.component.scss', changeDetection: ChangeDetectionStrategy.OnPush diff --git a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html index 2e05a3d4d..54561a254 100644 --- a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html +++ b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html @@ -553,15 +553,17 @@
} - - - @for (file of chapter.files; track file.id) { -
- {{file.filePath}}•{{file.bytes | bytes}} -
- } - - + @if (accountService.isAdmin$ | async) { + + + @for (file of chapter.files; track file.id) { +
+ {{file.filePath}}•{{file.bytes | bytes}} +
+ } + + + } diff --git a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts index 9f595cd72..5a0b5bac4 100644 --- a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts +++ b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts @@ -28,7 +28,6 @@ import {Language} from "../../_models/metadata/language"; import {Person, PersonRole} from "../../_models/metadata/person"; import {Genre} from "../../_models/metadata/genre"; import {AgeRatingDto} from "../../_models/metadata/age-rating-dto"; -import {SeriesService} from "../../_services/series.service"; import {ImageService} from "../../_services/image.service"; import {UploadService} from "../../_services/upload.service"; import {MetadataService} from "../../_services/metadata.service"; diff --git a/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html b/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html index b3ef54146..c148d959c 100644 --- a/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html +++ b/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html @@ -88,16 +88,17 @@
- - - - @for (file of files; track file.id) { -
- {{file.filePath}}•{{file.bytes | bytes}} -
- } - - + @if (accountService.isAdmin$ | async) { + + + @for (file of files; track file.id) { +
+ {{file.filePath}}•{{file.bytes | bytes}} +
+ } + + + } diff --git a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.ts b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.ts index d1329e0f3..45f9e27bb 100644 --- a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.ts +++ b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.ts @@ -7,7 +7,7 @@ import { ViewContainerRef, ViewEncapsulation } from '@angular/core'; -import {CommonModule, DOCUMENT, NgOptimizedImage} from '@angular/common'; +import {DOCUMENT, NgOptimizedImage} from '@angular/common'; import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; import {ReactiveFormsModule} from "@angular/forms"; import {UserReview} from "../review-card/user-review"; @@ -20,7 +20,7 @@ import {ProviderImagePipe} from "../../_pipes/provider-image.pipe"; @Component({ selector: 'app-review-card-modal', standalone: true, - imports: [CommonModule, ReactiveFormsModule, SpoilerComponent, SafeHtmlPipe, TranslocoDirective, DefaultValuePipe, NgOptimizedImage, ProviderImagePipe], + imports: [ReactiveFormsModule, SpoilerComponent, SafeHtmlPipe, TranslocoDirective, DefaultValuePipe, NgOptimizedImage, ProviderImagePipe], templateUrl: './review-card-modal.component.html', styleUrls: ['./review-card-modal.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/UI/Web/src/app/_single-module/review-card/review-card.component.ts b/UI/Web/src/app/_single-module/review-card/review-card.component.ts index c7ba47ad8..034173f55 100644 --- a/UI/Web/src/app/_single-module/review-card/review-card.component.ts +++ b/UI/Web/src/app/_single-module/review-card/review-card.component.ts @@ -8,13 +8,12 @@ import { OnInit, Output } from '@angular/core'; -import {CommonModule, NgOptimizedImage} from '@angular/common'; +import {NgOptimizedImage} from '@angular/common'; import {UserReview} from "./user-review"; import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; import {ReviewCardModalComponent} from "../review-card-modal/review-card-modal.component"; import {AccountService} from "../../_services/account.service"; import { - ReviewSeriesModalCloseAction, ReviewSeriesModalCloseEvent, ReviewSeriesModalComponent } from "../review-series-modal/review-series-modal.component"; diff --git a/UI/Web/src/app/_single-module/review-series-modal/review-series-modal.component.html b/UI/Web/src/app/_single-module/review-series-modal/review-series-modal.component.html index 90ff4867a..6539a4e41 100644 --- a/UI/Web/src/app/_single-module/review-series-modal/review-series-modal.component.html +++ b/UI/Web/src/app/_single-module/review-series-modal/review-series-modal.component.html @@ -13,14 +13,16 @@ -
- @if (reviewGroup.get('reviewBody')?.errors?.required) { -
{{t('required')}}
- } - @if (reviewGroup.get('reviewBody')?.errors?.minlength) { -
{{t('min-length', {count: minLength})}}
- } -
+ @if (reviewGroup.dirty || reviewGroup.touched) { +
+ @if (reviewGroup.get('reviewBody')?.errors?.required) { +
{{t('required')}}
+ } + @if (reviewGroup.get('reviewBody')?.errors?.minlength) { +
{{t('min-length', {count: minLength})}}
+ } +
+ } diff --git a/UI/Web/src/app/_single-module/review-series-modal/review-series-modal.component.ts b/UI/Web/src/app/_single-module/review-series-modal/review-series-modal.component.ts index 227938b25..3bf9e02a4 100644 --- a/UI/Web/src/app/_single-module/review-series-modal/review-series-modal.component.ts +++ b/UI/Web/src/app/_single-module/review-series-modal/review-series-modal.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - EventEmitter, inject, Input, OnInit @@ -11,7 +10,6 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/ import {NgbActiveModal, NgbRating} from '@ng-bootstrap/ng-bootstrap'; import { SeriesService } from 'src/app/_services/series.service'; import {UserReview} from "../review-card/user-review"; -import {CommonModule} from "@angular/common"; import {translate, TranslocoDirective} from "@jsverse/transloco"; import {ConfirmService} from "../../shared/confirm.service"; import {ToastrService} from "ngx-toastr"; @@ -31,7 +29,7 @@ export interface ReviewSeriesModalCloseEvent { @Component({ selector: 'app-review-series-modal', standalone: true, - imports: [CommonModule, NgbRating, ReactiveFormsModule, TranslocoDirective], + imports: [NgbRating, ReactiveFormsModule, TranslocoDirective], templateUrl: './review-series-modal.component.html', styleUrls: ['./review-series-modal.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush diff --git a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss index 6ecae6dba..d3c04eff2 100644 --- a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss +++ b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss @@ -22,6 +22,6 @@ a.read-more-link { } .offcanvas-body { - mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent 100%); - -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent 100%); + mask-image: linear-gradient(to bottom, transparent, black 0%, black 97%, transparent 100%); + -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 97%, transparent 100%); } diff --git a/UI/Web/src/app/_single-module/spoiler/spoiler.component.html b/UI/Web/src/app/_single-module/spoiler/spoiler.component.html index 67b6e2a5e..c8a4ddc53 100644 --- a/UI/Web/src/app/_single-module/spoiler/spoiler.component.html +++ b/UI/Web/src/app/_single-module/spoiler/spoiler.component.html @@ -1,8 +1,9 @@
- {{t('click-to-show')}} - + @if (isCollapsed) { + {{t('click-to-show')}} + } @else {
- + }
diff --git a/UI/Web/src/app/_single-module/spoiler/spoiler.component.ts b/UI/Web/src/app/_single-module/spoiler/spoiler.component.ts index 4c5021479..781212b9f 100644 --- a/UI/Web/src/app/_single-module/spoiler/spoiler.component.ts +++ b/UI/Web/src/app/_single-module/spoiler/spoiler.component.ts @@ -7,14 +7,13 @@ import { OnInit, ViewEncapsulation } from '@angular/core'; -import {CommonModule} from '@angular/common'; import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe"; import {TranslocoDirective} from "@jsverse/transloco"; @Component({ selector: 'app-spoiler', standalone: true, - imports: [CommonModule, SafeHtmlPipe, TranslocoDirective], + imports: [SafeHtmlPipe, TranslocoDirective], templateUrl: './spoiler.component.html', styleUrls: ['./spoiler.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts index 2d275a27c..1b30bb168 100644 --- a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts +++ b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts @@ -1,5 +1,4 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit} from '@angular/core'; -import {CommonModule} from '@angular/common'; import {ScrobbleProvider, ScrobblingService} from "../../_services/scrobbling.service"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; @@ -21,7 +20,7 @@ import {LooseLeafOrDefaultNumber, SpecialVolumeNumber} from "../../_models/chapt @Component({ selector: 'app-user-scrobble-history', standalone: true, - imports: [CommonModule, ScrobbleEventTypePipe, NgbPagination, ReactiveFormsModule, SortableHeader, TranslocoModule, + imports: [ScrobbleEventTypePipe, NgbPagination, ReactiveFormsModule, SortableHeader, TranslocoModule, DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe, NgbTooltip], templateUrl: './user-scrobble-history.component.html', styleUrls: ['./user-scrobble-history.component.scss'], diff --git a/UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.html b/UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.html index 58ae847ae..2be9b618d 100644 --- a/UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.html +++ b/UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.html @@ -1 +1 @@ - + diff --git a/UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.ts b/UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.ts index a44916f5e..b9bf2befd 100644 --- a/UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.ts +++ b/UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.ts @@ -4,6 +4,9 @@ import {ImageComponent} from "../../shared/image/image.component"; import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap"; import {AgeRatingPipe} from "../../_pipes/age-rating.pipe"; import {AsyncPipe} from "@angular/common"; +import {FilterUtilitiesService} from "../../shared/_services/filter-utilities.service"; +import {FilterComparison} from "../../_models/metadata/v2/filter-comparison"; +import {FilterField} from "../../_models/metadata/v2/filter-field"; const basePath = './assets/images/ratings/'; @@ -22,9 +25,11 @@ const basePath = './assets/images/ratings/'; }) export class AgeRatingImageComponent implements OnInit { private readonly cdRef = inject(ChangeDetectorRef); + private readonly filterUtilityService = inject(FilterUtilitiesService); + + protected readonly AgeRating = AgeRating; @Input({required: true}) rating: AgeRating = AgeRating.Unknown; - protected readonly AgeRating = AgeRating; imageUrl: string = 'unknown-rating.png'; @@ -79,4 +84,9 @@ export class AgeRatingImageComponent implements OnInit { this.cdRef.markForCheck(); } + openRating() { + this.filterUtilityService.applyFilter(['all-series'], FilterField.AgeRating, FilterComparison.Equal, `${this.rating}`).subscribe(); + } + + } diff --git a/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html b/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html index 569f98187..33482af62 100644 --- a/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html +++ b/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html @@ -1,4 +1,6 @@ +

{{t('description')}}

+

{{t('setting-description')}}

diff --git a/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html b/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html index 923052f4c..d94961fb7 100644 --- a/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html +++ b/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html @@ -24,10 +24,6 @@ - - @if (formControl.dirty) { - - } } diff --git a/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts b/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts index b6a8d7e59..dc4df9825 100644 --- a/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts +++ b/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts @@ -75,6 +75,12 @@ export class ManageMediaSettingsComponent implements OnInit { return this.settingsService.updateServerSettings(data); }), tap(settings => { + + const encodingChanged = this.serverSettings.encodeMediaAs !== settings.encodeMediaAs; + if (encodingChanged) { + this.toastr.info(translate('manage-media-settings.media-warning')); + } + this.serverSettings = settings; this.resetForm(); this.cdRef.markForCheck(); diff --git a/UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.ts b/UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.ts index 13c8164e0..74d1729f3 100644 --- a/UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.ts +++ b/UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.ts @@ -10,7 +10,6 @@ import { QueryList, ViewChildren } from '@angular/core'; -import {CommonModule} from '@angular/common'; import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; import {compare, SortableHeader, SortEvent} from "../../_single-module/table/_directives/sortable-header.directive"; import {KavitaMediaError} from "../_models/media-error"; @@ -34,7 +33,7 @@ import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe"; @Component({ selector: 'app-manage-scrobble-errors', standalone: true, - imports: [CommonModule, ReactiveFormsModule, FilterPipe, LoadingComponent, SortableHeader, TranslocoModule, DefaultDatePipe, DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe], + imports: [ReactiveFormsModule, FilterPipe, LoadingComponent, SortableHeader, TranslocoModule, DefaultDatePipe, DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe], templateUrl: './manage-scrobble-errors.component.html', styleUrls: ['./manage-scrobble-errors.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush diff --git a/UI/Web/src/app/admin/manage-settings/manage-settings.component.ts b/UI/Web/src/app/admin/manage-settings/manage-settings.component.ts index bd5789435..ac1480009 100644 --- a/UI/Web/src/app/admin/manage-settings/manage-settings.component.ts +++ b/UI/Web/src/app/admin/manage-settings/manage-settings.component.ts @@ -14,7 +14,7 @@ import {SettingItemComponent} from "../../settings/_components/setting-item/sett import {SettingSwitchComponent} from "../../settings/_components/setting-switch/setting-switch.component"; import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe"; import {ConfirmService} from "../../shared/confirm.service"; -import {debounceTime, distinctUntilChanged, filter, switchMap, tap} from "rxjs"; +import {debounceTime, distinctUntilChanged, filter, of, switchMap, tap} from "rxjs"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; const ValidIpAddress = /^(\s*((([12]?\d{1,2}\.){3}[12]?\d{1,2})|(([\da-f]{0,4}\:){0,7}([\da-f]{0,4})))\s*\,)*\s*((([12]?\d{1,2}\.){3}[12]?\d{1,2})|(([\da-f]{0,4}\:){0,7}([\da-f]{0,4})))\s*$/i; @@ -69,7 +69,6 @@ export class ManageSettingsComponent implements OnInit { this.settingsForm.addControl('allowStatCollection', new FormControl(this.serverSettings.allowStatCollection, [Validators.required])); this.settingsForm.addControl('enableOpds', new FormControl(this.serverSettings.enableOpds, [Validators.required])); this.settingsForm.addControl('baseUrl', new FormControl(this.serverSettings.baseUrl, [Validators.pattern(/^(\/[\w-]+)*\/$/)])); - this.settingsForm.addControl('emailServiceUrl', new FormControl(this.serverSettings.emailServiceUrl, [Validators.required])); this.settingsForm.addControl('totalBackups', new FormControl(this.serverSettings.totalBackups, [Validators.required, Validators.min(1), Validators.max(30)])); this.settingsForm.addControl('cacheSize', new FormControl(this.serverSettings.cacheSize, [Validators.required, Validators.min(50)])); this.settingsForm.addControl('totalLogs', new FormControl(this.serverSettings.totalLogs, [Validators.required, Validators.min(1), Validators.max(30)])); diff --git a/UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts b/UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts index c0a11eb59..b99edc688 100644 --- a/UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts +++ b/UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts @@ -70,7 +70,7 @@ export class ManageTasksSettingsComponent implements OnInit { api: defer(() => { localStorage.removeItem('@transloco/translations/timestamp'); localStorage.removeItem('@transloco/translations'); - localStorage.removeItem('translocoLang'); + location.reload(); return of(); }), successMessage: 'bust-locale-task-success', diff --git a/UI/Web/src/app/all-filters/all-filters.component.ts b/UI/Web/src/app/all-filters/all-filters.component.ts index 021c76faa..365f24150 100644 --- a/UI/Web/src/app/all-filters/all-filters.component.ts +++ b/UI/Web/src/app/all-filters/all-filters.component.ts @@ -1,5 +1,4 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core'; -import {CommonModule} from '@angular/common'; import {JumpKey} from "../_models/jumpbar/jump-key"; import {TranslocoDirective} from "@jsverse/transloco"; import {CardItemComponent} from "../cards/card-item/card-item.component"; @@ -19,11 +18,12 @@ import {ActionService} from "../_services/action.service"; import {FilterPipe} from "../_pipes/filter.pipe"; import {filter} from "rxjs"; import {ManageSmartFiltersComponent} from "../sidenav/_components/manage-smart-filters/manage-smart-filters.component"; +import {DecimalPipe} from "@angular/common"; @Component({ selector: 'app-all-filters', standalone: true, - imports: [CommonModule, TranslocoDirective, CardItemComponent, SideNavCompanionBarComponent, CardDetailLayoutComponent, SafeHtmlPipe, CardActionablesComponent, RouterLink, FilterPipe, ManageSmartFiltersComponent], + imports: [TranslocoDirective, CardItemComponent, SideNavCompanionBarComponent, CardDetailLayoutComponent, SafeHtmlPipe, CardActionablesComponent, RouterLink, FilterPipe, ManageSmartFiltersComponent, DecimalPipe], templateUrl: './all-filters.component.html', styleUrl: './all-filters.component.scss', changeDetection: ChangeDetectionStrategy.OnPush @@ -40,7 +40,6 @@ export class AllFiltersComponent implements OnInit { jumpbarKeys: Array = []; filters: SmartFilter[] = []; isLoading = true; - trackByIdentity = (index: number, item: SmartFilter) => item.name; ngOnInit() { this.loadData(); @@ -55,14 +54,6 @@ export class AllFiltersComponent implements OnInit { }); } - async loadSmartFilter(filter: SmartFilter) { - await this.router.navigateByUrl('all-series?' + filter.filter); - } - - isErrored(filter: SmartFilter) { - return !decodeURIComponent(filter.filter).includes('¦'); - } - async deleteFilter(filter: SmartFilter) { await this.actionService.deleteFilter(filter.id, success => { this.filters = this.filters.filter(f => f.id != filter.id); @@ -80,6 +71,4 @@ export class AllFiltersComponent implements OnInit { break; } } - - protected readonly filter = filter; } diff --git a/UI/Web/src/app/app.component.scss b/UI/Web/src/app/app.component.scss index 02a0bc253..5bd3746a9 100644 --- a/UI/Web/src/app/app.component.scss +++ b/UI/Web/src/app/app.component.scss @@ -1,5 +1,6 @@ +@import '../theme/variables'; .content-wrapper { - padding: 0 10px 0; + padding: 0 0 0 10px; height: calc(var(--vh)* 100 - var(--nav-offset)); } @@ -7,23 +8,44 @@ .companion-bar { transition: all var(--side-nav-companion-bar-transistion); margin-left: 40px; - overflow-y: auto; + overflow-y: hidden; overflow-x: hidden; - height: calc(var(--vh)* 100 - var(--nav-offset)); - width: 100%; + height: calc(var(--vh)* 100 - var(--nav-mobile-offset)); + padding-right: 10px; + scrollbar-gutter: stable both-edges; + scrollbar-width: thin; + mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent 100%); + -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent 100%); + + // For firefox + @supports (-moz-appearance:none) { + scrollbar-color: transparent transparent; + scrollbar-width: thin; + } &::-webkit-scrollbar { background-color: transparent; /*make scrollbar space invisible */ width: inherit; + display: none; + visibility: hidden; + background: transparent; } &::-webkit-scrollbar-thumb { - background-color: transparent; /*makes it invisible when not hovering*/ + background: transparent; /*makes it invisible when not hovering*/ } &:hover { + scrollbar-width: thin; + overflow-y: auto; + + // For firefox + @supports (-moz-appearance:none) { + scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0); + } &::-webkit-scrollbar-thumb { + visibility: visible; background-color: rgba(255,255,255,0.3); /*On hover, it will turn grey*/ } } @@ -36,12 +58,10 @@ .companion-bar-content { margin-left: 190px; - mask-image: linear-gradient(to bottom, transparent, black 0%, black 96%, transparent 100%); - -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 96%, transparent 100%); - width: calc(100% - 190px); + width: calc(100% - 180px); } -@media (max-width: 768px) { +@media (max-width: $grid-breakpoints-lg) { ::ng-deep html { height: 100dvh !important; } @@ -52,34 +72,24 @@ .content-wrapper { overflow: hidden; - height: calc(var(--vh)* 100 - var(--nav-mobile-offset)); + height: calc(var(--vh)* 100); padding: 0 10px 0; &.closed { overflow: auto; + height: calc(var(--vh) * 100); } } .companion-bar { margin-left: 0; padding-left: 0; - width: calc(100vw - 30px); - padding-top: 20px; - height: calc(100dvh - var(--nav-mobile-offset)); - - &::-webkit-scrollbar { - width: inherit; - } - - &::-webkit-scrollbar-thumb { - background-color: transparent; /*makes it invisible when not hovering*/ - } - - &:hover { - &::-webkit-scrollbar-thumb { - background-color: rgba(255,255,255,0.3); /*On hover, it will turn grey*/ - } - } + width: 100%; + padding: 10px 0 0; + height: calc(var(--vh) * 100 - var(--nav-mobile-offset)); + scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0.1); + scrollbar-width: thin; + margin-bottom: 20px; } .companion-bar-content { diff --git a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss index abab89f35..f0a064718 100644 --- a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss +++ b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss @@ -46,6 +46,7 @@ --accordion-header-bg-color: grey; --br-actionbar-button-hover-border-color: #6c757d; --br-actionbar-bg-color: white; + --default-state-scrollbar: var(--primary-color-scrollbar); } @@ -53,7 +54,22 @@ $dark-form-background-no-opacity: rgb(1, 4, 9); $primary-color: #0062cc; $action-bar-height: 38px; +.reader-container { + &::-webkit-scrollbar { + background-color: transparent; /*make scrollbar space invisible */ + width: inherit; + } + &::-webkit-scrollbar-thumb { + background-color: var(--default-state-scrollbar); /*makes it invisible when not hovering*/ + } + + &:hover { + &::-webkit-scrollbar-thumb { + background-color: var(--primary-color-scrollbar); /*On hover, it will turn grey*/ + } + } +} // Drawer .control-container { diff --git a/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.html b/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.html index 33b3a1a59..591972499 100644 --- a/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.html +++ b/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.html @@ -1,24 +1,32 @@
-
- {{t('no-data')}} -
+ @if (Pages.length === 0) { +
+ {{t('no-data')}} +
+ }
    -
  • - {{t('page', {value: page})}} -
      -
    • - {{bookmark.title}} - -
      • -
    -
    • + @for (page of Pages; track page) { +
  • + {{t('page', {value: page})}} +
      + @for(bookmark of bookmarks[page]; track bookmark) { +
    • + {{bookmark.title}} + +
      • + } + +
    +
    • + } +
diff --git a/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.ts b/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.ts index f57065530..c5e7bbc87 100644 --- a/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.ts +++ b/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.ts @@ -8,7 +8,7 @@ import { OnInit, Output } from '@angular/core'; -import {CommonModule, DOCUMENT} from '@angular/common'; +import {DOCUMENT} from '@angular/common'; import {ReaderService} from "../../../_services/reader.service"; import {PersonalToC} from "../../../_models/readers/personal-toc"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; @@ -23,7 +23,7 @@ export interface PersonalToCEvent { @Component({ selector: 'app-personal-table-of-contents', standalone: true, - imports: [CommonModule, NgbTooltip, TranslocoDirective], + imports: [NgbTooltip, TranslocoDirective], templateUrl: './personal-table-of-contents.component.html', styleUrls: ['./personal-table-of-contents.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush diff --git a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html index 677a96962..f825df447 100644 --- a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html +++ b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html @@ -647,7 +647,7 @@ -

Volumes

+

{{t('volumes-title')}}

@if (isLoadingVolumes) {