diff --git a/frontend/src/assets/news_sources/rozhlas.png b/frontend/src/assets/news_sources/rozhlas.png
new file mode 100644
index 0000000000000000000000000000000000000000..7edb2d77f158b1a1f411fe385fb0f6a9b2918c42
Binary files /dev/null and b/frontend/src/assets/news_sources/rozhlas.png differ
diff --git a/frontend/src/components/canvas/Canvas.vue b/frontend/src/components/canvas/Canvas.vue
index e82a82e95b53897e47dbcca61813beb49f029e7c..6b535cdeb6c0fbe85a613e28caae4a272b4d313c 100644
--- a/frontend/src/components/canvas/Canvas.vue
+++ b/frontend/src/components/canvas/Canvas.vue
@@ -78,7 +78,8 @@ export default {
<div class="object-contain">
<canvas
ref="canvas"
- class="w-full border border-gray-300 drop-shadow-md"
+ class="w-full border border-gray-300 drop-shadow-md duration-150"
+ :class="{'blur': redrawing}"
:width="width"
:height="height"
></canvas>
diff --git a/frontend/src/components/inputs/text/ShortTextInput.vue b/frontend/src/components/inputs/text/ShortTextInput.vue
index 0d95fb60a8789fad1cf86f1706986410fd4e8349..6a35e7da14ef9e4561a128e1774e62f40f8bf662 100644
--- a/frontend/src/components/inputs/text/ShortTextInput.vue
+++ b/frontend/src/components/inputs/text/ShortTextInput.vue
@@ -8,9 +8,6 @@ export default {
components: { InputHeading },
props: ['name', 'important', 'zIndex', 'relatedModel', 'predefinedValues', 'modelValue'],
emits: ['update:modelValue', 'update:relatedModel'],
- mounted () {
- console.log(this.predefinedValues)
- },
methods: {
emitChanges (event) {
this.$emit('update:modelValue', sanitizeValue(event.currentTarget.value))
diff --git a/frontend/src/components/reload/AutoReloadCheckbox.vue b/frontend/src/components/reload/AutoReloadCheckbox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..679a8082b4e05aa63dba8e92e7bfe263bf736f04
--- /dev/null
+++ b/frontend/src/components/reload/AutoReloadCheckbox.vue
@@ -0,0 +1,20 @@
+<script>
+ export default {
+ props: ['modelValue'],
+ emits: ['update:modelValue']
+ }
+</script>
+
+<template>
+ <div class="flex gap-3 justify-end mb-3">
+ <input
+ id="auto-reload-checkbox"
+ name="auto-reload-checkbox"
+ type="checkbox"
+ @input="$emit('update:modelValue', $event.target.value)"
+ >
+ <label
+ for="auto-reload-checkbox"
+ >Obnovovat automaticky (může zatížit prohlížeč)</label>
+ </div>
+</template>
diff --git a/frontend/src/components/reload/ReloadButton.vue b/frontend/src/components/reload/ReloadButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..49b7d30d44c78996be998ae6b6b9757772d264fa
--- /dev/null
+++ b/frontend/src/components/reload/ReloadButton.vue
@@ -0,0 +1,19 @@
+<script>
+ export default {
+ props: ['parentRefs']
+ }
+</script>
+
+<template>
+ <button
+ class="btn btn--icon max-w-[unset]"
+ :disabled="$props.parentRefs.canvas ? $props.parentRefs.canvas.redrawing : true"
+ >
+ <div class="btn__body-wrap">
+ <div class="btn__body w-full">Obnovit šablonu</div>
+ <div class="btn__icon">
+ <i class="ico--refresh"></i>
+ </div>
+ </div>
+ </button>
+</template>
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 0ef47aac5fe2c88ae7c6bc7af852d59c7fc5c76f..9f00d80b65bd6f0a7676f3afb8f00d3d5547e602 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -1,6 +1,6 @@
-const loadFonts = (fonts) => {
+const loadFonts = async (fonts) => {
for (const font of fonts) {
- document.fonts.load(
+ await document.fonts.load(
`${font}`,
'Příliš žluťoučký kůň úpěl ďábelské ó.'
)
diff --git a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
index 148b4e135819fc8c7f884f79dc7db0566b1b871f..dc287f8c66b39b916757305f057228c5a225622b 100644
--- a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
+++ b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
@@ -18,10 +18,12 @@ import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue'
import RangeInput from '../../components/inputs/RangeInput.vue'
import InputSeparator from '../../components/inputs/InputSeparator.vue'
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
+import ReloadButton from '../../components/reload/ReloadButton.vue'
+import AutoReloadCheckbox from '../../components/reload/AutoReloadCheckbox.vue'
</script>
<script>
-loadFonts([
+await loadFonts([
'12px Bebas Neue',
'12px Roboto Condensed',
'bold 12px Roboto Condensed'
@@ -69,7 +71,23 @@ export default {
},
predefinedColors: predefinedColors,
colors: predefinedColors.base.colors,
- predefinedLogoImages: generateDefaultLogos('defaultLight')
+ predefinedLogoImages: generateDefaultLogos('defaultLight'),
+ autoRedraw: false
+ }
+ },
+ methods: {
+ reloadCanvasProperties () {
+ this.$refs.canvas.redraw(
+ {
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ logoImage: this.logoImage,
+ gradientHeightMultiplier: this.gradientHeightMultiplier,
+ colors: this.colors
+ }
+ )
}
},
mounted () {
@@ -84,17 +102,9 @@ export default {
vm.colors
],
async (value) => {
- await this.$refs.canvas.redraw(
- {
- mainImage: this.mainImage,
- mainText: this.mainText,
- personName: this.personName,
- personPosition: this.personPosition,
- logoImage: this.logoImage,
- gradientHeightMultiplier: this.gradientHeightMultiplier,
- colors: this.colors
- }
- );
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
},
{
immediate: true,
@@ -123,6 +133,13 @@ export default {
</template>
<template v-slot:right>
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
<ImageInput
name="Obrázek"
v-model="mainImage"
@@ -144,7 +161,7 @@ export default {
:important="true"
zIndex="8"
/>
- <ShortTextInput
+ <LongTextInput
ref="refPersonPosition"
name="Pozice osoby"
v-model="personPosition"
diff --git a/frontend/src/views/basic_photo_banner/canvas.js b/frontend/src/views/basic_photo_banner/canvas.js
index f6fb47d2fc7fba93b2128cb3c8a92ac79c613c7e..8378144352c178e02e1700af96c399f9d448f94a 100644
--- a/frontend/src/views/basic_photo_banner/canvas.js
+++ b/frontend/src/views/basic_photo_banner/canvas.js
@@ -241,9 +241,9 @@ const redraw = async (canvas, options) => {
mainTextBoxBackground = new fabric.Rect(
{
- width: canvas.width,
+ width: canvas.width + 30, // FIXME: Whhhhyyyyyy????
height: backgroundHeight * options.gradientHeightMultiplier,
- left: 0,
+ left: -20,
top: (
mainTextBoxTop
- mainTextBackgroundMarginTop
@@ -339,6 +339,11 @@ const redraw = async (canvas, options) => {
}
)
+ mainImage.controls = {
+ ...fabric.Image.prototype.controls,
+ mtr: new fabric.Control({ visible: false })
+ }
+
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height)
} else {
diff --git a/frontend/src/views/facebook_survey/FacebookSurvey.vue b/frontend/src/views/facebook_survey/FacebookSurvey.vue
index 9d8a9c76d903bd9ac066c836489c9569752089a6..e5be7b04d727ccf061fb4c9858d6835965c99c99 100644
--- a/frontend/src/views/facebook_survey/FacebookSurvey.vue
+++ b/frontend/src/views/facebook_survey/FacebookSurvey.vue
@@ -18,10 +18,12 @@ import EmojiInput from '../../components/inputs/EmojiInput.vue'
import RangeInput from '../../components/inputs/RangeInput.vue'
import InputSeparator from '../../components/inputs/InputSeparator.vue'
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
+import ReloadButton from '../../components/reload/ReloadButton.vue'
+import AutoReloadCheckbox from '../../components/reload/AutoReloadCheckbox.vue'
</script>
<script>
-loadFonts([
+await loadFonts([
'12px Bebas Neue',
])
@@ -69,7 +71,25 @@ export default {
gradientHeightMultiplier: 1,
predefinedColors: predefinedColors,
colors: predefinedColors.base.colors,
- predefinedLogoImages: generateDefaultLogos('defaultDark')
+ predefinedLogoImages: generateDefaultLogos('defaultDark'),
+ autoRedraw: false
+ }
+ },
+ methods: {
+ reloadCanvasProperties () {
+ this.$refs.canvas.redraw(
+ {
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ logoImage: this.logoImage,
+ colors: this.colors,
+ firstEmojiImage: this.firstEmojiImage,
+ secondEmojiImage: this.secondEmojiImage,
+ firstEmojiText: this.firstEmojiText,
+ secondEmojiText: this.secondEmojiText,
+ gradientHeightMultiplier: this.gradientHeightMultiplier
+ }
+ )
}
},
mounted () {
@@ -80,25 +100,15 @@ export default {
vm.logoImage,
vm.colors,
vm.firstEmojiImage,
- vm.firstEmojiText,
vm.secondEmojiImage,
+ vm.firstEmojiText,
vm.secondEmojiText,
- vm.gradientHeightMultiplier,
+ vm.gradientHeightMultiplier
],
async (value) => {
- await this.$refs.canvas.redraw(
- {
- mainImage: this.mainImage,
- mainText: this.mainText,
- logoImage: this.logoImage,
- colors: this.colors,
- firstEmojiImage: this.firstEmojiImage,
- secondEmojiImage: this.secondEmojiImage,
- firstEmojiText: this.firstEmojiText,
- secondEmojiText: this.secondEmojiText,
- gradientHeightMultiplier: this.gradientHeightMultiplier
- }
- );
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
},
{
immediate: true,
@@ -112,7 +122,7 @@ export default {
<template>
<header>
<Navbar
- :defaultTemplate="TEMPLATES.basic_photo_banner"
+ :defaultTemplate="TEMPLATES.facebook_survey"
></Navbar>
</header>
<main>
@@ -127,6 +137,13 @@ export default {
</template>
<template v-slot:right>
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
<ImageInput
name="Obrázek"
v-model="mainImage"
diff --git a/frontend/src/views/facebook_survey/canvas.js b/frontend/src/views/facebook_survey/canvas.js
index 11fcb178006f0e0217d59d675689ba0f0f16a273..73f7d136610c4f7569c53ac6069fec6f8a06bfc1 100644
--- a/frontend/src/views/facebook_survey/canvas.js
+++ b/frontend/src/views/facebook_survey/canvas.js
@@ -1,3 +1,6 @@
+import alertifyjs from "alertifyjs"
+import "alertifyjs/build/css/alertify.css"
+
import { fabric } from 'fabric'
import { clearObjects, sortObjects, transformHighlightedText, checkTextBoxHeight } from '../../components/canvas/utils'
import { PaddedHighlightingTextbox } from '../../components/canvas/textbox'
@@ -113,10 +116,11 @@ const redraw = async (canvas, options) => {
}
if (options.firstEmojiText !== null && options.firstEmojiImage !== null) {
- firstEmojiText = new fabric.Text(
+ firstEmojiText = new fabric.Textbox(
options.firstEmojiText,
{
left: firstEmojiImage.left + 250,
+ width: 500,
top: (
mainTextBox.top
+ mainTextBox.height
@@ -132,6 +136,37 @@ const redraw = async (canvas, options) => {
)
canvas.add(firstEmojiText)
+
+ if (firstEmojiText._textLines.length > 1) {
+ firstEmojiText.set({
+ fontSize: firstEmojiText.fontSize - (mainTextSize / 2),
+ lineHeight: 0.9
+ })
+ canvas.renderAll()
+ } else if (firstEmojiText.width > 500) {
+ firstEmojiText.set({
+ fontSize: firstEmojiText.fontSize - (mainTextSize / 2),
+ lineHeight: 0.9
+ })
+ firstEmojiText.top += firstEmojiText.fontSize / 2.5
+ canvas.renderAll()
+ }
+
+ if (firstEmojiText._textLines.length > 2) {
+ canvas.remove(firstEmojiText)
+
+ if (!window.showingMaxLinesWarning) {
+ window.showingMaxLinesWarning = true
+
+ const errorMessage = alertifyjs.error(
+ "Text je moc dlouhý a nevejde se do 2 řádků. Prosím, zkrať ho."
+ )
+
+ errorMessage.callback = () => {
+ window.showingMaxLinesWarning = false
+ }
+ }
+ }
}
/* END First emoji render */
@@ -157,10 +192,11 @@ const redraw = async (canvas, options) => {
}
if (options.secondEmojiText !== null && options.secondEmojiImage !== null) {
- secondEmojiText = new fabric.Text(
+ secondEmojiText = new fabric.Textbox(
options.secondEmojiText,
{
left: secondEmojiImage.left + 250,
+ width: 300,
top: (
mainTextBox.top
+ mainTextBox.height
@@ -176,6 +212,37 @@ const redraw = async (canvas, options) => {
)
canvas.add(secondEmojiText)
+
+ if (secondEmojiText._textLines.length > 1) {
+ secondEmojiText.set({
+ fontSize: secondEmojiText.fontSize - (mainTextSize / 2),
+ lineHeight: 0.9
+ })
+ canvas.renderAll()
+ } else if (secondEmojiText.width > 500) {
+ secondEmojiText.set({
+ fontSize: secondEmojiText.fontSize - (mainTextSize / 2),
+ lineHeight: 0.9
+ })
+ secondEmojiText.top += secondEmojiText.fontSize / 2.5
+ canvas.renderAll()
+ }
+
+ if (secondEmojiText._textLines.length > 2) {
+ canvas.remove(secondEmojiText)
+
+ if (!window.showingMaxLinesWarning) {
+ window.showingMaxLinesWarning = true
+
+ const errorMessage = alertifyjs.error(
+ "Text je moc dlouhý a nevejde se do 2 řádků. Prosím, zkrať ho."
+ )
+
+ errorMessage.callback = () => {
+ window.showingMaxLinesWarning = false
+ }
+ }
+ }
}
/* END Second Emoji render */
@@ -191,9 +258,9 @@ const redraw = async (canvas, options) => {
mainTextBoxBackground = new fabric.Rect(
{
- width: canvas.width,
+ width: canvas.width + 40, // FIXME: My god!
height: backgroundHeight * options.gradientHeightMultiplier,
- left: 0,
+ left: -20,
top: (
mainTextBox.top
- mainTextBackgroundMarginTop
@@ -289,6 +356,11 @@ const redraw = async (canvas, options) => {
}
)
+ mainImage.controls = {
+ ...fabric.Image.prototype.controls,
+ mtr: new fabric.Control({ visible: false })
+ }
+
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height)
} else {
diff --git a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
index aa2ba812d440d9018f4a1cf9c0139335f1678498..60b7ea00ba9cde58b1791ab3153bef7bf62e88ce 100644
--- a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
+++ b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
@@ -18,10 +18,12 @@ import LongTextInput from '../../components/inputs/text/LongTextInput.vue'
import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue';
import InputSeparator from '../../components/inputs/InputSeparator.vue'
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
+import ReloadButton from '../../components/reload/ReloadButton.vue'
+import AutoReloadCheckbox from '../../components/reload/AutoReloadCheckbox.vue'
</script>
<script>
-loadFonts([
+await loadFonts([
'700 12px Glegoo',
'12px Roboto Condensed',
'bold 12px Roboto Condensed'
@@ -79,7 +81,23 @@ export default {
predefinedColors: predefinedColors,
colors: predefinedColors.base.colors,
predefinedLogoImages: generateDefaultLogos('defaultLight'),
- predefinedSourceImages: SOURCE_IMAGES
+ predefinedSourceImages: SOURCE_IMAGES,
+ autoRedraw: false
+ }
+ },
+ methods: {
+ async reloadCanvasProperties () {
+ await this.$refs.canvas.redraw(
+ {
+ mainImage: this.mainImage,
+ sourceImage: this.sourceImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ logoImage: this.logoImage,
+ colors: this.colors
+ }
+ )
}
},
mounted () {
@@ -94,17 +112,9 @@ export default {
vm.colors
],
async (value) => {
- await this.$refs.canvas.redraw(
- {
- mainImage: this.mainImage,
- sourceImage: this.sourceImage,
- mainText: this.mainText,
- personName: this.personName,
- personPosition: this.personPosition,
- logoImage: this.logoImage,
- colors: this.colors
- }
- );
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
},
{
immediate: true,
@@ -133,6 +143,13 @@ export default {
</template>
<template v-slot:right>
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
<ImageInput
name="Obrázek"
v-model="mainImage"
diff --git a/frontend/src/views/newspaper_quote_bottom/canvas.js b/frontend/src/views/newspaper_quote_bottom/canvas.js
index 466cca50e6f3facc9cb91a37ed861f35e4c5a9a8..66cda5c510cd9e796b6ffb8b6982f4a1a7ea0713 100644
--- a/frontend/src/views/newspaper_quote_bottom/canvas.js
+++ b/frontend/src/views/newspaper_quote_bottom/canvas.js
@@ -51,7 +51,7 @@ const redraw = async (canvas, options) => {
const nameTextMarginTop = Math.ceil(canvas.height * 0.025)
const positionTextSideGap = Math.ceil(canvas.width * 0.01)
const positionTextSeparatorWidth = Math.ceil(canvas.width * 0.0035)
- const positionTextMaxWidth = Math.ceil(canvas.width * 0.4)
+ const personInfoTextMaxWidth = Math.ceil(canvas.width * 0.5)
const bottomTextSize = Math.ceil(canvas.height * 0.03)
const additionalContentExtraBottomMargin = Math.ceil(canvas.height * 0.1)
@@ -60,7 +60,7 @@ const redraw = async (canvas, options) => {
const logoSideMargin = Math.ceil(canvas.width * 0.07)
const sourceImageHeight = Math.ceil(canvas.height * 0.07)
- const sourceImageMarginBottom = Math.ceil(canvas.width * 0.07)
+ const sourceImageMarginBottom = Math.ceil(canvas.width * 0.075)
const sourceImageMarginSide = Math.ceil(canvas.width * 0.07)
const sourceTextMarginSide = Math.ceil(canvas.width * 0.005)
@@ -120,7 +120,7 @@ const redraw = async (canvas, options) => {
{
left: personInfoSeparator.left + personInfoSeparator.width + positionTextSideGap,
top: personNameText.top,
- width: positionTextMaxWidth,
+ width: personInfoTextMaxWidth - personNameText.width,
fontFamily: 'Roboto Condensed',
fontSize: bottomTextSize,
fill: options.colors.baseText.value,
@@ -174,6 +174,7 @@ const redraw = async (canvas, options) => {
- sourceImageHeight
- sourceImageMarginBottom
),
+ selectable: false,
zIndex: 10,
})
@@ -186,6 +187,7 @@ const redraw = async (canvas, options) => {
fontFamily: 'Roboto Condensed',
left: sourceImage.left - sourceTextMarginSide,
top: sourceImage.top,
+ selectable: false,
zIndex: 10
})
@@ -444,6 +446,11 @@ const redraw = async (canvas, options) => {
}
)
+ mainImage.controls = {
+ ...fabric.Image.prototype.controls,
+ mtr: new fabric.Control({ visible: false })
+ }
+
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height)
} else {
diff --git a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
index 356dc98c127b0a67d36eddccd025d6daa328de3c..51bc333414c52e1cbd970312231a64415cabea64 100644
--- a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
+++ b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
@@ -18,10 +18,12 @@ import LongTextInput from '../../components/inputs/text/LongTextInput.vue'
import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue'
import InputSeparator from '../../components/inputs/InputSeparator.vue'
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
+import ReloadButton from '../../components/reload/ReloadButton.vue'
+import AutoReloadCheckbox from '../../components/reload/AutoReloadCheckbox.vue'
</script>
<script>
-loadFonts([
+await loadFonts([
'700 12px Glegoo',
'12px Roboto Condensed',
'bold 12px Roboto Condensed'
@@ -84,7 +86,22 @@ export default {
predefinedColors: predefinedColors,
colors: predefinedColors.base.colors,
predefinedLogoImages: generateDefaultLogos('defaultDark'),
- predefinedSourceImages: SOURCE_IMAGES
+ predefinedSourceImages: SOURCE_IMAGES,
+ autoRedraw: false
+ }
+ },
+ methods: {
+ reloadCanvasProperties () {
+ this.$refs.canvas.redraw(
+ {
+ sourceImage: this.sourceImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ logoImage: this.logoImage,
+ colors: this.colors
+ }
+ )
}
},
mounted () {
@@ -98,16 +115,9 @@ export default {
vm.colors
],
async (value) => {
- await this.$refs.canvas.redraw(
- {
- sourceImage: this.sourceImage,
- mainText: this.mainText,
- personName: this.personName,
- personPosition: this.personPosition,
- logoImage: this.logoImage,
- colors: this.colors
- }
- );
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
},
{
immediate: true,
@@ -136,6 +146,13 @@ export default {
</template>
<template v-slot:right>
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
<LongTextInput
name="Hlavní text"
v-model="mainText"
diff --git a/frontend/src/views/newspaper_quote_middle/canvas.js b/frontend/src/views/newspaper_quote_middle/canvas.js
index f2c11e4f1882cb225e7fcb9c10cce18bfab56b18..63cdaacfcd50b8f690bc89f5efc8861af9ad0ab4 100644
--- a/frontend/src/views/newspaper_quote_middle/canvas.js
+++ b/frontend/src/views/newspaper_quote_middle/canvas.js
@@ -90,10 +90,10 @@ const redraw = async (canvas, options) => {
/* BEGIN Background render */
background = new fabric.Rect({
- left: 0,
- top: 0,
- width: canvas.width,
- height: canvas.height,
+ width: canvas.width * 1.1,
+ height: canvas.height * 1.1,
+ top: -20, // FIXME: Why???? Fabric.js, what are you trying to tell me?!
+ left: -20,
fill: options.colors.background.value,
selectable: false,
zIndex: 0
@@ -454,7 +454,7 @@ const redraw = async (canvas, options) => {
// Hacky seam fix
{x: canvas.width, y: mainTextBoxForegroundBottomY},
{x: canvas.width, y: bottomTearBottom - (canvas.height * 0.063)},
- {x: canvas.width * 0.95, y: bottomTearBottom - (canvas.height * 0.055)},
+ {x: canvas.width * 0.95, y: bottomTearBottom - (canvas.height * 0.06)},
{x: canvas.width * 0.92, y: bottomTearBottom - (canvas.height * 0.045)},
{x: canvas.width * 0.85, y: bottomTearBottom - (canvas.height * 0.07)},
{x: canvas.width * 0.77, y: bottomTearBottom - (canvas.height * 0.06)},
@@ -543,6 +543,7 @@ const redraw = async (canvas, options) => {
sourceImage.set({
left: sourceImageMarginSide,
top: sourceImageMarginTop,
+ selectable: false,
zIndex: 10,
})
@@ -554,7 +555,8 @@ const redraw = async (canvas, options) => {
fontFamily: 'Roboto Condensed',
left: sourceImage.left - sourceTextMarginSide,
top: sourceImage.top,
- zIndex: 10
+ selectable: false,
+ zIndex: 10,
})
sourceText.set({
diff --git a/frontend/src/views/text_banner/TextBanner.vue b/frontend/src/views/text_banner/TextBanner.vue
index 7f3e1aae8427e8bd63c03bbd4c1900f58513bb5d..dff19e06080c4d875e758899893bc7cab217971c 100644
--- a/frontend/src/views/text_banner/TextBanner.vue
+++ b/frontend/src/views/text_banner/TextBanner.vue
@@ -14,10 +14,12 @@ import MainContainer from '../../components/MainContainer.vue';
import ImageInput from '../../components/inputs/ImageInput.vue';
import LongTextInput from '../../components/inputs/text/LongTextInput.vue';
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
+import ReloadButton from '../../components/reload/ReloadButton.vue'
+import AutoReloadCheckbox from '../../components/reload/AutoReloadCheckbox.vue'
</script>
<script>
-loadFonts(['12px Bebas Neue'])
+await loadFonts(['12px Bebas Neue'])
export default {
components: {
@@ -54,7 +56,19 @@ export default {
},
predefinedColors: predefinedColors,
colors: predefinedColors.base.colors,
- predefinedLogoImages: generateDefaultLogos('defaultLight')
+ predefinedLogoImages: generateDefaultLogos('defaultLight'),
+ autoRedraw: false
+ }
+ },
+ methods: {
+ reloadCanvasProperties () {
+ this.$refs.canvas.redraw(
+ {
+ text: this.text,
+ logoImage: this.logoImage,
+ colors: this.colors
+ }
+ )
}
},
mounted () {
@@ -65,13 +79,9 @@ export default {
vm.colors
],
async (value) => {
- await this.$refs.canvas.redraw(
- {
- text: this.text,
- logoImage: this.logoImage,
- colors: this.colors
- }
- );
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
},
{
immediate: true,
@@ -100,6 +110,13 @@ export default {
</template>
<template v-slot:right>
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
<LongTextInput
name="Text"
v-model="text"
diff --git a/frontend/src/views/text_banner/canvas.js b/frontend/src/views/text_banner/canvas.js
index 8b7da06ba598f3a588067c1dfcfae0a39bed1150..3c614fd3ad2af5b5650e3456037be18af1f7b512 100644
--- a/frontend/src/views/text_banner/canvas.js
+++ b/frontend/src/views/text_banner/canvas.js
@@ -42,10 +42,10 @@ const redraw = async (canvas, options) => {
/* BEGIN Background render */
backgroundRect = new fabric.Rect({
- width: canvas.width,
- height: canvas.height,
- top: 0,
- left: 0,
+ width: canvas.width * 1.1,
+ height: canvas.height * 1.1,
+ top: -20, // FIXME: Why???? Fabric.js, what are you trying to tell me?!
+ left: -20,
fill: options.colors.background.value,
selectable: false,
zIndex: 0
diff --git a/frontend/src/views/twitter_banner/PersonInput.vue b/frontend/src/views/twitter_banner/PersonInput.vue
index 99d784867f4640c059385e4cd63377624b00b31e..4255c9e8f492c664947df8e3049dc8520333fe2b 100644
--- a/frontend/src/views/twitter_banner/PersonInput.vue
+++ b/frontend/src/views/twitter_banner/PersonInput.vue
@@ -25,7 +25,6 @@ export default {
watch: {
selectedOption: {
async handler (value) {
- console.log(value)
const mainImage = new Image()
await new Promise(
diff --git a/frontend/src/views/twitter_banner/TwitterBanner.vue b/frontend/src/views/twitter_banner/TwitterBanner.vue
index cf6ff49d166a747f5bbc379f1ebbafdd9cf7e025..f668c7ea41fb499f7f8355dc5ccd567a54eb671d 100644
--- a/frontend/src/views/twitter_banner/TwitterBanner.vue
+++ b/frontend/src/views/twitter_banner/TwitterBanner.vue
@@ -15,6 +15,8 @@ import Navbar from '../../components/Navbar.vue'
import MainContainer from '../../components/MainContainer.vue'
import LongTextInput from '../../components/inputs/text/LongTextInput.vue'
import PersonInput from './PersonInput.vue'
+import ReloadButton from '../../components/reload/ReloadButton.vue'
+import AutoReloadCheckbox from '../../components/reload/AutoReloadCheckbox.vue'
import klaraImage from '../../assets/template/twitter_banner/klara.png'
import ivanImage from '../../assets/template/twitter_banner/ivan.png'
@@ -26,7 +28,7 @@ import twitterLogoImage from '../../assets/template/twitter_banner/twitter.png'
</script>
<script>
-loadFonts([
+await loadFonts([
'12px Bebas Neue',
'12px Roboto Condensed',
'12px Roboto'
@@ -83,33 +85,43 @@ export default {
text: COLORS.black,
highlight: COLORS.yellow1,
highlightedText: COLORS.black
- }
+ },
+ autoRedraw: false
+ }
+ },
+ methods: {
+ reloadCanvasProperties () {
+ this.$refs.canvas.redraw(
+ {
+ colors: this.colors,
+ logoImageSource: this.logoImageSource,
+ twitterLogoImageSource: this.twitterLogoImageSource,
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personTwitter: this.personTwitter
+ }
+ )
}
},
mounted () {
this.$watch(
vm => [
+ vm.colors,
+ vm.logoImageSource,
+ vm.twitterLogoImageSource,
vm.mainImage,
vm.mainText,
vm.personName,
vm.personTwitter
],
async (value) => {
- await this.$refs.canvas.redraw(
- {
- colors: this.colors,
- logoImageSource: this.logoImageSource,
- twitterLogoImageSource: this.twitterLogoImageSource,
- mainImage: this.mainImage,
- mainText: this.mainText,
- personName: this.personName,
- personTwitter: this.personTwitter
- }
- );
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
},
{
- // Let the person chooser element run the first redraw
- // immediate: true,
+ immediate: true,
deep: true
}
)
@@ -135,6 +147,13 @@ export default {
</template>
<template v-slot:right>
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
<PersonInput
name="Člověk"
v-model:mainImage="mainImage"
diff --git a/frontend/src/views/twitter_banner/canvas.js b/frontend/src/views/twitter_banner/canvas.js
index cdc7b320f0c523ad120e2c400d889af15e380e6d..2156f877b38f1878abfd01ad2365058b482dfd5b 100644
--- a/frontend/src/views/twitter_banner/canvas.js
+++ b/frontend/src/views/twitter_banner/canvas.js
@@ -53,11 +53,11 @@ const redraw = async (canvas, options) => {
if (background === null) {
background = new fabric.Rect({
- left: 0,
- top: 0,
- fill: options.colors.background.value,
- width: canvas.width,
- height: canvas.height
+ width: canvas.width * 1.1,
+ height: canvas.height * 1.1,
+ top: -20, // FIXME: Why???? Fabric.js, what are you trying to tell me?!
+ left: -20,
+ fill: options.colors.background.value
})
canvas.add(background)
diff --git a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
index 847af4f8e3d92d11234328eb8d715c407af52c5f..04e5d62f151d99a4f3ec4a92a8fb0cec49889fe9 100644
--- a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
+++ b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
@@ -18,10 +18,12 @@ import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue'
import RangeInput from '../../components/inputs/RangeInput.vue'
import InputSeparator from '../../components/inputs/InputSeparator.vue'
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
+import ReloadButton from '../../components/reload/ReloadButton.vue'
+import AutoReloadCheckbox from '../../components/reload/AutoReloadCheckbox.vue'
</script>
<script>
-loadFonts([
+await loadFonts([
'12px Bebas Neue',
'12px Roboto Condensed',
'bold 12px Roboto Condensed'
@@ -69,7 +71,23 @@ export default {
},
predefinedColors: predefinedColors,
colors: predefinedColors.base.colors,
- predefinedLogoImages: generateDefaultLogos('defaultLight')
+ predefinedLogoImages: generateDefaultLogos('defaultLight'),
+ autoRedraw: false
+ }
+ },
+ methods: {
+ reloadCanvasProperties () {
+ this.$refs.canvas.redraw(
+ {
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ logoImage: this.logoImage,
+ gradientHeightMultiplier: this.gradientHeightMultiplier,
+ colors: this.colors
+ }
+ )
}
},
mounted () {
@@ -84,17 +102,9 @@ export default {
vm.colors
],
async (value) => {
- await this.$refs.canvas.redraw(
- {
- mainImage: this.mainImage,
- mainText: this.mainText,
- personName: this.personName,
- personPosition: this.personPosition,
- logoImage: this.logoImage,
- gradientHeightMultiplier: this.gradientHeightMultiplier,
- colors: this.colors
- }
- );
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
},
{
immediate: true,
@@ -123,6 +133,13 @@ export default {
</template>
<template v-slot:right>
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
<ImageInput
name="Obrázek"
v-model="mainImage"
diff --git a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
index 5eb79475c964c7e0ff6a141fca65cf575b3fa6cb..9d1498fa028b4d678f3d27f56e67ab71a166c481 100644
--- a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
+++ b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
@@ -14,10 +14,12 @@ import MainContainer from '../../components/MainContainer.vue';
import ImageInput from '../../components/inputs/ImageInput.vue';
import LongTextInput from '../../components/inputs/text/LongTextInput.vue';
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
+import ReloadButton from '../../components/reload/ReloadButton.vue'
+import AutoReloadCheckbox from '../../components/reload/AutoReloadCheckbox.vue'
</script>
<script>
-loadFonts([
+await loadFonts([
'12px Bebas Neue',
'12px Roboto Condensed',
'bold 12px Roboto Condensed'
@@ -60,7 +62,19 @@ export default {
src: LOGOS.defaultDark.src,
defaultSelected: true,
},
- ]
+ ],
+ autoRedraw: false
+ }
+ },
+ methods: {
+ reloadCanvasProperties () {
+ this.$refs.canvas.redraw(
+ {
+ text: this.text,
+ logoImage: this.logoImage,
+ colors: this.colors
+ }
+ )
}
},
mounted () {
@@ -71,13 +85,9 @@ export default {
vm.colors
],
async (value) => {
- await this.$refs.canvas.redraw(
- {
- text: this.text,
- logoImage: this.logoImage,
- colors: this.colors
- }
- );
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
},
{
immediate: true,
@@ -106,6 +116,13 @@ export default {
</template>
<template v-slot:right>
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
<LongTextInput
name="Text"
v-model="text"
diff --git a/frontend/src/views/urgent_text_banner/canvas.js b/frontend/src/views/urgent_text_banner/canvas.js
index 80687235a18bebe6a062272b17ead657e307227e..9e7a9adc880ac3cad8731c8e55553caa644ddccc 100644
--- a/frontend/src/views/urgent_text_banner/canvas.js
+++ b/frontend/src/views/urgent_text_banner/canvas.js
@@ -39,10 +39,10 @@ const redraw = async (canvas, options) => {
backgroundImage = new fabric.Image(
backgroundImage,
{
- left: 0,
- top: 0,
- width: canvas.width,
- height: canvas.height,
+ width: canvas.width * 1.1,
+ height: canvas.height * 1.1,
+ top: -20, // FIXME: Why???? Fabric.js, what are you trying to tell me?!
+ left: -20,
zIndex: 0,
selectable: false
}
diff --git a/frontend/src/views/utils/newspaper_quotes.js b/frontend/src/views/utils/newspaper_quotes.js
index 3187f1eca135c1f199c3de23ab2217929ee541db..04ea6f810b96ca2554d4e2b63a4fa41f0a6802f7 100644
--- a/frontend/src/views/utils/newspaper_quotes.js
+++ b/frontend/src/views/utils/newspaper_quotes.js
@@ -2,6 +2,7 @@ import sourceImageCT from '../../assets/news_sources/ct.png'
import sourceImageDenikN from '../../assets/news_sources/denik_n.png'
import sourceImageSeznam from '../../assets/news_sources/seznam_zpravy.png'
import sourceImageCNN from '../../assets/news_sources/cnn.png'
+import sourceImageCzechRadio from '../../assets/news_sources/rozhlas.png'
const SOURCE_IMAGES = [
{
@@ -23,6 +24,11 @@ const SOURCE_IMAGES = [
name: 'CNN',
src: sourceImageCNN,
defaultSelected: false
+ },
+ {
+ name: 'Český Rozhlas',
+ src: sourceImageCzechRadio,
+ defaultSelected: false
}
]