james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

store theme

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
storage/settings.go
View File

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

12
template/index.html
View File

@ -182,27 +182,27 @@
<div class="p-1" style="width: 200px;"> <div class="p-1" style="width: 200px;">
<div class="d-flex"> <div class="d-flex">
<label class="themepicker"> <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> <div class="themepicker-label appearance-option"></div>
</label> </label>
<label class="themepicker"> <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> <div class="themepicker-label appearance-option"></div>
</label> </label>
<label class="themepicker"> <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> <div class="themepicker-label appearance-option"></div>
</label> </label>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<label class="selectgroup"> <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"> <div class="selectgroup-label appearance-option">
System Default System Default
</div> </div>
</label> </label>
<label class="selectgroup" v-for="f in availableFonts" :key="f"> <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}"> <div class="selectgroup-label appearance-option":style="{'font-family': f}">
{{ f }} {{ f }}
</div> </div>
@ -224,7 +224,7 @@
<time>{{ formatDate(itemSelectedDetails.date) }}</time> <time>{{ formatDate(itemSelectedDetails.date) }}</time>
</div> </div>
<hr> <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(itemSelectedReadability)" v-if="itemSelectedReadability"></div>
<div v-html="$sanitize(itemSelectedDetails.content)" v-else-if="itemSelectedDetails.content"></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> <div v-html="$sanitize(itemSelectedDetails.description)" v-else-if="itemSelectedDetails.description"></div>

23
template/static/javascripts/app.js
View File

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