Skip to content

Commit

Permalink
Merge pull request #193 from Tarinu/master
Browse files Browse the repository at this point in the history 
AdminLTE 3 implementation (without gii)
  • Loading branch information
@schmunk42
schmunk42 authored Mar 9, 2020
2 parents 16fef79 + d3f25da commit 34c658f
Show file tree
Hide file tree
Showing 25 changed files with 1,163 additions and 1,284 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
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
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
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
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

0 comments on commit 34c658f

Please sign in to comment.