diff options
Diffstat (limited to 'src/components/font_control/font_control.vue')
| -rw-r--r-- | src/components/font_control/font_control.vue | 147 |
1 files changed, 72 insertions, 75 deletions
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> - - <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> |