Skip to content
Snippets Groups Projects
Commit a3867d18 authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

add resizeable gradients

parent eccf3fde
No related branches found
No related tags found
No related merge requests found
Pipeline #13251 passed
...@@ -104,13 +104,12 @@ export default { ...@@ -104,13 +104,12 @@ export default {
<hr class="hr--unstyled border-t-gray-300"> <hr class="hr--unstyled border-t-gray-300">
<div class="flex justify-between gap-2"> <div class="flex justify-between gap-2" v-if="!disableImageInput">
<input <input
ref="fileInput" ref="fileInput"
type="file" type="file"
accept="image/*" accept="image/*"
@change="handleFileInput" @change="handleFileInput"
v-if="!disableImageInput"
> >
<button <button
aria-label="Odstranit obrázek" aria-label="Odstranit obrázek"
...@@ -123,11 +122,13 @@ export default { ...@@ -123,11 +122,13 @@ export default {
</div> </div>
<div <div
class="mt-2 flex flex-col gap-2" :class="{ 'mt-2': !disableImageInput }"
class="flex flex-col gap-2"
v-if="predefinedImages" v-if="predefinedImages"
> >
<div> <div>
<small>Nebo vyber ze senamu:</small> <small v-if="!disableImageInput">Nebo vyber ze senamu:</small>
<span v-else>Vyber ze seznamu:</span>
</div> </div>
<VueSelect <VueSelect
ref="predefinedImageSelect" ref="predefinedImageSelect"
......
<script setup>
import InputHeading from './InputHeading.vue'
</script>
<script>
export default {
components: { InputHeading },
props: ['name', 'important', 'zIndex', 'min', 'max', 'modelValue'],
emits: ['update:modelValue']
}
</script>
<template>
<section
class="flex flex-col gap-2 bg-gray-100 p-4 drop-shadow-md"
:style="{'z-index': zIndex}"
>
<InputHeading
:name="name"
:important="important"
icon="equalizer"
></InputHeading>
<input
type="range"
:min="min * 100"
:max="max * 100"
:value="modelValue * 100"
@input="$emit('update:modelValue', $event.target.value / 100)"
>
</section>
</template>
...@@ -15,6 +15,7 @@ import MainContainer from '../../components/MainContainer.vue' ...@@ -15,6 +15,7 @@ import MainContainer from '../../components/MainContainer.vue'
import ImageInput from '../../components/inputs/ImageInput.vue' import ImageInput from '../../components/inputs/ImageInput.vue'
import LongTextInput from '../../components/inputs/text/LongTextInput.vue' import LongTextInput from '../../components/inputs/text/LongTextInput.vue'
import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue' import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue'
import RangeInput from '../../components/inputs/RangeInput.vue'
import InputSeparator from '../../components/inputs/InputSeparator.vue' import InputSeparator from '../../components/inputs/InputSeparator.vue'
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue' import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
</script> </script>
...@@ -34,6 +35,7 @@ export default { ...@@ -34,6 +35,7 @@ export default {
ImageInput, ImageInput,
LongTextInput, LongTextInput,
ShortTextInput, ShortTextInput,
RangeInput,
InputSeparator, InputSeparator,
MultipleColorPicker MultipleColorPicker
}, },
...@@ -67,6 +69,7 @@ export default { ...@@ -67,6 +69,7 @@ export default {
personName: null, personName: null,
personPosition: null, personPosition: null,
logoImage: null, logoImage: null,
gradientHeightMultiplier: 1,
colorLabels: { colorLabels: {
background: 'Pozadí', background: 'Pozadí',
highlight: 'Zvýraznění', highlight: 'Zvýraznění',
...@@ -87,6 +90,7 @@ export default { ...@@ -87,6 +90,7 @@ export default {
vm.personName, vm.personName,
vm.personPosition, vm.personPosition,
vm.logoImage, vm.logoImage,
vm.gradientHeightMultiplier,
vm.colors vm.colors
], ],
async (value) => { async (value) => {
...@@ -97,6 +101,7 @@ export default { ...@@ -97,6 +101,7 @@ export default {
personName: this.personName, personName: this.personName,
personPosition: this.personPosition, personPosition: this.personPosition,
logoImage: this.logoImage, logoImage: this.logoImage,
gradientHeightMultiplier: this.gradientHeightMultiplier,
colors: this.colors colors: this.colors
} }
); );
...@@ -168,6 +173,14 @@ export default { ...@@ -168,6 +173,14 @@ export default {
:disableImageInput="true" :disableImageInput="true"
zIndex="6" zIndex="6"
/> />
<RangeInput
name="Výška gradientu"
v-model="gradientHeightMultiplier"
min="0"
max="3"
/>
<MultipleColorPicker <MultipleColorPicker
name="Barvy" name="Barvy"
v-model="colors" v-model="colors"
......
...@@ -185,15 +185,19 @@ const redraw = async (canvas, options) => { ...@@ -185,15 +185,19 @@ const redraw = async (canvas, options) => {
mainTextBoxBackground = new fabric.Rect( mainTextBoxBackground = new fabric.Rect(
{ {
width: canvas.width, width: canvas.width,
height: backgroundHeight, height: backgroundHeight * options.gradientHeightMultiplier,
left: 0, left: 0,
top: mainTextBox.top - mainTextBackgroundMarginTop, top: (
mainTextBox.top
- mainTextBackgroundMarginTop
- backgroundHeight * (options.gradientHeightMultiplier - 1)
),
fill: new fabric.Gradient({ fill: new fabric.Gradient({
type: 'linear', type: 'linear',
gradientUnits: 'pixels', gradientUnits: 'pixels',
coords: { coords: {
x1: 0, y1: 0, x1: 0, y1: 0,
x2: 0, y2: backgroundHeight x2: 0, y2: backgroundHeight * options.gradientHeightMultiplier
}, },
colorStops: [ colorStops: [
{ {
......
...@@ -15,6 +15,7 @@ import ImageInput from '../../components/inputs/ImageInput.vue' ...@@ -15,6 +15,7 @@ import ImageInput from '../../components/inputs/ImageInput.vue'
import LongTextInput from '../../components/inputs/text/LongTextInput.vue' import LongTextInput from '../../components/inputs/text/LongTextInput.vue'
import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue' import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue'
import EmojiInput from '../../components/inputs/EmojiInput.vue' import EmojiInput from '../../components/inputs/EmojiInput.vue'
import RangeInput from '../../components/inputs/RangeInput.vue'
import InputSeparator from '../../components/inputs/InputSeparator.vue' import InputSeparator from '../../components/inputs/InputSeparator.vue'
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue' import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
</script> </script>
...@@ -77,6 +78,7 @@ export default { ...@@ -77,6 +78,7 @@ export default {
baseText: 'Text', baseText: 'Text',
highlightedText: 'Zvýrazněný text' highlightedText: 'Zvýrazněný text'
}, },
gradientHeightMultiplier: 1,
predefinedColors: predefinedColors, predefinedColors: predefinedColors,
colors: predefinedColors.base.colors, colors: predefinedColors.base.colors,
predefinedLogoImages: generateDefaultLogos('defaultDark') predefinedLogoImages: generateDefaultLogos('defaultDark')
...@@ -93,6 +95,7 @@ export default { ...@@ -93,6 +95,7 @@ export default {
vm.firstEmojiText, vm.firstEmojiText,
vm.secondEmojiImage, vm.secondEmojiImage,
vm.secondEmojiText, vm.secondEmojiText,
vm.gradientHeightMultiplier,
], ],
async (value) => { async (value) => {
await this.$refs.canvas.redraw( await this.$refs.canvas.redraw(
...@@ -105,6 +108,7 @@ export default { ...@@ -105,6 +108,7 @@ export default {
secondEmojiImage: this.secondEmojiImage, secondEmojiImage: this.secondEmojiImage,
firstEmojiText: this.firstEmojiText, firstEmojiText: this.firstEmojiText,
secondEmojiText: this.secondEmojiText, secondEmojiText: this.secondEmojiText,
gradientHeightMultiplier: this.gradientHeightMultiplier
} }
); );
}, },
...@@ -178,9 +182,15 @@ export default { ...@@ -178,9 +182,15 @@ export default {
zIndex="5" zIndex="5"
/> />
<InputSeparator /> <InputSeparator />
<RangeInput
name="Výška gradientu"
v-model="gradientHeightMultiplier"
min="0"
max="3"
/>
<ImageInput <ImageInput
name="Obrázek loga" name="Obrázek loga"
v-model="logoImage" v-model="logoImage"
......
...@@ -188,15 +188,19 @@ const redraw = async (canvas, options) => { ...@@ -188,15 +188,19 @@ const redraw = async (canvas, options) => {
mainTextBoxBackground = new fabric.Rect( mainTextBoxBackground = new fabric.Rect(
{ {
width: canvas.width, width: canvas.width,
height: backgroundHeight, height: backgroundHeight * options.gradientHeightMultiplier,
left: 0, left: 0,
top: mainTextBox.top - mainTextBackgroundMarginTop, top: (
mainTextBox.top
- mainTextBackgroundMarginTop
- backgroundHeight * (options.gradientHeightMultiplier - 1)
),
fill: new fabric.Gradient({ fill: new fabric.Gradient({
type: 'linear', type: 'linear',
gradientUnits: 'pixels', gradientUnits: 'pixels',
coords: { coords: {
x1: 0, y1: 0, x1: 0, y1: 0,
x2: 0, y2: backgroundHeight x2: 0, y2: backgroundHeight * options.gradientHeightMultiplier
}, },
colorStops: [ colorStops: [
{ {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment