logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

font_control.vue (3920B)

    

  1. <template>
  2.   <div
  3.     class="font-control"
  4.     :class="{ custom: isCustom }"
  5.   >
  6.     <label
  7.       :id="name + '-label'"
  8.       :for="preset === 'custom' ? name : name + '-font-switcher'"
  9.       class="label"
  10.     >
  11.       {{ label }}
  12.     </label>
  13.     {{ ' ' }}
  14.     <Checkbox
  15.       v-if="typeof fallback !== 'undefined'"
  16.       :id="name + '-o'"
  17.       :modelValue="present"
  18.       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
  19.     >
  20.       {{ $t('settings.style.themes3.define') }}
  21.     </Checkbox>
  22.     <p v-if="modelValue?.family">
  23.       <label
  24.         v-if="manualEntry"
  25.         :id="name + '-label'"
  26.         :for="preset === 'custom' ? name : name + '-font-switcher'"
  27.         class="label"
  28.       >
  29.         <i18n-t
  30.           keypath="settings.style.themes3.font.entry"
  31.           tag="span"
  32.         >
  33.           <template #fontFamily>
  34.             <code>font-family</code>
  35.           </template>
  36.         </i18n-t>
  37.       </label>
  38.       <label
  39.         v-else
  40.         :id="name + '-label'"
  41.         :for="preset === 'custom' ? name : name + '-font-switcher'"
  42.         class="label"
  43.       >
  44.         {{ $t('settings.style.themes3.font.select') }}
  45.       </label>
  46.       {{ ' ' }}
  47.       <span
  48.         v-if="manualEntry"
  49.         class="btn-group"
  50.       >
  51.         <button
  52.           class="btn button-default"
  53.           @click="toggleManualEntry"
  54.           :title="$t('settings.style.themes3.font.lookup_local_fonts')"
  55.         >
  56.           <FAIcon
  57.             fixed-width
  58.             icon="font"
  59.           />
  60.         </button>
  61.         <input
  62.           :id="name"
  63.           :model-value="modelValue.family"
  64.           class="input custom-font"
  65.           type="text"
  66.           @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
  67.         >
  68.       </span>
  69.       <span
  70.         v-else
  71.         class="btn-group"
  72.       >
  73.         <button
  74.           class="btn button-default"
  75.           @click="toggleManualEntry"
  76.           :title="$t('settings.style.themes3.font.enter_manually')"
  77.         >
  78.           <FAIcon
  79.             fixed-width
  80.             icon="keyboard"
  81.           />
  82.         </button>
  83.         <Select
  84.           :id="name + '-local-font-switcher'"
  85.           :model-value="modelValue?.family"
  86.           class="custom-font"
  87.           @update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
  88.         >
  89.           <optgroup
  90.             :label="$t('settings.style.themes3.font.group-builtin')"
  91.           >
  92.             <option
  93.               v-for="option in availableOptions"
  94.               :key="option"
  95.               :value="option"
  96.               :style="{ fontFamily: option === 'inherit' ? null : option }"
  97.             >
  98.               {{ $t('settings.style.themes3.font.builtin.' + option) }}
  99.             </option>
  100.           </optgroup>
  101.           <optgroup
  102.             v-if="localFontsSize > 0"
  103.             :label="$t('settings.style.themes3.font.group-local')"
  104.           >
  105.             <option
  106.               v-for="option in localFontsList"
  107.               :key="option"
  108.               :value="option"
  109.               :style="{ fontFamily: option }"
  110.             >
  111.               {{ option }}
  112.             </option>
  113.           </optgroup>
  114.           <optgroup
  115.             v-else
  116.             :label="$t('settings.style.themes3.font.group-local')"
  117.           >
  118.             <option disabled>
  119.               {{ $t('settings.style.themes3.font.local-unavailable1') }}
  120.             </option>
  121.             <option disabled>
  122.               {{ $t('settings.style.themes3.font.local-unavailable2') }}
  123.             </option>
  124.           </optgroup>
  125.         </Select>
  126.       </span>
  127.     </p>
  128.   </div>
  129. </template>
  131. <script src="./font_control.js"></script>
  133. <style lang="scss">
  134. .font-control {
  135.   .custom-font {
  136.     min-width: 20em;
  137.     max-width: 20em;
  138.   }
  139. }
  141. .invalid-tooltip {
  142.   margin: 0.5em 1em;
  143.   min-width: 10em;
  144.   text-align: center;
  145. }
  146. </style>