+ [reset]="resetTypeaheads" [disabled]="!peopleSettings.hasOwnProperty(PersonRole.Character) || filterSettings.peopleDisabled">
{{item.name}}
@@ -234,7 +234,7 @@
+ [reset]="resetTypeaheads" [disabled]="!peopleSettings.hasOwnProperty(PersonRole.Translator) || filterSettings.peopleDisabled">
{{item.name}}
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..8579ef60d 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Ev
import { FormControl, FormGroup } from '@angular/forms';
import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
import { distinctUntilChanged, forkJoin, map, Observable, of, ReplaySubject, Subject, takeUntil } from 'rxjs';
+import { FilterUtilitiesService } from '../shared/_services/filter-utilities.service';
import { UtilityService } from '../shared/_services/utility.service';
import { TypeaheadSettings } from '../typeahead/typeahead-settings';
import { CollectionTag } from '../_models/collection-tag';
@@ -17,7 +18,6 @@ import { Tag } from '../_models/tag';
import { CollectionTagService } from '../_services/collection-tag.service';
import { LibraryService } from '../_services/library.service';
import { MetadataService } from '../_services/metadata.service';
-import { SeriesService } from '../_services/series.service';
import { ToggleService } from '../_services/toggle.service';
import { FilterSettings } from './filter-settings';
@@ -86,9 +86,9 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return SortField;
}
- constructor(private libraryService: LibraryService, private metadataService: MetadataService, private seriesService: SeriesService,
- private utilityService: UtilityService, private collectionTagService: CollectionTagService, public toggleService: ToggleService,
- private readonly cdRef: ChangeDetectorRef) {
+ constructor(private libraryService: LibraryService, private metadataService: MetadataService, private utilityService: UtilityService,
+ private collectionTagService: CollectionTagService, public toggleService: ToggleService,
+ private readonly cdRef: ChangeDetectorRef, private filterUtilitySerivce: FilterUtilitiesService) {
}
ngOnInit(): void {
@@ -105,7 +105,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
});
}
- this.filter = this.seriesService.createSeriesFilter();
+ this.filter = this.filterUtilitySerivce.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}, []),
@@ -601,7 +601,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
}
clear() {
- this.filter = this.seriesService.createSeriesFilter();
+ this.filter = this.filterUtilitySerivce.createSeriesFilter();
this.readProgressGroup.get('read')?.setValue(true);
this.readProgressGroup.get('notRead')?.setValue(true);
this.readProgressGroup.get('inProgress')?.setValue(true);
diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.module.ts b/UI/Web/src/app/metadata-filter/metadata-filter.module.ts
index 5cea6bdc8..bf2582104 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.module.ts
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.module.ts
@@ -18,7 +18,7 @@ import { TypeaheadModule } from '../typeahead/typeahead.module';
NgbRatingModule,
NgbCollapseModule,
SharedModule,
- TypeaheadModule
+ TypeaheadModule,
],
exports: [
MetadataFilterComponent
diff --git a/UI/Web/src/app/nav/events-widget/events-widget.component.html b/UI/Web/src/app/nav/events-widget/events-widget.component.html
index 6b2f99984..a456943bb 100644
--- a/UI/Web/src/app/nav/events-widget/events-widget.component.html
+++ b/UI/Web/src/app/nav/events-widget/events-widget.component.html
@@ -66,7 +66,7 @@
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 16f59d084..41c6bdc4d 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.ts
+++ b/UI/Web/src/app/series-detail/series-detail.component.ts
@@ -3,7 +3,7 @@ import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal, NgbNavChangeEvent, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
-import { forkJoin, Subject, tap } from 'rxjs';
+import { forkJoin, Subject } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';
import { BulkSelectionService } from '../cards/bulk-selection.service';
import { EditSeriesModalComponent } from '../cards/_modals/edit-series-modal/edit-series-modal.component';
diff --git a/UI/Web/src/app/series-detail/series-detail.module.ts b/UI/Web/src/app/series-detail/series-detail.module.ts
index 975942e2d..e0ae26dd5 100644
--- a/UI/Web/src/app/series-detail/series-detail.module.ts
+++ b/UI/Web/src/app/series-detail/series-detail.module.ts
@@ -12,7 +12,6 @@ import { ReactiveFormsModule } from '@angular/forms';
import { SharedSideNavCardsModule } from '../shared-side-nav-cards/shared-side-nav-cards.module';
-
@NgModule({
declarations: [
SeriesDetailComponent,
diff --git a/UI/Web/src/app/shared/_services/filter-utilities.service.ts b/UI/Web/src/app/shared/_services/filter-utilities.service.ts
index 865a8ddd2..2fc6b144d 100644
--- a/UI/Web/src/app/shared/_services/filter-utilities.service.ts
+++ b/UI/Web/src/app/shared/_services/filter-utilities.service.ts
@@ -42,7 +42,7 @@ export enum FilterQueryParam {
})
export class FilterUtilitiesService {
- constructor(private route: ActivatedRoute, private seriesService: SeriesService) { }
+ constructor() { }
/**
* Updates the window location with a custom url based on filter and pagination objects
@@ -145,7 +145,7 @@ export class FilterUtilitiesService {
* @returns The Preset filter and if something was set within
*/
filterPresetsFromUrl(snapshot: ActivatedRouteSnapshot): [SeriesFilter, boolean] {
- const filter = this.seriesService.createSeriesFilter();
+ const filter = this.createSeriesFilter();
let anyChanged = false;
const format = snapshot.queryParamMap.get(FilterQueryParam.Format);
@@ -305,4 +305,39 @@ export class FilterUtilitiesService {
return [filter, false]; // anyChanged. Testing out if having a filter active but keep drawer closed by default works better
}
+
+ createSeriesFilter(filter?: SeriesFilter) {
+ if (filter !== undefined) return filter;
+ const data: SeriesFilter = {
+ formats: [],
+ libraries: [],
+ genres: [],
+ writers: [],
+ artists: [],
+ penciller: [],
+ inker: [],
+ colorist: [],
+ letterer: [],
+ coverArtist: [],
+ editor: [],
+ publisher: [],
+ character: [],
+ translators: [],
+ collectionTags: [],
+ rating: 0,
+ readStatus: {
+ read: true,
+ inProgress: true,
+ notRead: true
+ },
+ sortOptions: null,
+ ageRating: [],
+ tags: [],
+ languages: [],
+ publicationStatus: [],
+ seriesNameQuery: '',
+ };
+
+ return data;
+ }
}
diff --git a/UI/Web/src/app/shared/circular-loader/circular-loader.component.html b/UI/Web/src/app/shared/circular-loader/circular-loader.component.html
index b79c748e7..b703d6a86 100644
--- a/UI/Web/src/app/shared/circular-loader/circular-loader.component.html
+++ b/UI/Web/src/app/shared/circular-loader/circular-loader.component.html
@@ -11,7 +11,7 @@
[space] = "0"
[backgroundPadding]="0"
outerStrokeLinecap="butt"
- [outerStrokeColor]="'#4ac694'"
+ [outerStrokeColor]="outerStrokeColor"
[innerStrokeColor]="innerStrokeColor"
titleFontSize= "24"
unitsFontSize= "24"
@@ -21,7 +21,7 @@
[startFromZero]="false"
[responsive]="true"
[backgroundOpacity]="0.5"
- [backgroundColor]="'#000'"
+ [backgroundColor]="backgroundColor"
>
diff --git a/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss b/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss
index d4cabba66..817949cd8 100644
--- a/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss
+++ b/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss
@@ -1,13 +1,14 @@
.number {
position: absolute;
- top:50%;
- left:50%;
- font-size:18px;
+ top: 50%;
+ left: 50%;
+ font-size: 18px;
}
.indicator {
- font-weight:500;
- z-index:10;
+ font-weight: 500;
+ margin-left: 2px;
+ z-index: 10;
color: var(--primary-color);
animation: MoveUpDown 1s linear infinite;
}
\ No newline at end of file
diff --git a/UI/Web/src/app/shared/circular-loader/circular-loader.component.ts b/UI/Web/src/app/shared/circular-loader/circular-loader.component.ts
index f43e93891..9e630b608 100644
--- a/UI/Web/src/app/shared/circular-loader/circular-loader.component.ts
+++ b/UI/Web/src/app/shared/circular-loader/circular-loader.component.ts
@@ -9,10 +9,23 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
export class CircularLoaderComponent {
@Input() currentValue: number = 0;
- @Input() maxValue: number = 0;
+ /**
+ * If an animation should be used
+ */
@Input() animation: boolean = true;
+ /**
+ * Color of an inner bar
+ */
@Input() innerStrokeColor: string = 'transparent';
+ /**
+ * Color of the Downloader bar
+ */
+ @Input() outerStrokeColor: string = '#4ac694';
+ @Input() backgroundColor: string = '#000';
@Input() fontSize: string = '36px';
+ /**
+ * Show the icon inside the downloader
+ */
@Input() showIcon: boolean = true;
/**
* The width in pixels of the loader
diff --git a/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.ts b/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.ts
index b873c97e4..7d38a4788 100644
--- a/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.ts
+++ b/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.ts
@@ -85,7 +85,7 @@ export class WantToReadComponent implements OnInit, OnDestroy {
this.seriesPagination = this.filterUtilityService.pagination(this.route.snapshot);
[this.filterSettings.presets, this.filterSettings.openByDefault] = this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot);
- this.filterActiveCheck = this.seriesService.createSeriesFilter();
+ this.filterActiveCheck = this.filterUtilityService.createSeriesFilter();
this.cdRef.markForCheck();
this.hubService.messages$.pipe(takeUntil(this.onDestroy)).subscribe((event) => {
diff --git a/UI/Web/src/index.html b/UI/Web/src/index.html
index ced9095a7..992957479 100644
--- a/UI/Web/src/index.html
+++ b/UI/Web/src/index.html
@@ -14,6 +14,10 @@
+
+
+
+
diff --git a/UI/Web/src/styles.scss b/UI/Web/src/styles.scss
index dea14a147..9220be28b 100644
--- a/UI/Web/src/styles.scss
+++ b/UI/Web/src/styles.scss
@@ -1,5 +1,6 @@
@use '../node_modules/swiper/swiper.scss' as swiper;
+
// Import themes which define the css variables we use to customize the app
@import './theme/themes/dark';
diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss
index 706d54aee..06ae21b39 100644
--- a/UI/Web/src/theme/themes/dark.scss
+++ b/UI/Web/src/theme/themes/dark.scss
@@ -240,4 +240,6 @@
/* 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%);
+
+
}