Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/font_control/font_control.vue
View file

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

12
src/components/style_switcher/style_switcher.vue
View file

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