store theme

This commit is contained in:
Nazar Kanaev 2020-08-02 13:13:15 +01:00
parent 8b0d62fb15
commit 033ef5f8b2
3 changed files with 24 additions and 14 deletions

View File

@ -9,6 +9,9 @@ func settingsDefaults() map[string]interface{} {
"feed_list_width": 300,
"item_list_width": 300,
"sort_newest_first": true,
"theme_name": "light",
"theme_font": "",
"theme_size": 1,
}
}

View File

@ -182,27 +182,27 @@
<div class="p-1" style="width: 200px;">
<div class="d-flex">
<label class="themepicker">
<input type="radio" name="settingsTheme" value="light" v-model="settings.theme">
<input type="radio" name="settingsTheme" value="light" v-model="theme.name">
<div class="themepicker-label appearance-option"></div>
</label>
<label class="themepicker">
<input type="radio" name="settingsTheme" value="sepia" v-model="settings.theme">
<input type="radio" name="settingsTheme" value="sepia" v-model="theme.name">
<div class="themepicker-label appearance-option"></div>
</label>
<label class="themepicker">
<input type="radio" name="settingsTheme" value="night" v-model="settings.theme">
<input type="radio" name="settingsTheme" value="night" v-model="theme.name">
<div class="themepicker-label appearance-option"></div>
</label>
</div>
<div class="mt-2">
<label class="selectgroup">
<input type="radio" name="font" value="" v-model="settings.font">
<input type="radio" name="font" value="" v-model="theme.font">
<div class="selectgroup-label appearance-option">
System Default
</div>
</label>
<label class="selectgroup" v-for="f in availableFonts" :key="f">
<input type="radio" name="font" :value="f" v-model="settings.font">
<input type="radio" name="font" :value="f" v-model="theme.font">
<div class="selectgroup-label appearance-option":style="{'font-family': f}">
{{ f }}
</div>
@ -224,7 +224,7 @@
<time>{{ formatDate(itemSelectedDetails.date) }}</time>
</div>
<hr>
<div class="content" :style="{'font-family': settings.font, 'font-size': settings.size + 'rem'}">
<div class="content" :style="{'font-family': theme.font, 'font-size': theme.size + 'rem'}">
<div v-html="$sanitize(itemSelectedReadability)" v-if="itemSelectedReadability"></div>
<div v-html="$sanitize(itemSelectedDetails.content)" v-else-if="itemSelectedDetails.content"></div>
<div v-html="$sanitize(itemSelectedDetails.description)" v-else-if="itemSelectedDetails.description"></div>

View File

@ -132,6 +132,9 @@ var vm = new Vue({
vm.itemSortNewestFirst = data.sort_newest_first
vm.feedListWidth = data.feed_list_width || 300
vm.itemListWidth = data.item_list_width || 300
vm.theme.name = data.theme_name
vm.theme.font = data.theme_font
vm.theme.size = data.theme_size
vm.refreshItems()
})
this.refreshFeeds()
@ -164,10 +167,10 @@ var vm = new Vue({
},
'availableFonts': FONTS.filter(fontAvailable),
'feedStats': {},
'settings': {
'theme': {
'name': 'light',
'font': '',
'theme': 'light',
'size': 1.0,
'size': 1,
},
}
},
@ -223,10 +226,15 @@ var vm = new Vue({
},
},
watch: {
'settings': {
'theme': {
deep: true,
handler: function(newVal) {
document.body.classList.value = 'theme-' + newVal.theme
handler: function(theme) {
document.body.classList.value = 'theme-' + theme.name
api.settings.update({
theme_name: theme.name,
theme_font: theme.font,
theme_size: theme.size,
})
},
},
'feedStats': {
@ -495,8 +503,7 @@ var vm = new Vue({
this.feedNewChoiceSelected = ''
},
incrFont: function(x) {
console.log(x, this.settings.size)
this.settings.size = +(this.settings.size + (0.1 * x)).toFixed(1)
this.theme.size = +(this.theme.size + (0.1 * x)).toFixed(1)
},
fetchAllFeeds: function() {
api.feeds.refresh()