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

font selector with proper styles and functionality + local font selector

Browse source
This commit is contained in:
Henry Jameson 2024-06-26 17:05:59 +03:00
commit d5d37849ea
6 changed files with 186 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,15 +10,6 @@
>
{{ label }}
</label>
{{ ' ' }}
<Checkbox
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
:modelValue="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
>
{{ $t('settings.style.themes3.define') }}
</Checkbox>
<p>
<Select
:id="name + '-font-switcher'"
@ -34,15 +25,89 @@
{{ $t('settings.style.themes3.font.' + option) }}
</option>
</Select>
</p>
<p>
<input
v-if="isCustom"
:id="name"
v-model="familyCustom"
class="input custom-font"
type="text"
{{ ' ' }}
<Checkbox
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
:modelValue="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
>
{{ $t('settings.style.themes3.define') }}
</Checkbox>
</p>
<p v-if="isCustom">
<label
v-if="fontsList !== null && !manualEntry"
:id="name + '-label'"
:for="preset === 'custom' ? name : name + '-font-switcher'"
class="label"
>
{{ $t('settings.style.themes3.font.select') }}
</label>
<label
v-else
:id="name + '-label'"
:for="preset === 'custom' ? name : name + '-font-switcher'"
class="label"
>
<i18n-t
keypath="settings.style.themes3.font.entry"
tag="span"
>
<template #fontFamily>
<code>font-family</code>
</template>
</i18n-t>
</label>
{{ ' ' }}
<span class="btn-group">
<button
v-if="fontsListCapable && (fontsList === null || manualEntry)"
class="btn button-default"
@click="lookupLocalFonts"
:title="$t('settings.style.themes3.font.lookup_local_fonts')"
>
<FAIcon
fixed-width
icon="font"
/>
</button>
<input
v-if="fontsLists === null || manualEntry"
:id="name"
v-model="familyCustom"
class="input custom-font"
type="text"
>
</span>
<span class="btn-group">
<button
v-if="fontsList !== null && !manualEntry"
class="btn button-default"
@click="toggleManualEntry"
:title="$t('settings.style.themes3.font.enter_manually')"
>
<FAIcon
fixed-width
icon="keyboard"
/>
</button>
<Select
v-if="fontsList !== null && !manualEntry"
:id="name + '-local-font-switcher'"
v-model="familyCustom"
class="custom-font"
>
<option
v-for="option in fontsList.values()"
:key="option"
:value="option"
:style="{ fontFamily: option }"
>
{{ option }}
</option>
</Select>
</span>
<span
v-if="invalidCustom"
class="InvalidIndicator"
@ -70,8 +135,9 @@
<style lang="scss">
.font-control {
input.custom-font {
min-width: 12em;
.custom-font {
min-width: 20em;
max-width: 20em;
}
}