commit: eba3a43805b5777aebb677df88bf5c8533743ead
parent a664cf352d78caefb5be7b82d8bf6b282702d9a3
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 26 Jun 2024 14:17:22 +0300
better font control custom input
Diffstat:
3 files changed, 109 insertions(+), 63 deletions(-)
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
@@ -1,9 +1,22 @@
import { set } from 'lodash'
import Select from '../select/select.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Popover from 'src/components/popover/popover.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faExclamationTriangle
+)
+
+const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
export default {
components: {
- Select
+ Select,
+ Checkbox,
+ Popover
},
props: [
'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
@@ -11,10 +24,11 @@ export default {
emits: ['update:modelValue'],
data () {
return {
- lValue: this.modelValue,
+ localValue: this.modelValue,
+ customFamily: '',
availableOptions: [
this.noInherit ? '' : 'inherit',
- 'custom',
+ 'local',
...(this.options || []),
'serif',
'monospace',
@@ -23,40 +37,52 @@ export default {
}
},
beforeUpdate () {
- this.lValue = this.modelValue
+ this.localValue = this.modelValue
},
computed: {
present () {
- return typeof this.lValue !== 'undefined'
+ return typeof this.localValue !== 'undefined'
},
- dValue () {
- return this.lValue || this.fallback || {}
+ defaultValue () {
+ return this.localValue || this.fallback || {}
},
family: {
get () {
- return this.dValue.family
+ return this.defaultValue.family
+ },
+ set (v) {
+ set(this.localValue, 'family', v)
+ this.$emit('update:modelValue', this.localValue)
+ }
+ },
+ familyCustom: {
+ get () {
+ return this.customFamily
},
set (v) {
- set(this.lValue, 'family', v)
- this.$emit('update:modelValue', this.lValue)
+ this.customFamily = v
+ if (!PRESET_FONTS.has(this.customFamily)) {
+ set(this.localValue, 'family', v)
+ this.$emit('update:modelValue', this.customFamily)
+ }
}
},
+ invalidCustom () {
+ return PRESET_FONTS.has(this.customFamily)
+ },
isCustom () {
- return this.preset === 'custom'
+ return !PRESET_FONTS.has(this.family)
},
preset: {
get () {
- if (this.family === 'serif' ||
- this.family === 'sans-serif' ||
- this.family === 'monospace' ||
- this.family === 'inherit') {
+ if (PRESET_FONTS.has(this.family)) {
return this.family
} else {
- return 'custom'
+ return 'local'
}
},
set (v) {
- this.family = v === 'custom' ? '' : v
+ this.family = v === 'local' ? '' : v
}
}
}
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
@@ -1,6 +1,6 @@
<template>
<div
- class="font-control style-control"
+ class="font-control"
:class="{ custom: isCustom }"
>
<label
@@ -10,43 +10,59 @@
>
{{ label }}
</label>
- <input
+ {{ ' ' }}
+ <Checkbox
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
- :aria-labelledby="name + '-label'"
- class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
- type="checkbox"
- :checked="present"
+ :modelValue="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
>
- <label
- v-if="typeof fallback !== 'undefined'"
- class="opt-l"
- :for="name + '-o'"
- :aria-hidden="true"
- />
- {{ ' ' }}
- <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.define') }}
+ </Checkbox>
+ <p>
+ <Select
+ :id="name + '-font-switcher'"
+ v-model="preset"
+ :disabled="!present"
+ class="font-switcher"
>
- {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
- </option>
- </Select>
- <input
- v-if="isCustom"
- :id="name"
- v-model="family"
- class="input custom-font"
- type="text"
- >
+ <option
+ v-for="option in availableOptions"
+ :key="option"
+ :value="option"
+ >
+ {{ $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"
+ >
+ <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>
@@ -55,20 +71,13 @@
<style lang="scss">
.font-control {
input.custom-font {
- min-width: 10em;
+ min-width: 12em;
}
+}
- &.custom {
- /* TODO Should make proper joiners... */
- .font-switcher {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
-
- .custom-font {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- }
+.invalid-tooltip {
+ margin: 0.5em 1em;
+ min-width: 10em;
+ text-align: center;
}
</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -745,6 +745,17 @@
"enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
"more_settings": "More settings",
"style": {
+ "themes3": {
+ "define": "Include in theme",
+ "font": {
+ "local": "Local font (must be installed on computer)",
+ "serif": "Serif (browser default)",
+ "sans-serif": "Sans-serif (browser default)",
+ "monospace": "Monospace (browser default)",
+ "inherit": "Same as parent component",
+ "invalid_custom_reserved": "This is a reserved font name, it will not be saved as custom font - use dropdown instead"
+ }
+ },
"switcher": {
"keep_color": "Keep colors",
"keep_shadows": "Keep shadows",
