akkoma-fe/src/components/font_control/font_control.vue

71 lines
1.5 KiB
Vue
Raw Normal View History

2018-11-25 18:48:16 +00:00
<template>
2019-07-05 07:17:44 +00:00
<div
class="font-control style-control"
:class="{ custom: isCustom }"
>
<label
:for="preset === 'custom' ? name : name + '-font-switcher'"
class="label"
>
{{ label }}
</label>
<input
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="opt exlcude-disabled"
type="checkbox"
2022-03-27 11:16:23 +00:00
:checked="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
2019-07-05 07:17:44 +00:00
>
<label
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
/>
2022-03-23 14:15:05 +00:00
{{ ' ' }}
<Select
:id="name + '-font-switcher'"
v-model="preset"
2018-11-25 18:48:16 +00:00
:disabled="!present"
class="font-switcher"
2019-07-05 07:17:44 +00:00
>
<option
v-for="option in availableOptions"
:key="option"
:value="option"
2019-07-05 07:17:44 +00:00
>
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
</option>
</Select>
2019-07-05 07:17:44 +00:00
<input
v-if="isCustom"
:id="name"
v-model="family"
class="custom-font"
type="text"
>
</div>
2018-11-25 18:48:16 +00:00
</template>
2018-12-10 21:56:15 +00:00
<script src="./font_control.js" ></script>
2018-11-25 18:48:16 +00:00
<style lang="scss">
@import '../../_variables.scss';
.font-control {
input.custom-font {
min-width: 10em;
}
2018-11-25 21:19:28 +00:00
&.custom {
2021-03-11 14:31:15 +00:00
/* TODO Should make proper joiners... */
.font-switcher {
2018-11-25 21:19:28 +00:00
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.custom-font {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
2018-11-25 18:48:16 +00:00
}
</style>