UX Overhaul Part 1 (#3047)

Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>

UI/Web/src/app/_pipes/book-page-layout-mode.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {translate} from "@ngneat/transloco";
+import {BookPageLayoutMode} from "../_models/readers/book-page-layout-mode";
+
+@Pipe({
+  name: 'bookPageLayoutMode',
+  standalone: true
+})
+export class BookPageLayoutModePipe implements PipeTransform {
+
+  transform(value: BookPageLayoutMode): string {
+    switch (value) {
+      case BookPageLayoutMode.Column1: return translate('preferences.1-column');
+      case BookPageLayoutMode.Column2: return translate('preferences.2-column');
+      case BookPageLayoutMode.Default: return translate('preferences.scroll');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/cover-image-size.pipe.ts

@@ -0,0 +1,25 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {CoverImageSize} from "../admin/_models/cover-image-size";
+import {translate} from "@ngneat/transloco";
+
+@Pipe({
+  name: 'coverImageSize',
+  standalone: true
+})
+export class CoverImageSizePipe implements PipeTransform {
+
+  transform(value: CoverImageSize): string {
+    switch (value) {
+      case CoverImageSize.Default:
+        return translate('cover-image-size.default');
+      case CoverImageSize.Medium:
+        return translate('cover-image-size.medium');
+      case CoverImageSize.Large:
+        return translate('cover-image-size.large');
+      case CoverImageSize.XLarge:
+        return translate('cover-image-size.xlarge');
+
+    }
+  }
+
+}

UI/Web/src/app/_pipes/encode-format.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {EncodeFormat} from "../admin/_models/encode-format";
+
+@Pipe({
+  name: 'encodeFormat',
+  standalone: true
+})
+export class EncodeFormatPipe implements PipeTransform {
+
+  transform(value: EncodeFormat): string {
+    switch (value) {
+      case EncodeFormat.PNG:
+        return 'PNG';
+      case EncodeFormat.WebP:
+        return 'WebP';
+      case EncodeFormat.AVIF:
+        return 'AVIF';
+    }
+  }
+
+}

UI/Web/src/app/_pipes/layout-mode.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {translate} from "@ngneat/transloco";
+import {LayoutMode} from "../manga-reader/_models/layout-mode";
+
+@Pipe({
+  name: 'layoutMode',
+  standalone: true
+})
+export class LayoutModePipe implements PipeTransform {
+
+  transform(value: LayoutMode): string {
+    switch (value) {
+      case LayoutMode.Single: return translate('preferences.single');
+      case LayoutMode.Double: return translate('preferences.double');
+      case LayoutMode.DoubleReversed: return translate('preferences.double-manga');
+      case LayoutMode.DoubleNoCover: return translate('preferences.double-no-cover');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/page-layout-mode.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {PageLayoutMode} from "../_models/page-layout-mode";
+import {translate} from "@ngneat/transloco";
+
+@Pipe({
+  name: 'pageLayoutMode',
+  standalone: true
+})
+export class PageLayoutModePipe implements PipeTransform {
+
+  transform(value: PageLayoutMode): string {
+    switch (value) {
+      case PageLayoutMode.Cards: return translate('preferences.cards');
+      case PageLayoutMode.List: return translate('preferences.list');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/page-split-option.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {translate} from "@ngneat/transloco";
+import {PageSplitOption} from "../_models/preferences/page-split-option";
+
+@Pipe({
+  name: 'pageSplitOption',
+  standalone: true
+})
+export class PageSplitOptionPipe implements PipeTransform {
+
+  transform(value: PageSplitOption): string {
+    switch (value) {
+      case PageSplitOption.FitSplit: return translate('preferences.fit-to-screen');
+      case PageSplitOption.NoSplit: return translate('preferences.no-split');
+      case PageSplitOption.SplitLeftToRight: return translate('preferences.split-left-to-right');
+      case PageSplitOption.SplitRightToLeft: return translate('preferences.split-right-to-left');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/pdf-scroll-mode.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {translate} from "@ngneat/transloco";
+import {PdfScrollMode} from "../_models/preferences/pdf-scroll-mode";
+
+@Pipe({
+  name: 'pdfScrollMode',
+  standalone: true
+})
+export class PdfScrollModePipe implements PipeTransform {
+
+  transform(value: PdfScrollMode): string {
+    switch (value) {
+      case PdfScrollMode.Wrapped: return translate('preferences.pdf-multiple');
+      case PdfScrollMode.Page: return translate('preferences.pdf-page');
+      case PdfScrollMode.Horizontal: return translate('preferences.pdf-horizontal');
+      case PdfScrollMode.Vertical: return translate('preferences.pdf-vertical');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/pdf-spread-mode.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {PdfSpreadMode} from "../_models/preferences/pdf-spread-mode";
+import {translate} from "@ngneat/transloco";
+
+@Pipe({
+  name: 'pdfSpreadMode',
+  standalone: true
+})
+export class PdfSpreadModePipe implements PipeTransform {
+
+  transform(value: PdfSpreadMode): string {
+    switch (value) {
+      case PdfSpreadMode.None: return translate('preferences.pdf-none');
+      case PdfSpreadMode.Odd: return translate('preferences.pdf-odd');
+      case PdfSpreadMode.Even: return translate('preferences.pdf-even');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/pdf-theme.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {PdfTheme} from "../_models/preferences/pdf-theme";
+import {translate} from "@ngneat/transloco";
+
+@Pipe({
+  name: 'pdfTheme',
+  standalone: true
+})
+export class PdfThemePipe implements PipeTransform {
+
+  transform(value: PdfTheme): string {
+    switch (value) {
+      case PdfTheme.Dark: return translate('preferences.pdf-dark');
+      case PdfTheme.Light: return translate('preferences.pdf-light');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/reading-direction.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {ReadingDirection} from "../_models/preferences/reading-direction";
+import {translate} from "@ngneat/transloco";
+
+@Pipe({
+  name: 'readingDirection',
+  standalone: true
+})
+export class ReadingDirectionPipe implements PipeTransform {
+
+  transform(value: ReadingDirection): string {
+    switch (value) {
+      case ReadingDirection.LeftToRight: return translate('preferences.left-to-right');
+      case ReadingDirection.RightToLeft: return translate('preferences.right-to-right');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/reading-mode.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {ReaderMode} from "../_models/preferences/reader-mode";
+import {translate} from "@ngneat/transloco";
+
+@Pipe({
+  name: 'readerMode',
+  standalone: true
+})
+export class ReaderModePipe implements PipeTransform {
+
+  transform(value: ReaderMode): string {
+    switch (value) {
+      case ReaderMode.UpDown: return translate('preferences.up-down');
+      case ReaderMode.Webtoon: return translate('preferences.webtoon');
+      case ReaderMode.LeftRight: return translate('preferences.left-to-right');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/scaling-option.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {translate} from "@ngneat/transloco";
+import {ScalingOption} from "../_models/preferences/scaling-option";
+
+@Pipe({
+  name: 'scalingOption',
+  standalone: true
+})
+export class ScalingOptionPipe implements PipeTransform {
+
+  transform(value: ScalingOption): string {
+    switch (value) {
+      case ScalingOption.Automatic: return translate('preferences.automatic');
+      case ScalingOption.FitToHeight: return translate('preferences.fit-to-height');
+      case ScalingOption.FitToWidth: return translate('preferences.fit-to-width');
+      case ScalingOption.Original: return translate('preferences.original');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/scrobble-event-type.pipe.ts

@@ -0,0 +1,28 @@
+import {inject, Pipe, PipeTransform} from '@angular/core';
+import {ScrobbleEventType} from "../_models/scrobbling/scrobble-event";
+import {TranslocoService} from "@ngneat/transloco";
+
+@Pipe({
+  name: 'scrobbleEventType',
+  standalone: true
+})
+export class ScrobbleEventTypePipe implements PipeTransform {
+
+  translocoService = inject(TranslocoService);
+
+  transform(value: ScrobbleEventType): string {
+    switch (value) {
+      case ScrobbleEventType.ChapterRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.chapter-read');
+      case ScrobbleEventType.ScoreUpdated:
+        return this.translocoService.translate('scrobble-event-type-pipe.score-updated');
+      case ScrobbleEventType.AddWantToRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.want-to-read-add');
+      case ScrobbleEventType.RemoveWantToRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.want-to-read-remove');
+      case ScrobbleEventType.Review:
+        return this.translocoService.translate('scrobble-event-type-pipe.review');
+    }
+  }
+
+}

UI/Web/src/app/_pipes/scrobble-provider-name.pipe.ts

@@ -0,0 +1,19 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {ScrobbleProvider} from "../_services/scrobbling.service";
+
+@Pipe({
+  name: 'scrobbleProviderName',
+  standalone: true
+})
+export class ScrobbleProviderNamePipe implements PipeTransform {
+
+  transform(value: ScrobbleProvider): string {
+    switch (value) {
+      case ScrobbleProvider.AniList: return 'AniList';
+      case ScrobbleProvider.Mal: return 'MAL';
+      case ScrobbleProvider.Kavita: return 'Kavita';
+      case ScrobbleProvider.GoogleBooks: return 'Google Books';
+    }
+  }
+
+}

UI/Web/src/app/_pipes/setting-fragment.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {SettingsTabId} from "../sidenav/preference-nav/preference-nav.component";
+import {translate} from "@ngneat/transloco";
+
+/**
+ * Translates the fragment for Settings to a User title
+ */
+@Pipe({
+  name: 'settingFragment',
+  standalone: true
+})
+export class SettingFragmentPipe implements PipeTransform {
+
+  transform(tabID: SettingsTabId | string): string {
+    return translate('settings.' + tabID);
+  }
+}

UI/Web/src/app/_pipes/writing-style.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {translate} from "@ngneat/transloco";
+import {WritingStyle} from "../_models/preferences/writing-style";
+
+@Pipe({
+  name: 'writingStyle',
+  standalone: true
+})
+export class WritingStylePipe implements PipeTransform {
+
+  transform(value: WritingStyle): string {
+    switch (value) {
+      case WritingStyle.Horizontal: return translate('preferences.horizontal');
+      case WritingStyle.Vertical: return translate('preferences.vertical');
+    }
+  }
+
+}