Readable Bookmarks (#1228)
* 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
GitHub
parent
62715a9977
commit
9d6843614d
48 changed files with 648 additions and 634 deletions
|
|
@ -1,4 +1,7 @@
|
|||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { Breakpoint, UtilityService } from 'src/app/shared/_services/utility.service';
|
||||
import { NavService } from 'src/app/_services/nav.service';
|
||||
|
||||
/**
|
||||
* This should go on all pages which have the side nav present and is not Settings related.
|
||||
|
|
@ -9,7 +12,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
|||
templateUrl: './side-nav-companion-bar.component.html',
|
||||
styleUrls: ['./side-nav-companion-bar.component.scss']
|
||||
})
|
||||
export class SideNavCompanionBarComponent implements OnInit {
|
||||
export class SideNavCompanionBarComponent implements OnInit, OnDestroy {
|
||||
/**
|
||||
* If the page should show a filter
|
||||
*/
|
||||
|
|
@ -34,10 +37,26 @@ export class SideNavCompanionBarComponent implements OnInit {
|
|||
|
||||
isFilterOpen = false;
|
||||
|
||||
constructor() { }
|
||||
private onDestroy: Subject<void> = new Subject();
|
||||
|
||||
constructor(private navService: NavService, private utilityService: UtilityService) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.isFilterOpen = this.filterOpenByDefault;
|
||||
|
||||
// If user opens side nav while filter is open on mobile, then collapse filter (as it doesn't render well) TODO: Change this when we have new drawer
|
||||
this.navService.sideNavCollapsed$.pipe(takeUntil(this.onDestroy)).subscribe(sideNavCollapsed => {
|
||||
if (this.isFilterOpen && sideNavCollapsed && this.utilityService.getActiveBreakpoint() < Breakpoint.Desktop) {
|
||||
this.isFilterOpen = false;
|
||||
this.filterOpen.emit(this.isFilterOpen);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.onDestroy.next();
|
||||
this.onDestroy.complete();
|
||||
}
|
||||
|
||||
toggleFilter() {
|
||||
|
|
|
|||
|
|
@ -8,21 +8,22 @@
|
|||
</app-side-nav-item> -->
|
||||
|
||||
<app-side-nav-item icon="fa-home" title="Home" link="/library/"></app-side-nav-item>
|
||||
<app-side-nav-item icon="fa-list" title="Collections" link="/collections/"></app-side-nav-item>
|
||||
<app-side-nav-item icon="fa-list-ol" title="Reading Lists" link="/lists/"></app-side-nav-item>
|
||||
<app-side-nav-item icon="fa-regular fa-rectangle-list" title="All Series" link="/all-series/"></app-side-nav-item>
|
||||
<div class="mb-2 mt-3 ms-2 me-2" *ngIf="libraries.length > 10">
|
||||
<label for="filter" class="form-label visually-hidden">Filter</label>
|
||||
<div class="input-group">
|
||||
<input id="filter" autocomplete="off" class="form-control" [(ngModel)]="filterQuery" type="text" aria-describedby="reset-input">
|
||||
<button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="filterQuery = '';">Clear</button>
|
||||
</div>
|
||||
<app-side-nav-item icon="fa-list" title="Collections" link="/collections/"></app-side-nav-item>
|
||||
<app-side-nav-item icon="fa-list-ol" title="Reading Lists" link="/lists/"></app-side-nav-item>
|
||||
<app-side-nav-item icon="fa-bookmark" title="Bookmarks" link="/bookmarks/"></app-side-nav-item>
|
||||
<app-side-nav-item icon="fa-regular fa-rectangle-list" title="All Series" link="/all-series/"></app-side-nav-item>
|
||||
<div class="mb-2 mt-3 ms-2 me-2" *ngIf="libraries.length > 10">
|
||||
<label for="filter" class="form-label visually-hidden">Filter</label>
|
||||
<div class="input-group">
|
||||
<input id="filter" autocomplete="off" class="form-control" [(ngModel)]="filterQuery" type="text" aria-describedby="reset-input">
|
||||
<button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="filterQuery = '';">Clear</button>
|
||||
</div>
|
||||
<app-side-nav-item *ngFor="let library of libraries | filter: filterLibrary" [link]="'/library/' + library.id + '/'"
|
||||
[icon]="utilityService.getLibraryTypeIcon(library.type)" [title]="library.name" [comparisonMethod]="'startsWith'">
|
||||
<ng-container actions>
|
||||
<app-card-actionables [actions]="actions" [labelBy]="library.name" iconClass="fa-ellipsis-v" (actionHandler)="performAction($event, library)"></app-card-actionables>
|
||||
</ng-container>
|
||||
</div>
|
||||
<app-side-nav-item *ngFor="let library of libraries | filter: filterLibrary" [link]="'/library/' + library.id + '/'"
|
||||
[icon]="utilityService.getLibraryTypeIcon(library.type)" [title]="library.name" [comparisonMethod]="'startsWith'">
|
||||
<ng-container actions>
|
||||
<app-card-actionables [actions]="actions" [labelBy]="library.name" iconClass="fa-ellipsis-v" (actionHandler)="performAction($event, library)"></app-card-actionables>
|
||||
</ng-container>
|
||||
</app-side-nav-item>
|
||||
</div>
|
||||
<div class="side-nav-overlay" (click)="navService?.toggleSideNav()" [ngClass]="{'closed' : !(navService?.sideNavCollapsed$ | async)}"></div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Observable, Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil, takeWhile } from 'rxjs/operators';
|
||||
import { filter, map, take, takeUntil, takeWhile } from 'rxjs/operators';
|
||||
import { EVENTS, MessageHubService } from 'src/app/_services/message-hub.service';
|
||||
import { UtilityService } from '../../shared/_services/utility.service';
|
||||
import { Breakpoint, UtilityService } from '../../shared/_services/utility.service';
|
||||
import { Library } from '../../_models/library';
|
||||
import { User } from '../../_models/user';
|
||||
import { AccountService } from '../../_services/account.service';
|
||||
|
|
@ -29,12 +29,12 @@ export class SideNavComponent implements OnInit, OnDestroy {
|
|||
return library.name.toLowerCase().indexOf((this.filterQuery || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
private onDestory: Subject<void> = new Subject();
|
||||
private onDestroy: Subject<void> = new Subject();
|
||||
|
||||
|
||||
constructor(public accountService: AccountService, private libraryService: LibraryService,
|
||||
public utilityService: UtilityService, private messageHub: MessageHubService,
|
||||
private actionFactoryService: ActionFactoryService, private actionService: ActionService, public navService: NavService) { }
|
||||
private actionFactoryService: ActionFactoryService, private actionService: ActionService, public navService: NavService, private router: Router) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
|
||||
|
|
@ -49,16 +49,27 @@ export class SideNavComponent implements OnInit, OnDestroy {
|
|||
this.actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this));
|
||||
});
|
||||
|
||||
this.messageHub.messages$.pipe(takeUntil(this.onDestory), filter(event => event.event === EVENTS.LibraryModified)).subscribe(event => {
|
||||
this.messageHub.messages$.pipe(takeUntil(this.onDestroy), filter(event => event.event === EVENTS.LibraryModified)).subscribe(event => {
|
||||
this.libraryService.getLibrariesForMember().pipe(take(1)).subscribe((libraries: Library[]) => {
|
||||
this.libraries = libraries;
|
||||
});
|
||||
});
|
||||
|
||||
this.router.events
|
||||
.pipe(filter(event => event instanceof NavigationEnd),
|
||||
takeUntil(this.onDestroy),
|
||||
map(evt => evt as NavigationEnd))
|
||||
.subscribe((evt: NavigationEnd) => {
|
||||
if (this.utilityService.getActiveBreakpoint() < Breakpoint.Desktop) {
|
||||
// collapse side nav
|
||||
this.navService.toggleSideNav();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.onDestory.next();
|
||||
this.onDestory.complete();
|
||||
this.onDestroy.next();
|
||||
this.onDestroy.complete();
|
||||
}
|
||||
|
||||
handleAction(action: Action, library: Library) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue