font control args to allow passing an option list of fonts, for future use

This commit is contained in:
Henry Jameson 2018-11-25 22:39:06 +03:00
parent 707441ffe6
commit 1087741b0d
2 changed files with 16 additions and 10 deletions

View file

@ -17,7 +17,7 @@
v-model="preset"
class="font-switcher"
id="name + '-font-switcher'">
<option v-for="option in options" :value="option">
<option v-for="option in availableOptions" :value="option">
{{ option }}
</option>
</select>
@ -37,11 +37,19 @@ import { set } from 'vue'
export default {
props: [
'name', 'label', 'value', 'fallback', 'options'
'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
],
data () {
return {
lValue: this.value
lValue: this.value,
availableOptions: [
this.noInherit ? '' : 'inherit',
'custom',
...(this.options || []),
'serif',
'monospace',
'sans-serif'
].filter(_ => _)
}
},
beforeUpdate () {

View file

@ -215,31 +215,29 @@
<div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
<div class="tab-header">
<p>{{$t('settings.style.fonts.help')}}</p>
<button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button>
</div>
<FontControl
name="ui"
v-model="fontsLocal.interface"
:label="$t('settings.style.fonts.components.interface')"
:fallback="previewTheme.fonts.interface"
:options="['serif', 'sans-serif', 'monospace', 'custom']" />
no-inherit="1"/>
<FontControl
name="input"
v-model="fontsLocal.input"
:label="$t('settings.style.fonts.components.input')"
:fallback="previewTheme.fonts.input"
:options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
:fallback="previewTheme.fonts.input"/>
<FontControl
name="post"
v-model="fontsLocal.post"
:label="$t('settings.style.fonts.components.post')"
:fallback="previewTheme.fonts.post"
:options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
:fallback="previewTheme.fonts.post"/>
<FontControl
name="postCode"
v-model="fontsLocal.postCode"
:label="$t('settings.style.fonts.components.postCode')"
:fallback="previewTheme.fonts.postCode"
:options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
:fallback="previewTheme.fonts.postCode"/>
</div>
</tab-switcher>
</keep-alive>