diff --git a/VERSION b/VERSION index b70ae75a88d075626808407b2d05e1ec3602b162..68e69e405ee6c7285064b68327d2111fe46aeda0 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2.14.1 +2.15.0 diff --git a/frontend/src/assets/template/make_a_wish_banner/background_inverted.png b/frontend/src/assets/template/make_a_wish_banner/background_inverted.png new file mode 100644 index 0000000000000000000000000000000000000000..cfc2af3d4e9169892a32a63e2dc02fe69b8478ff Binary files /dev/null and b/frontend/src/assets/template/make_a_wish_banner/background_inverted.png differ diff --git a/frontend/src/views/make_a_wish_banner/MakeAWishBanner.vue b/frontend/src/views/make_a_wish_banner/MakeAWishBanner.vue index 34854062735854cba2b67761ea4589ebc8e7312a..af59fee8680b920a80f4ab487ed2dee923e339b5 100644 --- a/frontend/src/views/make_a_wish_banner/MakeAWishBanner.vue +++ b/frontend/src/views/make_a_wish_banner/MakeAWishBanner.vue @@ -51,11 +51,23 @@ export default { data() { const predefinedColors = { base: { - name: "Základní barvy", + name: "Černé pozadí", colors: { background: COLORS.black, highlight: COLORS.yellow1, baseText: COLORS.white, + nameText: COLORS.yellow1, + highlightedText: COLORS.black, + contractedByText: COLORS.gray1, + }, + }, + white: { + name: "Bílé pozadí", + colors: { + background: COLORS.white, + highlight: COLORS.yellow1, + baseText: COLORS.black, + nameText: COLORS.black, highlightedText: COLORS.black, contractedByText: COLORS.gray1, }, diff --git a/frontend/src/views/make_a_wish_banner/canvas.js b/frontend/src/views/make_a_wish_banner/canvas.js index 41d2c33625944afd44f136a4c86d53adb3aaad40..620de28ed5d1195bcd51262d4e082281134c5698 100644 --- a/frontend/src/views/make_a_wish_banner/canvas.js +++ b/frontend/src/views/make_a_wish_banner/canvas.js @@ -7,6 +7,8 @@ import { } from "../../components/canvas/utils"; import { PaddedHighlightingTextbox } from "../../components/canvas/textbox"; import backgroundURL from "../../assets/template/make_a_wish_banner/background.png"; +import backgroundURLInverted from "../../assets/template/make_a_wish_banner/background_inverted.png"; +import COLORS from "../../colors"; let mainTextBox = null; @@ -15,6 +17,7 @@ let personPositionText = null; let mainImage = null; let backgroundImage = null; +let previousBackgroundImageColor = null; let contractedByTextbox = null; @@ -47,10 +50,11 @@ const redraw = async (canvas, options) => { const nameTextMarginBottom = Math.ceil(canvas.height * 0.1); const nameTextMarginLeft = Math.ceil(canvas.width * 0.05); const nameTextExtraBottomMargin = Math.ceil(canvas.height * 0.05); + const nameTextMaxWidth = Math.ceil(canvas.width * 0.15); const positionTextSideGap = nameTextMarginLeft; const positionTextMarginBottom = Math.ceil(canvas.height * 0.06); const positionTextSeparatorWidth = Math.ceil(canvas.width * 0.0035); - const positionTextMaxWidth = Math.ceil(canvas.width * 0.4); + const positionTextMaxWidth = Math.ceil(canvas.width * 0.15); const contractedByTextSize = Math.ceil(canvas.height * 0.02); const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9); @@ -59,7 +63,7 @@ const redraw = async (canvas, options) => { if (options.mainText !== null) { /* BEGIN Background render */ - if (backgroundImage === null) { + if (backgroundImage === null || options.colors.background.value != previousBackgroundImageColor.value) { backgroundImage = new Image(); await new Promise((resolve) => { @@ -67,17 +71,23 @@ const redraw = async (canvas, options) => { resolve(); }; - backgroundImage.src = backgroundURL; + if (options.colors.background.value == COLORS.black.value) { + backgroundImage.src = backgroundURL; + } else { + backgroundImage.src = backgroundURLInverted; + } }); backgroundImage = new fabric.Image(backgroundImage, { top: canvas.height - backgroundImage.height, // FIXME: Why???? Fabric.js, what are you trying to tell me?! left: -20, - zIndex: 0, + zIndex: 10, selectable: false, }); backgroundImage.scaleToWidth(canvas.width + 22); + previousBackgroundImageColor = options.colors.background; + canvas.add(backgroundImage); } @@ -99,17 +109,20 @@ const redraw = async (canvas, options) => { } */ - personNameText = new fabric.Text(options.personName, { + personNameText = new fabric.Textbox(options.personName, { left: nameTextMarginLeft, top: canvas.height - bottomTextSize - nameTextMarginBottom, + width: nameTextMaxWidth, fontFamily: "Bebas Neue", fontSize: bottomTextSize, styles: styles, - fill: options.colors.highlight.value, + fill: options.colors.nameText.value, selectable: false, - zIndex: 10, + zIndex: 20, }); + checkTextBoxHeight(personNameText, 1); + if (options.personPosition !== null) { personPositionText = new fabric.Textbox(options.personPosition, { left: positionTextSideGap, @@ -119,10 +132,10 @@ const redraw = async (canvas, options) => { fontSize: positionTextSize, fill: options.colors.baseText.value, selectable: false, - zIndex: 10, + zIndex: 20, }); - checkTextBoxHeight(personPositionText, 2); + checkTextBoxHeight(personPositionText, 1); if (personPositionText._textLines.length === 2) { mainTextMarginBottom += nameTextExtraBottomMargin; @@ -169,10 +182,10 @@ const redraw = async (canvas, options) => { styles: highlightedData.styles, selectable: false, highlightPadding: canvas.height * 0.003, - zIndex: 10, + zIndex: 20, }); - checkTextBoxHeight(mainTextBox, 3); + checkTextBoxHeight(mainTextBox, 1); canvas.add(mainTextBox); @@ -198,7 +211,7 @@ const redraw = async (canvas, options) => { textAlign: "left", fill: options.colors.contractedByText.value, selectable: false, - zIndex: 10, + zIndex: 20, }); checkTextBoxHeight(contractedByTextbox, 1);