198 lines
13 KiB
HTML
198 lines
13 KiB
HTML
@if (readingProfile !== null) {
|
|
<ng-container *transloco="let t; read: 'reader-settings'">
|
|
<form [formGroup]="settingsForm">
|
|
<div ngbAccordion [closeOthers]="false" #acc="ngbAccordion">
|
|
<div ngbAccordionItem id="general-panel" title="General Settings" [collapsed]="false">
|
|
<h2 class="accordion-header" ngbAccordionHeader>
|
|
<button ngbAccordionButton class="accordion-button" type="button" [attr.aria-expanded]="acc.isExpanded('general-panel')" aria-controls="collapseOne">
|
|
{{t('general-settings-title')}}
|
|
</button>
|
|
</h2>
|
|
<div ngbAccordionCollapse>
|
|
<div ngbAccordionBody>
|
|
<ng-template>
|
|
<div class="control-container" >
|
|
<div class="controls">
|
|
<div class="mb-3">
|
|
<label for="library-type" class="form-label">{{t('font-family-label')}}</label>
|
|
<select class="form-select" id="library-type" formControlName="bookReaderFontFamily">
|
|
@for(opt of fontOptions; track opt) {
|
|
<option [value]="opt">{{opt | titlecase}}</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row g-0 controls">
|
|
<label for="fontsize" class="form-label col-6">{{t('font-size-label')}}</label>
|
|
<span class="col-6 float-end" style="display: inline-flex;">
|
|
<i class="fa-solid fa-font" style="font-size: 12px;"></i>
|
|
<input type="range" class="form-range ms-2 me-2" id="fontsize"
|
|
min="50" max="300" step="10" formControlName="bookReaderFontSize"
|
|
[ngbTooltip]="pageStyles()['font-size']">
|
|
<i class="fa-solid fa-font" style="font-size: 24px;"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="row g-0 controls">
|
|
<label for="linespacing" class="form-label col-6">{{t('line-spacing-label')}}</label>
|
|
<span class="col-6 float-end" style="display: inline-flex;">
|
|
{{t('line-spacing-min-label')}}
|
|
<input type="range" class="form-range ms-2 me-2" id="linespacing"
|
|
min="100" max="200" step="10" formControlName="bookReaderLineSpacing"
|
|
[ngbTooltip]="pageStyles()['line-height']">
|
|
{{t('line-spacing-max-label')}}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="row g-0 controls">
|
|
<label for="margin" class="form-label col-6">{{t('margin-label')}}</label>
|
|
<span class="col-6 float-end" style="display: inline-flex;">
|
|
<i class="fa-solid fa-outdent"></i>
|
|
<input type="range" class="form-range ms-2 me-2" id="margin" min="0" max="30" step="5" formControlName="bookReaderMargin" [ngbTooltip]="settingsForm.get('bookReaderMargin')?.value + '%'">
|
|
<i class="fa-solid fa-indent"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="row g-0 justify-content-between mt-2">
|
|
<button (click)="resetSettings()" class="btn btn-primary col">{{t('reset-to-defaults')}}</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div ngbAccordionItem id="reader-panel" title="Reader Settings" [collapsed]="false">
|
|
<h2 class="accordion-header" ngbAccordionHeader>
|
|
<button class="accordion-button" ngbAccordionButton type="button" [attr.aria-expanded]="acc.isExpanded('reader-panel')" aria-controls="collapseOne">
|
|
{{t('reader-settings-title')}}
|
|
</button>
|
|
</h2>
|
|
<div ngbAccordionCollapse>
|
|
<div ngbAccordionBody>
|
|
<ng-template>
|
|
<div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<label id="readingdirection" class="form-label">{{t('reading-direction-label')}}</label>
|
|
<button (click)="toggleReadingDirection()" class="btn btn-icon" aria-labelledby="readingdirection" title="{{readingDirectionModel() === ReadingDirection.LeftToRight ? t('left-to-right') : t('right-to-left')}}">
|
|
<i class="fa {{readingDirectionModel() === ReadingDirection.LeftToRight ? 'fa-arrow-right' : 'fa-arrow-left'}} " aria-hidden="true"></i>
|
|
<span class="phone-hidden"> {{readingDirectionModel() === ReadingDirection.LeftToRight ? t('left-to-right') : t('right-to-left')}}</span>
|
|
</button>
|
|
</div>
|
|
<div class="controls" style="display: flex; justify-content: space-between; align-items: center; ">
|
|
<label for="writing-style" class="form-label">{{t('writing-style-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="writingStyleTooltip" role="button" tabindex="0" aria-describedby="writingStyle-help"></i></label>
|
|
<ng-template #writingStyleTooltip>{{t('writing-style-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="writingStyle-help"><ng-container [ngTemplateOutlet]="writingStyleTooltip"></ng-container></span>
|
|
<button (click)="toggleWritingStyle()" id="writing-style" class="btn btn-icon" aria-labelledby="writingStyle-help" title="{{writingStyleModel() === WritingStyle.Horizontal ? t('horizontal') : t('vertical')}}">
|
|
<i class="fa {{writingStyleModel() === WritingStyle.Horizontal ? 'fa-arrows-left-right' : 'fa-arrows-up-down' }}" aria-hidden="true"></i>
|
|
<span class="phone-hidden"> {{writingStyleModel() === WritingStyle.Horizontal ? t('horizontal') : t('vertical') }}</span>
|
|
</button>
|
|
|
|
</div>
|
|
<div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<label for="tap-pagination" class="form-label">{{t('tap-to-paginate-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="tapPaginationTooltip" role="button" tabindex="0" aria-describedby="tapPagination-help"></i></label>
|
|
<ng-template #tapPaginationTooltip>{{t('tap-to-paginate-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="tapPagination-help">
|
|
<ng-container [ngTemplateOutlet]="tapPaginationTooltip"></ng-container>
|
|
</span>
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="tap-pagination" formControlName="bookReaderTapToPaginate" class="form-check-input" aria-labelledby="tapPagination-help">
|
|
<label>{{settingsForm.get('bookReaderTapToPaginate')?.value ? t('on') : t('off')}} </label>
|
|
</div>
|
|
</div>
|
|
<div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<label for="immersive-mode" class="form-label">{{t('immersive-mode-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="immersiveModeTooltip" role="button" tabindex="0" aria-describedby="immersiveMode-help"></i></label>
|
|
<ng-template #immersiveModeTooltip>{{t('immersive-mode-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="immersiveMode-help">
|
|
<ng-container [ngTemplateOutlet]="immersiveModeTooltip"></ng-container>
|
|
</span>
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="immersive-mode" formControlName="bookReaderImmersiveMode" class="form-check-input" aria-labelledby="immersiveMode-help">
|
|
<label>{{settingsForm.get('bookReaderImmersiveMode')?.value ? t('on') : t('off')}} </label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<label id="fullscreen" class="form-label">{{t('fullscreen-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top"
|
|
[ngbTooltip]="fullscreenTooltip" role="button" tabindex="1" aria-describedby="fullscreen-help"></i></label>
|
|
<ng-template #fullscreenTooltip>{{t('fullscreen-tooltip')}}</ng-template>
|
|
<span class="visually-hidden" id="fullscreen-help">
|
|
<ng-container [ngTemplateOutlet]="fullscreenTooltip"></ng-container>
|
|
</span>
|
|
<button (click)="toggleFullscreen()" class="btn btn-icon" aria-labelledby="fullscreen">
|
|
<i class="fa {{isFullscreen() ? 'fa-compress-alt' : 'fa-expand-alt'}} {{isFullscreen() ? 'icon-primary-color' : ''}}" aria-hidden="true"></i>
|
|
@if (activeTheme()?.isDarkTheme) {
|
|
<span class="ms-1">{{isFullscreen() ? t('exit') : t('enter')}}</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<label id="layout-mode" class="form-label" style="margin-bottom:0.5rem">{{t('layout-mode-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="layoutTooltip" role="button" tabindex="1" aria-describedby="layout-help"></i></label>
|
|
<ng-template #layoutTooltip><span [innerHTML]="t('layout-mode-tooltip')"></span></ng-template>
|
|
<span class="visually-hidden" id="layout-help">
|
|
<ng-container [ngTemplateOutlet]="layoutTooltip"></ng-container>
|
|
</span>
|
|
<br>
|
|
<div class="btn-group d-flex justify-content-center" role="group" [attr.aria-label]="t('layout-mode-label')">
|
|
<input type="radio" formControlName="layoutMode" [value]="BookPageLayoutMode.Default" class="btn-check" id="layout-mode-default" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="layout-mode-default">{{t('layout-mode-option-scroll')}}</label>
|
|
|
|
<input type="radio" formControlName="layoutMode" [value]="BookPageLayoutMode.Column1" class="btn-check" id="layout-mode-col1" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="layout-mode-col1">{{t('layout-mode-option-1col')}}</label>
|
|
|
|
<input type="radio" formControlName="layoutMode" [value]="BookPageLayoutMode.Column2" class="btn-check" id="layout-mode-col2" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="layout-mode-col2">{{t('layout-mode-option-2col')}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ngbAccordionItem id="color-panel" [title]="t('color-theme-title')" [collapsed]="false">
|
|
<h2 class="accordion-header" ngbAccordionHeader>
|
|
<button class="accordion-button" ngbAccordionButton type="button" [attr.aria-expanded]="acc.isExpanded('color-panel')" aria-controls="collapseOne">
|
|
{{t('color-theme-title')}}
|
|
</button>
|
|
</h2>
|
|
<div ngbAccordionCollapse>
|
|
<div ngbAccordionBody>
|
|
<ng-template>
|
|
<div class="controls">
|
|
@for(theme of themes; track theme.name) {
|
|
<button class="btn btn-icon color" (click)="setTheme(theme.name)" [ngClass]="{'active': activeTheme()?.name === theme.name}">
|
|
<div class="dot" [ngStyle]="{'background-color': theme.colorHash}"></div>
|
|
{{t(theme.translationKey)}}
|
|
</button>
|
|
}
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@let currentRP = currentReadingProfile();
|
|
<div class="row g-0 mt-2">
|
|
<button class="btn btn-primary col-12 mb-2"
|
|
[disabled]="!currentRP || currentRP.kind !== ReadingProfileKind.Implicit || !hasParentProfile()"
|
|
(click)="updateParentPref()">
|
|
{{ t('update-parent', {name: parentReadingProfile()?.name || t('loading')}) }}
|
|
</button>
|
|
<button class="btn btn-primary col-12 mb-2"
|
|
[ngbTooltip]="t('create-new-tooltip')"
|
|
[disabled]="!canPromoteProfile()"
|
|
(click)="createNewProfileFromImplicit()">
|
|
{{ t('create-new') }}
|
|
</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</form>
|
|
|
|
</ng-container>
|
|
}
|