diff options
Diffstat (limited to 'src/components/font_control')
| -rw-r--r-- | src/components/font_control/font_control.vue | 23 |
1 files changed, 18 insertions, 5 deletions
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue index 004b5546..e97a2640 100644 --- a/src/components/font_control/font_control.vue +++ b/src/components/font_control/font_control.vue @@ -1,5 +1,5 @@ <template> -<div class="font-control style-control"> +<div class="font-control style-control" :class="{ custom: isCustom }"> <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label"> {{label}} </label> @@ -16,18 +16,18 @@ :disabled="!present" v-model="preset" class="font-switcher" - id="name + '-font-switcher'"> + :id="name + '-font-switcher'"> <option v-for="option in availableOptions" :value="option"> - {{ option }} + {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }} </option> </select> <i class="icon-down-open"/> </label> <input - v-if="preset === 'custom'" + v-if="isCustom" class="custom-font" type="text" - id="name" + :id="name" v-model="family"> </div> </template> @@ -71,6 +71,9 @@ export default { this.$emit('input', this.lValue) } }, + isCustom () { + return this.preset === 'custom' + }, preset: { get () { console.log(this.family) @@ -97,5 +100,15 @@ export default { input.custom-font { min-width: 10em; } + &.custom { + .select { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .custom-font { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } } </style> |