Merge branch 'appearance-tab' into 'develop'

Themes 3: Intermission: Appearance Tab and fixes

See merge request pleroma/pleroma-fe!1920

1 files changed, 119 insertions, 47 deletions

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index d2d1b388..fca3b360 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,121 @@
     >
       {{ 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 v-if="modelValue?.family">
+      <label
+        v-if="manualEntry"
+        :id="name + '-label'"
+        :for="preset === 'custom' ? name : name + '-font-switcher'"
+        class="label"
       >
-        {{ 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"
-    >
+        <i18n-t
+          keypath="settings.style.themes3.font.entry"
+          tag="span"
+        >
+          <template #fontFamily>
+            <code>font-family</code>
+          </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
+        v-if="manualEntry"
+        class="btn-group"
+      >
+        <button
+          class="btn button-default"
+          @click="toggleManualEntry"
+          :title="$t('settings.style.themes3.font.lookup_local_fonts')"
+        >
+          <FAIcon
+            fixed-width
+            icon="font"
+          />
+        </button>
+        <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
+        v-else
+        class="btn-group"
+      >
+        <button
+          class="btn button-default"
+          @click="toggleManualEntry"
+          :title="$t('settings.style.themes3.font.enter_manually')"
+        >
+          <FAIcon
+            fixed-width
+            icon="keyboard"
+          />
+        </button>
+        <Select
+          :id="name + '-local-font-switcher'"
+          :model-value="modelValue?.family"
+          class="custom-font"
+          @update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
+        >
+          <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 disabled>
+              {{ $t('settings.style.themes3.font.local-unavailable1') }}
+            </option>
+            <option disabled>
+              {{ $t('settings.style.themes3.font.local-unavailable2') }}
+            </option>
+          </optgroup>
+        </Select>
+      </span>
+    </p>
   </div>
 </template>
 
@@ -54,21 +132,15 @@
 
 <style lang="scss">
 .font-control {
-  input.custom-font {
-    min-width: 10em;
+  .custom-font {
+    min-width: 20em;
+    max-width: 20em;
   }
+}
 
-  &.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>