james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-07-08 16:00:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

theming tweaks

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-31 20:49:30 +01:00
parent 90fcaf6645
commit 532c9ace21
2 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
template/index.html
View File

@ -174,35 +174,37 @@
<div class="p-1" style="width: 200px;">
<div class="d-flex">
<label class="themepicker">
<input type="radio" name="settingsFont" value="light" v-model="theme">
<input type="radio" name="settingsTheme" value="light" v-model="settings.theme">
<div class="themepicker-label appearance-option"></div>
</label>
<label class="themepicker">
<input type="radio" name="settingsFont" value="sepia" v-model="theme">
<input type="radio" name="settingsTheme" value="sepia" v-model="settings.theme">
<div class="themepicker-label appearance-option"></div>
</label>
<label class="themepicker">
<input type="radio" name="settingsFont" value="night" v-model="theme">
<input type="radio" name="settingsTheme" value="night" v-model="settings.theme">
<div class="themepicker-label appearance-option"></div>
</label>
</div>
<div class="mt-2">
<label class="selectgroup">
<input type="radio" name="font" value="" v-model="font">
<input type="radio" name="font" value="" v-model="settings.font">
<div class="selectgroup-label appearance-option">
System Default
</div>
</label>
<label class="selectgroup" v-for="f in $fonts()" :key="font">
<input type="radio" name="font" :value="f" v-model="font">
<label class="selectgroup" v-for="f in availableFonts" :key="f">
<input type="radio" name="font" :value="f" v-model="settings.font">
<div class="selectgroup-label appearance-option":style="{'font-family': f}">
{{ f }}
</div>
</label>
</div>
<div class="btn-group d-flex mt-2">
<button class="btn btn-outline appearance-option" style="font-size: 0.8rem">A</button>
<button class="btn btn-outline appearance-option" style="font-size: 1.2rem">A</button>
<button class="btn btn-outline appearance-option"
style="font-size: 0.8rem" @click="incrFont(-1)">A</button>
<button class="btn btn-outline appearance-option"
style="font-size: 1.2rem" @click="incrFont(1)">A</button>
</div>
</div>
</b-popover>
@ -214,7 +216,7 @@
<time>{{ formatDate(itemSelectedDetails.date) }}</time>
</div>
<hr>
<div class="content" :style="{'font-family': font,}">
<div class="content" :style="{'font-family': settings.font, 'font-size': settings.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>

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

@ -25,15 +25,10 @@ function fontAvailable(desiredFont) {
var width = element.offsetWidth;
element.style.setProperty('font-family', desiredFont);
var new_width = element.offsetWidth;
console.log(desiredFont, width !== new_width)
element.remove();
return (width !== new_width);
}
Vue.prototype.$fonts = function() {
return FONTS.filter(fontAvailable)
}
DOMPurify.addHook('afterSanitizeAttributes', function (node) {
// set all elements owning target to target=_blank
if ('target' in node) {
@ -167,9 +162,13 @@ var vm = new Vue({
'newfeed': false,
'items': false,
},
'availableFonts': FONTS.filter(fontAvailable),
'feedStats': {},
'font': '',
'theme': 'light',
'settings': {
'font': '',
'theme': 'light',
'size': 1.0,
},
}
},
computed: {
@ -489,5 +488,9 @@ var vm = new Vue({
this.feedNewChoice = []
this.feedNewChoiceSelected = ''
},
incrFont: function(x) {
console.log(x, this.settings.size)
this.settings.size = +(this.settings.size + (0.1 * x)).toFixed(1)
}
}
})