Skip to content

Commit 342ce95

Browse files
co0lc0derco0lc0der
committed
add ProfileCardWidget
1 parent 8ea9cbd commit 342ce95

File tree

4 files changed

+229
-25
lines changed

4 files changed

+229
-25
lines changed

‎README.md

Lines changed: 68 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@
44
[![Packagist Downloads](https://img.shields.io/packagist/dt/co0lc0der/yii2-adminlte3-widgets?color=yellow&style=flat-square)](https://packagist.org/packages/co0lc0der/yii2-adminlte3-widgets)
55
[![GitHub license](https://img.shields.io/github/license/co0lc0der/yii2-adminlte3-widgets?style=flat-square)](https://github.com/co0lc0der/yii2-adminlte3-widgets/blob/main/LICENSE.md)
66

7-
AdminLTE 3 widgets for Yii2. At present time the extension has CardWidget only. More widgets, helpers and Gii will be added in the future.
7+
AdminLTE 3 widgets for Yii2. At present time the extension includes
8+
9+
* CardWidget
10+
* TabsCardWidget
11+
* ProfileCardWidget
12+
13+
More widgets, helpers and Gii will be added in the future.
814

915
## Installation
1016

@@ -40,7 +46,7 @@ to the require section of your `composer.json` file.
4046
- `bool $close = false` - show / hide close button inside card header
4147
- `string $ajaxLoad = ''` - URL for loading data, if it is not empty it shows a spinner before data loaded
4248
- `string $ajaxOverlay = 'overlay'` - type of loading overlay ('overlay', 'dark')
43-
- `string $shadow = ''` - type of loading overlay ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
49+
- `string $shadow = ''` - type of card shadow ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
4450
- `array $tools = []` - list of header custom tools (labels, buttons, links)
4551

4652
## TabsCardWidget
@@ -53,9 +59,21 @@ to the require section of your `composer.json` file.
5359
- `bool $background = false` - makes a colored card, uses $color property (Bootstrap 4 colors)
5460
- `bool $gradient = false` - makes a gradient card, uses $color property (Bootstrap 4 colors)
5561
- `string $footer = ''` - content of card footer
56-
- `string $shadow = ''` - type of loading overlay ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
62+
- `string $shadow = ''` - type of card shadow ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
5763
- `array $tabs = []` - list of tabs (see an example below)
5864

65+
## ProfileCardWidget
66+
67+
### Public properties, its types and default values
68+
69+
- `string $name` - user name
70+
- `string $image = ''` - user image
71+
- `string $position = ''` - user role or position
72+
- `string $color = ''` - color of a card header (Bootstrap 4 colors. 'success', 'danger' еtс.)
73+
- `string $footer = ''` - content of card footer
74+
- `string $shadow = ''` - type of card shadow ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
75+
- `array $rows = []` - list of rows (see an example below)
76+
5977
## Examples
6078

6179
### CardWidget
@@ -67,7 +85,6 @@ to the require section of your `composer.json` file.
6785
'gradient' => true, // use gradient background
6886
'expand' => true, // show maximize button in card header
6987
'footer' => 'some footer', // content of card footer
70-
'collapse' => true, // show collapse button in card header
7188
'shadow' => 'shadow-sm', // use small shadow
7289
'close' => true, // show close button in card header
7390
'tools' => [ // array with config to add custom labels, buttons or links
@@ -84,9 +101,7 @@ to the require section of your `composer.json` file.
84101
'link',
85102
'<i class="fas fa-pencil-alt" aria-hidden="true"></i>',
86103
['update', 'id' => 1],
87-
[
88-
'title' => 'Update it',
89-
],
104+
['title' => 'Update it'],
90105
],
91106
[
92107
'button',
@@ -116,21 +131,21 @@ to the require section of your `composer.json` file.
116131
'title' => 'Tabs example',
117132
'footer' => 'some footer',
118133
'tabs' => [
119-
[
120-
'title' => 'Tab1',
121-
'id' => 'tab_1',
122-
'content' => 'A wonderful serenity has taken possession of my entire soul,
123-
like these sweet mornings of spring which I enjoy with my whole heart.',
124-
'active' => true,
125-
],
126-
[
127-
'title' => 'Tab2',
128-
'id' => 'tab_2',
129-
'content' => 'The European languages are members of the same family. Their separate existence is a myth.
130-
For science, music, sport, etc, Europe uses the same vocabulary.',
131-
]
134+
[
135+
'title' => 'Tab1',
136+
'id' => 'tab_1',
137+
'content' => 'A wonderful serenity has taken possession of my entire soul,
138+
like these sweet mornings of spring which I enjoy with my whole heart.',
139+
'active' => true,
140+
],
141+
[
142+
'title' => 'Tab2',
143+
'id' => 'tab_2',
144+
'content' => 'The European languages are members of the same family. Their separate existence is a myth.
145+
For science, music, sport, etc, Europe uses the same vocabulary.',
132146
]
133-
]);
147+
]
148+
]);
134149
?>
135150
```
136151

@@ -141,3 +156,35 @@ to the require section of your `composer.json` file.
141156
### Rendered TabsCard without title
142157

143158
![Rendered TabsCard without title](https://code-notes.ru/tabscard_example2.png "Rendered TabsCard without title")
159+
160+
### ProfileCardWidget
161+
162+
```php
163+
<?php ProfileCardWidget::begin([
164+
'name' => 'Jonathan Burke Jr.',
165+
'position' => 'Software Engineer',
166+
'image' => '../avatars/user2-160x160.jpg',
167+
'color' => 'info',
168+
'rows' => [
169+
'Followers' => [
170+
'1,521',
171+
'#url'
172+
],
173+
'Following' => ['373'],
174+
'Friends' => ['3,127'],
175+
'Projects' => [
176+
'7',
177+
'https://example.com'
178+
],
179+
],
180+
]);
181+
?>
182+
183+
<a href="#" class="btn btn-primary btn-block"><b>Follow</b></a>
184+
185+
<?php ProfileCardWidget::end();?>
186+
```
187+
188+
### Rendered ProfileCard
189+
190+
![Rendered ProfileCard](https://code-notes.ru/profilecard_example.png "Rendered ProfileCard")

‎src/CardWidget.php

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ class CardWidget extends \yii\base\Widget
6363
* @var bool
6464
*/
6565
public bool $expand = false;
66+
6667
/**
6768
* show / hide maximize button inside card header
6869
* @var bool
@@ -83,7 +84,7 @@ class CardWidget extends \yii\base\Widget
8384
public string $ajaxOverlay = 'overlay';
8485

8586
/**
86-
* type of loading overlay
87+
* type of card shadow
8788
* ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
8889
* @var string
8990
*/
@@ -179,7 +180,7 @@ private function getCardHeader(): string
179180
*/
180181
private function getCardTitle(): string
181182
{
182-
return (!empty($this->title)) ? Html::tag('h3', $this->title, ['class' => 'card-title']) : '';
183+
return (!empty($this->title)) ? Html::tag('h3', Html::encode($this->title), ['class' => 'card-title']) : '';
183184
}
184185

185186
/**

‎src/ProfileCardWidget.php

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<?php
2+
namespace co0lc0der\Lte3Widgets;
3+
4+
use yii\bootstrap\Html;
5+
6+
/**
7+
* Class ProfileCardWidget
8+
* @package co0lc0der\Lte3Widgets
9+
*/
10+
class ProfileCardWidget extends \yii\base\Widget
11+
{
12+
/**
13+
* user name
14+
* @var string
15+
*/
16+
public string $name = '';
17+
18+
/**
19+
* user image
20+
* @var string
21+
*/
22+
public string $image = '';
23+
24+
/**
25+
* user role or position
26+
* @var string
27+
*/
28+
public string $position = '';
29+
30+
/**
31+
* color of a card header (Bootstrap 4 colors. 'success', 'danger' еtс.)
32+
* @var string
33+
*/
34+
public string $color = '';
35+
36+
/**
37+
* content of card footer
38+
* @var string
39+
*/
40+
public string $footer = '';
41+
42+
/**
43+
* type of card shadow
44+
* ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
45+
* @var string
46+
*/
47+
public string $shadow = '';
48+
49+
/**
50+
* list of rows
51+
* format: title => [count, URL]
52+
* 'Followers' => [
53+
* '1,521',
54+
* '#url'
55+
* ],
56+
* 'Following' => ['373'],
57+
* 'Friends' => ['3,127'],
58+
* 'Projects' => [
59+
* '7',
60+
* 'https://example.com'
61+
* ],
62+
* @var array
63+
*/
64+
public array $rows = [];
65+
66+
/**
67+
* @return void
68+
*/
69+
public function init()
70+
{
71+
parent::init();
72+
73+
ob_start();
74+
}
75+
76+
/**
77+
* @return string
78+
*/
79+
public function run(): string
80+
{
81+
$content = ob_get_clean();
82+
$html = Html::beginTag('div', ['class' => $this->getCardClass()]);
83+
84+
$html .= $this->getCardBody($content);
85+
$html .= $this->getCardFooter();
86+
87+
$html .= Html::endTag('div'); // the end of a card
88+
89+
return $html;
90+
}
91+
92+
/**
93+
* @param string $content
94+
* @return string
95+
*/
96+
private function getCardBody(string $content = ''): string
97+
{
98+
$html = $this->getUserImage();
99+
$html .= (!empty($this->name)) ? Html::tag('h3', Html::encode($this->name), ['class' => 'profile-username text-center']) : '';
100+
$html .= (!empty($this->position)) ? Html::tag('p', Html::encode($this->position), ['class' => 'text-muted text-center']) : '';
101+
$html .= (!empty($this->rows)) ? $this->getCardRows() : '';
102+
103+
$html .= $content;
104+
105+
return Html::tag('div', $html, ['class' => 'card-body box-profile']);
106+
}
107+
108+
/**
109+
* @return string
110+
*/
111+
private function getCardFooter(): string
112+
{
113+
return (!empty($this->footer)) ? Html::tag('div', $this->footer, ['class' => 'card-footer']) : '';
114+
}
115+
116+
/**
117+
* @return string
118+
*/
119+
private function getUserImage(): string
120+
{
121+
if (empty($this->image)) return '';
122+
123+
$image = Html::img($this->image, ['class' => 'profile-user-img img-fluid img-circle', 'alt' => 'User profile picture']);
124+
125+
return Html::tag('div', $image, ['class' => 'text-center']);
126+
}
127+
128+
/**
129+
* @return string
130+
*/
131+
private function getCardRows(): string
132+
{
133+
$html = '';
134+
135+
foreach ($this->rows as $title => $row) {
136+
$inner = Html::tag('b', Html::encode($title));
137+
$inner .= Html::a($row[0] ?? '', $row[1] ?? '#', ['class' => 'float-right']);
138+
$html .= Html::tag('li', $inner, ['class' => 'list-group-item']);
139+
}
140+
141+
return (!empty($html)) ? Html::tag('ul', $html, ['class' => "list-group list-group-unbordered mb-3"]) : '';
142+
}
143+
144+
/**
145+
* @return string
146+
*/
147+
private function getCardClass(): string
148+
{
149+
$class = "card";
150+
151+
$class .= ($this->color) ? " card-{$this->color} card-outline" : '';
152+
$class .= ($this->shadow) ? " {$this->shadow}" : '';
153+
154+
return $class;
155+
}
156+
}

‎src/TabsCardWidget.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class TabsCardWidget extends \yii\base\Widget
4747
public string $footer = '';
4848

4949
/**
50-
* type of loading overlay
50+
* type of card shadow
5151
* ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
5252
* @var string
5353
*/
@@ -138,7 +138,7 @@ private function getCardTitle(): string
138138

139139
if (!empty($this->title)) {
140140
$class = (!empty($this->tabs)) ? 'card-title p-3' : 'card-title';
141-
$html = Html::tag('h3', $this->title, ['class' => $class]);
141+
$html = Html::tag('h3', Html::encode($this->title), ['class' => $class]);
142142
}
143143

144144
return $html;

0 commit comments

Comments
 (0)