486 lines
21 KiB
HTML
486 lines
21 KiB
HTML
<ng-container *transloco="let t; read:'user-preferences'">
|
|
<p>
|
|
{{t('pref-description')}}
|
|
</p>
|
|
|
|
@if (user) {
|
|
<form [formGroup]="settingsForm">
|
|
<h4>{{t('global-settings-title')}}</h4>
|
|
<ng-container>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('locale-label')" [subtitle]="t('locale-tooltip')">
|
|
<ng-template #view>
|
|
{{Locale | titlecase}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="global-header" formControlName="locale">
|
|
@for(opt of locales; track opt.title) {
|
|
<option [value]="opt.isoCode">{{opt.title | titlecase}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('blur-unread-summaries-label')" [subtitle]="t('blur-unread-summaries-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="blurUnreadSummaries" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('prompt-on-download-label')" [subtitle]="t('prompt-on-download-tooltip', {size: '100'})">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="promptForDownloadSize" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('disable-animations-label')" [subtitle]="t('disable-animations-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="noTransitions" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('collapse-series-relationships-label')" [subtitle]="t('collapse-series-relationships-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="collapseSeriesRelationships" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-2">
|
|
<app-setting-switch [title]="t('share-series-reviews-label')" [subtitle]="t('share-series-reviews-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="shareReviews" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<div class="setting-section-break"></div>
|
|
|
|
|
|
@if (licenseService.hasValidLicense$ | async) {
|
|
<h4 id="kavitaplus-heading" class="mt-3">{{t('kavitaplus-settings-title')}}</h4>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
@if(settingsForm.get('aniListScrobblingEnabled'); as formControl) {
|
|
<app-setting-switch [title]="t('anilist-scrobbling-label')" [subtitle]="t('anilist-scrobbling-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input id="setting-anilist-scrobbling" type="checkbox" class="form-check-input" formControlName="aniListScrobblingEnabled">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
}
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
@if(settingsForm.get('wantToReadSync'); as formControl) {
|
|
<app-setting-switch [title]="t('want-to-read-sync-label')" [subtitle]="t('want-to-read-sync-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input id="setting-want-to-read-sync" type="checkbox" class="form-check-input" formControlName="wantToReadSync">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
}
|
|
</div>
|
|
<div class="setting-section-break"></div>
|
|
}
|
|
|
|
|
|
<h4 id="image-reader-heading" class="mt-3">{{t('image-reader-settings-title')}}</h4>
|
|
<ng-container>
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('reading-direction-label')" [subtitle]="t('reading-direction-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('readingDirection')!.value | readingDirection}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="image-reader-heading"
|
|
formControlName="readingDirection">
|
|
@for (opt of readingDirections; track opt) {
|
|
<option [value]="opt.value">{{opt.value | readingDirection}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('scaling-option-label')" [subtitle]="t('scaling-option-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('scalingOption')!.value | scalingOption}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="image-reader-heading"
|
|
formControlName="scalingOption">
|
|
@for (opt of scalingOptions; track opt) {
|
|
<option [value]="opt.value">{{opt.value | scalingOption}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('page-splitting-label')" [subtitle]="t('page-splitting-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('pageSplitOption')!.value | pageSplitOption}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="image-reader-heading"
|
|
formControlName="pageSplitOption">
|
|
@for (opt of pageSplitOptions; track opt) {
|
|
<option [value]="opt.value">{{opt.value | pageSplitOption}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('reading-mode-label')" [subtitle]="t('reading-mode-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('readerMode')!.value | readerMode}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="image-reader-heading"
|
|
formControlName="readerMode">
|
|
@for (opt of readerModes; track opt) {
|
|
<option [value]="opt.value">{{opt.value | readerMode}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('layout-mode-label')" [subtitle]="t('layout-mode-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('layoutMode')!.value | layoutMode}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="image-reader-heading"
|
|
formControlName="layoutMode">
|
|
@for (opt of layoutModes; track opt) {
|
|
<option [value]="opt.value">{{opt.value | layoutMode}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('background-color-label')" [subtitle]="t('background-color-tooltip')">
|
|
<ng-template #view>
|
|
<div class="color-box-container">
|
|
<div class="color-box" [ngStyle]="{'background-color': user.preferences!.backgroundColor}"></div>
|
|
<span class="hex-code">{{ user.preferences!.backgroundColor.toUpperCase() }}</span>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<input [value]="user!.preferences!.backgroundColor" class="form-control"
|
|
(colorPickerChange)="handleBackgroundColorChange($event)"
|
|
[style.background]="user!.preferences!.backgroundColor" [cpAlphaChannel]="'disabled'"
|
|
[(colorPicker)]="user!.preferences!.backgroundColor" />
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('auto-close-menu-label')" [subtitle]="t('auto-close-menu-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="autoCloseMenu" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('show-screen-hints-label')" [subtitle]="t('show-screen-hints-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="showScreenHints" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('emulate-comic-book-label')" [subtitle]="t('emulate-comic-book-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="emulateBook" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('swipe-to-paginate-label')" [subtitle]="t('swipe-to-paginate-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="swipeToPaginate" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<div class="setting-section-break"></div>
|
|
|
|
<h4 id="book-reader-heading" class="mt-3">{{t('book-reader-settings-title')}}</h4>
|
|
<ng-container>
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('tap-to-paginate-label')" [subtitle]="t('tap-to-paginate-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="bookReaderTapToPaginate" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-switch [title]="t('immersive-mode-label')" [subtitle]="t('immersive-mode-tooltip')">
|
|
<ng-template #switch>
|
|
<div class="form-check form-switch float-end">
|
|
<input type="checkbox" role="switch"
|
|
formControlName="bookReaderImmersiveMode" class="form-check-input"
|
|
aria-labelledby="auto-close-label">
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-switch>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('reading-direction-label')" [subtitle]="t('reading-direction-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('bookReaderReadingDirection')!.value | readingDirection}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="book-reader-heading"
|
|
formControlName="bookReaderReadingDirection">
|
|
@for (opt of readingDirections; track opt) {
|
|
<option [value]="opt.value">{{opt.value | readingDirection}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('font-family-label')" [subtitle]="t('font-family-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('bookReaderFontFamily')!.value | titlecase}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="book-reader-heading"
|
|
formControlName="bookReaderFontFamily">
|
|
@for (opt of fontFamilies; track opt) {
|
|
<option [value]="opt">{{opt | titlecase}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('writing-style-label')" [subtitle]="t('writing-style-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('bookReaderWritingStyle')!.value | writingStyle}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="book-reader-heading"
|
|
formControlName="bookReaderWritingStyle">
|
|
@for (opt of bookWritingStyles; track opt) {
|
|
<option [value]="opt.value">{{opt.value | writingStyle}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('layout-mode-book-label')" [subtitle]="t('layout-mode-book-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('bookReaderLayoutMode')!.value | bookPageLayoutMode}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="book-reader-heading"
|
|
formControlName="bookReaderLayoutMode">
|
|
@for (opt of bookLayoutModes; track opt) {
|
|
<option [value]="opt.value">{{opt.value | bookPageLayoutMode}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('color-theme-book-label')" [subtitle]="t('color-theme-book-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('bookReaderThemeName')!.value}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="book-reader-heading"
|
|
formControlName="bookReaderThemeName">
|
|
@for (opt of bookColorThemesTranslated; track opt) {
|
|
<option [value]="opt.name">{{opt.name | titlecase}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('font-size-book-label')" [subtitle]="t('font-size-book-tooltip')">
|
|
<ng-template #view>
|
|
<span class="range-text">{{settingsForm.get('bookReaderFontSize')?.value + '%'}}</span>
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<div class="row g-0">
|
|
<div class="col-10">
|
|
<input type="range" class="form-range" id="fontsize" min="50" max="300" step="10"
|
|
formControlName="bookReaderFontSize">
|
|
|
|
</div>
|
|
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderFontSize')?.value + '%'}}</span>
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('line-height-book-label')" [subtitle]="t('line-height-book-tooltip')">
|
|
<ng-template #view>
|
|
<span class="range-text">{{settingsForm.get('bookReaderLineSpacing')?.value + '%'}}</span>
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<div class="row g-0">
|
|
<div class="col-10">
|
|
<input type="range" class="form-range" id="linespacing" min="100" max="200" step="10"
|
|
formControlName="bookReaderLineSpacing">
|
|
</div>
|
|
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderLineSpacing')?.value + '%'}}</span>
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('margin-book-label')" [subtitle]="t('margin-book-tooltip')">
|
|
<ng-template #view>
|
|
<span class="range-text">{{settingsForm.get('bookReaderMargin')?.value + '%'}}</span>
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<div class="row g-0">
|
|
<div class="col-10">
|
|
<input type="range" class="form-range" id="margin" min="0" max="30" step="5"
|
|
formControlName="bookReaderMargin">
|
|
</div>
|
|
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderMargin')?.value + '%'}}</span>
|
|
</div>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<div class="setting-section-break"></div>
|
|
|
|
<h4 id="pdf-reader-heading" class="mt-3">{{t('pdf-reader-settings-title')}}</h4>
|
|
<ng-container>
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('pdf-spread-mode-label')" [subtitle]="t('pdf-spread-mode-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('pdfSpreadMode')!.value | pdfSpreadMode}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="pdf-reader-heading"
|
|
formControlName="pdfSpreadMode">
|
|
@for (opt of pdfSpreadModes; track opt) {
|
|
<option [value]="opt.value">{{opt.value | pdfSpreadMode}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('pdf-theme-label')" [subtitle]="t('pdf-theme-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('pdfTheme')!.value | pdfTheme}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="pdf-reader-heading"
|
|
formControlName="pdfTheme">
|
|
@for (opt of pdfThemes; track opt) {
|
|
<option [value]="opt.value">{{opt.value | pdfTheme}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
|
|
<div class="row g-0 mt-4 mb-4">
|
|
<app-setting-item [title]="t('pdf-scroll-mode-label')" [subtitle]="t('pdf-scroll-mode-tooltip')">
|
|
<ng-template #view>
|
|
{{settingsForm.get('pdfScrollMode')!.value | pdfScrollMode}}
|
|
</ng-template>
|
|
<ng-template #edit>
|
|
<select class="form-select" aria-describedby="pdf-reader-heading"
|
|
formControlName="pdfScrollMode">
|
|
@for (opt of pdfScrollModes; track opt) {
|
|
<option [value]="opt.value">{{opt.value | pdfScrollMode}}</option>
|
|
}
|
|
</select>
|
|
</ng-template>
|
|
</app-setting-item>
|
|
</div>
|
|
</ng-container>
|
|
</form>
|
|
}
|
|
|
|
|
|
</ng-container>
|