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

Disable Animations + Lots of bugfixes and Polish (#1561)

Browse source 
* Fixed inputs not showing inline validation due to a missing class

* Fixed some checks

* Increased the button size on manga reader (develop)

* Migrated a type cast to a pure pipe

* Sped up the check for if SendTo should render on the menu

* Don't allow user to bookmark in bookmark mode

* Fixed a bug where Scan Series would skip over Specials due to how new scan loop works.

* Fixed scroll to top button persisting when navigating between pages

* Edit Series modal now doesn't have a lock field for Series, which can't be locked as it is inheritently locked.

Added some validation to ensure Name and SortName are required.

* Fixed up some spacing

* Fixed actionable menu not opening submenu on mobile

* Cleaned up the layout of cover image on series detail

* Show all volume or chapters (if only one volume) for cover selection on series

* Don't open submenu to right if there is no space

* Fixed up cover image not allowing custom saves of existing series/chapter/volume images.

Fixed up logging so console output matches log file.

* Implemented the ability to turn off css transitions in the UI.

* Updated a note internally

* Code smells

* Added InstallId when pinging the email service to allow throughput tracking
This commit is contained in:
Joe Milazzo 2022-09-26 12:40:25 -05:00 • committed by GitHub
parent ee7d109170
commit 28ab34c66d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
59 changed files with 2103 additions and 444 deletions
Download patch file Download diff file Expand all files Collapse all files

1
UI/Web/src/app/_models/preferences/preferences.ts
View file

@ -35,6 +35,7 @@ export interface Preferences {
globalPageLayoutMode: PageLayoutMode;
blurUnreadSummaries: boolean;
promptForDownloadSize: boolean;
noTransitions: boolean;
}
export const readingDirections = [{text: 'Left to Right', value: ReadingDirection.LeftToRight}, {text: 'Right to Left', value: ReadingDirection.RightToLeft}];

105
UI/Web/src/app/_services/action-factory.service.ts
View file

@ -4,6 +4,7 @@ import { Chapter } from '../_models/chapter';
import { CollectionTag } from '../_models/collection-tag';
import { Device } from '../_models/device/device';
import { Library } from '../_models/library';
import { MangaFormat } from '../_models/manga-format';
import { ReadingList } from '../_models/reading-list';
import { Series } from '../_models/series';
import { Volume } from '../_models/volume';
@ -92,6 +93,10 @@ export interface ActionItem<T> {
callback: (action: ActionItem<T>, data: T) => void;
requiresAdmin: boolean;
children: Array<ActionItem<T>>;
/**
* An optional class which applies to an item. ie) danger on a delete action
*/
class?: string;
/**
* Indicates that there exists a separate list will be loaded from an API.
* Rule: If using this, only one child should exist in children with the Action for dynamicList.
@ -168,7 +173,15 @@ export class ActionFactoryService {
dummyCallback(action: ActionItem<any>, data: any) {}
_resetActions() {
filterSendToAction(actions: Array<ActionItem<Chapter>>, chapter: Chapter) {
if (chapter.files.filter(f => f.format === MangaFormat.EPUB || f.format === MangaFormat.PDF).length !== chapter.files.length) {
// Remove Send To as it doesn't apply
return actions.filter(item => item.title !== 'Send To');
}
return actions;
}
private _resetActions() {
this.libraryActions = [
{
action: Action.Scan,
@ -226,6 +239,13 @@ export class ActionFactoryService {
requiresAdmin: false,
children: [],
},
{
action: Action.Scan,
title: 'Scan Series',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
},
{
action: Action.Submenu,
title: 'Add to',
@ -263,18 +283,22 @@ export class ActionFactoryService {
],
},
{
action: Action.Scan,
title: 'Scan Series',
action: Action.Submenu,
title: 'Send To',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
},
{
action: Action.Edit,
title: 'Edit',
callback: this.dummyCallback,
requiresAdmin: true,
children: [],
children: [
{
action: Action.SendTo,
title: '',
callback: this.dummyCallback,
requiresAdmin: false,
dynamicList: this.deviceService.devices$.pipe(map((devices: Array<Device>) => devices.map(d => {
return {'title': d.name, 'data': d};
}), shareReplay())),
children: []
}
],
},
{
action: Action.Submenu,
@ -301,10 +325,25 @@ export class ActionFactoryService {
title: 'Delete',
callback: this.dummyCallback,
requiresAdmin: true,
class: 'danger',
children: [],
},
],
},
{
action: Action.Download,
title: 'Download',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
},
{
action: Action.Edit,
title: 'Edit',
callback: this.dummyCallback,
requiresAdmin: true,
children: [],
},
];
this.volumeActions = [
@ -345,15 +384,15 @@ export class ActionFactoryService {
]
},
{
action: Action.Edit,
title: 'Details',
action: Action.Download,
title: 'Download',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
},
{
action: Action.Download,
title: 'Download',
action: Action.Edit,
title: 'Details',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
@ -397,29 +436,11 @@ export class ActionFactoryService {
}
]
},
{
action: Action.Edit,
title: 'Details',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
},
// RBS will handle rendering this, so non-admins with download are appicable
{
action: Action.Download,
title: 'Download',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
},
{
action: Action.Submenu,
title: 'Send To',
callback: this.dummyCallback,
requiresAdmin: false,
// dynamicList: this.deviceService.devices$.pipe(map((devices: Array<Device>) => devices.map(d => {
// return {'title': d.name, 'data': d};
// }), shareReplay())),
children: [
{
action: Action.SendTo,
@ -433,6 +454,21 @@ export class ActionFactoryService {
}
],
},
// RBS will handle rendering this, so non-admins with download are appicable
{
action: Action.Download,
title: 'Download',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
},
{
action: Action.Edit,
title: 'Details',
callback: this.dummyCallback,
requiresAdmin: false,
children: [],
},
];
this.readingListActions = [
@ -448,6 +484,7 @@ export class ActionFactoryService {
title: 'Delete',
callback: this.dummyCallback,
requiresAdmin: false,
class: 'danger',
children: [],
},
];
@ -471,6 +508,7 @@ export class ActionFactoryService {
action: Action.Delete,
title: 'Clear',
callback: this.dummyCallback,
class: 'danger',
requiresAdmin: false,
children: [],
},
@ -494,4 +532,5 @@ export class ActionFactoryService {
actions.forEach((action) => this.applyCallback(action, callback));
return actions;
}
}

5
UI/Web/src/app/_services/theme.service.ts
View file

@ -3,11 +3,12 @@ import { HttpClient } from '@angular/common/http';
import { Inject, Injectable, OnDestroy, Renderer2, RendererFactory2, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ToastrService } from 'ngx-toastr';
import { map, ReplaySubject, Subject, takeUntil, take } from 'rxjs';
import { map, ReplaySubject, Subject, takeUntil, take, distinctUntilChanged, Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { ConfirmService } from '../shared/confirm.service';
import { NotificationProgressEvent } from '../_models/events/notification-progress-event';
import { SiteTheme, ThemeProvider } from '../_models/preferences/site-theme';
import { AccountService } from './account.service';
import { EVENTS, MessageHubService } from './message-hub.service';
@ -24,7 +25,7 @@ export class ThemeService implements OnDestroy {
private themesSource = new ReplaySubject<SiteTheme[]>(1);
public themes$ = this.themesSource.asObservable();
/**
* Maintain a cache of themes. SignalR will inform us if we need to refresh cache
*/

4
UI/Web/src/app/admin/edit-user/edit-user.component.html
View file

@ -11,7 +11,7 @@
<div class="col-md-6 col-sm-12 pe-2">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input id="username" class="form-control" formControlName="username" type="text">
<input id="username" class="form-control" formControlName="username" type="text" [class.is-invalid]="userForm.get('username')?.invalid && userForm.get('username')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="userForm.dirty || userForm.touched">
<div *ngIf="userForm.get('username')?.errors?.required">
This field is required
@ -23,7 +23,7 @@
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">Email</label>
<input class="form-control" type="email" id="email" formControlName="email">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="userForm.dirty || userForm.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="userForm.dirty || userForm.touched" [class.is-invalid]="userForm.get('email')?.invalid && userForm.get('email')?.touched">
<div *ngIf="userForm.get('email')?.errors?.required">
This field is required
</div>

2
UI/Web/src/app/admin/invite-user/invite-user.component.html
View file

@ -14,7 +14,7 @@
<div class="row g-0">
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">Email</label>
<input class="form-control" type="email" id="email" formControlName="email" required>
<input class="form-control" type="email" id="email" formControlName="email" required [class.is-invalid]="inviteForm.get('email')?.invalid && inviteForm.get('email')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="inviteForm.dirty || inviteForm.touched">
<div *ngIf="email?.errors?.required">
This field is required

11
UI/Web/src/app/admin/manage-settings/manage-settings.component.html
View file

@ -32,7 +32,9 @@
<label for="backup-tasks" class="form-label">Days of Backups</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="backupTasksTooltip" role="button" tabindex="0"></i>
<ng-template #backupTasksTooltip>The number of backups to maintain. Default is 30, minumum is 1, maximum is 30.</ng-template>
<span class="visually-hidden" id="backup-tasks-help">The number of backups to maintain. Default is 30, minumum is 1, maximum is 30.</span>
<input id="backup-tasks" aria-describedby="backup-tasks-help" class="form-control" formControlName="totalBackups" type="number" step="1" min="1" max="30" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
<input id="backup-tasks" aria-describedby="backup-tasks-help" class="form-control" formControlName="totalBackups"
type="number" step="1" min="1" max="30" onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="settingsForm.get('totalBackups')?.invalid && settingsForm.get('totalBackups')?.touched">
<ng-container *ngIf="settingsForm.get('totalBackups')?.errors as errors">
<p class="invalid-feedback" *ngIf="errors.min">
You must have at least 1 backup
@ -50,7 +52,9 @@
<label for="log-tasks" class="form-label">Days of Logs</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="logTasksTooltip" role="button" tabindex="0"></i>
<ng-template #logTasksTooltip>The number of logs to maintain. Default is 30, minumum is 1, maximum is 30.</ng-template>
<span class="visually-hidden" id="log-tasks-help">The number of backups to maintain. Default is 30, minumum is 1, maximum is 30.</span>
<input id="log-tasks" aria-describedby="log-tasks-help" class="form-control" formControlName="totalLogs" type="number" step="1" min="1" max="30" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
<input id="log-tasks" aria-describedby="log-tasks-help" class="form-control" formControlName="totalLogs"
type="number" step="1" min="1" max="30" onkeypress="return event.charCode >= 48 && event.charCode <= 57"
[class.is-invalid]="settingsForm.get('totalLogs')?.invalid && settingsForm.get('totalLogs')?.touched">
<ng-container *ngIf="settingsForm.get('totalLogs')?.errors as errors">
<p class="invalid-feedback" *ngIf="errors.min">
You must have at least 1 log
@ -68,7 +72,8 @@
<label for="logging-level-port" class="form-label">Logging Level</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="loggingLevelTooltip" role="button" tabindex="0"></i>
<ng-template #loggingLevelTooltip>Use debug to help identify issues. Debug can eat up a lot of disk space.</ng-template>
<span class="visually-hidden" id="logging-level-port-help">Port the server listens on.</span>
<select id="logging-level-port" aria-describedby="logging-level-port-help" class="form-select" formControlName="loggingLevel">
<select id="logging-level-port" aria-describedby="logging-level-port-help" class="form-select" formControlName="loggingLevel"
[class.is-invalid]="settingsForm.get('loggingLevel')?.invalid && settingsForm.get('loggingLevel')?.touched">
<option *ngFor="let level of logLevels" [value]="level">{{level | titlecase}}</option>
</select>
</div>

25
UI/Web/src/app/app.component.html
View file

@ -1,16 +1,17 @@
<app-nav-header></app-nav-header>
<div [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
<a id="content"></a>
<app-side-nav *ngIf="navService.sideNavVisibility$ | async as sideNavVisibile"></app-side-nav>
<div class="container-fluid" [ngClass]="{'g-0': !(navService.sideNavVisibility$ | async)}">
<div style="padding: 20px 0 0;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
<div class="companion-bar" [ngClass]="{'companion-bar-content': !(navService.sideNavCollapsed$ | async)}">
<router-outlet></router-outlet>
<div [ngClass]="{'no-transitions' : (transitionState$ | async)}">
<app-nav-header></app-nav-header>
<div [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
<a id="content"></a>
<app-side-nav *ngIf="navService.sideNavVisibility$ | async as sideNavVisibile"></app-side-nav>
<div class="container-fluid" [ngClass]="{'g-0': !(navService.sideNavVisibility$ | async)}">
<div style="padding: 20px 0 0;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
<div class="companion-bar" [ngClass]="{'companion-bar-content': !(navService.sideNavCollapsed$ | async)}">
<router-outlet></router-outlet>
</div>
</div>
<ng-template #noSideNav>
<router-outlet></router-outlet>
</ng-template>
</div>
<ng-template #noSideNav>
<router-outlet></router-outlet>
</ng-template>
</div>
</div>

9
UI/Web/src/app/app.component.ts
View file

@ -1,6 +1,6 @@
import { Component, HostListener, Inject, OnInit } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import { take } from 'rxjs/operators';
import { distinctUntilChanged, map, take } from 'rxjs/operators';
import { AccountService } from './_services/account.service';
import { LibraryService } from './_services/library.service';
import { MessageHubService } from './_services/message-hub.service';
@ -9,6 +9,7 @@ import { filter } from 'rxjs/operators';
import { NgbModal, NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap';
import { DOCUMENT } from '@angular/common';
import { DeviceService } from './_services/device.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
@ -17,6 +18,8 @@ import { DeviceService } from './_services/device.service';
})
export class AppComponent implements OnInit {
transitionState$!: Observable<boolean>;
constructor(private accountService: AccountService, public navService: NavService,
private messageHub: MessageHubService, private libraryService: LibraryService,
router: Router, private ngbModal: NgbModal, ratingConfig: NgbRatingConfig,
@ -35,6 +38,10 @@ export class AppComponent implements OnInit {
}
});
this.transitionState$ = this.accountService.currentUser$.pipe(map((user) => {
if (!user) return false;
return user.preferences.noTransitions;
}));
}
@HostListener('window:resize', ['$event'])

1
UI/Web/src/app/app.module.ts
View file

@ -15,6 +15,7 @@ import { NavModule } from './nav/nav.module';
import { DevicesComponent } from './devices/devices.component';
// Disable Web Animations if the user's browser (such as iOS 12.5.5) does not support this.
const disableAnimations = !('animate' in document.documentElement);
if (disableAnimations) console.error("Web Animations have been disabled as your current browser does not support this.");

20
UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html
View file

@ -16,9 +16,13 @@
<div class="row g-0">
<div class="mb-3" style="width: 100%">
<label for="name" class="form-label">Name</label>
<div class="input-group {{series.nameLocked ? 'lock-active' : ''}}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: series, field: 'nameLocked' }"></ng-container>
<input id="name" class="form-control" formControlName="name" type="text">
<div class="input-group">
<input id="name" class="form-control" formControlName="name" type="text" [class.is-invalid]="editSeriesForm.get('name')?.invalid && editSeriesForm.get('name')?.touched">
<ng-container *ngIf="editSeriesForm.get('name')?.errors as errors">
<div class="invalid-feedback" *ngIf="errors.required">
This field is required
</div>
</ng-container>
</div>
</div>
</div>
@ -26,9 +30,15 @@
<div class="row g-0">
<div class="mb-3" style="width: 100%">
<label for="sort-name" class="form-label">Sort Name</label>
<div class="input-group {{series.sortNameLocked ? 'lock-active' : ''}}">
<div class="input-group {{series.sortNameLocked ? 'lock-active' : ''}}"
[class.is-invalid]="editSeriesForm.get('sortName')?.invalid && editSeriesForm.get('sortName')?.touched">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: series, field: 'sortNameLocked' }"></ng-container>
<input id="sort-name" class="form-control" formControlName="sortName" type="text">
<ng-container *ngIf="editSeriesForm.get('sortName')?.errors as errors">
<div class="invalid-feedback" *ngIf="errors.required">
This field is required
</div>
</ng-container>
</div>
</div>
</div>
@ -418,7 +428,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="close()">Close</button>
<button type="submit" class="btn btn-primary" (click)="save()">Save</button>
<button type="submit" class="btn btn-primary" [disabled]="!editSeriesForm.valid" (click)="save()">Save</button>
</div>
</div>

12
UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts
View file

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { forkJoin, Observable, of, Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
@ -126,9 +126,9 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.editSeriesForm = this.fb.group({
id: new FormControl(this.series.id, []),
summary: new FormControl('', []),
name: new FormControl(this.series.name, []),
name: new FormControl(this.series.name, [Validators.required]),
localizedName: new FormControl(this.series.localizedName, []),
sortName: new FormControl(this.series.sortName, []),
sortName: new FormControl(this.series.sortName, [Validators.required]),
rating: new FormControl(this.series.userRating, []),
coverImageIndex: new FormControl(0, []),
@ -209,6 +209,12 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.seriesVolumes = volumes;
this.isLoadingVolumes = false;
if (this.seriesVolumes.length === 1) {
this.imageUrls.push(...this.seriesVolumes[0].chapters.map((c: Chapter) => this.imageService.getChapterCoverImage(c.id)));
} else {
this.imageUrls.push(...this.seriesVolumes.map(v => this.imageService.getVolumeCoverImage(v.id)));
}
volumes.forEach(v => {
this.volumeCollapsed[v.name] = true;
});

6
UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts
View file

@ -134,6 +134,12 @@ export class CardDetailDrawerComponent implements OnInit, OnDestroy {
this.chapterActions = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this))
.filter(item => item.action !== Action.Edit);
this.chapterActions.push({title: 'Read', action: Action.Read, callback: this.handleChapterActionCallback.bind(this), requiresAdmin: false, children: []});
if (this.isChapter) {
const chapter = this.utilityService.asChapter(this.data);
this.chapterActions = this.actionFactoryService.filterSendToAction(this.chapterActions, chapter);
} else {
this.chapterActions = this.actionFactoryService.filterSendToAction(this.chapterActions, this.chapters[0]);
}
this.libraryService.getLibraryType(this.libraryId).subscribe(type => {
this.libraryType = type;

4
UI/Web/src/app/cards/card-item/card-actionables/card-actionables.component.html
View file

@ -10,7 +10,7 @@
<!-- Non Submenu items -->
<ng-container *ngIf="action.children === undefined || action?.children?.length === 0 || action.dynamicList != undefined; else submenuDropdown">
<ng-container *ngIf="action.dynamicList != undefined && toDList(action.dynamicList | async) as dList; else justItem">
<ng-container *ngIf="action.dynamicList != undefined && (action.dynamicList | async | dynamicList) as dList; else justItem">
<ng-container *ngFor="let dynamicItem of dList">
<button ngbDropdownItem (click)="performDynamicClick($event, action, dynamicItem)">{{dynamicItem.title}}</button>
</ng-container>
@ -23,7 +23,7 @@
<ng-template #submenuDropdown>
<!-- Submenu items -->
<ng-container *ngIf="shouldRenderSubMenu(action, action.children[0].dynamicList | async)">
<div ngbDropdown #subMenuHover="ngbDropdown" placement="right" (mouseover)="preventEvent($event); openSubmenu(action.title, subMenuHover)" (mouseleave)="preventEvent($event)">
<div ngbDropdown #subMenuHover="ngbDropdown" placement="right left" (click)="preventEvent($event); openSubmenu(action.title, subMenuHover)" (mouseover)="preventEvent($event); openSubmenu(action.title, subMenuHover)" (mouseleave)="preventEvent($event)">
<button id="actions-{{action.title}}" class="submenu-toggle" ngbDropdownToggle>{{action.title}} <i class="fa-solid fa-angle-right submenu-icon"></i></button>
<div ngbDropdownMenu attr.aria-labelledby="actions-{{action.title}}">
<ng-container *ngTemplateOutlet="submenu; context: { list: action.children }"></ng-container>

7
UI/Web/src/app/cards/card-item/card-actionables/card-actionables.component.ts
View file

@ -19,6 +19,7 @@ export class CardActionablesComponent implements OnInit {
@Input() disabled: boolean = false;
@Output() actionHandler = new EventEmitter<ActionItem<any>>();
isAdmin: boolean = false;
canDownload: boolean = false;
submenu: {[key: string]: NgbDropdown} = {};
@ -74,10 +75,4 @@ export class CardActionablesComponent implements OnInit {
action._extra = dynamicItem;
this.performAction(event, action);
}
toDList(d: any) {
console.log('d: ', d);
if (d === undefined || d === null) return [];
return d as {title: string, data: any}[];
}
}

40
UI/Web/src/app/cards/card-item/card-item.component.ts
View file

@ -13,7 +13,7 @@ import { Series } from 'src/app/_models/series';
import { User } from 'src/app/_models/user';
import { Volume } from 'src/app/_models/volume';
import { AccountService } from 'src/app/_services/account.service';
import { Action, ActionItem } from 'src/app/_services/action-factory.service';
import { Action, ActionFactoryService, ActionItem } from 'src/app/_services/action-factory.service';
import { ImageService } from 'src/app/_services/image.service';
import { LibraryService } from 'src/app/_services/library.service';
import { EVENTS, MessageHubService } from 'src/app/_services/message-hub.service';
@ -126,9 +126,11 @@ export class CardItemComponent implements OnInit, OnDestroy {
public utilityService: UtilityService, private downloadService: DownloadService,
public bulkSelectionService: BulkSelectionService,
private messageHub: MessageHubService, private accountService: AccountService,
private scrollService: ScrollService, private readonly cdRef: ChangeDetectorRef) {}
private scrollService: ScrollService, private readonly cdRef: ChangeDetectorRef,
private actionFactoryService: ActionFactoryService) {}
ngOnInit(): void {
if (this.entity.hasOwnProperty('promoted') && this.entity.hasOwnProperty('title')) {
this.suppressArchiveWarning = true;
this.cdRef.markForCheck();
@ -172,6 +174,8 @@ export class CardItemComponent implements OnInit, OnDestroy {
} else if (this.utilityService.isSeries(this.entity)) {
this.tooltipTitle = this.title || (this.utilityService.asSeries(this.entity).name);
}
this.filterSendTo();
this.accountService.currentUser$.pipe(takeUntil(this.onDestroy)).subscribe(user => {
this.user = user;
});
@ -192,26 +196,10 @@ export class CardItemComponent implements OnInit, OnDestroy {
chapter.pagesRead = updateEvent.pagesRead;
}
} else {
// Ignore
return;
// re-request progress for the series
// const s = this.utilityService.asSeries(this.entity);
// let pagesRead = 0;
// if (s.hasOwnProperty('volumes')) {
// s.volumes.forEach(v => {
// v.chapters.forEach(c => {
// if (c.id === updateEvent.chapterId) {
// c.pagesRead = updateEvent.pagesRead;
// }
// pagesRead += c.pagesRead;
// });
// });
// s.pagesRead = pagesRead;
// }
}
}
this.read = updateEvent.pagesRead;
this.cdRef.detectChanges();
});
@ -312,4 +300,20 @@ export class CardItemComponent implements OnInit, OnDestroy {
this.selection.emit(this.selected);
this.cdRef.detectChanges();
}
filterSendTo() {
if (!this.actions || this.actions.length === 0) return;
if (this.utilityService.isChapter(this.entity)) {
this.actions = this.actionFactoryService.filterSendToAction(this.actions, this.entity as Chapter);
} else if (this.utilityService.isVolume(this.entity)) {
const vol = this.utilityService.asVolume(this.entity);
this.actions = this.actionFactoryService.filterSendToAction(this.actions, vol.chapters[0]);
} else if (this.utilityService.isSeries(this.entity)) {
const series = (this.entity as Series);
if (series.format === MangaFormat.EPUB || series.format === MangaFormat.PDF) {
this.actions = this.actions.filter(a => a.title !== 'Send To');
}
}
}
}

2
UI/Web/src/app/cards/cards.module.ts
View file

@ -26,6 +26,7 @@ import { ListItemComponent } from './list-item/list-item.component';
import { VirtualScrollerModule } from '@iharbeck/ngx-virtual-scroller';
import { SeriesInfoCardsComponent } from './series-info-cards/series-info-cards.component';
import { DownloadIndicatorComponent } from './download-indicator/download-indicator.component';
import { DynamicListPipe } from './dynamic-list.pipe';
@ -48,6 +49,7 @@ import { DownloadIndicatorComponent } from './download-indicator/download-indica
ListItemComponent,
SeriesInfoCardsComponent,
DownloadIndicatorComponent,
DynamicListPipe,
],
imports: [
CommonModule,

48
UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts
View file

@ -71,6 +71,11 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
this.form = this.fb.group({
coverImageUrl: new FormControl('', [])
});
this.imageUrls.forEach(url => {
});
console.log('imageUrls: ', this.imageUrls);
this.cdRef.markForCheck();
}
@ -79,6 +84,11 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
this.onDestroy.complete();
}
/**
* Generates a base64 encoding for an Image. Used in manual file upload flow.
* @param img
* @returns
*/
getBase64Image(img: HTMLImageElement) {
const canvas = document.createElement("canvas");
canvas.width = img.width;
@ -95,6 +105,25 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
selectImage(index: number) {
if (this.selectedIndex === index) { return; }
// If we load custom images of series/chapters/covers, then those urls are not properly encoded, so on select we have to clean them up
if (!this.imageUrls[index].startsWith('data:image/')) {
const imgUrl = this.imageUrls[index];
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = imgUrl;
img.onload = (e) => this.handleUrlImageAdd(img, index);
img.onerror = (e) => {
this.toastr.error('The image could not be fetched due to server refusing request. Please download and upload from file instead.');
this.form.get('coverImageUrl')?.setValue('');
this.cdRef.markForCheck();
};
this.form.get('coverImageUrl')?.setValue('');
this.cdRef.markForCheck();
this.selectedBase64Url.emit(this.imageUrls[this.selectedIndex]);
return;
}
this.selectedIndex = index;
this.cdRef.markForCheck();
this.imageSelected.emit(this.selectedIndex);
@ -115,9 +144,9 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
}
}
loadImage() {
const url = this.form.get('coverImageUrl')?.value.trim();
if (!url && url === '') return;
loadImage(url?: string) {
url = url || this.form.get('coverImageUrl')?.value.trim();
if (!url || url === '') return;
this.uploadService.uploadByUrl(url).subscribe(filename => {
const img = new Image();
@ -134,6 +163,8 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
});
}
changeMode(mode: 'url') {
this.mode = mode;
this.setupEnterHandler();
@ -161,7 +192,7 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
handleFileImageAdd(e: any) {
if (e.target == null) return;
this.imageUrls.push(e.target.result);
this.imageUrls.push(e.target.result); // This is base64 already
this.imageUrlsChange.emit(this.imageUrls);
this.selectedIndex += 1;
this.imageSelected.emit(this.selectedIndex); // Auto select newly uploaded image
@ -169,9 +200,14 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
this.cdRef.markForCheck();
}
handleUrlImageAdd(img: HTMLImageElement) {
handleUrlImageAdd(img: HTMLImageElement, index: number = -1) {
const url = this.getBase64Image(img);
this.imageUrls.push(url);
if (index >= 0) {
this.imageUrls[index] = url;
} else {
this.imageUrls.push(url);
}
this.imageUrlsChange.emit(this.imageUrls);
this.cdRef.markForCheck();

14
UI/Web/src/app/cards/dynamic-list.pipe.ts Normal file
View file

@ -0,0 +1,14 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'dynamicList',
pure: true
})
export class DynamicListPipe implements PipeTransform {
transform(value: any): Array<{title: string, data: any}> {
if (value === undefined || value === null) return [];
return value as {title: string, data: any}[];
}
}

12
UI/Web/src/app/manga-reader/manga-reader.component.html
View file

@ -14,11 +14,11 @@
</div>
<div style="margin-left: auto; padding-right: 3%;">
<button class="btn btn-icon btn-sm" title="Shortcuts" (click)="openShortcutModal()">
<button class="btn btn-icon" title="Shortcuts" (click)="openShortcutModal()">
<i class="fa-regular fa-rectangle-list" aria-hidden="true"></i>
<span class="visually-hidden">Keyboard Shortcuts Modal</span>
</button>
<button *ngIf="!bookmarkMode && hasBookmarkRights" class="btn btn-icon btn-sm" role="checkbox" [attr.aria-checked]="CurrentPageBookmarked"
<button *ngIf="!bookmarkMode && hasBookmarkRights" class="btn btn-icon" role="checkbox" [attr.aria-checked]="CurrentPageBookmarked"
title="{{CurrentPageBookmarked ? 'Unbookmark Page' : 'Bookmark Page'}}" (click)="bookmarkPage()">
<i class="{{CurrentPageBookmarked ? 'fa' : 'far'}} fa-bookmark" aria-hidden="true"></i>
<span class="visually-hidden">{{CurrentPageBookmarked ? 'Unbookmark Page' : 'Bookmark Page'}}</span>
@ -98,8 +98,8 @@
<div class="mb-3" *ngIf="pageOptions != undefined && pageOptions.ceil != undefined">
<span class="visually-hidden" id="slider-info"></span>
<div class="row g-0">
<button class="btn btn-sm btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter();resetMenuCloseTimer();" title="Prev Chapter/Volume"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
<button class="btn btn-sm btn-icon col-1" [disabled]="prevPageDisabled || pageNum === 0" (click)="goToPage(0);resetMenuCloseTimer();" title="First Page"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
<button class="btn btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter();resetMenuCloseTimer();" title="Prev Chapter/Volume"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
<button class="btn btn-icon col-2" [disabled]="prevPageDisabled || pageNum === 0" (click)="goToPage(0);resetMenuCloseTimer();" title="First Page"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
<div class="col custom-slider" *ngIf="pageOptions.ceil > 0; else noSlider">
<ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" [manualRefresh]="refreshSlider" (userChangeEnd)="sliderPageUpdate($event);startMenuCloseTimer()" (userChange)="sliderDragUpdate($event)" (userChangeStart)="cancelMenuCloseTimer();"></ngx-slider>
</div>
@ -108,8 +108,8 @@
<ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" (userChangeEnd)="startMenuCloseTimer()" (userChangeStart)="cancelMenuCloseTimer();"></ngx-slider>
</div>
</ng-template>
<button class="btn btn-sm btn-icon col-2" [disabled]="nextPageDisabled || pageNum >= maxPages - 1" (click)="goToPage(this.maxPages);resetMenuCloseTimer();" title="Last Page"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
<button class="btn btn-sm btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter();resetMenuCloseTimer();" title="Next Chapter/Volume"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
<button class="btn btn-icon col-2" [disabled]="nextPageDisabled || pageNum >= maxPages - 1" (click)="goToPage(this.maxPages);resetMenuCloseTimer();" title="Last Page"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
<button class="btn btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter();resetMenuCloseTimer();" title="Next Chapter/Volume"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
</div>
</div>
<div class="row pt-4 ms-2 me-2">

2
UI/Web/src/app/manga-reader/manga-reader.component.ts
View file

@ -1526,6 +1526,8 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
event.stopPropagation();
event.preventDefault();
}
if (this.bookmarkMode) return;
const pageNum = this.pageNum;
const isDouble = this.layoutMode === LayoutMode.Double || this.layoutMode === LayoutMode.DoubleReversed;

2
UI/Web/src/app/metadata-filter/metadata-filter.component.html
View file

@ -331,7 +331,7 @@
<label for="release-year-min" class="form-label">Release Year</label>
<input type="text" id="release-year-min" formControlName="min" class="form-control" style="width: 62px" placeholder="Min">
</div>
<div style="margin-top: 37px !important">
<div style="margin-top: 37px !important; width: 49px;">
<i class="fa-solid fa-minus" aria-hidden="true"></i>
</div>
<div class="mb-3" style="margin-top: 0.5rem">

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

@ -1,8 +1,8 @@
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, takeUntil, takeWhile, tap } from 'rxjs/operators';
import { debounceTime, distinctUntilChanged, filter, takeUntil, tap } from 'rxjs/operators';
import { Chapter } from 'src/app/_models/chapter';
import { MangaFile } from 'src/app/_models/manga-file';
import { ScrollService } from 'src/app/_services/scroll.service';
@ -68,6 +68,13 @@ export class NavHeaderComponent implements OnInit, OnDestroy {
fromEvent(elem.nativeElement, 'scroll').pipe(debounceTime(20)).subscribe(() => this.checkBackToTopNeeded(elem.nativeElement));
}
})).subscribe();
// Sometimes the top event emitter can be slow, so let's also check when a navigation occurs and recalculate
this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe(() => {
this.checkBackToTopNeeded(this.scrollElem);
});
}
checkBackToTopNeeded(elem: HTMLElement) {

4
UI/Web/src/app/pipe/pipe.module.ts
View file

@ -34,7 +34,7 @@ import { DefaultDatePipe } from './default-date.pipe';
MangaFormatIconPipe,
LibraryTypePipe,
SafeStylePipe,
DefaultDatePipe
DefaultDatePipe,
],
imports: [
CommonModule,
@ -54,7 +54,7 @@ import { DefaultDatePipe } from './default-date.pipe';
MangaFormatIconPipe,
LibraryTypePipe,
SafeStylePipe,
DefaultDatePipe
DefaultDatePipe,
]
})
export class PipeModule { }

