change font selection

This commit is contained in:
Nazar Kanaev 2021-03-31 23:06:11 +01:00
parent 0f519b7202
commit f43924c17b
3 changed files with 14 additions and 14 deletions

View File

@ -226,10 +226,9 @@
</button> </button>
</div> </div>
<button class="dropdown-item" :class="{active: !theme.font}" @click.stop="theme.font = ''">System Default</button> <button class="dropdown-item" :class="{active: !theme.font}" @click.stop="theme.font = ''">sans-serif</button>
<button class="dropdown-item" :class="{active: theme.font == f}" v-for="f in fonts" :key="f" @click.stop="theme.font = f"> <button class="dropdown-item font-serif" :class="{active: theme.font == 'serif'}" @click.stop="theme.font = 'serif'">serif</button>
{{ f }} <button class="dropdown-item font-monospace" :class="{active: theme.font == 'monospace'}" @click.stop="theme.font = 'monospace'">monospace</button>
</button>
<div class="d-flex text-center"> <div class="d-flex text-center">
<button class="dropdown-item" style="font-size: 0.8rem" @click.stop="incrFont(-1)">A</button> <button class="dropdown-item" style="font-size: 0.8rem" @click.stop="incrFont(-1)">A</button>
@ -253,7 +252,8 @@
<div v-if="itemSelectedDetails" <div v-if="itemSelectedDetails"
ref="content" ref="content"
class="content px-4 pt-3 pb-5 border-top overflow-auto" class="content px-4 pt-3 pb-5 border-top overflow-auto"
:style="{'font-family': theme.font, 'font-size': theme.size + 'rem'}"> :class="{'font-serif': theme.font == 'serif', 'font-monospace': theme.font == 'monospace'}"
:style="{'font-size': theme.size + 'rem'}">
<h1><b>{{ itemSelectedDetails.title || 'untitled' }}</b></h1> <h1><b>{{ itemSelectedDetails.title || 'untitled' }}</b></h1>
<div class="text-muted"> <div class="text-muted">
<div>{{ feedsById[itemSelectedDetails.feed_id].title }}</div> <div>{{ feedsById[itemSelectedDetails.feed_id].title }}</div>

View File

@ -2,14 +2,6 @@
var TITLE = document.title var TITLE = document.title
var FONTS = [
"Arial",
"Courier New",
"Georgia",
"Times New Roman",
"Verdana",
]
var debounce = function(callback, wait) { var debounce = function(callback, wait) {
var timeout var timeout
return function() { return function() {
@ -227,7 +219,7 @@ var vm = new Vue({
'items': false, 'items': false,
'readability': false, 'readability': false,
}, },
'fonts': FONTS, 'fonts': ['', 'serif', 'monospace'],
'feedStats': {}, 'feedStats': {},
'theme': { 'theme': {
'name': s.theme_name, 'name': s.theme_name,

View File

@ -93,6 +93,14 @@ select.form-control:not([multiple]):not([size]) {
/* custom elements */ /* custom elements */
.font-serif {
font-family: Georgia, serif;
}
.font-monospace {
font-family: SFMono-Regular, Menlo, Consolas, monospace;
}
.icon { .icon {
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;