aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/font_control/font_control.js77
-rw-r--r--src/components/font_control/font_control.vue147
2 files changed, 80 insertions, 144 deletions
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 1e33338f..f6f45c8c 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,4 +1,3 @@
-import { set, clone } from 'lodash'
import Select from '../select/select.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import Popover from 'src/components/popover/popover.vue'
@@ -16,8 +15,6 @@ library.add(
faFont
)
-const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
-
export default {
components: {
Select,
@@ -27,94 +24,36 @@ export default {
props: [
'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
],
+ mounted () {
+ this.$store.dispatch('queryLocalFonts')
+ },
emits: ['update:modelValue'],
data () {
return {
manualEntry: true,
- localValue: clone(this.modelValue),
- familyCustomLocal: null,
availableOptions: [
this.noInherit ? '' : 'inherit',
'serif',
'sans-serif',
'monospace',
- 'local',
...(this.options || [])
].filter(_ => _)
}
},
- beforeUpdate () {
- this.localValue = clone(this.modelValue)
- if (this.familyCustomLocal === null && !this.isInvalidFamily(this.modelValue?.family)) {
- this.familyCustomLocal = this.modelValue?.family
- }
- },
methods: {
- lookupLocalFonts () {
- if (!this.fontsList) {
- this.$store.dispatch('queryLocalFonts')
- }
- this.toggleManualEntry()
- },
- isInvalidFamily (value) {
- return PRESET_FONTS.has(value) || (value === '')
- },
toggleManualEntry () {
this.manualEntry = !this.manualEntry
}
},
computed: {
present () {
- return typeof this.localValue !== 'undefined'
- },
- defaultValue () {
- return this.localValue || this.fallback || {}
- },
- fontsListCapable () {
- return this.$store.state.interface.browserSupport.localFonts
- },
- fontsList () {
- return this.$store.state.interface.localFonts
- },
- family: {
- get () {
- return this.defaultValue.family
- },
- set (v) {
- this.familyCustomLocal = ''
- set(this.localValue, 'family', v)
- this.$emit('update:modelValue', this.localValue)
- }
- },
- familyCustom: {
- get () {
- return this.familyCustomLocal
- },
- set (v) {
- this.familyCustomLocal = v
- if (!this.isInvalidFamily(v)) {
- set(this.localValue, 'family', v)
- this.$emit('update:modelValue', this.localValue)
- }
- }
- },
- invalidCustom () {
- return this.isInvalidFamily(this.familyCustomLocal)
+ return typeof this.modelValue !== 'undefined'
},
- isCustom () {
- return !PRESET_FONTS.has(this.defaultValue.family)
+ localFontsList () {
+ return this.$store.state.interface.localFonts?.values()
},
- preset: {
- get () {
- if (PRESET_FONTS.has(this.family)) {
- return this.family
- } else {
- return 'local'
- }
- },
- set (v) {
- this.family = v === 'local' ? '' : v
- }
+ localFontsSize () {
+ return this.$store.state.interface.localFonts?.size
}
}
}
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index f1b126be..f3ab41a2 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -10,42 +10,18 @@
>
{{ label }}
</label>
- <p>
- <Select
- :id="name + '-font-switcher'"
- v-model="preset"
- :disabled="!present"
- class="font-switcher"
- >
- <option
- v-for="option in availableOptions"
- :key="option"
- :value="option"
- >
- {{ $t('settings.style.themes3.font.' + option) }}
- </option>
- </Select>
- {{ ' ' }}
- <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>
+ {{ ' ' }}
+ <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 v-if="modelValue?.family">
<label
- v-else
+ v-if="manualEntry"
:id="name + '-label'"
:for="preset === 'custom' ? name : name + '-font-switcher'"
class="label"
@@ -59,12 +35,22 @@
</template>
</i18n-t>
</label>
+ <label
+ v-else
+ :id="name + '-label'"
+ :for="preset === 'custom' ? name : name + '-font-switcher'"
+ class="label"
+ >
+ {{ $t('settings.style.themes3.font.select') }}
+ </label>
{{ ' ' }}
- <span class="btn-group">
+ <span
+ v-if="manualEntry"
+ class="btn-group"
+ >
<button
- v-if="fontsListCapable && (fontsList === null || manualEntry)"
class="btn button-default"
- @click="lookupLocalFonts"
+ @click="toggleManualEntry"
:title="$t('settings.style.themes3.font.lookup_local_fonts')"
>
<FAIcon
@@ -72,17 +58,19 @@
icon="font"
/>
</button>
- <input
- v-if="fontsLists === null || manualEntry"
- :id="name"
- v-model="familyCustom"
- class="input custom-font"
- type="text"
- >
+ <input
+ :id="name"
+ :model-value="modelValue.family"
+ class="input custom-font"
+ type="text"
+ @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+ >
</span>
- <span class="btn-group">
+ <span
+ v-else
+ class="btn-group"
+ >
<button
- v-if="fontsList !== null && !manualEntry"
class="btn button-default"
@click="toggleManualEntry"
:title="$t('settings.style.themes3.font.enter_manually')"
@@ -93,40 +81,49 @@
/>
</button>
<Select
- v-if="fontsList !== null && !manualEntry"
:id="name + '-local-font-switcher'"
- v-model="familyCustom"
+ :model-value="modelValue.family"
class="custom-font"
+ @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
>
- <option
- v-for="option in fontsList.values()"
- :key="option"
- :value="option"
- :style="{ fontFamily: option }"
+ <optgroup
+ :label="$t('settings.style.themes3.font.group-builtin')"
+ >
+ <option
+ v-for="option in availableOptions"
+ :key="option"
+ :value="option"
+ :style="{ fontFamily: option === 'inherit' ? null : option }"
+ >
+ {{ $t('settings.style.themes3.font.builtin.' + option) }}
+ </option>
+ </optgroup>
+ <optgroup
+ v-if="localFontsSize > 0"
+ :label="$t('settings.style.themes3.font.group-local')"
+ >
+ <option
+ v-for="option in localFontsList"
+ :key="option"
+ :value="option"
+ :style="{ fontFamily: option }"
+ >
+ {{ option }}
+ </option>
+ </optgroup>
+ <optgroup
+ v-else
+ :label="$t('settings.style.themes3.font.group-local')"
>
- {{ option }}
- </option>
+ <option disabled>
+ {{ $t('settings.style.themes3.font.local-unavailable1') }}
+ </option>
+ <option disabled>
+ {{ $t('settings.style.themes3.font.local-unavailable2') }}
+ </option>
+ </optgroup>
</Select>
</span>
- <span
- v-if="invalidCustom"
- class="InvalidIndicator"
- >
- <Popover
- trigger="hover"
- :trigger-attrs="{ 'aria-label': $t('settings.style.themes3.font.invalid_custom_reserved') }"
- >
- <template #trigger>
- &nbsp;
- <FAIcon icon="exclamation-triangle" />
- </template>
- <template #content>
- <div class="invalid-tooltip">
- {{ $t('settings.style.themes3.font.invalid_custom_reserved') }}
- </div>
- </template>
- </Popover>
- </span>
</p>
</div>
</template>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 10:51:38 +0000