diff --git a/src/QUI/PresentationBricks/Controls/IconBox.css b/src/QUI/PresentationBricks/Controls/IconBox.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4b4f9b36ba44033dc1f4032da52d4d3436dd6f6e 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 c6156c1d6dd43822ce56c80288f4530410e52fb0..6d42e61216bf6f712da5843d134e9ed4cdf3b6d4 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 bc43b1c51be104c6f491074bcdb5c1631184d4f8..b5cf5ab514adcace5f83f336e36abf0de94d3a93 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'); } }