MO requests - different font for reactions, line height, minor bugfixes, new people images

frontend/src/components/MainContainer.vue

 <template>
-    <div class="container container--default mt-12 flex flex-col gap-8 md:grid md:gap-5 md:grid-cols-3">
-        <div class="md:col-span-2">
+    <div class="container container--default mt-12 flex flex-col gap-8 md:grid md:gap-5 md:grid-cols-2">
+        <div class="md:col-span-1">
             <slot name="left"></slot>
         </div>
         <div class="md:col-span-1 flex flex-col gap-2">

frontend/src/components/canvas/utils.js

@@ -23,19 +23,13 @@ const sortObjects = (canvas) => {
     canvas.renderAll()
 }
 
-const transformHighlightedText = (
+
+const transformTextLineBreaks = (
     text,
     fontSize,
-    maxWidth,
     fontFamily,
-    highlightColor,
-    highlightedTextColor,
-    options
+    maxWidth
 ) => {
-    if (options === undefined) {
-        options = {}
-    }
-
     text = text.replace(/[^\S\r\n]+/g, ' ')
     text = text.replace(/\r\n/g, '\n')
 
@@ -126,7 +120,31 @@ const transformHighlightedText = (
         }
     }
 
-    positionWithinString = 0
+    return text
+}
+
+
+const transformHighlightedText = (
+    text,
+    fontSize,
+    maxWidth,
+    fontFamily,
+    highlightColor,
+    highlightedTextColor,
+    options
+) => {
+    if (options === undefined) {
+        options = {}
+    }
+
+    text = transformTextLineBreaks(
+        text,
+        fontSize,
+        fontFamily,
+        maxWidth
+    )
+
+    let positionWithinString = 0
 
     const textContainsDiacritics = (
         /[áčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚÝŽ]+/.test(text)
@@ -221,4 +239,4 @@ const checkTextBoxHeight = (textBox, maxLines) => {
     }
 }
 
-export { clearObjects, sortObjects, transformHighlightedText, checkTextBoxHeight }
+export { clearObjects, sortObjects, transformHighlightedText, transformTextLineBreaks, checkTextBoxHeight }

frontend/src/templates.js

 import basicPhotoBannerImage from './assets/previews/basic_photo_banner.png'
+import urgentBasicPhotoBannerImage from './assets/previews/urgent_basic_photo_banner.png'
 import urgentTextBannerImage from './assets/previews/urgent_text_banner.png'
 import textBannerImage from './assets/previews/text_banner.png'
 import newspaperQuoteBottomImage from './assets/previews/newspaper_quote_bottom.png'
@@ -16,6 +17,15 @@ const TEMPLATES = {
             title: 'Základní banner s fotkou',
         }
     },
+    urgent_basic_photo_banner: {
+        name: 'Urgentní banner s fotkou',
+        image: urgentBasicPhotoBannerImage,
+        path: '/',
+        component: () => import('./views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue'),
+        meta: {
+            title: 'Urgentní banner s fotkou',
+        }
+    },
     urgent_text_banner: {
         name: 'Urgentní banner pouze s textem',
         image: urgentTextBannerImage,

frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue

@@ -50,16 +50,6 @@ export default {
                     baseText: COLORS.white,
                     highlightedText: COLORS.black
                 }
-            },
-            black_on_yellow: {
-                name: 'Černá na žluté',
-                colors: {
-                    background: COLORS.yellow1,
-                    highlight: COLORS.black,
-                    arrow: COLORS.black,
-                    baseText: COLORS.black,
-                    highlightedText: COLORS.white
-                }
             }
         }
 

frontend/src/views/facebook_survey/canvas.js

@@ -127,7 +127,7 @@ const redraw = async (canvas, options) => {
                         + firstEmojiImageMarginTop
                         + emojiImageHeight / 4
                     ),
-                    fontFamily: 'Roboto Condensed',
+                    fontFamily: 'Bebas Neue',
                     fontSize: 100,
                     fontWeight: 600,
                     fill: options.colors.baseText.value,
