james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-07-09 00:10:09 +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="p-1" style="width: 200px;">
<div class="d-flex"> <div class="d-flex">
<label class="themepicker"> <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> <div class="themepicker-label appearance-option"></div>
</label> </label>
<label class="themepicker"> <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> <div class="themepicker-label appearance-option"></div>
</label> </label>
<label class="themepicker"> <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> <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="font"> <input type="radio" name="font" value="" v-model="settings.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 $fonts()" :key="font"> <label class="selectgroup" v-for="f in availableFonts" :key="f">
<input type="radio" name="font" :value="f" v-model="font"> <input type="radio" name="font" :value="f" v-model="settings.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>
</label> </label>
</div> </div>
<div class="btn-group d-flex mt-2"> <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"
<button class="btn btn-outline appearance-option" style="font-size: 1.2rem">A</button> 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>
</div> </div>
</b-popover> </b-popover>
@ -214,7 +216,7 @@
<time>{{ formatDate(itemSelectedDetails.date) }}</time> <time>{{ formatDate(itemSelectedDetails.date) }}</time>
</div> </div>
<hr> <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(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>

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

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