From 640260e0141956f74d64b6d901140607a56d5156 Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Mon, 9 Nov 2020 10:48:50 +0100
Subject: [PATCH] feat: New bric: text and image.
---
bricks.xml | 48 +++++++++++++++
locale.xml | 39 ++++++++++++
src/QUI/Bricks/Controls/TextAndImage.css | 45 ++++++++++++++
src/QUI/Bricks/Controls/TextAndImage.html | 44 +++++++++++++
src/QUI/Bricks/Controls/TextAndImage.php | 75 +++++++++++++++++++++++
5 files changed, 251 insertions(+)
create mode 100644 src/QUI/Bricks/Controls/TextAndImage.css
create mode 100644 src/QUI/Bricks/Controls/TextAndImage.html
create mode 100644 src/QUI/Bricks/Controls/TextAndImage.php
diff --git a/bricks.xml b/bricks.xml
index 781cba7..bc874e7 100644
--- a/bricks.xml
+++ b/bricks.xml
@@ -1263,5 +1263,53 @@
</settings>
</brick>
+ <brick control="\QUI\Bricks\Controls\TextAndImage">
+ <title>
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.title"/>
+ </title>
+ <description>
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.description"/>
+ </description>
+
+ <settings>
+
+ <setting name="image" class="media-image">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.image"/>
+ </setting>
+
+ <setting name="imageOnLeft" type="checkbox">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.imageOnLeft"/>
+ </setting>
+
+ <setting name="maxImageWidth" type="number">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.maxImageWidth"/>
+ </setting>
+
+ <setting name="textPosition" type="select">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textPosition"/>
+
+ <option value="top">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textPosition.top"/>
+ </option>
+ <option value="center">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textPosition.center"/>
+ </option>
+ <option value="bottom">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textPosition.bottom"/>
+ </option>
+ </setting>
+
+ </settings>
+ </brick>
+
</bricks>
</quiqqer>
diff --git a/locale.xml b/locale.xml
index 8a84345..f9b1de1 100644
--- a/locale.xml
+++ b/locale.xml
@@ -1648,5 +1648,44 @@ Möchten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
<en><![CDATA[Bricks: Last News]]></en>
<pl><![CDATA[Bricks: Ostatnie newsy]]></pl>
</locale>
+
+
+ <!-- Text and image -->
+ <locale name="brick.textAndImage.title">
+ <de><![CDATA[Bausteine: Text neben dem Bild]]></de>
+ <en><![CDATA[Bricks: Text next to the image]]></en>
+ </locale>
+ <locale name="brick.textAndImage.description">
+ <de><![CDATA[Der Text wird neben dem Bild angezeigt wahlweise rechts oder links.]]></de>
+ <en><![CDATA[The text is displayed next to the image, either on the right or left.]]></en>
+ </locale>
+ <locale name="brick.textAndImage.image">
+ <de><![CDATA[Bild]]></de>
+ <en><![CDATA[Image]]></en>
+ </locale>
+ <locale name="brick.textAndImage.imageOnLeft">
+ <de><![CDATA[Bild auf der linken Seite]]></de>
+ <en><![CDATA[Image on the left side]]></en>
+ </locale>
+ <locale name="brick.textAndImage.maxImageWidth">
+ <de><![CDATA[Maximale Briete des Bildes]]></de>
+ <en><![CDATA[Maximum image width]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textPosition">
+ <de><![CDATA[Text Position]]></de>
+ <en><![CDATA[Text position]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textPosition.top">
+ <de><![CDATA[Oben]]></de>
+ <en><![CDATA[Top]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textPosition.center">
+ <de><![CDATA[Zentriert]]></de>
+ <en><![CDATA[Center]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textPosition.bottom">
+ <de><![CDATA[Unten]]></de>
+ <en><![CDATA[Bottom]]></en>
+ </locale>
</groups>
</locales>
diff --git a/src/QUI/Bricks/Controls/TextAndImage.css b/src/QUI/Bricks/Controls/TextAndImage.css
new file mode 100644
index 0000000..4611f3f
--- /dev/null
+++ b/src/QUI/Bricks/Controls/TextAndImage.css
@@ -0,0 +1,45 @@
+.quiqqer-textImage {
+ display: flex;
+}
+
+.quiqqer-textImage-box:first-child {
+ padding-left: 0;
+}
+
+.quiqqer-textImage-box:last-child {
+ padding-right: 0;
+}
+
+.quiqqer-textImage-image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.quiqqer-textImage-image img {
+ display: block;
+}
+
+.quiqqer-textImage-content {
+ display: flex;
+}
+
+@media screen and (max-width: 767px) {
+ .quiqqer-textImage {
+ flex-direction: column;
+ }
+
+ .quiqqer-textImage-box {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .quiqqer-textImage-image {
+ order: 1;
+ margin-bottom: 1rem;
+ }
+
+ .quiqqer-textImage-content {
+ order: 2;
+ }
+}
\ No newline at end of file
diff --git a/src/QUI/Bricks/Controls/TextAndImage.html b/src/QUI/Bricks/Controls/TextAndImage.html
new file mode 100644
index 0000000..e4e9e3a
--- /dev/null
+++ b/src/QUI/Bricks/Controls/TextAndImage.html
@@ -0,0 +1,44 @@
+{assign var=imageOnLeftClass value='quiqqer-textImage__imageOnRight'}
+{if $imageOnLeft}
+{assign var=imageOnLeftClass value='quiqqer-textImage__imageOnLeft'}
+{/if}
+
+<div class="quiqqer-textImage {$imageOnLeftClass}">
+ {if $imageOnLeft}
+ <div class="quiqqer-textImage-box quiqqer-textImage-image grid-50 mobile-grid-100">
+ {if $img}
+ {image src=$img width=$maxImageWidth}
+ {/if}
+ </div>
+ <div class="quiqqer-textImage-box quiqqer-textImage-content grid-50 mobile-grid-100"
+ style="align-items: {$textPosition};">
+ <div class="quiqqer-textImage-content-inner">
+ {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+ <header>
+ <h1>{$this->getAttribute('frontendTitle')}</h1>
+ </header>
+ {/if}
+
+ {$this->getAttribute('content')}
+ </div>
+ </div>
+ {else}
+ <div class="quiqqer-textImage-box quiqqer-textImage-content grid-50 mobile-grid-100"
+ style="align-items: {$textPosition};">
+ <div class="quiqqer-textImage-content-inner">
+ {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+ <header>
+ <h1>{$this->getAttribute('frontendTitle')}</h1>
+ </header>
+ {/if}
+
+ {$this->getAttribute('content')}
+ </div>
+ </div>
+ <div class="quiqqer-textImage-box quiqqer-textImage-image grid-50 mobile-grid-100">
+ {if $img}
+ {image src=$img width=$maxImageWidth}
+ {/if}
+ </div>
+ {/if}
+</div>
\ No newline at end of file
diff --git a/src/QUI/Bricks/Controls/TextAndImage.php b/src/QUI/Bricks/Controls/TextAndImage.php
new file mode 100644
index 0000000..5a79e7f
--- /dev/null
+++ b/src/QUI/Bricks/Controls/TextAndImage.php
@@ -0,0 +1,75 @@
+<?php
+
+/**
+ * This file contains \QUI\Bricks\Controls\TextAndImage
+ */
+
+namespace QUI\Bricks\Controls;
+
+use QUI;
+
+/**
+ * Class TextAndImage
+ *
+ * @package quiqqer/bricks
+ */
+class TextAndImage extends QUI\Control
+{
+ /**
+ * constructor
+ *
+ * @param array $attributes
+ */
+ public function __construct($attributes = [])
+ {
+ // default options
+ $this->setAttributes([
+ 'image' => false,
+ 'maxImageWidth' => false,
+ 'imageRight' => false,
+ 'textPosition' => 'top' // top, center, bottom
+ ]);
+
+ parent::__construct($attributes);
+
+ $this->addCSSFile(
+ dirname(__FILE__) . '/TextAndImage.css'
+ );
+ }
+
+ /**
+ * (non-PHPdoc)
+ *
+ * @see \QUI\Control::create()
+ */
+ public function getBody()
+ {
+ $Engine = QUI::getTemplateManager()->getEngine();
+
+ // text position
+ switch ($this->getAttribute('textPosition')) {
+ case 'center':
+ $textPosition = 'center';
+ break;
+
+ case 'bottom':
+ $textPosition = 'bottom';
+ break;
+
+ case 'top':
+ default:
+ $textPosition = 'flex-start';
+ }
+
+ $Engine->assign([
+ 'this' => $this,
+ 'img' => $this->getAttribute('image'),
+ 'maxImageWidth' => intval($this->getAttribute('maxImageWidth')),
+ 'imageOnLeft' => $this->getAttribute('imageOnLeft'),
+ 'imageAsBackground' => $this->getAttribute('imageAsBackground'),
+ 'textPosition' => $textPosition
+ ]);
+
+ return $Engine->fetch(dirname(__FILE__) . '/TextAndImage.html');
+ }
+}
--
GitLab