better font control custom input

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
       }
     }
   }

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>
+            &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>
 
@@ -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>

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",