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

Readable Bookmarks (#1228)

Browse source 
* Moved bookmarks to it's own page on side nav and integrated actions.

* Implemented the ability to read bookmarks in the manga reader.

* Removed old bookmark components that aren't needed any longer.

* Removed recently added component as we use all-series instead now

* Removed bookmark tab from card detail

* Fixed scroll to top not working and being missing

* When opening the side nav on mobile with metadata filter already open, collapse the filter.

* When on mobile viewports, when clicking an item from side nav, collapse it afterwards

* Converted most of series detail to use the card detail layout, except storyline which has custom logic

* Fixed unit test
This commit is contained in:
Joseph Milazzo 2022-04-23 13:58:14 -05:00 • committed by GitHub
parent 62715a9977
commit 9d6843614d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 648 additions and 634 deletions
Download patch file Download diff file Expand all files Collapse all files

65
UI/Web/src/app/nav-header/nav-header.component.ts
View file

@ -1,9 +1,10 @@
import { DOCUMENT } from '@angular/common';
import { Component, HostListener, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { from, fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ScrollService } from '../scroll.service';
import { FilterQueryParam, FilterUtilitiesService } from '../shared/_services/filter-utilities.service';
import { CollectionTag } from '../_models/collection-tag';
import { Library } from '../_models/library';
import { PersonRole } from '../_models/person';
@ -47,28 +48,17 @@ export class NavHeaderComponent implements OnInit, OnDestroy {
constructor(public accountService: AccountService, private router: Router, public navService: NavService,
private libraryService: LibraryService, public imageService: ImageService, @Inject(DOCUMENT) private document: Document,
private scrollService: ScrollService) { }
private scrollService: ScrollService, private filterUtilityService: FilterUtilitiesService) { }
ngOnInit(): void {
// this.navService.darkMode$.pipe(takeUntil(this.onDestroy)).subscribe(res => {
// if (res) {
// this.document.body.classList.remove('bg-light');
// this.document.body.classList.add('bg-dark');
// } else {
// this.document.body.classList.remove('bg-dark');
// this.document.body.classList.add('bg-light');
// }
// });
}
@HostListener("window:scroll", [])
checkBackToTopNeeded() {
const offset = this.scrollService.scrollPosition;
if (offset > 100) {
this.backToTopNeeded = true;
} else if (offset < 40) {
this.backToTopNeeded = false;
}
fromEvent(this.document.body, 'scroll').pipe(takeUntil(this.onDestroy)).subscribe(() => {
const offset = this.scrollService.scrollPosition;
if (offset > 100) {
this.backToTopNeeded = true;
} else if (offset < 40) {
this.backToTopNeeded = false;
}
})
}
ngOnDestroy() {
@ -106,50 +96,46 @@ export class NavHeaderComponent implements OnInit, OnDestroy {
goTo(queryParamName: string, filter: any) {
let params: any = {};
params[queryParamName] = filter;
params['page'] = 1;
params[FilterQueryParam.Page] = 1;
this.clearSearch();
this.router.navigate(['all-series'], {queryParams: params});
}
goToPerson(role: PersonRole, filter: any) {
// TODO: Move this to utility service
this.clearSearch();
switch(role) {
case PersonRole.Writer:
this.goTo('writers', filter);
this.goTo(FilterQueryParam.Writers, filter);
break;
case PersonRole.Artist:
this.goTo('artists', filter);
this.goTo(FilterQueryParam.Artists, filter);
break;
case PersonRole.Character:
this.goTo('character', filter);
this.goTo(FilterQueryParam.Character, filter);
break;
case PersonRole.Colorist:
this.goTo('colorist', filter);
this.goTo(FilterQueryParam.Colorist, filter);
break;
case PersonRole.Editor:
this.goTo('editor', filter);
this.goTo(FilterQueryParam.Editor, filter);
break;
case PersonRole.Inker:
this.goTo('inker', filter);
this.goTo(FilterQueryParam.Inker, filter);
break;
case PersonRole.CoverArtist:
this.goTo('coverArtists', filter);
break;
case PersonRole.Inker:
this.goTo('inker', filter);
this.goTo(FilterQueryParam.CoverArtists, filter);
break;
case PersonRole.Letterer:
this.goTo('letterer', filter);
this.goTo(FilterQueryParam.Letterer, filter);
break;
case PersonRole.Penciller:
this.goTo('penciller', filter);
this.goTo(FilterQueryParam.Penciller, filter);
break;
case PersonRole.Publisher:
this.goTo('publisher', filter);
this.goTo(FilterQueryParam.Publisher, filter);
break;
case PersonRole.Translator:
this.goTo('translator', filter);
this.goTo(FilterQueryParam.Translator, filter);
break;
}
}
@ -183,10 +169,7 @@ export class NavHeaderComponent implements OnInit, OnDestroy {
scrollToTop() {
window.scroll({
top: 0,
behavior: 'smooth'
});
this.scrollService.scrollTo(0, this.document.body);
}
focusUpdate(searchFocused: boolean) {