better font control custom input

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
index 92ee3f30..52c3e70a 100644
--- 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
index d2d1b388..e73862a0 100644
--- 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>
+            &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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3116843d..bd18c6ef 100644
--- 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",