From d02fae949501656eb342aa7a635efe9d6bcfe296 Mon Sep 17 00:00:00 2001
From: Campii <dominik.chrzanowski183@gmail.com>
Date: Tue, 13 Sep 2022 14:27:26 +0200
Subject: [PATCH] feat: Added basic functionality [IconBox]
quiqqer/presentation-bricks#6
---
.../PresentationBricks/Controls/IconBox.css | 37 +++++++++++++++++++
.../Controls/IconBox.default.html | 29 +++++++++++++++
.../PresentationBricks/Controls/IconBox.php | 32 ++++++++++++++--
3 files changed, 95 insertions(+), 3 deletions(-)
diff --git a/src/QUI/PresentationBricks/Controls/IconBox.css b/src/QUI/PresentationBricks/Controls/IconBox.css
index e69de29..4b4f9b3 100644
--- a/src/QUI/PresentationBricks/Controls/IconBox.css
+++ b/src/QUI/PresentationBricks/Controls/IconBox.css
@@ -0,0 +1,37 @@
+.iconBox-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.iconBox-entry {
+ flex-basis: var(--qui-iconBox-entryWidth);
+ padding: 2rem;
+}
+
+.iconBox-entry-title {
+ margin: 1rem 0;
+}
+
+.iconBox-entry__centerContent {
+ text-align: center;
+}
+
+.iconBox-entry__centerContent > .iconBox-entry-icon{
+ margin: auto;
+}
+
+.iconBox__iconSize-large {
+ font-size: 5rem;
+}
+
+.iconBox__iconSize-medium {
+ font-size: 3rem;
+}
+
+.iconBox__iconSize-small {
+ font-size: 1.5rem;
+}
+
+.iconBox-entry-icon:not(.twojaKlasaDlaFontAwesome) {
+ height: var(--qui-iconBox-imgHeight);
+}
\ No newline at end of file
diff --git a/src/QUI/PresentationBricks/Controls/IconBox.default.html b/src/QUI/PresentationBricks/Controls/IconBox.default.html
index c6156c1..6d42e61 100644
--- a/src/QUI/PresentationBricks/Controls/IconBox.default.html
+++ b/src/QUI/PresentationBricks/Controls/IconBox.default.html
@@ -10,3 +10,32 @@
</div>
{/if}
+
+<div class="iconBox-wrapper"
+ style="
+ --qui-iconBox-entryWidth: calc(100% / {$entriesPerLine});
+ --qui-iconBox-imgHeight: {$imgIconSize}px;
+
+">
+ {foreach $entries as $entry}
+
+ <div class="iconBox-entry {if $centerContent} iconBox-entry__centerContent{/if}">
+
+ {if $entry['image']}
+ <div class="iconBox-entry-icon iconBox__iconSize-{$iconSize}">
+ {image src=$entry['image'] loading="lazy" height="{$imgIconSize}"}
+ </div>
+ {/if}
+
+ {if $entry['entryTitle']}
+ <h3 class="iconBox-entry-title">{$entry['entryTitle']}</h3>
+ {/if}
+
+ {if $entry['entryContent']}
+ <p class="iconBox-entry-content">{$entry['entryContent']}</p>
+ {/if}
+
+ </div>
+
+ {/foreach}
+</div>
\ No newline at end of file
diff --git a/src/QUI/PresentationBricks/Controls/IconBox.php b/src/QUI/PresentationBricks/Controls/IconBox.php
index bc43b1c..b5cf5ab 100644
--- a/src/QUI/PresentationBricks/Controls/IconBox.php
+++ b/src/QUI/PresentationBricks/Controls/IconBox.php
@@ -24,12 +24,17 @@ public function __construct($attributes = [])
{
// default options
$this->setAttributes([
+ 'template' => 'default',
+ 'centerContent' => false,
+ 'entriesPerLine' => 2,
+ 'iconSize' => 'small',
+ 'imgIconSize' => '50px'
]);
parent::__construct($attributes);
$this->addCSSFile(
- dirname(__FILE__).'/IconBox.css'
+ dirname(__FILE__) . '/IconBox.css'
);
}
@@ -42,10 +47,31 @@ public function getBody()
{
$Engine = QUI::getTemplateManager()->getEngine();
+ $entries = json_decode($this->getAttribute('entries'), true);
+ $template = $this->getAttribute('template');
+ $centerContent = $this->getAttribute('centerContent');
+ $entriesPerLine = $this->getAttribute('entriesPerLine');
+ $iconSize = $this->getAttribute('iconSize');
+ $imgIconSize = $this->getAttribute('imgIconSize');
+ $enabledEntries = [];
+
+ foreach ($entries as $entry) {
+ if ($entry['isDisabled'] === 1) {
+ continue;
+ }
+
+ array_push($enabledEntries, $entry);
+ }
+
$Engine->assign([
- 'this' => $this
+ 'this' => $this,
+ 'centerContent' => $centerContent,
+ 'entriesPerLine' => $entriesPerLine,
+ 'iconSize' => $iconSize,
+ 'imgIconSize' => $imgIconSize,
+ 'entries' => $enabledEntries
]);
- return $Engine->fetch(dirname(__FILE__).'/IconBox.html');
+ return $Engine->fetch(dirname(__FILE__) . '/IconBox.' . $template . '.html');
}
}
--
GitLab