groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-12-27 06:09:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Option to change the font family in epub viewer

Browse source
This commit is contained in:
MxMarx 2023-10-26 02:01:40 -07:00
parent 8dc4490169
commit 24228b4424
15 changed files with 45 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/components/readers/EpubReader.vue
View file

@ -42,6 +42,7 @@ export default {
rendition: null,
ereaderSettings: {
theme: 'dark',
font: 'serif',
fontScale: 100,
lineSpacing: 115,
spread: 'auto'
@ -130,6 +131,7 @@ export default {
const fontScale = settings.fontScale || 100
this.rendition.themes.fontSize(`${fontScale}%`)
this.rendition.themes.font(settings.font)
this.rendition.spread(settings.spread || 'auto')
},
prev() {

41
client/components/readers/Reader.vue
View file

@ -63,7 +63,13 @@
<div class="w-40">
<p class="text-lg">{{ $strings.LabelTheme }}:</p>
</div>
<ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems" @input="settingsUpdated" />
<ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems.theme" @input="settingsUpdated" />
</div>
<div class="flex items-center mb-4">
<div class="w-40">
<p class="text-lg">{{ $strings.LabelFontFamily }}:</p>
</div>
<ui-toggle-btns v-model="ereaderSettings.font" :items="themeItems.font" @input="settingsUpdated" />
</div>
<div class="flex items-center mb-4">
<div class="w-40">
@ -103,6 +109,7 @@ export default {
showSettings: false,
ereaderSettings: {
theme: 'dark',
font: 'serif',
fontScale: 100,
lineSpacing: 115,
spread: 'auto'
@ -142,16 +149,28 @@ export default {
]
},
themeItems() {
return [
{
text: this.$strings.LabelThemeDark,
value: 'dark'
},
{
text: this.$strings.LabelThemeLight,
value: 'light'
}
]
return {
theme: [
{
text: this.$strings.LabelThemeDark,
value: 'dark'
},
{
text: this.$strings.LabelThemeLight,
value: 'light'
}
],
font: [
{
text: 'Sans',
value: 'sans-serif',
},
{
text: 'Serif',
value: 'serif',
}
]
}
},
componentName() {
if (this.ebookType === 'epub') return 'readers-epub-reader'