@@ -172,7 +172,7 @@ const redraw = async (canvas, options) => {
                         + secondEmojiImageMarginTop
                         + emojiImageHeight / 4
                     ),
-                    fontFamily: 'Roboto Condensed',
+                    fontFamily: 'Bebas Neue',
                     fontSize: 100,
                     fontWeight: 600,
                     fill: options.colors.baseText.value,

frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue

@@ -2,6 +2,7 @@
 import { watch, ref } from 'vue'
 
 import COLORS from '../../colors'
+import PEOPLE from '../../people'
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
 import { SOURCE_IMAGES } from '../utils/newspaper_quotes'
@@ -148,6 +149,8 @@ export default {
                 <ShortTextInput
                     name="Jméno osoby"
                     v-model="personName"
+                    v-model:relatedModel="personPosition"
+                    :predefinedValues="PEOPLE"
                     :important="true"
                     zIndex="8"
                 />

frontend/src/views/newspaper_quote_bottom/canvas.js

@@ -45,7 +45,7 @@ const redraw = async (canvas, options) => {
     const textMarginSides = Math.ceil(canvas.width * 0.11)
     let mainTextMarginBottom = Math.ceil(canvas.height * 0.06)
     const mainTextSize = Math.ceil(canvas.height * 0.043)
-    const mainTextLineHeight = 0.98  // Hacky fix for highlight seam
+    const mainTextLineHeight = 1.3
 
     const nameTextMarginTop = Math.ceil(canvas.height * 0.015)
     const positionTextSideGap = Math.ceil(canvas.width * 0.01)

frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue

@@ -2,6 +2,7 @@
 import { watch, ref } from 'vue'
 
 import COLORS from '../../colors'
+import PEOPLE from '../../people'
 import TEMPLATES from '../../templates'
 import { generateDefaultLogos } from '../../logos'
 import { SOURCE_IMAGES } from '../utils/newspaper_quotes'
@@ -145,6 +146,8 @@ export default {
                 <ShortTextInput
                     name="Jméno osoby"
                     v-model="personName"
+                    v-model:relatedModel="personPosition"
+                    :predefinedValues="PEOPLE"
                     :important="true"
                     zIndex="9"
                 />

frontend/src/views/text_banner/canvas.js

@@ -121,7 +121,7 @@ const redraw = async (canvas, options) => {
             }
         )
 
-        mainTextBox.top = (
+        textBox.top = (
             textBoxTop
             - highlightedData.paddingBottom
         )

frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue

+<script setup>
+import { watch, ref } from 'vue'
+
+import COLORS from '../../colors'
+import PEOPLE from '../../people'
+import TEMPLATES from '../../templates'
+import { generateDefaultLogos } from '../../logos'
+import { loadFonts } from '../../utils'
+
+import Canvas from '../../components/canvas/Canvas.vue'
+import redraw from '../basic_photo_banner/canvas'
+
+import Navbar from '../../components/Navbar.vue'
+import MainContainer from '../../components/MainContainer.vue'
+import ImageInput from '../../components/inputs/ImageInput.vue'
+import LongTextInput from '../../components/inputs/text/LongTextInput.vue'
+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'
+</script>
+
+<script>
+loadFonts([
+    '12px Bebas Neue',
+    '12px Roboto Condensed',
+    'bold 12px Roboto Condensed'
+])
+
+export default {
+    components: {
+        Canvas,
+        Navbar,
+        MainContainer,
+        ImageInput,
+        LongTextInput,
+        ShortTextInput,
+        RangeInput,
+        InputSeparator,
+        MultipleColorPicker
+    },
+    data () {
+        const predefinedColors = {
+            base: {
+                name: 'Základní barvy',
+                colors: {
+                    background: COLORS.yellow1,
+                    highlight: COLORS.black,
+                    arrow: COLORS.black,
+                    baseText: COLORS.black,
+                    highlightedText: COLORS.white
+                }
+            }
+        }
+
+        return {
+            mainImage: null,
+            mainText: null,
+            personName: null,
+            personPosition: null,
+            logoImage: null,
+            gradientHeightMultiplier: 1,
+            colorLabels: {
+                background: 'Pozadí',
+                highlight: 'Zvýraznění',
+                arrow: 'Šipka',
+                baseText: 'Text',
+                highlightedText: 'Zvýrazněný text'
+            },
+            predefinedColors: predefinedColors,
+            colors: predefinedColors.base.colors,
+            predefinedLogoImages: generateDefaultLogos('defaultLight')
+        }
+    },
+    mounted () {
+        this.$watch(
+            vm => [
+                vm.mainImage,
+                vm.mainText,
+                vm.personName,
+                vm.personPosition,
+                vm.logoImage,
+                vm.gradientHeightMultiplier,
+                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
+                    }
+                );
+            },
+            {
+                immediate: true,
+                deep: true
+            }
+        )
+    }
+}
+</script>
+
+<template>
+    <header>
+        <Navbar
+            :defaultTemplate="TEMPLATES.urgent_basic_photo_banner"
+        ></Navbar>
+    </header>
+    <main>
+        <MainContainer>
+            <template v-slot:left>
+                <Canvas
+                    ref="canvas"
+                    :redrawFunction="redraw"
+                    width="2000"
+                    height="2000"
+                />
+            </template>
+
+            <template v-slot:right>
+                <ImageInput
+                    name="Obrázek"
+                    v-model="mainImage"
+                    :important="true"
+                    zIndex="10"
+                />
+                <LongTextInput
+                    name="Hlavní text"
+                    v-model="mainText"
+                    :important="true"
+                    :highlightable="true"
+                    zIndex="9"
+                />
+                <ShortTextInput
+                    name="Jméno osoby"
+                    v-model="personName"
+                    v-model:relatedModel="personPosition"
+                    :predefinedValues="PEOPLE"
+                    :important="true"
+                    zIndex="8"
+                />
+                <ShortTextInput
+                    ref="refPersonPosition"
+                    name="Pozice osoby"
+                    v-model="personPosition"
+                    :important="false"
+                    zIndex="7"
+                />
+
+                <InputSeparator />
+
+                <ImageInput
+                    name="Obrázek loga"
+                    v-model="logoImage"
+                    :important="false"
+                    :predefinedImages="predefinedLogoImages"
+                    :mustSelectPredefinedImage="true"
+                    :disableImageInput="true"
+                    zIndex="6"
+                />
+
+                <RangeInput
+                    name="Výška gradientu"
+                    v-model="gradientHeightMultiplier"
+                    min="0"
+                    max="3"
+                />
+
+                <MultipleColorPicker
+                    name="Barvy"
+                    v-model="colors"
+                    :important="false"
+                    :colorLabels="colorLabels"
+                    :predefinedColors="predefinedColors"
+                    :defaultPredefinedColors="predefinedColors.base"
+                    zIndex="5"
+                ></MultipleColorPicker>
+            </template>
+        </MainContainer>
+    </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>

frontend/src/views/urgent_text_banner/canvas.js

 import { fabric } from 'fabric'
-import { clearObjects, sortObjects, checkTextBoxHeight } from '../../components/canvas/utils'
+import { clearObjects, sortObjects, transformTextLineBreaks, checkTextBoxHeight } from '../../components/canvas/utils'
 import backgroundURL from '../../assets/template/urgent_text_banner/background.png'
 
 let textBox = null
@@ -93,7 +93,12 @@ const redraw = async (canvas, options) => {
 
     if (options.text !== null) {
         textBox = new fabric.Textbox(
+            transformTextLineBreaks(
                 options.text,
+                textSize,
+                'Bebas Neue',
+                textBoxWidth
+            ),
             {
                 width: textBoxWidth,
                 left: (canvas.width - textBoxWidth) / 2,