443 lines
36 KiB
HTML
443 lines
36 KiB
HTML
<ng-container *transloco="let t; read:'user-preferences'">
|
|
<app-side-nav-companion-bar>
|
|
<h2 title>
|
|
{{t('title')}}
|
|
</h2>
|
|
</app-side-nav-companion-bar>
|
|
<div class="container-fluid">
|
|
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs">
|
|
<li *ngFor="let tab of tabs" [ngbNavItem]="tab">
|
|
<a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ t(tab.title) }}</a>
|
|
<ng-template ngbNavContent>
|
|
<ng-container *ngIf="tab.fragment === FragmentID.Account">
|
|
<app-change-email></app-change-email>
|
|
<app-change-password></app-change-password>
|
|
<app-change-age-restriction></app-change-age-restriction>
|
|
<app-anilist-key></app-anilist-key>
|
|
</ng-container>
|
|
<ng-container *ngIf="tab.fragment === FragmentID.Preferences">
|
|
<p>
|
|
{{t('pref-description')}}
|
|
</p>
|
|
|
|
<form [formGroup]="settingsForm" *ngIf="user !== undefined">
|
|
<div ngbAccordion [closeOthers]="true" #acc="ngbAccordion">
|
|
<div ngbAccordionItem [id]="AccordionPanelID.GlobalSettings" [collapsed]="false">
|
|
<h2 class="accordion-header" ngbAccordionHeader>
|
|
<button class="accordion-button" ngbAccordionButton type="button" [attr.aria-expanded]="acc.isExpanded(AccordionPanelID.GlobalSettings)" aria-controls="collapseOne">
|
|
{{t('global-settings-title')}}
|
|
</button>
|
|
</h2>
|
|
<div ngbAccordionCollapse>
|
|
<div ngbAccordionBody>
|
|
<ng-template>
|
|
<div class="row g-0">
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<label for="settings-global-layoutmode" class="form-label">{{t('page-layout-mode-label')}}</label>
|
|
<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="layoutModeTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #layoutModeTooltip>{{t('page-layout-mode-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-global-layoutmode-help">
|
|
<ng-container [ngTemplateOutlet]="layoutModeTooltip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="manga-header" formControlName="globalPageLayoutMode" id="settings-global-layoutmode">
|
|
<option *ngFor="let opt of pageLayoutModesTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<label for="settings-global-locale" class="form-label">{{t('locale-label')}}</label>
|
|
<i class="fa fa-info-circle ms-1"
|
|
aria-hidden="true" placement="right" [ngbTooltip]="localeTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #localeTooltip>{{t('locale-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-global-locale-help">
|
|
<ng-container [ngTemplateOutlet]="localeTooltip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="manga-header" formControlName="locale" id="settings-global-locale">
|
|
<option *ngFor="let opt of locales" [value]="opt.isoCode">{{opt.title | titlecase}}</option>
|
|
</select>
|
|
</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="blur-unread-summaries" role="switch" formControlName="blurUnreadSummaries" class="form-check-input" aria-describedby="settings-global-blurUnreadSummaries-help" [value]="true" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="blur-unread-summaries">{{t('blur-unread-summaries-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="blurUnreadSummariesTooltip" role="button" tabindex="0"></i>
|
|
</div>
|
|
|
|
<ng-template #blurUnreadSummariesTooltip>{{t('blur-unread-summaries-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-global-blurUnreadSummaries-help">
|
|
<ng-container [ngTemplateOutlet]="blurUnreadSummariesTooltip"></ng-container>
|
|
</span>
|
|
</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="prompt-download" role="switch" formControlName="promptForDownloadSize" class="form-check-input" aria-describedby="settings-global-promptForDownloadSize-help" [value]="true" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="prompt-download">{{t('prompt-on-download-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="promptForDownloadSizeTooltip" role="button" tabindex="0"></i>
|
|
</div>
|
|
|
|
<ng-template #promptForDownloadSizeTooltip>{{t('prompt-on-download-tooltip', {size: '100'})}}</ng-template>
|
|
<span class="visually-hidden" id="settings-global-promptForDownloadSize-help">
|
|
<ng-container [ngTemplateOutlet]="promptForDownloadSizeTooltip"></ng-container>
|
|
</span>
|
|
</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">{{t('disable-animations-label')}}</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>{{t('disable-animations-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-global-noTransitions-help">
|
|
<ng-container [ngTemplateOutlet]="noTransitionsTooltip"></ng-container>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-12 col-sm-12 pe-2 mb-2">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="collapse-relationships" role="switch" formControlName="collapseSeriesRelationships"
|
|
aria-describedby="settings-collapse-relationships-help" class="form-check-input" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="collapse-relationships">{{t('collapse-series-relationships-label')}}</label>
|
|
<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="collapseSeriesRelationshipsTooltip" role="button" tabindex="0"></i>
|
|
</div>
|
|
<ng-template #collapseSeriesRelationshipsTooltip>{{t('collapse-series-relationships-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-collapse-relationships-help">
|
|
<ng-container [ngTemplateOutlet]="collapseSeriesRelationshipsTooltip"></ng-container>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-12 col-sm-12 pe-2 mb-2">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="share-reviews" role="switch" formControlName="shareReviews"
|
|
aria-describedby="settings-share-reviews-help" class="form-check-input" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="share-reviews">{{t('share-series-reviews-label')}}</label>
|
|
<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="shareReviewsTooltip" role="button" tabindex="0"></i>
|
|
</div>
|
|
<ng-template #shareReviewsTooltip>{{t('share-series-reviews-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-share-reviews-help">
|
|
<ng-container [ngTemplateOutlet]="shareReviewsTooltip"></ng-container>
|
|
</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">{{t('reset')}}</button>
|
|
<button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.dirty">{{t('save')}}</button>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ngbAccordionItem [id]="AccordionPanelID.ImageReader">
|
|
<h2 class="accordion-header" ngbAccordionHeader>
|
|
<button class="accordion-button" ngbAccordionButton type="button" [attr.aria-expanded]="acc.isExpanded(AccordionPanelID.ImageReader)" aria-controls="collapseOne">
|
|
{{t('image-reader-settings-title')}}
|
|
</button>
|
|
</h2>
|
|
<div ngbAccordionCollapse>
|
|
<div ngbAccordionBody>
|
|
<ng-template>
|
|
<div class="row g-0">
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<label for="settings-reading-direction" class="form-label">{{t('reading-direction-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="readingDirectionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #readingDirectionTooltip>{{t('reading-direction-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-reading-direction-help">
|
|
<ng-container [ngTemplateOutlet]="readingDirectionTooltip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="manga-header" formControlName="readingDirection" id="settings-reading-direction">
|
|
<option *ngFor="let opt of readingDirectionsTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<label for="settings-scaling-option" class="form-label">{{t('scaling-option-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="scalingOptionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #scalingOptionTooltip>{{t('scaling-option-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-scaling-option-help">
|
|
<ng-container [ngTemplateOutlet]="scalingOptionTooltip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="manga-header" formControlName="scalingOption" id="settings-scaling-option">
|
|
<option *ngFor="let opt of scalingOptionsTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<label for="settings-pagesplit-option" class="form-label">{{t('page-splitting-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="pageSplitOptionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #pageSplitOptionTooltip>{{t('page-splitting-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-pagesplit-option-help">
|
|
<ng-container [ngTemplateOutlet]="pageSplitOptionTooltip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="manga-header" formControlName="pageSplitOption" id="settings-pagesplit-option">
|
|
<option *ngFor="let opt of pageSplitOptionsTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<label for="settings-readingmode-option" class="form-label">{{t('reading-mode-label')}}</label>
|
|
<select class="form-select" aria-describedby="manga-header" formControlName="readerMode" id="settings-readingmode-option">
|
|
<option *ngFor="let opt of readingModesTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2" *ngIf="true">
|
|
<label for="settings-layoutmode-option" class="form-label">{{t('layout-mode-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="layoutModeTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #layoutModeTooltip>{{t('layout-mode-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-layoutmode-option-help">
|
|
<ng-container [ngTemplateOutlet]="layoutModeTooltip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="manga-header" formControlName="layoutMode" id="settings-layoutmode-option">
|
|
<option *ngFor="let opt of layoutModesTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<label for="settings-background-color-option" class="form-label">{{t('background-color-label')}}</label>
|
|
<input [value]="user!.preferences!.backgroundColor"
|
|
class="form-control"
|
|
id="settings-background-color-option"
|
|
(colorPickerChange)="handleBackgroundColorChange()"
|
|
[style.background]="user!.preferences!.backgroundColor"
|
|
[cpAlphaChannel]="'disabled'"
|
|
[(colorPicker)]="user!.preferences!.backgroundColor"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<div class="mb-3 mt-1">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="auto-close" role="switch" formControlName="autoCloseMenu" class="form-check-input" [value]="true" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="auto-close">{{t('auto-close-menu-label')}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<div class="mb-3 mt-1">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="show-screen-hints" role="switch" formControlName="showScreenHints" class="form-check-input" [value]="true" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="show-screen-hints">{{t('show-screen-hints-label')}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<div class="mb-3 mt-1">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="emulate-book" role="switch" formControlName="emulateBook" class="form-check-input" [value]="true">
|
|
<label class="form-check-label me-1" for="emulate-book">{{t('emulate-comic-book-label')}}</label><i class="fa fa-info-circle" aria-hidden="true" placement="top" ngbTooltip="Applies a shadow effect to emulate reading from a book" role="button" tabindex="0"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-2">
|
|
<div class="mb-3 mt-1">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="swipe-to-paginate" role="switch" formControlName="swipeToPaginate" class="form-check-input" [value]="true">
|
|
<label class="form-check-label me-1" for="swipe-to-paginate">{{t('swipe-to-paginate-label')}}</label><i class="fa fa-info-circle" aria-hidden="true" placement="top" ngbTooltip="Should swiping on the screen cause the next or previous page to be triggered" role="button" tabindex="0"></i>
|
|
</div>
|
|
</div>
|
|
</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">{{t('reset')}}</button>
|
|
<button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.dirty">{{t('save')}}</button>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ngbAccordionItem [id]="AccordionPanelID.BookReader">
|
|
<h2 class="accordion-header" ngbAccordionHeader>
|
|
<button class="accordion-button" ngbAccordionButton type="button" [attr.aria-expanded]="acc.isExpanded(AccordionPanelID.BookReader)" aria-controls="collapseOne">
|
|
{{t('book-reader-settings-title')}}
|
|
</button>
|
|
</h2>
|
|
<div ngbAccordionCollapse>
|
|
<div ngbAccordionBody>
|
|
<ng-template>
|
|
<div class="row g-0">
|
|
<div class="col-md-4 col-sm-12 pe-2 mb-3">
|
|
<label id="taptopaginate-label" class="form-label"></label>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" role="switch" id="taptopaginate" formControlName="bookReaderTapToPaginate" class="form-check-input" [value]="true" aria-labelledby="taptopaginate-label">
|
|
<label for="taptopaginate" class="form-check-label">{{t('tap-to-paginate-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="tapToPaginateOptionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #tapToPaginateOptionTooltip>{{t('tap-to-paginate-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-taptopaginate-option-help">
|
|
<ng-container [ngTemplateOutlet]="tapToPaginateOptionTooltip"></ng-container>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-12 pe-2 mb-3">
|
|
<label id="immersivemode-label" class="form-label"></label>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" role="switch" id="immersivemode" formControlName="bookReaderImmersiveMode" class="form-check-input" [value]="true" aria-labelledby="immersivemode-label">
|
|
<label for="immersivemode" class="form-check-label">{{t('immersive-mode-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="immersivemodeOptionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #immersivemodeOptionTooltip>{{t('immersive-mode-label')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-immersivemode-option-help">
|
|
<ng-container [ngTemplateOutlet]="immersivemodeOptionTooltip"></ng-container>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-3">
|
|
<label for="settings-book-reading-direction" class="form-label">{{t('reading-direction-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="bookReadingDirectionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #bookReadingDirectionTooltip>{{t('reading-direction-book-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-book-reading-direction-book-help">
|
|
<ng-container [ngTemplateOutlet]="bookReadingDirectionTooltip"></ng-container>
|
|
</span>
|
|
<select id="settings-book-reading-direction" class="form-select" aria-describedby="settings-book-reading-direction-help" formControlName="bookReaderReadingDirection">
|
|
<option *ngFor="let opt of readingDirectionsTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-3">
|
|
<label for="settings-fontfamily-option" class="form-label">{{t('font-family-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="fontFamilyOptionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #fontFamilyOptionTooltip>{{t('font-family-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-fontfamily-option-help">
|
|
<ng-container [ngTemplateOutlet]="fontFamilyOptionTooltip"></ng-container>
|
|
</span>
|
|
<select id="settings-fontfamily-option" class="form-select" aria-describedby="settings-fontfamily-option-help" formControlName="bookReaderFontFamily">
|
|
<option *ngFor="let opt of fontFamilies" [value]="opt">{{opt | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-3">
|
|
<label for="settings-book-writing-style" class="form-label me-1">{{t('writing-style-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" aria-describedby="settings-book-writing-style-help" placement="right" [ngbTooltip]="bookWritingStyleToolTip" role="button" tabindex="0"></i>
|
|
<ng-template #bookWritingStyleToolTip>{{t('writing-style-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-book-writing-style-help">
|
|
<ng-container [ngTemplateOutlet]="bookWritingStyleToolTip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="settings-book-writing-style-help" formControlName="bookReaderWritingStyle" id="settings-book-writing-style" >
|
|
<option *ngFor="let opt of bookWritingStylesTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-3">
|
|
<label for="settings-book-layout-mode" class="form-label">{{t('layout-mode-book-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="bookLayoutModeTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #bookLayoutModeTooltip>{{t('layout-mode-book-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-book-layout-mode-help">
|
|
<ng-container [ngTemplateOutlet]="bookLayoutModeTooltip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="settings-book-layout-mode-help" formControlName="bookReaderLayoutMode" id="settings-book-layout-mode">
|
|
<option *ngFor="let opt of bookLayoutModesTranslated" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
|
|
<div class="col-md-6 col-sm-12 pe-2 mb-3">
|
|
<label for="settings-color-theme-option" class="form-label">{{t('color-theme-book-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="bookColorThemeTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #bookColorThemeTooltip>{{t('color-theme-book-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-color-theme-option-help">
|
|
<ng-container [ngTemplateOutlet]="bookColorThemeTooltip"></ng-container>
|
|
</span>
|
|
<select class="form-select" aria-describedby="settings-color-theme-option-help" formControlName="bookReaderThemeName" id="settings-color-theme-option">
|
|
<option *ngFor="let opt of bookColorThemesTranslated" [value]="opt.name">{{opt.name | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<div class="col-md-4 col-sm-12 pe-2 mb-3">
|
|
<label for="fontsize" class="form-label range-label">{{t('font-size-book-label')}}</label>
|
|
<input type="range" class="form-range" id="fontsize"
|
|
min="50" max="300" step="10" formControlName="bookReaderFontSize">
|
|
<span class="range-text">{{settingsForm.get('bookReaderFontSize')?.value + '%'}}</span>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-4 col-sm-12 pe-2 mb-3">
|
|
<div class="range-label">
|
|
<label class="form-label" for="linespacing">{{t('line-height-book-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="bookLineHeightOptionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #bookLineHeightOptionTooltip>{{t('line-height-book-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-booklineheight-option-help">
|
|
<ng-container [ngTemplateOutlet]="bookLineHeightOptionTooltip"></ng-container>
|
|
</span>
|
|
</div>
|
|
<input type="range" class="form-range" id="linespacing" min="100" max="200" step="10"
|
|
formControlName="bookReaderLineSpacing" aria-describedby="settings-booklineheight-option-help">
|
|
<span class="range-text">{{settingsForm.get('bookReaderLineSpacing')?.value + '%'}}</span>
|
|
</div>
|
|
|
|
<div class="col-md-4 col-sm-12 pe-2 mb-3">
|
|
<div class="range-label">
|
|
<label class="form-label">{{t('margin-book-label')}}</label><i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="bookReaderMarginOptionTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #bookReaderMarginOptionTooltip>{{t('margin-book-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="settings-bookmargin-option-help">
|
|
<ng-container [ngTemplateOutlet]="bookReaderMarginOptionTooltip"></ng-container>
|
|
</span>
|
|
</div>
|
|
|
|
<input type="range" class="form-range" id="margin" min="0" max="30" step="5" formControlName="bookReaderMargin" aria-describedby="bookmargin">
|
|
<span class="range-text">{{settingsForm.get('bookReaderMargin')?.value + '%'}}</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">{{t('reset')}}</button>
|
|
<button type="submit" class="flex-fill btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.dirty">{{t('save')}}</button>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</ng-container>
|
|
|
|
|
|
<ng-container *ngIf="tab.fragment === FragmentID.Clients">
|
|
<div class="alert alert-warning" role="alert" *ngIf="!opdsEnabled">{{t('clients-opds-alert')}}</div>
|
|
<p>{{t('clients-opds-description')}}</p>
|
|
<app-api-key [tooltipText]="t('clients-api-key-tooltip')" [hideData]="true"></app-api-key>
|
|
<app-api-key [title]="t('clients-opds-url-tooltip')" [hideData]="true" [showRefresh]="false" [transform]="makeUrl"></app-api-key>
|
|
</ng-container>
|
|
<ng-container *ngIf="tab.fragment === FragmentID.Theme">
|
|
<app-theme-manager></app-theme-manager>
|
|
</ng-container>
|
|
<ng-container *ngIf="tab.fragment === FragmentID.Devices">
|
|
<app-manage-devices></app-manage-devices>
|
|
</ng-container>
|
|
<ng-container *ngIf="tab.fragment === FragmentID.Stats">
|
|
<app-user-stats></app-user-stats>
|
|
</ng-container>
|
|
<ng-container *ngIf="tab.fragment === FragmentID.SmartFilters">
|
|
<app-manage-smart-filters></app-manage-smart-filters>
|
|
</ng-container>
|
|
<ng-container *ngIf="tab.fragment === FragmentID.Scrobbling">
|
|
<app-user-scrobble-history></app-user-scrobble-history>
|
|
<app-user-holds></app-user-holds>
|
|
</ng-container>
|
|
</ng-template>
|
|
</li>
|
|
</ul>
|
|
<div [ngbNavOutlet]="nav" class="mt-3"></div>
|
|
</div>
|
|
</ng-container>
|