-
diff --git a/UI/Web/src/app/app.module.ts b/UI/Web/src/app/app.module.ts
index 926fb3218..858f83b64 100644
--- a/UI/Web/src/app/app.module.ts
+++ b/UI/Web/src/app/app.module.ts
@@ -17,33 +17,30 @@ import { NavModule } from './nav/nav.module';
@NgModule({
- declarations: [
- AppComponent,
- ],
- imports: [
- HttpClientModule,
- BrowserModule,
- AppRoutingModule,
- BrowserAnimationsModule,
-
- SidenavModule,
- NavModule,
-
- ToastrModule.forRoot({
- positionClass: 'toast-bottom-right',
- preventDuplicates: true,
- timeOut: 6000,
- countDuplicates: true,
- autoDismiss: true
- }),
- ],
- providers: [
- {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
- {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
- Title,
- {provide: SAVER, useFactory: getSaver},
- ],
- entryComponents: [],
- bootstrap: [AppComponent]
+ declarations: [
+ AppComponent,
+ ],
+ imports: [
+ HttpClientModule,
+ BrowserModule,
+ AppRoutingModule,
+ BrowserAnimationsModule,
+ SidenavModule,
+ NavModule,
+ ToastrModule.forRoot({
+ positionClass: 'toast-bottom-right',
+ preventDuplicates: true,
+ timeOut: 6000,
+ countDuplicates: true,
+ autoDismiss: true
+ }),
+ ],
+ providers: [
+ { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
+ { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+ Title,
+ { provide: SAVER, useFactory: getSaver },
+ ],
+ bootstrap: [AppComponent]
})
export class AppModule { }
diff --git a/UI/Web/src/app/book-reader/book-reader/book-reader.component.scss b/UI/Web/src/app/book-reader/book-reader/book-reader.component.scss
index be2b9c444..ad9cbcb47 100644
--- a/UI/Web/src/app/book-reader/book-reader/book-reader.component.scss
+++ b/UI/Web/src/app/book-reader/book-reader/book-reader.component.scss
@@ -298,7 +298,6 @@ $action-bar-height: 38px;
border: none !important;
opacity: 0;
outline: none;
- //background-color: aqua;
&.immersive {
top: 0px;
@@ -318,7 +317,6 @@ $action-bar-height: 38px;
border: none !important;
opacity: 0;
outline: none;
- //background-color: aqua;
&.immersive {
top: 0px;
@@ -337,7 +335,6 @@ $action-bar-height: 38px;
cursor: pointer;
opacity: 0;
outline: none;
- //background-color: aqua;
&.immersive {
top: 0px;
diff --git a/UI/Web/src/app/book-reader/reader-settings/reader-settings.component.ts b/UI/Web/src/app/book-reader/reader-settings/reader-settings.component.ts
index 40a00ce43..be94a245e 100644
--- a/UI/Web/src/app/book-reader/reader-settings/reader-settings.component.ts
+++ b/UI/Web/src/app/book-reader/reader-settings/reader-settings.component.ts
@@ -1,6 +1,6 @@
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { Subject, take, takeUntil } from 'rxjs';
import { BookPageLayoutMode } from 'src/app/_models/book-page-layout-mode';
import { BookTheme } from 'src/app/_models/preferences/book-theme';
@@ -110,7 +110,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
isFullscreen: boolean = false;
- settingsForm: FormGroup = new FormGroup({});
+ settingsForm: UntypedFormGroup = new UntypedFormGroup({});
/**
* System provided themes
@@ -163,7 +163,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.readingDirectionModel = this.user.preferences.bookReaderReadingDirection;
- this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, []));
+ this.settingsForm.addControl('bookReaderFontFamily', new UntypedFormControl(this.user.preferences.bookReaderFontFamily, []));
this.settingsForm.get('bookReaderFontFamily')!.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(fontName => {
const familyName = this.fontFamilies.filter(f => f.title === fontName)[0].family;
if (familyName === 'default') {
@@ -175,36 +175,36 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.styleUpdate.emit(this.pageStyles);
});
- this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, []));
+ this.settingsForm.addControl('bookReaderFontSize', new UntypedFormControl(this.user.preferences.bookReaderFontSize, []));
this.settingsForm.get('bookReaderFontSize')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.pageStyles['font-size'] = value + '%';
this.styleUpdate.emit(this.pageStyles);
});
- this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(this.user.preferences.bookReaderTapToPaginate, []));
+ this.settingsForm.addControl('bookReaderTapToPaginate', new UntypedFormControl(this.user.preferences.bookReaderTapToPaginate, []));
this.settingsForm.get('bookReaderTapToPaginate')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.clickToPaginateChanged.emit(value);
});
- this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.user.preferences.bookReaderLineSpacing, []));
+ this.settingsForm.addControl('bookReaderLineSpacing', new UntypedFormControl(this.user.preferences.bookReaderLineSpacing, []));
this.settingsForm.get('bookReaderLineSpacing')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.pageStyles['line-height'] = value + '%';
this.styleUpdate.emit(this.pageStyles);
});
- this.settingsForm.addControl('bookReaderMargin', new FormControl(this.user.preferences.bookReaderMargin, []));
+ this.settingsForm.addControl('bookReaderMargin', new UntypedFormControl(this.user.preferences.bookReaderMargin, []));
this.settingsForm.get('bookReaderMargin')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.pageStyles['margin-left'] = value + '%';
this.pageStyles['margin-right'] = value + '%';
this.styleUpdate.emit(this.pageStyles);
});
- this.settingsForm.addControl('layoutMode', new FormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
+ this.settingsForm.addControl('layoutMode', new UntypedFormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
this.settingsForm.get('layoutMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((layoutMode: BookPageLayoutMode) => {
this.layoutModeUpdate.emit(layoutMode);
});
- this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.user.preferences.bookReaderImmersiveMode, []));
+ this.settingsForm.addControl('bookReaderImmersiveMode', new UntypedFormControl(this.user.preferences.bookReaderImmersiveMode, []));
this.settingsForm.get('bookReaderImmersiveMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe((immersiveMode: boolean) => {
if (immersiveMode) {
this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true);
diff --git a/UI/Web/src/app/bookmark/bookmark-routing.module.ts b/UI/Web/src/app/bookmark/bookmark-routing.module.ts
index 66b13c29c..8748829c2 100644
--- a/UI/Web/src/app/bookmark/bookmark-routing.module.ts
+++ b/UI/Web/src/app/bookmark/bookmark-routing.module.ts
@@ -6,10 +6,11 @@ import { BookmarksComponent } from "./bookmarks/bookmarks.component";
const routes: Routes = [
{path: '**', component: BookmarksComponent, pathMatch: 'full', canActivate: [AuthGuard]},
{
+ path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [
- {path: '/bookmarks', component: BookmarksComponent},
+ {path: 'bookmarks', component: BookmarksComponent},
]
}
];
diff --git a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts b/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts
index e04e36ad6..a55b01eee 100644
--- a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts
+++ b/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { CollectionTag } from 'src/app/_models/collection-tag';
@@ -26,7 +26,7 @@ export class BulkAddToCollectionComponent implements OnInit {
*/
lists: Array
= [];
loading: boolean = false;
- listForm: FormGroup = new FormGroup({});
+ listForm: UntypedFormGroup = new UntypedFormGroup({});
collectionTitleTrackby = (index: number, item: CollectionTag) => `${item.title}`;
@@ -38,8 +38,8 @@ export class BulkAddToCollectionComponent implements OnInit {
ngOnInit(): void {
- this.listForm.addControl('title', new FormControl(this.title, []));
- this.listForm.addControl('filterQuery', new FormControl('', []));
+ this.listForm.addControl('title', new UntypedFormControl(this.title, []));
+ this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
this.loading = true;
this.cdRef.markForCheck();
diff --git a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html
index 80fc1a4b2..5d90fe9cd 100644
--- a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html
+++ b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html
@@ -1,6 +1,6 @@
@@ -9,7 +9,7 @@
{{tabs[TabID.General].title}}
- This tag is currently {{tag?.promoted ? 'promoted' : 'not promoted'}} (
= [];
@@ -65,10 +65,10 @@ export class EditCollectionTagsComponent implements OnInit {
if (this.pagination == undefined) {
this.pagination = {totalPages: 1, totalItems: 200, itemsPerPage: 200, currentPage: 0};
}
- this.collectionTagForm = new FormGroup({
- summary: new FormControl(this.tag.summary, []),
- coverImageLocked: new FormControl(this.tag.coverImageLocked, []),
- coverImageIndex: new FormControl(0, []),
+ this.collectionTagForm = new UntypedFormGroup({
+ summary: new UntypedFormControl(this.tag.summary, []),
+ coverImageLocked: new UntypedFormControl(this.tag.coverImageLocked, []),
+ coverImageIndex: new UntypedFormControl(0, []),
});
this.imageUrls.push(this.imageService.randomize(this.imageService.getCollectionCoverImage(this.tag.id)));
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 12df1dd78..c417bbed3 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
@@ -46,7 +46,7 @@
Summary
-
diff --git a/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts b/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts
index d63381679..342a008f0 100644
--- a/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts
+++ b/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
import { map, Subject, Observable, of, firstValueFrom, takeUntil, ReplaySubject } from 'rxjs';
import { UtilityService } from 'src/app/shared/_services/utility.service';
import { TypeaheadSettings } from 'src/app/typeahead/typeahead-settings';
@@ -13,7 +13,7 @@ import { SeriesService } from 'src/app/_services/series.service';
interface RelationControl {
series: {id: number, name: string} | undefined; // Will add type as well
typeaheadSettings: TypeaheadSettings;
- formControl: FormControl;
+ formControl: UntypedFormControl;
}
@Component({
@@ -81,7 +81,7 @@ export class EditSeriesRelationComponent implements OnInit, OnDestroy {
setupRelationRows(relations: Array, kind: RelationKind) {
relations.map(async item => {
const settings = await firstValueFrom(this.createSeriesTypeahead(item, kind));
- const form = new FormControl(kind, []);
+ const form = new UntypedFormControl(kind, []);
if (kind === RelationKind.Parent) {
form.disable();
}
@@ -93,7 +93,7 @@ export class EditSeriesRelationComponent implements OnInit, OnDestroy {
}
async addNewRelation() {
- this.relations.push({series: undefined, formControl: new FormControl(RelationKind.Adaptation, []), typeaheadSettings: await firstValueFrom(this.createSeriesTypeahead(undefined, RelationKind.Adaptation))});
+ this.relations.push({series: undefined, formControl: new UntypedFormControl(RelationKind.Adaptation, []), typeaheadSettings: await firstValueFrom(this.createSeriesTypeahead(undefined, RelationKind.Adaptation))});
this.cdRef.markForCheck();
// Focus on the new typeahead
diff --git a/UI/Web/src/app/manga-reader/manga-reader.component.scss b/UI/Web/src/app/manga-reader/manga-reader.component.scss
index 93ef33a76..69b0017de 100644
--- a/UI/Web/src/app/manga-reader/manga-reader.component.scss
+++ b/UI/Web/src/app/manga-reader/manga-reader.component.scss
@@ -277,7 +277,7 @@ img {
.pagination-area {
cursor: pointer;
- z-index: 2;
+ z-index: 100;
i {
color: white;
@@ -290,6 +290,7 @@ img {
top: 0px;
width: $side-width;
background: $pagination-bg;
+ z-index: 100;
}
.top {
@@ -298,6 +299,7 @@ img {
top: 0px;
width: 100%;
background: $pagination-bg;
+ z-index: 100;
}
.left {
@@ -306,6 +308,7 @@ img {
top: 0px;
width: $side-width;
background: $pagination-bg;
+ z-index: 100;
}
.bottom {
@@ -314,6 +317,7 @@ img {
bottom: 0px;
width: 100%;
background: $pagination-bg;
+ z-index: 100;
}
}
diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
index 0ebeade4e..a61a48ca6 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
import { distinctUntilChanged, forkJoin, map, Observable, of, ReplaySubject, Subject, takeUntil } from 'rxjs';
import { UtilityService } from '../shared/_services/utility.service';
@@ -66,9 +66,9 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
libraries: Array> = [];
- readProgressGroup!: FormGroup;
- sortGroup!: FormGroup;
- seriesNameGroup!: FormGroup;
+ readProgressGroup!: UntypedFormGroup;
+ sortGroup!: UntypedFormGroup;
+ seriesNameGroup!: UntypedFormGroup;
isAscendingSort: boolean = true;
updateApplied: number = 0;
@@ -106,18 +106,18 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
}
this.filter = this.seriesService.createSeriesFilter();
- this.readProgressGroup = new FormGroup({
- read: new FormControl({value: this.filter.readStatus.read, disabled: this.filterSettings.readProgressDisabled}, []),
- notRead: new FormControl({value: this.filter.readStatus.notRead, disabled: this.filterSettings.readProgressDisabled}, []),
- inProgress: new FormControl({value: this.filter.readStatus.inProgress, disabled: this.filterSettings.readProgressDisabled}, []),
+ this.readProgressGroup = new UntypedFormGroup({
+ read: new UntypedFormControl({value: this.filter.readStatus.read, disabled: this.filterSettings.readProgressDisabled}, []),
+ notRead: new UntypedFormControl({value: this.filter.readStatus.notRead, disabled: this.filterSettings.readProgressDisabled}, []),
+ inProgress: new UntypedFormControl({value: this.filter.readStatus.inProgress, disabled: this.filterSettings.readProgressDisabled}, []),
});
- this.sortGroup = new FormGroup({
- sortField: new FormControl({value: this.filter.sortOptions?.sortField || SortField.SortName, disabled: this.filterSettings.sortDisabled}, []),
+ this.sortGroup = new UntypedFormGroup({
+ sortField: new UntypedFormControl({value: this.filter.sortOptions?.sortField || SortField.SortName, disabled: this.filterSettings.sortDisabled}, []),
});
- this.seriesNameGroup = new FormGroup({
- seriesNameQuery: new FormControl({value: this.filter.seriesNameQuery || '', disabled: this.filterSettings.searchNameDisabled}, [])
+ this.seriesNameGroup = new UntypedFormGroup({
+ seriesNameQuery: new UntypedFormControl({value: this.filter.seriesNameQuery || '', disabled: this.filterSettings.searchNameDisabled}, [])
});
this.readProgressGroup.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(changes => {
diff --git a/UI/Web/src/app/nav/grouped-typeahead/grouped-typeahead.component.ts b/UI/Web/src/app/nav/grouped-typeahead/grouped-typeahead.component.ts
index 687e54c3d..f2a1fd01b 100644
--- a/UI/Web/src/app/nav/grouped-typeahead/grouped-typeahead.component.ts
+++ b/UI/Web/src/app/nav/grouped-typeahead/grouped-typeahead.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { KEY_CODES } from '../../shared/_services/utility.service';
@@ -66,7 +66,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
hasFocus: boolean = false;
isLoading: boolean = false;
- typeaheadForm: FormGroup = new FormGroup({});
+ typeaheadForm: UntypedFormGroup = new UntypedFormGroup({});
prevSearchTerm: string = '';
@@ -106,7 +106,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
- this.typeaheadForm.addControl('typeahead', new FormControl(this.initialValue, []));
+ this.typeaheadForm.addControl('typeahead', new UntypedFormControl(this.initialValue, []));
this.cdRef.markForCheck();
this.typeaheadForm.valueChanges.pipe(debounceTime(this.debounceTime), takeUntil(this.onDestroy)).subscribe(change => {
diff --git a/UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts b/UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts
index 3d88fcd1b..b90a5732d 100644
--- a/UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts
+++ b/UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts
@@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { ReadingList } from 'src/app/_models/reading-list';
@@ -56,7 +56,7 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
*/
lists: Array = [];
loading: boolean = false;
- listForm: FormGroup = new FormGroup({});
+ listForm: UntypedFormGroup = new UntypedFormGroup({});
@ViewChild('title') inputElem!: ElementRef;
@@ -65,8 +65,8 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
- this.listForm.addControl('title', new FormControl(this.title, []));
- this.listForm.addControl('filterQuery', new FormControl('', []));
+ this.listForm.addControl('title', new UntypedFormControl(this.title, []));
+ this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
this.loading = true;
this.readingListService.getReadingLists(false).subscribe(lists => {
diff --git a/UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html b/UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html
index c7ce73c24..8b19f4f6f 100644
--- a/UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html
+++ b/UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html
@@ -9,7 +9,7 @@
{{tabs[0].title}}
- This list is currently {{readingList?.promoted ? 'promoted' : 'not promoted'}} (
-
+
diff --git a/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts b/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts
index f6e675aee..1c23e2fea 100644
--- a/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts
+++ b/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts
@@ -26,7 +26,7 @@ import { ReaderService } from 'src/app/_services/reader.service';
export class ReadingListDetailComponent implements OnInit {
items: Array = [];
listId!: number;
- readingList!: ReadingList;
+ readingList: ReadingList | undefined;
actions: Array> = [];
isAdmin: boolean = false;
isLoading: boolean = false;
@@ -115,6 +115,7 @@ export class ReadingListDetailComponent implements OnInit {
readChapter(item: ReadingListItem) {
let reader = 'manga';
+ if (!this.readingList) return;
if (item.seriesFormat === MangaFormat.EPUB) {
reader = 'book;'
}
@@ -148,10 +149,12 @@ export class ReadingListDetailComponent implements OnInit {
}
orderUpdated(event: IndexUpdateEvent) {
+ if (!this.readingList) return;
this.readingListService.updatePosition(this.readingList.id, event.item.id, event.fromPosition, event.toPosition).subscribe(() => { /* No Operation */ });
}
itemRemoved(event: ItemRemoveEvent) {
+ if (!this.readingList) return;
this.readingListService.deleteItem(this.readingList.id, event.item.id).subscribe(() => {
this.items.splice(event.position, 1);
this.cdRef.markForCheck();
@@ -160,6 +163,7 @@ export class ReadingListDetailComponent implements OnInit {
}
removeRead() {
+ if (!this.readingList) return;
this.isLoading = true;
this.cdRef.markForCheck();
this.readingListService.removeRead(this.readingList.id).subscribe((resp) => {
@@ -173,6 +177,7 @@ export class ReadingListDetailComponent implements OnInit {
read() {
// TODO: Can I do this in the backend?
+ if (!this.readingList) return;
let currentlyReadingChapter = this.items[0];
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].pagesRead >= this.items[i].pagesTotal) {
diff --git a/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html b/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html
index 573cd48b6..64102a6c5 100644
--- a/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html
+++ b/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html
@@ -2,7 +2,7 @@
Reading Lists
- {{pagination?.totalItems}} Items
+ {{pagination.totalItems}} Items
{{series?.name}}
+ {{series.name}}
-
- {{series?.localizedName}}
+
+ {{series.localizedName}}
@@ -95,13 +95,13 @@
-
diff --git a/UI/Web/src/app/series-detail/series-detail.component.ts b/UI/Web/src/app/series-detail/series-detail.component.ts
index 6b00d2d68..adc8ad6db 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.ts
+++ b/UI/Web/src/app/series-detail/series-detail.component.ts
@@ -35,7 +35,7 @@ import { NavService } from '../_services/nav.service';
import { RelatedSeries } from '../_models/series-detail/related-series';
import { RelationKind } from '../_models/series-detail/relation-kind';
import { CardDetailDrawerComponent } from '../cards/card-detail-drawer/card-detail-drawer.component';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormGroup, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { PageLayoutMode } from '../_models/page-layout-mode';
import { DOCUMENT } from '@angular/common';
import { User } from '../_models/user';
@@ -152,8 +152,8 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
renderMode: PageLayoutMode = PageLayoutMode.Cards;
pageExtrasGroup = new FormGroup({
- 'sortingOption': new FormControl(this.sortingOptions[0].value, []),
- 'renderMode': new FormControl(this.renderMode, []),
+ 'sortingOption': new UntypedFormControl(this.sortingOptions[0].value, []),
+ 'renderMode': new UntypedFormControl(this.renderMode, []),
});
isAscendingSort: boolean = false; // TODO: Get this from User preferences
diff --git a/UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.html b/UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.html
index 9a456d44f..2a1854130 100644
--- a/UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.html
+++ b/UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.html
@@ -1,11 +1,11 @@
-
+
-
+
diff --git a/UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.ts b/UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.ts
index 5d6150c9b..233fb4428 100644
--- a/UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.ts
+++ b/UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, map, Subject, takeUntil } from 'rxjs';
import { NavService } from '../../_services/nav.service';
@@ -6,7 +6,8 @@ import { NavService } from '../../_services/nav.service';
@Component({
selector: 'app-side-nav-item',
templateUrl: './side-nav-item.component.html',
- styleUrls: ['./side-nav-item.component.scss']
+ styleUrls: ['./side-nav-item.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class SideNavItemComponent implements OnInit, OnDestroy {
/**
@@ -29,7 +30,7 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
highlighted = false;
private onDestroy: Subject
= new Subject();
- constructor(public navService: NavService, private router: Router) {
+ constructor(public navService: NavService, private router: Router, private readonly cdRef: ChangeDetectorRef) {
router.events
.pipe(filter(event => event instanceof NavigationEnd),
takeUntil(this.onDestroy),
@@ -54,6 +55,7 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
updateHightlight(page: string) {
if (this.link === undefined) {
this.highlighted = false;
+ this.cdRef.markForCheck();
return;
}
@@ -63,14 +65,17 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
if (this.comparisonMethod === 'equals' && page === this.link) {
this.highlighted = true;
+ this.cdRef.markForCheck();
return;
}
if (this.comparisonMethod === 'startsWith' && page.startsWith(this.link)) {
this.highlighted = true;
+ this.cdRef.markForCheck();
return;
}
this.highlighted = false;
+ this.cdRef.markForCheck();
}
}
diff --git a/UI/Web/src/app/typeahead/typeahead-settings.ts b/UI/Web/src/app/typeahead/typeahead-settings.ts
index c0cbe648f..e13a67d4e 100644
--- a/UI/Web/src/app/typeahead/typeahead-settings.ts
+++ b/UI/Web/src/app/typeahead/typeahead-settings.ts
@@ -1,5 +1,5 @@
import { Observable } from 'rxjs';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
export type SelectionCompareFn = (a: T, b: T) => boolean;
@@ -48,7 +48,7 @@ export class TypeaheadSettings {
/**
* Optional form Control to tie model to.
*/
- formControl?: FormControl;
+ formControl?: UntypedFormControl;
/**
* If true, typeahead will remove already selected items from fetchFn results. Only appies when multiple=true
*/
diff --git a/UI/Web/src/app/typeahead/typeahead.component.ts b/UI/Web/src/app/typeahead/typeahead.component.ts
index f6968b8c1..4cab42597 100644
--- a/UI/Web/src/app/typeahead/typeahead.component.ts
+++ b/UI/Web/src/app/typeahead/typeahead.component.ts
@@ -1,7 +1,7 @@
import { trigger, state, style, transition, animate } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, TemplateRef, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { Observable, of, ReplaySubject, Subject } from 'rxjs';
import { auditTime, distinctUntilChanged, filter, map, shareReplay, switchMap, take, takeUntil, tap } from 'rxjs/operators';
import { KEY_CODES } from '../shared/_services/utility.service';
@@ -186,8 +186,8 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
showAddItem: boolean = false;
filteredOptions!: Observable;
isLoadingOptions: boolean = false;
- typeaheadControl!: FormControl;
- typeaheadForm!: FormGroup;
+ typeaheadControl!: UntypedFormControl;
+ typeaheadForm!: UntypedFormGroup;
private readonly onDestroy = new Subject();
@@ -220,9 +220,9 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
if (this.settings.hasOwnProperty('formControl') && this.settings.formControl) {
this.typeaheadControl = this.settings.formControl;
} else {
- this.typeaheadControl = new FormControl('');
+ this.typeaheadControl = new UntypedFormControl('');
}
- this.typeaheadForm = new FormGroup({
+ this.typeaheadForm = new UntypedFormGroup({
'typeahead': this.typeaheadControl
});
diff --git a/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html b/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
index 6760c4218..2ff1a456e 100644
--- a/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
+++ b/UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
@@ -20,7 +20,7 @@
{{theme.name | sentenceCase}}
{{theme.provider | siteThemeProvider}}
Set Default
- {{currentTheme?.id === theme.id ? 'Applied' : 'Apply'}}
+ {{currentTheme.id === theme.id ? 'Applied' : 'Apply'}}
diff --git a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts
index 4d7879933..0e6905035 100644
--- a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts
+++ b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { map, shareReplay, take, takeUntil } from 'rxjs/operators';
import { Title } from '@angular/platform-browser';
@@ -36,8 +36,8 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
bookColorThemes = bookColorThemes;
pageLayoutModes = pageLayoutModes;
- settingsForm: FormGroup = new FormGroup({});
- passwordChangeForm: FormGroup = new FormGroup({});
+ settingsForm: UntypedFormGroup = new UntypedFormGroup({});
+ passwordChangeForm: UntypedFormGroup = new UntypedFormGroup({});
user: User | undefined = undefined;
hasChangePasswordAbility: Observable
= of(false);
@@ -112,32 +112,32 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
this.user.preferences.bookReaderFontFamily = 'default';
}
- this.settingsForm.addControl('readingDirection', new FormControl(this.user.preferences.readingDirection, []));
- this.settingsForm.addControl('scalingOption', new FormControl(this.user.preferences.scalingOption, []));
- this.settingsForm.addControl('pageSplitOption', new FormControl(this.user.preferences.pageSplitOption, []));
- this.settingsForm.addControl('autoCloseMenu', new FormControl(this.user.preferences.autoCloseMenu, []));
- this.settingsForm.addControl('showScreenHints', new FormControl(this.user.preferences.showScreenHints, []));
- this.settingsForm.addControl('readerMode', new FormControl(this.user.preferences.readerMode, []));
- this.settingsForm.addControl('layoutMode', new FormControl(this.user.preferences.layoutMode, []));
- this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, []));
- this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, []));
- this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.user.preferences.bookReaderLineSpacing, []));
- this.settingsForm.addControl('bookReaderMargin', new FormControl(this.user.preferences.bookReaderMargin, []));
- this.settingsForm.addControl('bookReaderReadingDirection', new FormControl(this.user.preferences.bookReaderReadingDirection, []));
- this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(!!this.user.preferences.bookReaderTapToPaginate, []));
- this.settingsForm.addControl('bookReaderLayoutMode', new FormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
- this.settingsForm.addControl('bookReaderThemeName', new FormControl(this.user?.preferences.bookReaderThemeName || bookColorThemes[0].name, []));
- this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.user?.preferences.bookReaderImmersiveMode, []));
+ this.settingsForm.addControl('readingDirection', new UntypedFormControl(this.user.preferences.readingDirection, []));
+ this.settingsForm.addControl('scalingOption', new UntypedFormControl(this.user.preferences.scalingOption, []));
+ this.settingsForm.addControl('pageSplitOption', new UntypedFormControl(this.user.preferences.pageSplitOption, []));
+ this.settingsForm.addControl('autoCloseMenu', new UntypedFormControl(this.user.preferences.autoCloseMenu, []));
+ this.settingsForm.addControl('showScreenHints', new UntypedFormControl(this.user.preferences.showScreenHints, []));
+ this.settingsForm.addControl('readerMode', new UntypedFormControl(this.user.preferences.readerMode, []));
+ this.settingsForm.addControl('layoutMode', new UntypedFormControl(this.user.preferences.layoutMode, []));
+ this.settingsForm.addControl('bookReaderFontFamily', new UntypedFormControl(this.user.preferences.bookReaderFontFamily, []));
+ this.settingsForm.addControl('bookReaderFontSize', new UntypedFormControl(this.user.preferences.bookReaderFontSize, []));
+ this.settingsForm.addControl('bookReaderLineSpacing', new UntypedFormControl(this.user.preferences.bookReaderLineSpacing, []));
+ this.settingsForm.addControl('bookReaderMargin', new UntypedFormControl(this.user.preferences.bookReaderMargin, []));
+ this.settingsForm.addControl('bookReaderReadingDirection', new UntypedFormControl(this.user.preferences.bookReaderReadingDirection, []));
+ this.settingsForm.addControl('bookReaderTapToPaginate', new UntypedFormControl(!!this.user.preferences.bookReaderTapToPaginate, []));
+ this.settingsForm.addControl('bookReaderLayoutMode', new UntypedFormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, []));
+ this.settingsForm.addControl('bookReaderThemeName', new UntypedFormControl(this.user?.preferences.bookReaderThemeName || bookColorThemes[0].name, []));
+ this.settingsForm.addControl('bookReaderImmersiveMode', new UntypedFormControl(this.user?.preferences.bookReaderImmersiveMode, []));
- this.settingsForm.addControl('theme', new FormControl(this.user.preferences.theme, []));
- this.settingsForm.addControl('globalPageLayoutMode', new FormControl(this.user.preferences.globalPageLayoutMode, []));
- this.settingsForm.addControl('blurUnreadSummaries', new FormControl(this.user.preferences.blurUnreadSummaries, []));
- this.settingsForm.addControl('promptForDownloadSize', new FormControl(this.user.preferences.promptForDownloadSize, []));
+ this.settingsForm.addControl('theme', new UntypedFormControl(this.user.preferences.theme, []));
+ this.settingsForm.addControl('globalPageLayoutMode', new UntypedFormControl(this.user.preferences.globalPageLayoutMode, []));
+ this.settingsForm.addControl('blurUnreadSummaries', new UntypedFormControl(this.user.preferences.blurUnreadSummaries, []));
+ this.settingsForm.addControl('promptForDownloadSize', new UntypedFormControl(this.user.preferences.promptForDownloadSize, []));
this.cdRef.markForCheck();
});
- this.passwordChangeForm.addControl('password', new FormControl('', [Validators.required]));
- this.passwordChangeForm.addControl('confirmPassword', new FormControl('', [Validators.required]));
+ this.passwordChangeForm.addControl('password', new UntypedFormControl('', [Validators.required]));
+ this.passwordChangeForm.addControl('confirmPassword', new UntypedFormControl('', [Validators.required]));
this.observableHandles.push(this.passwordChangeForm.valueChanges.subscribe(() => {
const values = this.passwordChangeForm.value;
diff --git a/UI/Web/src/app/user-settings/user-settings-routing.module.ts b/UI/Web/src/app/user-settings/user-settings-routing.module.ts
index b113fae64..97ddebd0d 100644
--- a/UI/Web/src/app/user-settings/user-settings-routing.module.ts
+++ b/UI/Web/src/app/user-settings/user-settings-routing.module.ts
@@ -6,6 +6,7 @@ import { UserPreferencesComponent } from './user-preferences/user-preferences.co
const routes: Routes = [
{path: '**', component: UserPreferencesComponent, pathMatch: 'full'},
{
+ path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [
diff --git a/UI/Web/src/app/want-to-read/want-to-read-routing.module.ts b/UI/Web/src/app/want-to-read/want-to-read-routing.module.ts
index d4a117b8d..7ccca91ae 100644
--- a/UI/Web/src/app/want-to-read/want-to-read-routing.module.ts
+++ b/UI/Web/src/app/want-to-read/want-to-read-routing.module.ts
@@ -6,6 +6,7 @@ import { WantToReadComponent } from './want-to-read/want-to-read.component';
const routes: Routes = [
{path: '**', component: WantToReadComponent, pathMatch: 'full'},
{
+ path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [
diff --git a/UI/Web/src/styles.scss b/UI/Web/src/styles.scss
index 94ddbfd45..dea14a147 100644
--- a/UI/Web/src/styles.scss
+++ b/UI/Web/src/styles.scss
@@ -1,9 +1,7 @@
@use '../node_modules/swiper/swiper.scss' as swiper;
// Import themes which define the css variables we use to customize the app
-@import './theme/themes/light';
@import './theme/themes/dark';
-@import './theme/themes/e-ink';
// Import colors for overrides of bootstrap theme
@import './theme/toastr';
diff --git a/UI/Web/src/theme/_variables.scss b/UI/Web/src/theme/_variables.scss
index 31f5159e3..26f9136e4 100644
--- a/UI/Web/src/theme/_variables.scss
+++ b/UI/Web/src/theme/_variables.scss
@@ -20,3 +20,7 @@ $grid-breakpoints-xl: 1200px;
$grid-breakpoints: (xs: $grid-breakpoints-xs, sm: $grid-breakpoints-sm, md: $grid-breakpoints-md, lg: $grid-breakpoints-lg, xl: $grid-breakpoints-xl);
+// Override any bootstrap styles we don't want
+:root {
+ --hr-color: transparent;
+}
diff --git a/UI/Web/src/theme/components/_buttons.scss b/UI/Web/src/theme/components/_buttons.scss
index da793f7ba..6c5b24a06 100644
--- a/UI/Web/src/theme/components/_buttons.scss
+++ b/UI/Web/src/theme/components/_buttons.scss
@@ -42,9 +42,11 @@ button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :di
.btn-icon {
cursor: pointer;
color: var(--body-text-color);
+ border: none;
&:hover, &:focus {
color: var(--body-text-color);
+ border: none;
}
}
diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss
index 39ceda0fe..8f4761fd7 100644
--- a/UI/Web/src/theme/themes/dark.scss
+++ b/UI/Web/src/theme/themes/dark.scss
@@ -1,4 +1,4 @@
-:root .bg-dark {
+:root, :root .bg-dark {
--color-scheme: dark;
--primary-color: #4ac694;
--primary-color-dark-shade: #3B9E76;
@@ -9,6 +9,7 @@
--body-text-color: #efefef;
--btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
--primary-color-scrollbar: rgba(74,198,148,0.75);
+
/* Navbar */
--navbar-bg-color: black;
@@ -42,6 +43,7 @@
--btn-disabled-bg-color: #343a40;
--btn-disabled-text-color: white;
--btn-disabled-border-color: #6c757d;
+ --bs-btn-disabled-border-color: transparent;
/* Nav (Tabs) */
--nav-tab-border-color: rgba(44, 118, 88, 0.7);
diff --git a/UI/Web/src/theme/themes/light.scss b/UI/Web/src/theme/themes/light.scss
index 573994334..6c452c983 100644
--- a/UI/Web/src/theme/themes/light.scss
+++ b/UI/Web/src/theme/themes/light.scss
@@ -1,4 +1,243 @@
/* Default styles for Kavita */
:root {
- @import './dark.scss'; // Just re-import variables from dark since that's all we support
+ //@import './dark.scss'; // Just re-import variables from dark since that's all we support
+ --color-scheme: dark;
+ --primary-color: #4ac694;
+ --primary-color-dark-shade: #3B9E76;
+ --primary-color-darker-shade: #338A67;
+ --primary-color-darkest-shade: #25624A;
+ --error-color: #BD362F;
+ --bs-body-bg: #343a40;
+ --body-text-color: #efefef;
+ --btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
+ --primary-color-scrollbar: rgba(74,198,148,0.75);
+
+
+ /* Navbar */
+ --navbar-bg-color: black;
+ --navbar-text-color: white;
+ --navbar-fa-icon-color: white;
+ --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
+
+ /* Inputs */
+ --input-bg-color: #343a40;
+ --input-bg-readonly-color: #434648;
+ --input-focused-border-color: #ccc;
+ --input-text-color: #fff;
+ --input-placeholder-color: #aeaeae;
+ --input-border-color: #ccc;
+ --input-focus-boxshadow-color: rgb(255 255 255 / 50%);
+
+ /* Buttons */
+ --btn-focus-boxshadow-color: rgb(255 255 255 / 50%);
+ --btn-primary-text-color: white;
+ --btn-primary-bg-color: var(--primary-color);
+ --btn-primary-border-color: var(--primary-color);
+ --btn-primary-hover-text-color: white;
+ --btn-primary-hover-bg-color: var(--primary-color-darker-shade);
+ --btn-primary-hover-border-color: var(--primary-color-darker-shade);
+ --btn-alt-bg-color: #424c72;
+ --btn-alt-border-color: #444f75;
+ --btn-alt-hover-bg-color: #3b4466;
+ --btn-alt-focus-bg-color: #343c59;
+ --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%);
+ --btn-fa-icon-color: white;
+ --btn-disabled-bg-color: #343a40;
+ --btn-disabled-text-color: white;
+ --btn-disabled-border-color: #6c757d;
+ --bs-btn-disabled-border-color: transparent;
+
+ /* Nav (Tabs) */
+ --nav-tab-border-color: rgba(44, 118, 88, 0.7);
+ --nav-tab-text-color: var(--body-text-color);
+ --nav-tab-bg-color: var(--primary-color);
+ --nav-tab-hover-border-color: var(--primary-color);
+ --nav-tab-active-text-color: white;
+ --nav-tab-border-hover-color: transparent;
+ --nav-tab-hover-text-color: var(--body-text-color);
+ --nav-tab-hover-bg-color: transparent;
+ --nav-tab-border-top: rgba(44, 118, 88, 0.7);
+ --nav-tab-border-left: rgba(44, 118, 88, 0.7);
+ --nav-tab-border-bottom: rgba(44, 118, 88, 0.7);
+ --nav-tab-border-right: rgba(44, 118, 88, 0.7);
+ --nav-tab-hover-border-top: rgba(44, 118, 88, 0.7);
+ --nav-tab-hover-border-left: rgba(44, 118, 88, 0.7);
+ --nav-tab-hover-border-bottom: var(--bs-body-bg);
+ --nav-tab-hover-border-right: rgba(44, 118, 88, 0.7);
+ --nav-tab-active-hover-bg-color: var(--primary-color);
+ --nav-link-bg-color: var(--primary-color);
+ --nav-link-active-text-color: white;
+ --nav-link-text-color: white;
+
+ /* Header */
+ --nav-header-text-color: white;
+ --nav-header-bg-color: rgb(22, 27, 34);
+
+ /* Toasts */
+ --toast-success-bg-color: rgba(59, 158, 118, 0.9);
+ --toast-error-bg-color: #BD362F;
+ --toast-info-bg-color: #2F96B4;
+ --toast-warning-bg-color: #F89406;
+
+ /* Checkboxes/Switch */
+ --checkbox-checked-bg-color: var(--primary-color);
+ --checkbox-border-color: var(--input-focused-border-color);
+ --checkbox-focus-border-color: var(--primary-color);
+ --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%);
+
+ /* Tag Badge */
+ --tagbadge-border-color: rgba(239, 239, 239, 0.125);
+ --tagbadge-text-color: var(--body-text-color);
+ --tagbadge-bg-color: var(--nav-tab-hover-bg-color);
+ --tagbadge-filled-border-color: rgba(239, 239, 239, 0.125);
+ --tagbadge-filled-text-color: var(--body-text-color);
+ --tagbadge-filled-bg-color: var(--primary-color);
+
+ /* Side Nav */
+ --side-nav-bg-color: rgba(0,0,0,0.2);
+ --side-nav-mobile-bg-color: rgb(25,26,28);
+ --side-nav-openclose-transition: 0.15s ease-in-out;
+ --side-nav-box-shadow: rgba(0,0,0,0.5);
+ --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%);
+ --side-nav-hover-text-color: white;
+ --side-nav-hover-bg-color: black;
+ --side-nav-color: white;
+ --side-nav-border-radius: 5px;
+ --side-nav-border: none;
+ --side-nav-border-closed: none;
+ --side-nav-border-transition: 0.5s ease-in-out;
+ --side-nav-companion-bar-transistion: 0.15s linear;
+ --side-nav-bg-color-transition: 0.5s ease-in-out;
+ --side-nav-closed-bg-color: transparent;
+ --side-nav-item-active-color: var(--primary-color);
+ --side-nav-item-active-text-color: white;
+ --side-nav-active-bg-color: rgba(0,0,0,0.5);
+ --side-nav-overlay-color: rgba(0,0,0,0.5);
+
+
+ /* List items */
+ --list-group-item-text-color: var(--body-text-color); /*rgba(74, 198, 148, 0.9)*/
+ --list-group-item-bg-color: #343a40;
+ --list-group-item-border-color: rgba(239, 239, 239, 0.125);
+ --list-group-hover-text-color: white;
+ --list-group-hover-bg-color: rgb(22, 27, 34);
+ --list-group-active-border-color: none;
+
+ /* Popover */
+ --popover-body-bg-color: var(--navbar-bg-color);
+ --popover-body-text-color: var(--navbar-text-color);
+ --popover-outerarrow-color: transparent;
+ --popover-arrow-color: transparent;
+ --popover-bg-color: black;
+ --popover-border-color: black;
+
+ /* Pagination */
+ --pagination-active-link-border-color: var(--primary-color);
+ --pagination-active-link-bg-color: var(--primary-color);
+ --pagination-active-link-text-color: white;
+ --pagination-link-border-color: rgba(239, 239, 239, 0.125);
+ --pagination-link-text-color: white;
+ --pagination-link-bg-color: rgba(1, 4, 9, 0.5);
+ --pagination-focus-border-color: var(--primary-color);
+ --pagination-link-hover-color: var(--primary-color);
+
+ /* Progress Bar */
+ --progress-striped-animated-color: linear-gradient(45deg, rgba(74,198,148, 0.75) 25%, rgba(51, 138, 103, 0.75) 25%, rgba(51, 138, 103, 0.75) 50%, rgba(74,198,148, 0.75) 50%, rgba(74,198,148, 0.75) 75%, rgba(51, 138, 103, 0.75) 75%, rgba(51, 138, 103, 0.75));
+ --progress-bg-color: var(--nav-header-bg-color);
+ --progress-bar-color: var(--primary-color-dark-shade);
+
+ /* Dropdown */
+ --dropdown-item-hover-text-color: white;
+ --dropdown-item-hover-bg-color: var(--primary-color-dark-shade);
+ --dropdown-item-text-color: var(--navbar-text-color);
+ --dropdown-item-bg-color: var(--navbar-bg-color);
+ --dropdown-overlay-color: rgba(0,0,0,0.5);
+
+ /* Accordion */
+ --accordion-header-text-color: rgba(74, 198, 148, 0.9);
+ --accordion-header-bg-color: rgba(52, 60, 70, 0.5);
+ --accordion-body-bg-color: #292929;
+ --accordion-body-border-color: rgba(239, 239, 239, 0.125);
+ --accordion-body-text-color: var(--body-text-color);
+ --accordion-header-collapsed-text-color: rgba(74, 198, 148, 0.9);
+ --accordion-header-collapsed-bg-color: #292929;
+ --accordion-button-focus-border-color: unset;
+ --accordion-button-focus-box-shadow: unset;
+ --accordion-active-body-bg-color: #292929;
+
+ /* Breadcrumb */
+ --breadcrumb-bg-color: #292d32;
+ --breadcrumb-item-text-color: var(--body-text-color);
+
+ /* Rating star */
+ --ratingstar-color: white;
+ --ratingstar-star-empty: #b0c4de;
+ --ratingstar-star-filled: var(--primary-color);
+
+ /* Global */
+ --hr-color: rgba(239, 239, 239, 0.125);
+ --accent-bg-color: rgba(1, 4, 9, 0.5);
+ --accent-text-color: lightgrey;
+ --grid-breakpoints-xs: $grid-breakpoint-xs;
+ --grid-breakpoints-sm: $grid-breakpoint-sm;
+ --grid-breakpoints-md: $grid-breakpoint-md;
+ --grid-breakpoints-lg: $grid-breakpoint-lg;
+ --grid-breakpoints-xl: $grid-breakpoint-xl;
+ --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
+ --brand-font-family: "Spartan", sans-serif;
+
+ /* Card */
+ --card-bg-color: rgba(22,27,34,0.5);
+ --card-text-color: var(--body-text-color);
+ --card-border-width: 0 1px 1px 1px;
+ --card-border-style: solid;
+ --card-border-color: transparent;
+ --card-progress-bar-color: var(--primary-color);
+ --card-overlay-bg-color: rgba(0, 0, 0, 0);
+ --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
+
+ /* Slider */
+ --slider-text-color: white;
+ --input-range-color: var(--primary-color);
+ --input-range-active-color: var(--primary-color-darker-shade);
+
+ /* Manga Reader */
+ --manga-reader-overlay-filter: blur(10px);
+ --manga-reader-overlay-bg-color: rgba(0,0,0,0.5);
+ --manga-reader-overlay-text-color: white;
+ --manga-reader-bg-color: black;
+ --manga-reader-next-highlight-bg-color: rgba(65, 225, 100, 0.5);
+ --manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5);
+
+ /* Radios */
+ --radio-accent-color: var(--primary-color);
+ --radio-hover-accent-color: var(--primary-color);
+ --radio-focus-boxshadow-color: rgb(255 255 255 / 50%);
+
+ /* Carousel */
+ --carousel-header-text-color: var(--body-text-color);
+ --carousel-header-text-decoration: none;
+ --carousel-hover-header-text-decoration: none;
+
+ /** Drawer */
+ --drawer-background-color: black; // TODO: Remove this for bg
+ --drawer-bg-color: #292929;
+ --drawer-text-color: white;
+
+ /** Event Widget */
+ --event-widget-bg-color: rgb(1, 4, 9);
+ --event-widget-item-bg-color: rgb(1, 4, 9);
+ --event-widget-text-color: var(--body-text-color);
+ --event-widget-item-border-color: rgba(53, 53, 53, 0.5);
+ --event-widget-border-color: rgba(1, 4, 9, 0.5);
+
+ /* Search */
+ --search-result-text-lite-color: initial;
+
+ /* Bulk Selection */
+ --bulk-selection-text-color: var(--navbar-text-color);
+ --bulk-selection-highlight-text-color: var(--primary-color);
+
+ /* List Card Item */
+ --card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 1%, rgba(0,0,0,0) 100%);
}
diff --git a/UI/Web/src/theme/utilities/_global.scss b/UI/Web/src/theme/utilities/_global.scss
index 55ad54f39..012bd1b20 100644
--- a/UI/Web/src/theme/utilities/_global.scss
+++ b/UI/Web/src/theme/utilities/_global.scss
@@ -13,6 +13,7 @@ body {
hr {
background-color: var(--hr-color);
+ border-top: 0px;
}
.accent {
diff --git a/UI/Web/tsconfig.json b/UI/Web/tsconfig.json
index 7a07d5e77..30b8fc1a0 100644
--- a/UI/Web/tsconfig.json
+++ b/UI/Web/tsconfig.json
@@ -16,7 +16,7 @@
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
- "target": "ES6",
+ "target": "es2020",
"module": "es2020",
"lib": [
"es2019",
@@ -29,6 +29,10 @@
"strictInputAccessModifiers": true,
"strictTemplates": true,
"esModuleInterop": true,
- "allowSyntheticDefaultImports": true
+ "allowSyntheticDefaultImports": true,
+ "extendedDiagnostics": {
+ "nullishCoalescingNotNullable": "warning",
+ }
+
}
}