Localization - First Pass (#2174)
* Started designing the backend localization service * Worked in Transloco for initial PoC * Worked in Transloco for initial PoC * Translated the login screen * translated dashboard screen * Started work on the backend * Fixed a logic bug * translated edit-user screen * Hooked up the backend for having a locale property. * Hooked up the ability to view the available locales and switch to them. * Made the localization service languages be derived from what's in langs/ directory. * Fixed up localization switching * Switched when we check for a license on UI bootstrap * Tweaked some code * Fixed the bug where dashboard wasn't loading and made it so language switching is working. * Fixed a bug on dashboard with languagePath * Converted user-scrobble-history.component.html * Converted spoiler.component.html * Converted review-series-modal.component.html * Converted review-card-modal.component.html * Updated the readme * Translated using Weblate (English) Currently translated at 100.0% (54 of 54 strings) Translation: Kavita/ui Translate-URL: https://hosted.weblate.org/projects/kavita/ui/en/ * Converted review-card.component.html * Deleted dead component * Converted want-to-read.component.html * Added translation using Weblate (Korean) * Translated using Weblate (Spanish) Currently translated at 40.7% (22 of 54 strings) Translation: Kavita/ui Translate-URL: https://hosted.weblate.org/projects/kavita/ui/es/ * Translated using Weblate (Korean) Currently translated at 62.9% (34 of 54 strings) Translation: Kavita/ui Translate-URL: https://hosted.weblate.org/projects/kavita/ui/ko/ * Converted user-preferences.component.html * Translated using Weblate (Korean) Currently translated at 92.5% (50 of 54 strings) Translation: Kavita/ui Translate-URL: https://hosted.weblate.org/projects/kavita/ui/ko/ * Converted user-holds.component.html * Converted theme-manager.component.html * Converted restriction-selector.component.html * Converted manage-devices.component.html * Converted edit-device.component.html * Converted change-password.component.html * Converted change-email.component.html * Converted change-age-restriction.component.html * Converted api-key.component.html * Converted anilist-key.component.html * Converted typeahead.component.html * Converted user-stats-info-cards.component.html * Converted user-stats.component.html * Converted top-readers.component.html * Converted some pipes and ensure translation is loaded before the app. * Finished all but one pipe for localization * Converted directory-picker.component.html * Converted library-access-modal.component.html * Converted a few components * Converted a few components * Converted a few components * Converted a few components * Converted a few components * Merged weblate in * ... -> … update * Updated the readme * Updateded all fonts to be woff2 * Cleaned up some strings to increase re-use * Removed an old flow (that doesn't exist in backend any longer) from when we introduced emails on Kavita. * Converted Series detail * Lots more converted * Lots more converted & hooked up the ability to flatten during prod build the language files. * Lots more converted * Lots more converted & fixed a bunch of broken pipes due to inject() * Lots more converted * Lots more converted * Lots more converted & fixed some bad keys * Lots more converted * Fixed some bugs with admin dasbhoard nested tabs not rendering on first load due to not using onpush change detection * Fixed up some localization errors and fixed forgot password error when the user doesn't have change password permission * Fixed a stupid build issue again * Started adding errors for interceptor and backend. * Finished off manga-reader * More translations * Few fixes * Fixed a bug where character tag badges weren't showing the name on chapter info * All components are translated * All toasts are translated * All confirm/alerts are translated * Trying something new for the backend * Migrated the localization strings for the backend into a new file. * Updated the localization service to be able to do backend localization with fallback to english. * Cleaned up some external reviews code to reduce looping * Localized AccountController.cs * 60% done with controllers * All controllers are done * All KavitaExceptions are covered * Some shakeout fixes * Prep for initial merge * Everything is done except options and basic shakeout proves response times are good. Unit tests are broken. * Fixed up the unit tests * All unit tests are now working * Removed some quantifier * I'm not sure I can support localization for some Volume/Chapter/Book strings within the codebase. --------- Co-authored-by: Robbie Davis <robbie@therobbiedavis.com> Co-authored-by: majora2007 <kavitareader@gmail.com> Co-authored-by: expertjun <jtrobin@naver.com> Co-authored-by: ThePromidius <thepromidiusyt@gmail.com>
This commit is contained in:
Joe Milazzo
GitHub
parent
670bf82c38
commit
3b23d63234
389 changed files with 13652 additions and 7925 deletions
|
|
@ -12,6 +12,7 @@ import { PageBookmark } from 'src/app/_models/readers/page-bookmark';
|
|||
import { switchMap, takeWhile, throttleTime } from 'rxjs/operators';
|
||||
import { AccountService } from 'src/app/_services/account.service';
|
||||
import { BytesPipe } from 'src/app/pipe/bytes.pipe';
|
||||
import {translate} from "@ngneat/transloco";
|
||||
|
||||
export const DEBOUNCE_TIME = 100;
|
||||
|
||||
|
|
@ -238,7 +239,8 @@ export class DownloadService {
|
|||
}
|
||||
|
||||
private async confirmSize(size: number, entityType: DownloadEntityType) {
|
||||
return (size < this.SIZE_WARNING || await this.confirmService.confirm('The ' + entityType + ' is ' + bytesPipe.transform(size) + '. Are you sure you want to continue?'));
|
||||
return (size < this.SIZE_WARNING ||
|
||||
await this.confirmService.confirm(translate('toasts.confirm-download-size', {entityType: 'entity-type.' + entityType, size: bytesPipe.transform(size)})));
|
||||
}
|
||||
|
||||
private downloadBookmarks(bookmarks: PageBookmark[]) {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { MangaFormat } from 'src/app/_models/manga-format';
|
|||
import { PaginatedResult } from 'src/app/_models/pagination';
|
||||
import { Series } from 'src/app/_models/series';
|
||||
import { Volume } from 'src/app/_models/volume';
|
||||
import {TranslocoService} from "@ngneat/transloco";
|
||||
|
||||
export enum KEY_CODES {
|
||||
RIGHT_ARROW = 'ArrowRight',
|
||||
|
|
@ -38,16 +39,8 @@ export class UtilityService {
|
|||
|
||||
mangaFormatKeys: string[] = [];
|
||||
|
||||
constructor() { }
|
||||
constructor(private translocoService: TranslocoService) { }
|
||||
|
||||
sortVolumes = (a: Volume, b: Volume) => {
|
||||
if (a === b) { return 0; }
|
||||
else if (a.number === 0) { return 1; }
|
||||
else if (b.number === 0) { return -1; }
|
||||
else {
|
||||
return a.number < b.number ? -1 : 1;
|
||||
}
|
||||
}
|
||||
|
||||
sortChapters = (a: Chapter, b: Chapter) => {
|
||||
return parseFloat(a.number) - parseFloat(b.number);
|
||||
|
|
@ -63,33 +56,25 @@ export class UtilityService {
|
|||
|
||||
/**
|
||||
* Formats a Chapter name based on the library it's in
|
||||
* @param libraryType
|
||||
* @param libraryType
|
||||
* @param includeHash For comics only, includes a # which is used for numbering on cards
|
||||
* @param includeSpace Add a space at the end of the string. if includeHash and includeSpace are true, only hash will be at the end.
|
||||
* @returns
|
||||
* @returns
|
||||
*/
|
||||
formatChapterName(libraryType: LibraryType, includeHash: boolean = false, includeSpace: boolean = false) {
|
||||
switch(libraryType) {
|
||||
case LibraryType.Book:
|
||||
return 'Book' + (includeSpace ? ' ' : '');
|
||||
return this.translocoService.translate('common.book-num') + (includeSpace ? ' ' : '');
|
||||
case LibraryType.Comic:
|
||||
if (includeHash) {
|
||||
return 'Issue #';
|
||||
return this.translocoService.translate('common.issue-hash-num');
|
||||
}
|
||||
return 'Issue' + (includeSpace ? ' ' : '');
|
||||
return this.translocoService.translate('common.issue-num') + (includeSpace ? ' ' : '');
|
||||
case LibraryType.Manga:
|
||||
return 'Chapter' + (includeSpace ? ' ' : '');
|
||||
return this.translocoService.translate('common.chapter-num') + (includeSpace ? ' ' : '');
|
||||
}
|
||||
}
|
||||
|
||||
cleanSpecialTitle(title: string) {
|
||||
let cleaned = title.replace(/_/g, ' ').replace(/SP\d+/g, '').trim();
|
||||
cleaned = cleaned.substring(0, cleaned.lastIndexOf('.'));
|
||||
if (cleaned.trim() === '') {
|
||||
return title;
|
||||
}
|
||||
return cleaned;
|
||||
}
|
||||
|
||||
filter(input: string, filter: string): boolean {
|
||||
if (input === null || filter === null || input === undefined || filter === undefined) return false;
|
||||
|
|
@ -131,7 +116,7 @@ export class UtilityService {
|
|||
if (window.innerWidth <= Breakpoint.Mobile) return Breakpoint.Mobile;
|
||||
else if (window.innerWidth > Breakpoint.Mobile && window.innerWidth <= Breakpoint.Tablet) return Breakpoint.Tablet;
|
||||
else if (window.innerWidth > Breakpoint.Tablet) return Breakpoint.Desktop
|
||||
|
||||
|
||||
return Breakpoint.Desktop;
|
||||
}
|
||||
|
||||
|
|
@ -150,7 +135,7 @@ export class UtilityService {
|
|||
if ((object2 === null || object2 === undefined) && (object1 !== null || object1 !== undefined)) return false;
|
||||
if (object1 === null && object2 === null) return true;
|
||||
if (object1 === undefined && object2 === undefined) return true;
|
||||
|
||||
|
||||
|
||||
const keys1 = Object.keys(object1);
|
||||
const keys2 = Object.keys(object2);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<div class="badge-expander">
|
||||
<ng-container *transloco="let t; read: 'badge-expander'">
|
||||
<div class="badge-expander">
|
||||
<div class="content">
|
||||
<ng-container *ngFor="let item of visibleItems; index as i;" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
|
||||
<button type="button" *ngIf="!isCollapsed && itemsLeft !== 0" class="btn btn-sm btn-outline-primary" (click)="toggleVisible()" [attr.aria-expanded]="!isCollapsed">
|
||||
and {{itemsLeft}} more
|
||||
</button>
|
||||
<ng-container *ngFor="let item of visibleItems; index as i;" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
|
||||
<button type="button" *ngIf="!isCollapsed && itemsLeft !== 0" class="btn btn-sm btn-outline-primary" (click)="toggleVisible()" [attr.aria-expanded]="!isCollapsed">
|
||||
{{t('more-items', {count: itemsLeft})}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-badge-expander',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
imports: [CommonModule, TranslocoModule],
|
||||
templateUrl: './badge-expander.component.html',
|
||||
styleUrls: ['./badge-expander.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
|
||||
|
||||
<div class="modal-header">
|
||||
<ng-container *transloco="let t">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modal-basic-title">{{config.header}}</h4>
|
||||
<button type="button" class="btn-close" aria-label="Close" (click)="close()" *ngIf="!config.disableEscape"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="overflow-x: auto" [innerHtml]="config.content | safeHtml">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn-close" [attr.aria-label]="t('common.close')" (click)="close()" *ngIf="!config.disableEscape"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="overflow-x: auto" [innerHtml]="config.content | safeHtml">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div *ngFor="let btn of config.buttons">
|
||||
<button type="button" class="btn btn-{{btn.type}}" (click)="clickButton(btn)">{{btn.text}}</button>
|
||||
<button type="button" class="btn btn-{{btn.type}}" (click)="clickButton(btn)">{{btn.text}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@ import { ConfirmButton } from './_models/confirm-button';
|
|||
import { ConfirmConfig } from './_models/confirm-config';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {SafeHtmlPipe} from "../../pipe/safe-html.pipe";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirm-dialog',
|
||||
standalone: true,
|
||||
imports: [CommonModule, SafeHtmlPipe],
|
||||
imports: [CommonModule, SafeHtmlPipe, TranslocoModule],
|
||||
templateUrl: './confirm-dialog.component.html',
|
||||
styleUrls: ['./confirm-dialog.component.scss']
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<div class="offcanvas offcanvas-{{position}}" [class.show]="isOpen" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"
|
||||
[ngStyle]="{'top': options.topOffset + 'px', 'visibility': isOpen ? 'visible' : 'hidden'}" role="dialog">
|
||||
<div class="offcanvas-header">
|
||||
<div class="offcanvas-title" id="offcanvasLabel">
|
||||
<ng-content select="[header]"></ng-content>
|
||||
<ng-container *transloco="let t">
|
||||
<div class="offcanvas offcanvas-{{position}}" [class.show]="isOpen" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"
|
||||
[ngStyle]="{'top': options.topOffset + 'px', 'visibility': isOpen ? 'visible' : 'hidden'}" role="dialog">
|
||||
<div class="offcanvas-header">
|
||||
<div class="offcanvas-title" id="offcanvasLabel">
|
||||
<ng-content select="[header]"></ng-content>
|
||||
</div>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" [attr.aria-label]="t('common.close')" (click)="close()"></button>
|
||||
</div>
|
||||
<div class="offcanvas-header row hide-if-empty">
|
||||
<ng-content select="[subheader]"></ng-content>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<ng-content select="[body]"></ng-content>
|
||||
</div>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" (click)="close()"></button>
|
||||
</div>
|
||||
<div class="offcanvas-header row hide-if-empty">
|
||||
<ng-content select="[subheader]"></ng-content>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<ng-content select="[body]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO: Replace this with official component when released. This is some hacky solution to mimic Bootstrap 5 Javascript code -->
|
||||
<div class="offcanvas-backdrop fade show" *ngIf="isOpen" (click)="close()"></div>
|
||||
<!-- TODO: Replace this with official component when released. This is some hacky solution to mimic Bootstrap 5 Javascript code -->
|
||||
<div class="offcanvas-backdrop fade show" *ngIf="isOpen" (click)="close()"></div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
|
||||
export class DrawerOptions {
|
||||
/**
|
||||
|
|
@ -11,7 +12,7 @@ export class DrawerOptions {
|
|||
@Component({
|
||||
selector: 'app-drawer',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
imports: [CommonModule, TranslocoModule],
|
||||
templateUrl: './drawer.component.html',
|
||||
styleUrls: ['./drawer.component.scss'],
|
||||
exportAs: "drawer",
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
<ng-container *ngIf="loading">
|
||||
<ng-container *ngIf="absolute; else relative">
|
||||
<div class="position-absolute top-50 start-50 translate-middle" style="z-index: 999">
|
||||
<div class="spinner-border {{size}} text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<ng-container *transloco="let t; read: 'common'">
|
||||
<ng-container *ngIf="loading">
|
||||
<ng-container *ngIf="absolute; else relative">
|
||||
<div class="position-absolute top-50 start-50 translate-middle" style="z-index: 999">
|
||||
<div class="spinner-border {{size}} text-primary" role="status">
|
||||
<span class="visually-hidden">{{t('loading')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #relative>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border {{size}} text-primary" role="status">
|
||||
<span class="visually-hidden">{{t('loading')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #relative>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border {{size}} text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-loading',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
imports: [CommonModule, TranslocoModule],
|
||||
templateUrl: './loading.component.html',
|
||||
styleUrls: ['./loading.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<div>
|
||||
<ng-container *transloco="let t; read: 'read-more'">
|
||||
<div>
|
||||
<span [innerHTML]="currentText | safeHtml" [ngClass]="{'blur-text': blur && isCollapsed}"></span>
|
||||
<a [class.hidden]="hideToggle" *ngIf="text && text.length > maxLength && showToggle" class="read-more-link" (click)="toggleView()">
|
||||
<i aria-hidden="true" class="fa" [ngClass]="{'fa-caret-down': isCollapsed, 'fa-caret-up': !isCollapsed}"></i> Read {{isCollapsed ? 'More' : 'Less'}}
|
||||
<i aria-hidden="true" class="fa" [ngClass]="{'fa-caret-down': isCollapsed, 'fa-caret-up': !isCollapsed}"></i> {{isCollapsed ? t('read-more') : t('read-less')}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {SafeHtmlPipe} from "../../pipe/safe-html.pipe";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-read-more',
|
||||
standalone: true,
|
||||
imports: [CommonModule, SafeHtmlPipe],
|
||||
imports: [CommonModule, SafeHtmlPipe, TranslocoModule],
|
||||
templateUrl: './read-more.component.html',
|
||||
styleUrls: ['./read-more.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">New Update Available!</h4>
|
||||
<button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ng-container *transloco="let t; read: 'update-notification-modal'">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{t('title')}}</h4>
|
||||
<button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h5>{{updateData.updateTitle}}</h5>
|
||||
<pre class="update-body" [innerHtml]="updateData.updateBody | safeHtml"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<a class="btn btn-icon" [href]="updateUrl" target="_blank" rel="noopener noreferrer">How to Update</a>
|
||||
<button type="button" class="btn {{updateData.isDocker ? 'btn-primary' : 'btn-secondary'}}" (click)="close()">Close</button>
|
||||
<a *ngIf="!updateData.isDocker" href="{{updateData.updateUrl}}" class="btn btn-primary" target="_blank" rel="noopener noreferrer" (click)="close()">Download</a>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn btn-icon" [href]="updateUrl" target="_blank" rel="noopener noreferrer">{{t('help')}}</a>
|
||||
<button type="button" class="btn {{updateData.isDocker ? 'btn-primary' : 'btn-secondary'}}" (click)="close()">{{t('close')}}</button>
|
||||
<a *ngIf="!updateData.isDocker" href="{{updateData.updateUrl}}" class="btn btn-primary" target="_blank" rel="noopener noreferrer" (click)="close()">{{t('download')}}</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,14 @@ import {NgbActiveModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
|
|||
import { UpdateVersionEvent } from 'src/app/_models/events/update-version-event';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {SafeHtmlPipe} from "../../pipe/safe-html.pipe";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-update-notification-modal',
|
||||
standalone: true,
|
||||
imports: [CommonModule, NgbModalModule, SafeHtmlPipe],
|
||||
imports: [CommonModule, NgbModalModule, SafeHtmlPipe, TranslocoModule],
|
||||
templateUrl: './update-notification-modal.component.html',
|
||||
styleUrls: ['./update-notification-modal.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue