InfoBox, SmallBox, Ribbon, LoadingStyle

src/InfoBox.php

@@ -0,0 +1,172 @@
+<?php
+
+namespace hail812\adminlte\widgets;
+
+use yii\helpers\Html;
+
+/**
+ * Class InfoBox
+ * @package hail812\adminlte\widgets
+ */
+/*
+    InfoBox::widget([
+        'id' => 'message-info-box',
+        'text' => 'Messages',
+        'number' => '1,410',
+        'icon' => 'far fa-envelope'
+    ])
+
+    InfoBox::widget([
+        'id' => 'bookmark-info-box',
+        'text' => 'Bookmarks',
+        'number' => '410',
+        'theme' => 'success',
+        'icon' => 'far fa-flag',
+        'progress' => [
+            'width' => '70%',
+            'description' => '70% Increase in 30 Days'
+        ],
+        'loadingStyle' => true
+    ])
+*/
+class InfoBox extends Widget
+{
+    public $text;
+
+    public $number;
+
+    /**
+     * primary, secondary, success, info, warning, danger, dark
+     * gradient-primary, gradient-secondary
+     *
+     * @var string
+     */
+    public $theme;
+
+    public $icon;
+
+    public $iconTheme;
+
+    public $iconOptions = [];
+
+    public $contentOptions = [];
+
+    /**
+     * [
+     *      'width' => '70%',
+     *      'description' => '70% Increase in 30 Days'
+     * ]
+     *
+     * @var array
+     */
+    public $progress;
+
+    public $progressBarTheme;
+
+    public $progressBarOptions = [];
+
+    public function init()
+    {
+        parent::init();
+
+        $this->initOptions();
+
+        echo Html::beginTag('div', $this->options) . "\n";
+        echo $this->renderIcon() . "\n";
+        echo $this->renderContent() . "\n";
+    }
+
+    public function run()
+    {
+        echo $this->renderLoadingStyle();
+        echo "\n" . Html::endTag('div');
+    }
+
+    protected function renderIcon()
+    {
+        if (!$this->isShowIcon()) {
+            return;
+        }
+
+        $icon = Html::tag('i', '', ['class' => $this->icon]);
+
+        return Html::tag('span', $icon, $this->iconOptions);
+    }
+
+    protected function renderContent()
+    {
+        $content = "\n" . $this->renderText();
+        $content .= "\n" . $this->renderNumber();
+        $content .= "\n" .$this->renderProgressBar();
+
+        return Html::tag('div', $content, $this->contentOptions);
+    }
+
+    protected function renderText()
+    {
+        return Html::tag('span', $this->text, ['class' => 'info-box-text']);
+    }
+
+    protected function renderNumber()
+    {
+        return Html::tag('span', $this->number, ['class' => 'info-box-number']);
+    }
+
+    protected function renderProgressBar()
+    {
+        if (!$this->isShowProgress()) {
+            return;
+        }
+
+        $progressBar = Html::tag('div', '', $this->progressBarOptions);
+        $progress = Html::tag('div', $progressBar, ['class' => 'progress']);
+        $progressDescription = isset($this->progress['description']) ? Html::tag('span', $this->progress['description'], ['class' => 'progress-description']) : '';
+
+        return $progress . $progressDescription;
+    }
+
+    /**
+     * Initializes the widget options
+     * This method sets the default values for various options.
+     */
+    protected function initOptions()
+    {
+        $this->options = array_merge([
+            'class' => 'info-box'
+        ], $this->options);
+        $this->theme && Html::addCssClass($this->options, 'bg-'.$this->theme);
+
+        if ($this->isShowIcon()) {
+            $this->iconOptions = array_merge([
+                'id' => $this->options['id'] . '-icon',
+                'class' => 'info-box-icon'
+            ], $this->iconOptions);
+            $this->theme || $this->iconTheme || $this->iconTheme = 'info';
+            Html::addCssClass($this->iconOptions, 'bg-'.$this->iconTheme);
+        }
+
+        $this->contentOptions = array_merge([
+            'id' => $this->options['id'] . '-content',
+            'class' => 'info-box-content'
+        ], $this->contentOptions);
+
+        if ($this->isShowProgress()) {
+            $this->progressBarOptions = array_merge([
+                'class' => 'progress-bar'
+            ], $this->progressBarOptions);
+            $this->theme || $this->progressBarTheme || $this->progressBarTheme = 'info';
+            Html::addCssClass($this->progressBarOptions, 'bg-'.$this->progressBarTheme);
+            Html::addCssStyle($this->progressBarOptions, ['width' => $this->progress['width']]);
+        }
+    }
+
+    protected function isShowIcon()
+    {
+        return !empty($this->icon);
+    }
+
+    protected function isShowProgress()
+    {
+        return isset($this->progress['width']);
+    }
+}

src/LoadingStyle.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace hail812\adminlte\widgets;
+
+use yii\helpers\Html;
+
+class LoadingStyle extends Widget
+{
+    public $iconSize;
+
+    public function init()
+    {
+        parent::init();
+
+        $this->initOptions();
+    }
+
+    public function run()
+    {
+        $i = Html::tag('i', '', ['class' => "fas {$this->iconSize} fa-sync-alt fa-spin"]);
+        $overlay = Html::tag('div', $i, $this->options);
+        return $overlay;
+    }
+
+    protected function initOptions()
+    {
+        $this->options = array_merge([
+            'class' => 'overlay'
+        ], $this->options);
+
+        $this->iconSize = $this->iconSize ?? 'fa-2x';
+    }
+}

src/Ribbon.php

@@ -0,0 +1,81 @@
+<?php
+
+namespace hail812\adminlte\widgets;
+
+use yii\helpers\Html;
+
+/**
+ * Class Ribbon
+ * @package hail812\adminlte\widgets
+ *
+ * ```php
+ * echo Ribbon::widget([
+ *      'text' => 'Ribbon',
+ *      'theme' => 'info',
+ *      'size' => 'lg',
+ *      'textSize' => 'lg',
+ * ])
+ * ```
+ */
+class Ribbon extends Widget
+{
+    public $text;
+
+    /**
+     * primary, secondary, info, success
+     * @var string
+     */
+    public $theme;
+
+    /**
+     * ribbon size
+     * lg - large
+     * xl - extra large
+     * @var string
+     */
+    public $size;
+
+    /**
+     * text size
+     * @var string
+     */
+    public $textSize;
+
+    public $textOptions = [];
+
+    public function init()
+    {
+        parent::init();
+
+        $this->initOptions();
+
+        echo Html::beginTag('div', $this->options) . "\n";
+        echo $this->renderText() . "\n";
+    }
+
+    public function run()
+    {
+        echo "\n" . Html::endTag('div');
+    }
+
+    protected function renderText()
+    {
+        $ribbon = Html::tag('div', $this->text, $this->textOptions);
+        return $ribbon;
+    }
+
+    protected function initOptions()
+    {
+        $this->options = array_merge([
+            'class' => 'ribbon-wrapper'
+        ], $this->options);
+        $this->size && Html::addCssClass($this->options, 'ribbon-'.$this->size);
+
+        $this->textOptions = array_merge([
+            'class' => 'ribbon'
+        ], $this->textOptions);
+        $this->theme || $this->theme = 'primary';
+        Html::addCssClass($this->textOptions, 'bg-'.$this->theme);
+        $this->textSize && Html::addCssClass($this->textOptions, 'text-'.$this->textSize);
+    }
+}

src/SmallBox.php

@@ -0,0 +1,90 @@
+<?php
+
+namespace hail812\adminlte\widgets;
+
+use yii\helpers\Html;
+
+/**
+ * Class SmallBox
+ * @package hail812\adminlte\widgets
+ */
+class SmallBox extends Widget
+{
+    public $title;
+
+    public $text;
+
+    public $icon;
+
+    public $theme;
+
+    public $linkText;
+
+    public $linkUrl;
+
+    public $linkOptions = [];
+
+    public function init()
+    {
+        parent::init();
+
+        $this->initOptions();
+
+        echo Html::beginTag('div', $this->options) . "\n";
+        echo $this->renderInner() . "\n";
+        echo $this->renderIcon() . "\n";
+        echo $this->renderFooter() . "\n";
+    }
+
+    public function run()
+    {
+        echo $this->renderLoadingStyle(['iconSize' => 'fa-3x']);
+        echo "\n" . Html::endTag('div');
+    }
+
+    protected function renderInner()
+    {
+        $h = Html::tag('h3', $this->title);
+        $p = Html::tag('p', $this->text);
+        $inner = Html::tag('div', $h . $p, ['class' => 'inner']);
+
+        return $inner;
+    }
+
+    protected function renderIcon()
+    {
+        $i = Html::tag('i', '', ['class' => $this->icon]);
+        $icon = Html::tag('div', $i, ['class' => 'icon']);
+
+        return $icon;
+    }
+
+    protected function renderFooter()
+    {
+        $i = Html::tag('i', '', ['class' => 'fas fa-arrow-circle-right']);
+
+        if ($this->linkText !== false) {
+            empty($this->linkText) && $this->linkText = 'More info';
+        }
+        $a = Html::a($this->linkText.' '.$i, $this->linkUrl, $this->linkOptions);
+
+        return $a;
+    }
+
+    /**
+     * Initializes the widget options
+     * This method sets the default values for various options.
+     */
+    protected function initOptions()
+    {
+        $this->options = array_merge([
+            'class' => 'small-box'
+        ], $this->options);
+        $this->theme || $this->theme = 'info';
+        Html::addCssClass($this->options, 'bg-'.$this->theme);
+
+        $this->linkOptions = array_merge([
+            'class' => 'small-box-footer'
+        ], $this->linkOptions);
+    }
+}

src/Widget.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace hail812\adminlte\widgets;
+
+class Widget extends \yii\bootstrap4\Widget
+{
+    use WidgetTrait;
+}