Page MenuHomePhorge
Files F85710201

No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 24bad93789..92ee3f3069 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,62 +1,63 @@
import { set } from 'lodash'
import Select from '../select/select.vue'
export default {
components: {
Select
},
props: [
- 'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
+ 'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
],
+ emits: ['update:modelValue'],
data () {
return {
- lValue: this.value,
+ lValue: this.modelValue,
availableOptions: [
this.noInherit ? '' : 'inherit',
'custom',
...(this.options || []),
'serif',
'monospace',
'sans-serif'
].filter(_ => _)
}
},
beforeUpdate () {
- this.lValue = this.value
+ this.lValue = this.modelValue
},
computed: {
present () {
return typeof this.lValue !== 'undefined'
},
dValue () {
return this.lValue || this.fallback || {}
},
family: {
get () {
return this.dValue.family
},
set (v) {
set(this.lValue, 'family', v)
- this.$emit('input', this.lValue)
+ this.$emit('update:modelValue', this.lValue)
}
},
isCustom () {
return this.preset === 'custom'
},
preset: {
get () {
if (this.family === 'serif' ||
this.family === 'sans-serif' ||
this.family === 'monospace' ||
this.family === 'inherit') {
return this.family
} else {
return 'custom'
}
},
set (v) {
this.family = v === 'custom' ? '' : v
}
}
}
}
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 2006c7f6ea..f100c3a9fa 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,70 +1,70 @@
<template>
<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"
- :modelValue="present"
- @input="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"
+ :checked="present"
+ @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
>
<label
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
/>
{{ ' ' }}
<Select
:id="name + '-font-switcher'"
v-model="preset"
:disabled="!present"
class="font-switcher"
>
<option
v-for="option in availableOptions"
:key="option"
:value="option"
>
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
</option>
</Select>
<input
v-if="isCustom"
:id="name"
v-model="family"
class="custom-font"
type="text"
>
</div>
</template>
<script src="./font_control.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
.font-control {
input.custom-font {
min-width: 10em;
}
&.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;
}
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Fri, Sep 18, 11:00 PM (4 h, 47 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1768388
Default Alt Text
(3 KB)

Event Timeline