Skip to content
Code-Schnipsel Gruppen Projekte
Commit 27e3fae0 erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

feat: Text and image improved. Neue options added.

Übergeordneter 96e723f6
Keine zugehörigen Branchen gefunden
Keine zugehörigen Tags gefunden
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bricks.xml
+ 48
− 0
Zeige Datei @ 27e3fae0
......@@ -1285,6 +1285,11 @@
var="brick.textAndImage.imageOnLeft"/>
</setting>
<setting name="imageShadow" type="checkbox">
<locale group="quiqqer/bricks"
var="brick.textAndImage.imageShadow"/>
</setting>
<setting name="maxImageWidth" type="number">
<locale group="quiqqer/bricks"
var="brick.textAndImage.maxImageWidth"/>
......@@ -1308,6 +1313,49 @@
</option>
</setting>
<setting name="textImageRatio" type="select">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio"/>
<option value="30">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.30"/>
</option>
<option value="35">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.35"/>
</option>
<option value="40">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.40"/>
</option>
<option value="45">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.45"/>
</option>
<option value="50" default="1">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.50"/>
</option>
<option value="55">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.55"/>
</option>
<option value="60">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.60"/>
</option>
<option value="65">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.65"/>
</option>
<option value="70">
<locale group="quiqqer/bricks"
var="brick.textAndImage.textImageRatio.70"/>
</option>
</setting>
</settings>
</brick>
......
locale.xml
+ 44
− 0
Zeige Datei @ 27e3fae0
......@@ -1667,6 +1667,10 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
<de><![CDATA[Bild auf der linken Seite]]></de>
<en><![CDATA[Image on the left side]]></en>
</locale>
<locale name="brick.textAndImage.imageShadow">
<de><![CDATA[Bild hat einen Schatten]]></de>
<en><![CDATA[Image has a shadow]]></en>
</locale>
<locale name="brick.textAndImage.maxImageWidth">
<de><![CDATA[Maximale Briete des Bildes]]></de>
<en><![CDATA[Maximum image width]]></en>
......@@ -1687,5 +1691,45 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
<de><![CDATA[Unten]]></de>
<en><![CDATA[Bottom]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio">
<de><![CDATA[Text und Bild Platzverhältnis]]></de>
<en><![CDATA[Text and image space ratio]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.30">
<de><![CDATA[Text 30% - Bild 70%]]></de>
<en><![CDATA[Text 30% - Image 70%]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.35">
<de><![CDATA[Text 35% - Bild 65%]]></de>
<en><![CDATA[Text 35% - Image 65%]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.40">
<de><![CDATA[Text 40% - Bild 60%]]></de>
<en><![CDATA[Text 40% - Image 60%]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.45">
<de><![CDATA[Text 45% - Bild 55%]]></de>
<en><![CDATA[Text 45% - Image 55%]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.50">
<de><![CDATA[Text 50% - Bild 50% (standard)]]></de>
<en><![CDATA[Text 50% - Image 50% (default)]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.55">
<de><![CDATA[Text 55% - Bild 45%]]></de>
<en><![CDATA[Text 55% - Image 45%]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.60">
<de><![CDATA[Text 60% - Bild 40%]]></de>
<en><![CDATA[Text 60% - Image 40%]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.65">
<de><![CDATA[Text 65% - Bild 35%]]></de>
<en><![CDATA[Text 65% - Image 35%]]></en>
</locale>
<locale name="brick.textAndImage.textImageRatio.70">
<de><![CDATA[Text 70% - Bild 30%]]></de>
<en><![CDATA[Text 70% - Image 30%]]></en>
</locale>
</groups>
</locales>
src/QUI/Bricks/Controls/TextAndImage.css
+ 6
− 2
Zeige Datei @ 27e3fae0
......@@ -11,8 +11,8 @@
}
.quiqqer-textImage-image {
display: flex;
align-items: center;
display: flex;
justify-content: center;
}
......@@ -24,6 +24,10 @@
display: flex;
}
.quiqqer-textImage-box .shadow-xl {
/*box-shadow: 2px 4px 30px 0px rgba(0,0,0,0.2);*/
}
@media screen and (max-width: 767px) {
.quiqqer-textImage {
flex-direction: column;
......@@ -35,8 +39,8 @@
}
.quiqqer-textImage-image {
order: 1;
margin-bottom: 1rem;
order: 1;
}
.quiqqer-textImage-content {
......
src/QUI/Bricks/Controls/TextAndImage.html
+ 6
− 6
Zeige Datei @ 27e3fae0
......@@ -5,12 +5,12 @@
<div class="quiqqer-textImage {$imageOnLeftClass}">
{if $imageOnLeft}
<div class="quiqqer-textImage-box quiqqer-textImage-image grid-50 mobile-grid-100">
<div class="quiqqer-textImage-box quiqqer-textImage-image {$imgWidthClass} mobile-grid-100">
{if $img}
{image src=$img width=$maxImageWidth}
{image src=$img width=$maxImageWidth class={$imageShadow}}
{/if}
</div>
<div class="quiqqer-textImage-box quiqqer-textImage-content grid-50 mobile-grid-100"
<div class="quiqqer-textImage-box quiqqer-textImage-content {$textWidthClass} mobile-grid-100"
style="align-items: {$textPosition};">
<div class="quiqqer-textImage-content-inner">
{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
......@@ -23,7 +23,7 @@
</div>
</div>
{else}
<div class="quiqqer-textImage-box quiqqer-textImage-content grid-50 mobile-grid-100"
<div class="quiqqer-textImage-box quiqqer-textImage-content {$textWidthClass} mobile-grid-100"
style="align-items: {$textPosition};">
<div class="quiqqer-textImage-content-inner">
{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
......@@ -35,9 +35,9 @@
{$this->getAttribute('content')}
</div>
</div>
<div class="quiqqer-textImage-box quiqqer-textImage-image grid-50 mobile-grid-100">
<div class="quiqqer-textImage-box quiqqer-textImage-image {$imgWidthClass} mobile-grid-100">
{if $img}
{image src=$img width=$maxImageWidth}
{image src=$img width=$maxImageWidth class={$imageShadow}}
{/if}
</div>
{/if}
......
src/QUI/Bricks/Controls/TextAndImage.php
+ 33
− 8
Zeige Datei @ 27e3fae0
......@@ -24,16 +24,18 @@ public function __construct($attributes = [])
{
// default options
$this->setAttributes([
'image' => false,
'maxImageWidth' => false,
'imageRight' => false,
'textPosition' => 'top' // top, center, bottom
'image' => false,
'maxImageWidth' => false,
'imageRight' => false,
'imageShadow' => false,
'textPosition' => 'top', // top, center, bottom
'textImageRatio' => 50 // 30,35,40,45,50,55,60,65,70
]);
parent::__construct($attributes);
$this->addCSSFile(
dirname(__FILE__) . '/TextAndImage.css'
dirname(__FILE__).'/TextAndImage.css'
);
}
......@@ -53,7 +55,7 @@ public function getBody()
break;
case 'bottom':
$textPosition = 'bottom';
$textPosition = 'flex-end';
break;
case 'top':
......@@ -61,15 +63,38 @@ public function getBody()
$textPosition = 'flex-start';
}
/* text width */
$textWidthClass = 'grid-50';
$imgWidthClass = 'grid-50';
if ($this->getAttribute('textImageRatio')) {
$textWidth = intval($this->getAttribute('textImageRatio'));
if ($textWidth > 0 && $textWidth < 100) {
$imgWidth = 100 - $textWidth;
$textWidthClass = 'grid-'.$textWidth;
$imgWidthClass = 'grid-'.$imgWidth;
}
}
$shadow = '';
if ($this->getAttribute('imageShadow')) {
$shadow = 'shadow-xl';
}
$Engine->assign([
'this' => $this,
'img' => $this->getAttribute('image'),
'maxImageWidth' => intval($this->getAttribute('maxImageWidth')),
'imageOnLeft' => $this->getAttribute('imageOnLeft'),
'imageShadow' => $shadow,
'imageAsBackground' => $this->getAttribute('imageAsBackground'),
'textPosition' => $textPosition
'textPosition' => $textPosition,
'textWidthClass' => $textWidthClass,
'imgWidthClass' => $imgWidthClass
]);
return $Engine->fetch(dirname(__FILE__) . '/TextAndImage.html');
return $Engine->fetch(dirname(__FILE__).'/TextAndImage.html');
}
}
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab