UX Overhaul Part 1 (#3047)
Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>
This commit is contained in:
Robbie Davis
GitHub
parent
5934d516f3
commit
ff79710ac6
324 changed files with 11589 additions and 4598 deletions
|
|
@ -0,0 +1,455 @@
|
|||
<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('page-layout-mode-label')" [subtitle]="t('page-layout-mode-tooltip')">
|
||||
<ng-template #view>
|
||||
{{settingsForm.get('globalPageLayoutMode')!.value | pageLayoutMode}}
|
||||
</ng-template>
|
||||
<ng-template #edit>
|
||||
<select class="form-select" aria-describedby="manga-header"
|
||||
formControlName="globalPageLayoutMode">
|
||||
@for (opt of pageLayoutModes; track opt) {
|
||||
<option [value]="opt.value">{{opt.value | pageLayoutMode}}</option>
|
||||
}
|
||||
</select>
|
||||
</ng-template>
|
||||
</app-setting-item>
|
||||
</div>
|
||||
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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="globalPageLayoutMode">
|
||||
@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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<input type="range" class="form-range" id="fontsize" min="50" max="300" step="10"
|
||||
formControlName="bookReaderFontSize">
|
||||
</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>
|
||||
<input type="range" class="form-range" id="linespacing" min="100" max="200" step="10"
|
||||
formControlName="bookReaderLineSpacing">
|
||||
</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>
|
||||
<input type="range" class="form-range" id="margin" min="0" max="30" step="5"
|
||||
formControlName="bookReaderMargin">
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue