logo

pleroma-fe

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

font_control.vue (4106B)

    

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