Merge branch 'appearance-tab' into shigusegubu-themes3

src/components/font_control/font_control.js

@@ -1,9 +1,28 @@
-import { set } from 'lodash'
+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'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faExclamationTriangle,
+  faKeyboard,
+  faFont
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faExclamationTriangle,
+  faKeyboard,
+  faFont
+)
+
+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,52 +30,90 @@ export default {
   emits: ['update:modelValue'],
   data () {
     return {
-      lValue: this.modelValue,
+      manualEntry: true,
+      localValue: clone(this.modelValue),
+      familyCustomLocal: null,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
-        'custom',
-        ...(this.options || []),
         'serif',
+        'sans-serif',
         'monospace',
-        'sans-serif'
+        'local',
+        ...(this.options || [])
       ].filter(_ => _)
     }
   },
   beforeUpdate () {
-    this.lValue = this.modelValue
+    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.lValue !== 'undefined'
+      return typeof this.localValue !== 'undefined'
     },
-    dValue () {
-      return this.lValue || this.fallback || {}
+    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.dValue.family
+        return this.defaultValue.family
       },
       set (v) {
-        set(this.lValue, 'family', v)
-        this.$emit('update:modelValue', this.lValue)
+        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)
+    },
     isCustom () {
-      return this.preset === 'custom'
+      return !PRESET_FONTS.has(this.defaultValue.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,124 @@
     >
       {{ label }}
     </label>
-    <input
-      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"
-      @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"
+    <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>
+      {{ ' ' }}
+      <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>
+      <label
+        v-else
+        :id="name + '-label'"
+        :for="preset === 'custom' ? name : name + '-font-switcher'"
+        class="label"
+      >
+        <i18n-t
+          keypath="settings.style.themes3.font.entry"
+          tag="span"
+        >
+          <template #fontFamily>
+            <code>font-family</code>
+          </template>
+        </i18n-t>
+      </label>
+      {{ ' ' }}
+      <span class="btn-group">
+        <button
+          v-if="fontsListCapable && (fontsList === null || manualEntry)"
+          class="btn button-default"
+          @click="lookupLocalFonts"
+          :title="$t('settings.style.themes3.font.lookup_local_fonts')"
+        >
+          <FAIcon
+            fixed-width
+            icon="font"
+          />
+        </button>
+          <input
+            v-if="fontsLists === null || manualEntry"
+            :id="name"
+            v-model="familyCustom"
+            class="input custom-font"
+            type="text"
+          >
+      </span>
+      <span class="btn-group">
+        <button
+          v-if="fontsList !== null && !manualEntry"
+          class="btn button-default"
+          @click="toggleManualEntry"
+          :title="$t('settings.style.themes3.font.enter_manually')"
+        >
+          <FAIcon
+            fixed-width
+            icon="keyboard"
+          />
+        </button>
+        <Select
+          v-if="fontsList !== null && !manualEntry"
+          :id="name + '-local-font-switcher'"
+          v-model="familyCustom"
+          class="custom-font"
+        >
+          <option
+            v-for="option in fontsList.values()"
+            :key="option"
+            :value="option"
+            :style="{ fontFamily: option }"
+          >
+            {{ option }}
+          </option>
+        </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>
 
@@ -54,21 +135,15 @@
 
 <style lang="scss">
 .font-control {
-  input.custom-font {
-    min-width: 10em;
-  }
-
-  &.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;
-    }
+  .custom-font {
+    min-width: 20em;
+    max-width: 20em;
   }
 }
+
+.invalid-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
+}
 </style>

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -10,6 +10,10 @@
     margin-right: 0.25em;
   }
 
+  .btn-group .btn {
+    margin: 0;
+  }
+
   .style-control {
     display: flex;
     align-items: baseline;