This commit is contained in:
parent
39d44e4029
commit
88ea3c551a
|
@ -14,6 +14,14 @@
|
||||||
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="subheadingSize" id="subheading-size">
|
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="subheadingSize" id="subheading-size">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="pb-6">
|
||||||
|
<label class="block text-sm font-medium text-gray-700" for="subheading">Font</label>
|
||||||
|
|
||||||
|
<select v-model="font" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
||||||
|
<option v-for="font in fonts" :key="font.value" :value="font.value" v-text="font.label"></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div class="text-center stroke-gray-400">
|
<div class="text-center stroke-gray-400">
|
||||||
<button v-on:click="headingAlign = 'left'">
|
<button v-on:click="headingAlign = 'left'">
|
||||||
|
@ -122,7 +130,6 @@
|
||||||
<style>
|
<style>
|
||||||
.og {
|
.og {
|
||||||
background: #cecece;
|
background: #cecece;
|
||||||
font-family: Trebuchet MS;
|
|
||||||
max-width: 10px;
|
max-width: 10px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
@ -152,6 +159,7 @@ export default {
|
||||||
heading: localStorage.getItem('heading'),
|
heading: localStorage.getItem('heading'),
|
||||||
subheading: localStorage.getItem('subheading'),
|
subheading: localStorage.getItem('subheading'),
|
||||||
headingAlign: localStorage.getItem('headingAlign') ?? 'left',
|
headingAlign: localStorage.getItem('headingAlign') ?? 'left',
|
||||||
|
font: localStorage.getItem('font') ?? 'Trebuchet MS',
|
||||||
avatar: localStorage.getItem('avatar'),
|
avatar: localStorage.getItem('avatar'),
|
||||||
logo: localStorage.getItem('logo'),
|
logo: localStorage.getItem('logo'),
|
||||||
textColor: localStorage.getItem('textColor') ?? '#333333',
|
textColor: localStorage.getItem('textColor') ?? '#333333',
|
||||||
|
@ -165,6 +173,19 @@ export default {
|
||||||
quality: localStorage.getItem('quality') ?? 0.9,
|
quality: localStorage.getItem('quality') ?? 0.9,
|
||||||
contentPadding: localStorage.getItem('contentPadding') ?? 2.5,
|
contentPadding: localStorage.getItem('contentPadding') ?? 2.5,
|
||||||
ogMaxWidth: 100,
|
ogMaxWidth: 100,
|
||||||
|
|
||||||
|
fonts: [
|
||||||
|
{label: 'Arial (sans-serif)', value : 'Arial'},
|
||||||
|
{label: 'Brush Script MT (cursive)', value : 'Brush Script MT'},
|
||||||
|
{label: 'Calibri (sans-serif)', value : 'Calibri'},
|
||||||
|
{label: 'Courier New (monospace)', value : 'Courier New'},
|
||||||
|
{label: 'Garamond (serif)', value : 'Garamond'},
|
||||||
|
{label: 'Georgia (serif)', value : 'Georgia'},
|
||||||
|
{label: 'Tahoma (sans-serif)', value : 'Tahoma'},
|
||||||
|
{label: 'Times New Roman (serif)', value : 'Times New Roman'},
|
||||||
|
{label: 'Trebuchet MS (sans-serif)', value : 'Trebuchet MS'},
|
||||||
|
{label: 'Verdana (sans-serif)', value : 'Verdana'},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -172,7 +193,8 @@ export default {
|
||||||
return {
|
return {
|
||||||
color: this.textColor,
|
color: this.textColor,
|
||||||
width: `${this.width}px`,
|
width: `${this.width}px`,
|
||||||
maxWidth: `${this.ogMaxWidth}px`
|
maxWidth: `${this.ogMaxWidth}px`,
|
||||||
|
fontFamily: this.font,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
ogImageStyle() {
|
ogImageStyle() {
|
||||||
|
@ -311,6 +333,9 @@ export default {
|
||||||
contentPadding(value) {
|
contentPadding(value) {
|
||||||
localStorage.setItem('contentPadding', value)
|
localStorage.setItem('contentPadding', value)
|
||||||
},
|
},
|
||||||
|
font(value) {
|
||||||
|
localStorage.setItem('font', value)
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.updateOgMaxWidth()
|
this.updateOgMaxWidth()
|
||||||
|
|
Loading…
Reference in a new issue