13
UI/Web/src/app/registration/add-email-to-account-migration-modal/add-email-to-account-migration-modal.component.html
View file

@ -14,7 +14,7 @@
<form [formGroup]="registerForm">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input id="username" class="form-control" formControlName="username" type="text">
<input id="username" class="form-control" formControlName="username" type="text" [class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('username')?.errors?.required">
This field is required
@ -24,7 +24,7 @@
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">Email</label>
<input class="form-control" type="email" id="email" formControlName="email" required>
<input class="form-control" type="email" id="email" formControlName="email" [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('email')?.errors?.required">
This field is required
@ -37,11 +37,18 @@
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
<input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password"
aria-describedby="password-help" [class.is-invalid]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('password')?.errors?.required">
This field is required
</div>
<div *ngIf="registerForm.get('password')?.errors?.minlength">
This field must be at least {{registerForm.get('password')?.errors?.minlength.requiredLength}} characters
</div>
<div *ngIf="registerForm.get('password')?.errors?.maxlength">
This field must be no more than {{registerForm.get('password')?.errors?.maxlength.requiredLength}} characters
</div>
</div>
</div>
</form>

2
UI/Web/src/app/registration/add-email-to-account-migration-modal/add-email-to-account-migration-modal.component.ts
View file

@ -29,7 +29,7 @@ export class AddEmailToAccountMigrationModalComponent implements OnInit {
ngOnInit(): void {
this.registerForm.addControl('username', new FormControl(this.username, [Validators.required]));
this.registerForm.addControl('email', new FormControl('', [Validators.required, Validators.email]));
this.registerForm.addControl('password', new FormControl(this.password, [Validators.required]));
this.registerForm.addControl('password', new FormControl(this.password, [Validators.required, Validators.minLength(6), Validators.maxLength(32)]));
this.cdRef.markForCheck();
}

6
UI/Web/src/app/registration/confirm-email/confirm-email.component.html
View file

@ -12,7 +12,8 @@
<form [formGroup]="registerForm" (ngSubmit)="submit()">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input id="username" class="form-control" formControlName="username" type="text">
<input id="username" class="form-control" formControlName="username" type="text"
[class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('username')?.errors?.required">
This field is required
@ -22,7 +23,8 @@
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">Email</label>
<input class="form-control" type="email" id="email" formControlName="email" required readonly>
<input class="form-control" type="email" id="email" formControlName="email" required readonly
[class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('email')?.errors?.required">
This field is required

9
UI/Web/src/app/registration/register/register.component.html
View file

@ -5,7 +5,8 @@
<form [formGroup]="registerForm" (ngSubmit)="submit()">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input id="username" class="form-control" formControlName="username" type="text">
<input id="username" class="form-control" formControlName="username" type="text"
[class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('username')?.errors?.required">
This field is required
@ -19,7 +20,8 @@
<span class="visually-hidden" id="email-help">
<ng-container [ngTemplateOutlet]="emailTooltip"></ng-container>
</span>
<input class="form-control" type="email" id="email" formControlName="email" required aria-describedby="email-help">
<input class="form-control" type="email" id="email" formControlName="email" required aria-describedby="email-help"
[class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('email')?.errors?.required">
This field is required
@ -36,7 +38,8 @@
Password must be between 6 and 32 characters in length
</ng-template>
<span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
<input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
<input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password"
type="password" aria-describedby="password-help" [class.is-invalid]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('password')?.errors?.required">
This field is required

2
UI/Web/src/app/registration/reset-password/reset-password.component.html
View file

@ -5,7 +5,7 @@
<form [formGroup]="registerForm" (ngSubmit)="submit()">
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">Email</label>
<input class="form-control custom-input" type="email" id="email" formControlName="email" required>
<input class="form-control custom-input" type="email" id="email" formControlName="email" [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('email')?.errors?.required">
This field is required

4
UI/Web/src/app/series-detail/series-detail.component.html
View file

@ -58,11 +58,11 @@
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="series !== undefined" #scrollingBlock>
<div class="row mb-3 info-container">
<div class="image-container col-xl-1 col-lg-2 col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
<div class="image-container col-4 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2 d-none d-sm-block">
<app-image height="100%" maxHeight="400px" objectFit="contain" background="none" [imageUrl]="seriesImage"></app-image>
<!-- NOTE: We can put continue point here as Vol X Ch Y or just Ch Y or Book Z ?-->
</div>
<div class="col-md-10 col-xs-8 col-sm-6 mt-2">
<div class="col-xlg-10 col-lg-8 col-md-8 col-xs-8 col-sm-6 mt-2">
<div class="row g-0">
<div class="col-auto">
<button class="btn btn-primary" (click)="read()">

1
UI/Web/src/app/series-detail/series-detail.component.ts
View file

@ -497,6 +497,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
this.volumeActions = this.actionFactoryService.getVolumeActions(this.handleVolumeActionCallback.bind(this));
this.chapterActions = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this));
this.seriesService.getRelatedForSeries(this.seriesId).subscribe((relations: RelatedSeries) => {
this.relations = [
...relations.prequels.map(item => this.createRelatedSeries(item, RelationKind.Prequel)),

10
UI/Web/src/app/user-settings/edit-device/edit-device.component.html
View file

@ -3,7 +3,7 @@
<div class="row g-0 mb-2">
<div class="col-md-3 col-sm-12 pe-2">
<label for="settings-name" class="form-label">Device Name</label>
<input id="settings-name" class="form-control" formControlName="name" type="text">
<input id="settings-name" class="form-control" formControlName="name" type="text" [class.is-invalid]="settingsForm.get('name')?.invalid && settingsForm.get('name')?.touched">
<ng-container *ngIf="settingsForm.get('name')?.errors as errors">
<p class="invalid-feedback" *ngIf="errors.required">
This field is required
@ -15,7 +15,10 @@
<label for="email" class="form-label">Email</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="emailTooltip" role="button" tabindex="0"></i>
<ng-template #emailTooltip>This email will be used to accept the file via Send To</ng-template>
<span class="visually-hidden" id="email-help">The number of backups to maintain. Default is 30, minumum is 1, maximum is 30.</span>
<input id="email" aria-describedby="email-help" class="form-control" formControlName="email" type="email" placeholder="@kindle.com">
<input id="email" aria-describedby="email-help"
class="form-control" formControlName="email" type="email"
placeholder="@kindle.com" [class.is-invalid]="settingsForm.get('email')?.invalid && settingsForm.get('email')?.touched">
<ng-container *ngIf="settingsForm.get('email')?.errors as errors">
<p class="invalid-feedback" *ngIf="errors.email">
This must be a valid email
@ -28,7 +31,8 @@
<div class="col-md-3 col-sm-12 pe-2">
<label for="device-platform" class="form-label">Device Platform</label>
<select id="device-platform" aria-describedby="device-platform-help" class="form-select" formControlName="platform">
<select id="device-platform" aria-describedby="device-platform-help" class="form-select" formControlName="platform"
[class.is-invalid]="settingsForm.get('platform')?.invalid && settingsForm.get('platform')?.touched">
<option *ngFor="let patform of devicePlatforms" [value]="patform">{{patform | devicePlatform}}</option>
</select>
<ng-container *ngIf="settingsForm.get('platform')?.errors as errors">

21
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
View file

@ -60,6 +60,18 @@
</div>
</div>
<div class="row g-0">
<div class="col-md-6 col-sm-12 pe-2 mb-2">
<div class="form-check form-switch">
<input type="checkbox" id="no-transitions" role="switch" formControlName="noTransitions" class="form-check-input" aria-describedby="settings-global-noTransitions-help" [value]="true" aria-labelledby="auto-close-label">
<label class="form-check-label" for="no-transitions">Disable Animations</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="noTransitionsTooltip" role="button" tabindex="0"></i>
</div>
<ng-template #noTransitionsTooltip>Turns off animations in the site. Useful for e-ink readers</ng-template>
<span class="visually-hidden" id="settings-global-noTransitions-help">Turns off animations in the site. Useful for e-ink readers</span>
</div>
</div>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
<button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()" aria-describedby="reading-panel">Reset</button>
<button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.dirty">Save</button>
@ -287,7 +299,8 @@
<form [formGroup]="passwordChangeForm">
<div class="mb-3">
<label for="oldpass" class="form-label">Current Password</label>
<input class="form-control custom-input" type="password" id="oldpass" formControlName="oldPassword">
<input class="form-control custom-input" type="password" id="oldpass" formControlName="oldPassword"
[class.is-invalid]="passwordChangeForm.get('oldPassword')?.invalid && passwordChangeForm.get('oldPassword')?.touched">
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="passwordChangeForm.dirty || passwordChangeForm.touched">
<div *ngIf="passwordChangeForm.get('oldPassword')?.errors?.required">
This field is required
@ -297,7 +310,8 @@
<div class="mb-3">
<label for="new-password">New Password</label>
<input class="form-control" type="password" id="new-password" formControlName="password">
<input class="form-control" type="password" id="new-password" formControlName="password"
[class.is-invalid]="passwordChangeForm.get('password')?.invalid && passwordChangeForm.get('password')?.touched">
<div id="password-validations" class="invalid-feedback" *ngIf="passwordChangeForm.dirty || passwordChangeForm.touched">
<div *ngIf="password?.errors?.required">
This field is required
@ -306,7 +320,8 @@
</div>
<div class="mb-3">
<label for="confirm-password">Confirm Password</label>
<input class="form-control" type="password" id="confirm-password" formControlName="confirmPassword" aria-describedby="password-validations">
<input class="form-control" type="password" id="confirm-password" formControlName="confirmPassword" aria-describedby="password-validations"
[class.is-invalid]="passwordChangeForm.get('confirmPassword')?.invalid && passwordChangeForm.get('confirmPassword')?.touched">
<div id="password-validations" class="invalid-feedback" *ngIf="passwordChangeForm.dirty || passwordChangeForm.touched">
<div *ngIf="!passwordsMatch">
Passwords must match

3
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts
View file

@ -134,6 +134,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
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('noTransitions', new FormControl(this.user.preferences.noTransitions, []));
this.cdRef.markForCheck();
});
@ -188,6 +189,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
this.settingsForm.get('globalPageLayoutMode')?.setValue(this.user.preferences.globalPageLayoutMode);
this.settingsForm.get('blurUnreadSummaries')?.setValue(this.user.preferences.blurUnreadSummaries);
this.settingsForm.get('promptForDownloadSize')?.setValue(this.user.preferences.promptForDownloadSize);
this.settingsForm.get('noTransitions')?.setValue(this.user.preferences.noTransitions);
this.cdRef.markForCheck();
this.settingsForm.markAsPristine();
}
@ -225,6 +227,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
globalPageLayoutMode: parseInt(modelSettings.globalPageLayoutMode, 10),
blurUnreadSummaries: modelSettings.blurUnreadSummaries,
promptForDownloadSize: modelSettings.promptForDownloadSize,
noTransitions: modelSettings.noTransitions,
};
this.observableHandles.push(this.accountService.updatePreferences(data).subscribe((updatedPrefs) => {

4
UI/Web/src/theme/utilities/_global.scss
View file

@ -10,6 +10,10 @@ body {
overflow-y: auto;
}
.no-transitions, .no-transitions * {
transition: none !important;
}
hr {
background-color: var(--hr-color);