Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AdminLTE 3 implementation (without gii) #193

Merged
merged 10 commits into from
Mar 9, 2020
Merged

AdminLTE 3 implementation (without gii) #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d1f9aac
Updated assets to adminlte 3
Tarinu Feb 4, 2020
34dc58b
Updated menu widget to adminlte3
Tarinu Feb 4, 2020
c4043bc
Updated alert to bootstrap4/fa5
Tarinu Feb 4, 2020
ffd1d0b
Removed Helper since new adminlte doesn't have skins anymore
Tarinu Feb 4, 2020
991fbd8
Changed namespace to avoid collision with dmstr/yii2-db
Tarinu Feb 21, 2020
1fb45a0
Fixed header being displayed incorrectly
Tarinu Feb 21, 2020
b12b2b8
Updated testing views
Tarinu Feb 21, 2020
a0c1080
Changed default icon to fas
Tarinu Feb 25, 2020
4086449
Updated yiisoft example views to adminlte3
Tarinu Feb 29, 2020
d3f25da
Fixed submenu icon position
Tarinu Feb 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
CHANGELOG
---------

## Unreleased (3.0)
* updated example views, widgets and assets to AdminLTE 3
* changed namespace to `dmstr/adminlte`
* added `iconClassType` to `Menu` widget to support different types of FontAwesome 5 icons

## 2.6.0
* added default options for menu (CSS classes)
* updated test environment
Expand Down
92 changes: 23 additions & 69 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ For details see [#140](https://github.com/dmstr/yii2-adminlte-asset/issues/140).

### Upgrading

When upgrading please see the [AdminLTE upgrade guide](https://adminlte.io/docs/2.4/upgrade-guide) for adjustments you need to make in your views.
When upgrading please see the [AdminLTE upgrade guide](https://adminlte.io/docs/3.0/upgrade-guide.html) for adjustments you need to make in your views.

### Composer installation

Expand Down Expand Up @@ -113,7 +113,7 @@ Customization

### AdminLTE Plugins

Assets for [AdminLTE plugins](https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html#plugins) are not included
Assets for [AdminLTE plugins](https://adminlte.io/docs/3.0/dependencies.html#plugins) are not included
in our `AdminLteAsset` but you can find these files in your vendor directory under `vendor/almasaeed2010/adminlte/plugins`.
So if you want to use any of them we recommend to create a custom bundle where you list the plugin files you need:

Expand All @@ -123,16 +123,16 @@ use yii\web\AssetBundle;
class AdminLtePluginAsset extends AssetBundle
{
public $sourcePath = '@vendor/almasaeed2010/adminlte/plugins';
public $js = [
'datatables/dataTables.bootstrap.min.js',
// more plugin Js here
];
public $css = [
'datatables/dataTables.bootstrap.css',
'chart.js/Chart.min.css',
// more plugin CSS here
];
public $js = [
'chart.js/Chart.bundle.min.js'
// more plugin Js here
];
public $depends = [
'dmstr\web\AdminLteAsset',
'dmstr\adminlte\web\AdminLteAsset',
];
}
```
Expand All @@ -141,54 +141,7 @@ As this asset depends on our `AdminLteAsset` it's the only asset you have to reg
your `main.php` layout file.


### Skins

By default the extension uses blue skin for AdminLTE. You can change it in config file.

```php
'components' => [
'assetManager' => [
'bundles' => [
'dmstr\web\AdminLteAsset' => [
'skin' => 'skin-black',
],
],
],
],
```

And then just replace class of body `skin-blue`. You can use `AdminLteHelper::skinClass()` if you don't want to alter every view file when you change skin color.
```html
<body class="<?= \dmstr\helpers\AdminLteHelper::skinClass() ?>">
```

**Note:** Use `AdminLteHelper::skinClass()` only if you override the skin through configuration. Otherwise you will not get the correct css class of body.

Here is the list of available skins:

```
"skin-blue",
"skin-black",
"skin-red",
"skin-yellow",
"skin-purple",
"skin-green",
"skin-blue-light",
"skin-black-light",
"skin-red-light",
"skin-yellow-light",
"skin-purple-light",
"skin-green-light"
```

#### Disabling skin file loading, when using bundled assets

Yii::$container->set(
AdminLteAsset::className(),
[
'skin' => false,
]
);
### Custom content header

If you want to use native DOM of headers AdminLTE

Expand All @@ -201,7 +154,7 @@ If you want to use native DOM of headers AdminLTE
then you can follow the code:

```php
/* @var $this yii\web\View */
/* @var yii\web\View $this */

$this->params['breadcrumbs'][] = 'About';

Expand All @@ -217,40 +170,41 @@ About <small>static page</small>

### Left sidebar menu - Widget Menu

If you need to separate sections of the menu then just add the `li.header` item to `items`
If you need to separate sections of the menu then just add the `header` option to item in `items`
```php
'items' => [
['label' => 'Gii', 'icon' => 'file-code-o', 'url' => ['/gii']],
['label' => 'Debug', 'icon' => 'dashboard', 'url' => ['/debug']],
['label' => 'MAIN NAVIGATION', 'options' => ['class' => 'header']], // here
['label' => 'Gii', 'iconType' => 'far' 'icon' => 'file-code', 'url' => ['/gii']],
['label' => 'Debug', 'icon' => 'dashboard-alt', 'url' => ['/debug']],
['label' => 'MAIN NAVIGATION', 'header' => true], // here
// ... a group items
['label' => '', 'options' => ['class' => 'header']],
['label' => '', 'header' => true],
// ... a group items
['label' => '', 'options' => ['class' => 'header']],
['label' => '', 'header' => true],
// ... a group items
```

To add a label for a item:
To add a badge for a item:

```php
'items' => [
[
'label' => 'Mailbox',
'icon' => 'envelope-o',
'iconType' => 'far',
'icon' => 'envelope',
'url' => ['/mailbox'],
'template'=>'<a href="{url}">{icon} {label}<span class="pull-right-container"><small class="label pull-right bg-yellow">123</small></span></a>'
'badge' => '<span class="badge badge-info right">123</span>'
],
]
```

By default to icons will be added prefix of [Font Awesome](http://fontawesome.io/)
By default to icons will be added prefix of [Font Awesome](https://fontawesome.com/)

### Template for Gii CRUD generator

Tell Gii about our template. The setting is made in the config file:

```php
if (YII_ENV_DEV) {
if (YII_ENV_DEV) {
$config['modules']['gii'] = [
'class' => 'yii\gii\Module',
'generators' => [ // HERE
Expand Down Expand Up @@ -288,5 +242,5 @@ Further Information

For AdminLTE documentation, please read https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html

> Namespacing rules follow the Yii 2.0 framework structure, eg. `dmstr\web` for the Asset Bundle.
> Namespacing rules follow the Yii 2.0 framework structure, eg. `dmstr\adminlte\web` for the Asset Bundle.

2 changes: 1 addition & 1 deletion composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
},
"autoload": {
"psr-4": {
"dmstr\\": ""
"dmstr\\adminlte\\": ""
}
},
"repositories": [
Expand Down
76 changes: 37 additions & 39 deletions example-views/testing/app/default/_expand-collapse.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,77 @@
<div class="row">
<div class="col-md-3">
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="card card-outline card-default collapsed-card">
<div class="card-header">
<h3 class="card-title">Expandable</h3>

<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" type="button"><i class="fa fa-plus"></i></button>
</div>
<!-- /.box-tools -->
<!-- /.card-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: none;">
<!-- /.card-header -->
<div class="card-body">
The body of the box
</div>
<!-- /.box-body -->
<!-- /.card-body -->
</div>
<!-- /.box -->
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Removable</h3>
<div class="card card-success card-outline">
<div class="card-header">
<h3 class="card-title">Removable</h3>

<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="remove" type="button"><i class="fa fa-times"></i></button>
</div>
<!-- /.box-tools -->
<!-- /.card-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- /.card-header -->
<div class="card-body">
The body of the box
</div>
<!-- /.box-body -->
<!-- /.card-body -->
</div>
<!-- /.box -->
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title">Collapsable</h3>
<div class="card card-warning card-outline">
<div class="card-header">
<h3 class="card-title">Collapsable</h3>

<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" type="button"><i class="fa fa-minus"></i></button>
</div>
<!-- /.box-tools -->
<!-- /.card-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- /.card-header -->
<div class="card-body">
The body of the box
</div>
<!-- /.box-body -->
<!-- /.card-body -->
</div>
<!-- /.box -->
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="box box-danger">
<div class="box-header">
<h3 class="box-title">Loading state</h3>
<div class="card card-danger card-outline">
<div class="card-header">
<h3 class="card-title">Loading state</h3>
</div>
<div class="box-body">
<div class="card-body">
The body of the box
</div>
<!-- /.box-body -->
<!-- /.card-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
<!-- end loading -->
</div>
<!-- /.box -->
<!-- /.card -->
</div>
<!-- /.col -->
</div>
Loading