feat: Added new option text position. [BasicSlider] #128

bricks.xml

@@ -183,6 +183,24 @@
                             var="brick.control.basicSlider.maxImageWidth"/>
                 </setting>
 
+                <setting name="textPosition" type="select">
+                    <locale group="quiqqer/bricks"
+                            var="brick.basicSlider.textPosition"/>
+
+                    <option value="top">
+                        <locale group="quiqqer/bricks"
+                                var="brick.basicSlider.textPosition.top"/>
+                    </option>
+                    <option value="center">
+                        <locale group="quiqqer/bricks"
+                                var="brick.basicSlider.textPosition.center"/>
+                    </option>
+                    <option value="bottom">
+                        <locale group="quiqqer/bricks"
+                                var="brick.basicSlider.textPosition.bottom"/>
+                    </option>
+                </setting>
+
                 <setting name="sliderContent" data-qui="controls/editors/Input" type="text">
                     <locale group="quiqqer/bricks" var="brick.control.basicSlider.sliderContent"/>
                 </setting>

locale.xml

@@ -432,6 +432,22 @@
             <de><![CDATA[Maximale Briete des Bildes]]></de>
             <en><![CDATA[Maximum image width]]></en>
         </locale>
+        <locale name="brick.basicSlider.textPosition">
+            <de><![CDATA[Text Position]]></de>
+            <en><![CDATA[Text position]]></en>
+        </locale>
+        <locale name="brick.basicSlider.textPosition.top">
+            <de><![CDATA[Oben]]></de>
+            <en><![CDATA[Top]]></en>
+        </locale>
+        <locale name="brick.basicSlider.textPosition.center">
+            <de><![CDATA[Zentriert]]></de>
+            <en><![CDATA[Center]]></en>
+        </locale>
+        <locale name="brick.basicSlider.textPosition.bottom">
+            <de><![CDATA[Unten]]></de>
+            <en><![CDATA[Bottom]]></en>
+        </locale>
         <locale name="brick.control.basicSlider.sliderContent">
             <de><![CDATA[Inhalt]]></de>
             <en><![CDATA[Text]]></en>

src/QUI/Bricks/Controls/Slider/BasicSlider.css

@@ -32,6 +32,7 @@
 
 .basic-slider-content {
     padding-right: 20px;
+    display: flex;
 }
 
 .basic-slider__imageLeft {

src/QUI/Bricks/Controls/Slider/BasicSlider.html

@@ -11,7 +11,7 @@
 {/if}
 
 <div class="basic-slider-wrapper {if $imgLeft} basic-slider__imageLeft {/if}">
-    <div class="basic-slider-content">
+    <div class="basic-slider-content" style="align-items: {$textPosition};">
         {$sliderContent}
     </div>
 

src/QUI/Bricks/Controls/Slider/BasicSlider.php

@@ -26,7 +26,7 @@ public function __construct($attributes = [])
             'mediaFolder'   => false,
             'delay'         => 5000,
             'imgLeft'       => false,
-            'maxImageWidth'   => false,
+            'maxImageWidth' => false,
             'sliderContent' => '',
             'class'         => 'quiqqer-bricks-basic-slider',
             'nodeName'      => 'section',
@@ -95,12 +95,28 @@ public function getBody()
             $maxImageWidth = intval($this->getAttribute('maxImageWidth'));
         }
 
+        // text position
+        switch ($this->getAttribute('textPosition')) {
+            case 'center':
+                $textPosition = 'center';
+                break;
+
+            case 'bottom':
+                $textPosition = 'flex-end';
+                break;
+
+            case 'top':
+            default:
+                $textPosition = 'flex-start';
+        }
+
         $options = [
             'this'          => $this,
             'images'        => $images,
             'sliderContent' => $sliderContent,
             'imgLeft'       => $imgLeft,
-            'maxImageWidth' => $maxImageWidth
+            'maxImageWidth' => $maxImageWidth,
+            'textPosition'  => $textPosition
         ];
 
         $Engine->assign($options);