AdminLTE v3 with Bootstrap 4

Controller/SidebarController.php

@@ -33,6 +33,8 @@ public function userPanelAction(): Response
  '@AdminLTE/Sidebar/user-panel.html.twig',
  [
  'user' => $userEvent->getUser(),
+ 'showProfileLink' => $userEvent->isShowProfileLink(),
+ 'showLogoutLink' => $userEvent->isShowLogoutLink(),
  ]
  );
  }

DependencyInjection/Configuration.php

@@ -153,11 +153,7 @@ private function getWidgetConfig()
  ->defaultValue('primary')
  ->info('')
  ->end()
- ->booleanNode('bordered')
- ->defaultTrue()
- ->info('')
- ->end()
- ->booleanNode('collapsible')
+ ->booleanNode('collapsible')
  ->defaultFalse()
  ->info('')
  ->end()
@@ -169,10 +165,6 @@ private function getWidgetConfig()
  ->defaultFalse()
  ->info('')
  ->end()
- ->booleanNode('use_footer')
- ->defaultTrue()
- ->info('')
- ->end()
  ->end()
  ->end();
 
@@ -231,6 +223,9 @@ private function getOptionsConfig()
  ->scalarNode('default_avatar')
  ->defaultValue('bundles/adminlte/images/default_avatar.png')
  ->end()
+ ->scalarNode('default_brand_logo')
+ ->defaultValue('bundles/adminlte/images/adminltelogo.png')
+ ->end()
  ->scalarNode('skin')
  ->defaultValue('skin-blue')
  ->info('see skin listing for viable options')
@@ -249,7 +244,13 @@ private function getOptionsConfig()
  ->thenInvalid('Invalid form_theme. Expected one of: "default", "horizontal" or null')
  ->end()
  ->end()
- ->booleanNode('fixed_layout')
+ ->booleanNode('fixed_header')
+ ->defaultFalse()
+ ->end()
+ ->booleanNode('fixed_menu')
+ ->defaultFalse()
+ ->end()
+ ->booleanNode('fixed_footer')
  ->defaultFalse()
  ->end()
  ->booleanNode('boxed_layout')
@@ -261,7 +262,7 @@ private function getOptionsConfig()
  ->info('described in the documentation')
  ->end()
  ->booleanNode('mini_sidebar')
- ->defaultFalse()
+ ->defaultTrue()
  ->info('')
  ->end()
  ->integerNode('max_navbar_notifications')

Menu/MenuBuilder.php

@@ -38,12 +38,16 @@ public function __construct(FactoryInterface $factory, EventDispatcherInterface
  public function createMainMenu(array $options)
  {
  $menu = $this->factory->createItem('root', [
- 'childrenAttributes' => ['class' => 'sidebar-menu tree', 'data-widget' => 'tree'],
+ 'childrenAttributes' => [
+ 'class' => 'nav nav-pills nav-sidebar flex-column',
+ 'data-widget' => 'treeview',
+ 'role' => 'menu'
+ ],
  ]);
 
  $childOptions = [
- 'attributes' => ['class' => 'treeview'],
- 'childrenAttributes' => ['class' => 'treeview-menu'],
+ 'attributes' => ['class' => 'nav-item treeview'],
+ 'childrenAttributes' => ['class' => 'nav-item treeview-menu'],
  'labelAttributes' => [],
  ];
 

Model/MenuItemModel.php

@@ -55,7 +55,7 @@ class MenuItemModel implements MenuItemInterface
  /**
  * @var string
  */
- protected $badgeColor = 'green';
+ protected $badgeColor = 'success';
 
  /**
  * @var MenuItemInterface
@@ -78,7 +78,7 @@ public function __construct(
  $routeArgs = [],
  $icon = false,
  $badge = false,
- $badgeColor = 'green'
+ $badgeColor = 'success'
  ) {
  $this->badge = $badge;
  $this->icon = $icon;

README.md

@@ -3,7 +3,7 @@
 [![Total Downloads](https://poser.pugx.org/kevinpapst/adminlte-bundle/downloads)](https://packagist.org/packages/kevinpapst/adminlte-bundle)
 [![License](https://poser.pugx.org/kevinpapst/adminlte-bundle/license)](LICENSE)
 
-# AdminLTE Bundle for Symfony 4
+# AdminLTE Bundle for Symfony
 
 This repository contains an upgraded version of the AvanzuAdminThemeBundle, bringing the AdminLTE theme to Symfony 4.
 
@@ -15,14 +15,15 @@ This repository contains an upgraded version of the AvanzuAdminThemeBundle, brin
 
 ### Minimum requirements
 
-- Symfony 4.0
+- Symfony 4.3
 - PHP 7.1.3
 - Twig 2.0
 
 **Compatibility:**
 
-- Version 3.x is only compatible with Symfony >= 4.3
-- Version 2.x of this bundle is compatible with Symfony < 4.3
+- Version 4.x is compatible with Symfony >= 4.3 (reason: AdminLTE 3)
+- Version 3.x is compatible with Symfony >= 4.3 (reason: maintenance, AdminLTE 2.4.8)
+- Version 2.x of is compatible with Symfony < 4.3
 
 ## Features
 
@@ -35,7 +36,7 @@ Some of the main features of this theme bundle:
 - Webpack-Encore support for building assets
 - Event-driven handling of menu entries, tasks and notifications
 - Translations for: english, german, italian, czech, spanish, russian, arabic, finnish, japanese, swedish, portuguese (brazilian), dutch, french, turkish, danish, chinese, slovakian, basque, polish, esperanto, hebrew, romanian (please help translating it to more languages)
-- Based on AdminLTE 2.4.8
+- Based on AdminLTE 3
 - Using FontAwesome 5
 
 ## Installation with Symfony Flex
@@ -44,15 +45,15 @@ Installation using Symfony flex:
 
 ```bash
 composer config extra.symfony.allow-contrib true
-composer req "kevinpapst/adminlte-bundle:^3.0"
+composer req "kevinpapst/adminlte-bundle:^4.0"
 ```
 
 ## Installation with Composer
 
 Installation using the "traditional" composer approach:
 
 ```bash
- composer require kevinpapst/adminlte-bundle ^3.0
+ composer require kevinpapst/adminlte-bundle ^4.0
 ```
 
 Afterwards copy the default config to your `config/packages/` directory:
@@ -72,11 +73,14 @@ return [
 ];
 ```
 
-## Difference between AdminLTEBundle and AvanzuAdminThemeBundle
+## AdminLTEBundle vs AvanzuAdminThemeBundle
 
-First and foremost: the original repository has a strong backward compatibility in mind, maintenance is only done if Symfony 2 and 3 compatibility is kept (e.g. [here](https://github.com/avanzu/AdminThemeBundle/pull/216)).
+Let me try to explain the reason why I created this repo and why you might want to to choose it over the original AvanzuAdminThemeBundle. 
 
-That means you don't get the new shiny stuff for SF4. As I work on a Symfony 4 project, utilizing webpack-encore I needed a solution. 
+First and foremost: the original repository has a strong backward compatibility in mind, 
+maintenance is only done if Symfony 2 and 3 compatibility is kept (e.g. [here](https://github.com/avanzu/AdminThemeBundle/pull/216)).
+
+That means you don't get the new shiny stuff for SF4. As I am working on a Symfony 4 project, utilizing webpack-encore I needed a solution. 
 
 First I tried to sent PRs for the original repository, but those were not always accepted [eg. here](https://github.com/avanzu/AdminThemeBundle/pulls/kevinpapst). 
 As I really needed an upgraded version, I tried to manage a branch in a fork for a couple of weeks, but that wasn't working well 
@@ -85,27 +89,21 @@ and I found myself overwriting more and more stuff in my project until there was
 2. doing the changes in my forked repository and having "dev-" entries in my composer.json
 3. cleanup the fork, merge it with my project changes and release it for the community
 
-The choice **3** was easy and obvious for me: I am doing the work now in this repository with a fresh start and the chance for backward-compatibility breaks (for the users migrating from the AdminThemeBundle).
-
-### Main differences
+I went with **3** and now, 1.5 years later it looks as if this was the right choice. Please compare the commit history and decide for yourself!
 
 This repository was created from the original master, but with a lot of enhancements on top:
 
-- Auto discovery for commands (see [#215](https://github.com/avanzu/AdminThemeBundle/pull/215))
-- Symfony4 compatibility (see [#215](https://github.com/avanzu/AdminThemeBundle/pull/216))
-- Dynamic config options (see [#217](https://github.com/avanzu/AdminThemeBundle/pull/217))
-- Upgraded to AdminLTE 2.4.8
+- Upgraded to **AdminLTE 3**
 - Added support for [FOSUserBundle](Resources/docs/fos_userbundle.md)
+- Fixed and updated **KNPMenu** integration
 - Added Symfony Flex recipe for easier integration
 - Using Webpack-Encore for compiling frontend-assets
-- Fixed KNPMenu integration
+- Codebase cleanup, introduction of unit tests, phpstan and code-style rules (all checked by Travis)
 - Replaced AliasRouting with simpler version
-- Changed namespaces to allow co-existence with AdminThemeBundle for migration
-- Changed and extended default configuration
-- Huge cleanup of the codebase
-- Changed all twig block-names (with additional layout shim files for migration) 
-- Changed control-sidebar, content is now configurable from admin_lte.yaml or the ContextHelper
-- A [Demo application](https://github.com/kevinpapst/AdminLTEBundle-Demo) as living documentation for first time users and easier testing
+- Added a [Demo application](https://github.com/kevinpapst/AdminLTEBundle-Demo) as living documentation for first time users and easier testing
+- Auto discovery for commands (see [#215](https://github.com/avanzu/AdminThemeBundle/pull/215))
+- Symfony4 compatibility (see [#215](https://github.com/avanzu/AdminThemeBundle/pull/216))
+- Dynamic config options (see [#217](https://github.com/avanzu/AdminThemeBundle/pull/217))
 - Updated composer.json to reflect more up-to-date bundle dependencies
 - Introduction of unit tests, phpstan and code-style rules (all checked by Travis)
 

Resources/assets/admin-lte-extensions.scss

@@ -1,75 +1,18 @@
 
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
-
-/*
- * This theme was upgraded to FONT AWESOME 5
- * which is not supported by the original "AdminLTE" theme yet.
- *
- * So we have to do add add some additional styles:
- */
-.sidebar-menu>li>a>.far,
-.sidebar-menu>li>a>.fas,
-.sidebar-menu>li>a>.fal,
-.sidebar-menu>li>a>.fab {
- width: 20px;
-}
-
-.sidebar-menu .treeview-menu>li>a>.far,
-.sidebar-menu .treeview-menu>li>a>.fas,
-.sidebar-menu .treeview-menu>li>a>.fal,
-.sidebar-menu .treeview-menu>li>a>.fab {
- width: 20px;
-}
-
-.main-header .sidebar-toggle {
- font-family: "Font Awesome 5 Free";
- font-weight: 900;
-}
-
-.login-page form label {
- padding-left: 5px;
-}
-
-.control-label.required:after {
- content:" *";
- font-size: 110%;
-}
-
-.timeline > li > .far,
-.timeline > li > .fas,
-.timeline > li > .fal,
-.timeline > li > .fab {
- width: 30px;
- height: 30px;
- font-size: 15px;
- line-height: 30px;
- position: absolute;
- color: #666;
- background: #d2d6de;
- border-radius: 50%;
- text-align: center;
- left: 18px;
- top: 0;
-}
-
-@media (min-width: $screen-sm-min) {
- body.login-page {
- .login-logo {
- padding-top: 45px;
- margin-bottom: 55px;
- }
+// Add an asterisk to the form labels for required fields
+label.required {
+ &:after {
+ content: " *";
+ font-size: 110%;
  }
 }
 
+// Add a shadow to the login page and show "remember me" label in normal font weight
 body.login-page {
- .login-box-body {
- padding: 20px;
+ .login-card-body {
  box-shadow: 0px 29px 147.5px 102.5px rgba(0, 0, 0, 0.05), 0px 29px 95px 0px rgba(0, 0, 0, 0.16);
+ label {
+ font-weight: normal;
+ }
  }
- label {
- font-weight: normal;
- }
- button.btn.btn-flat, input[type=text], input[type=password] {
- border-radius: 3px;
- }
-}
+}

Resources/assets/admin-lte.js

@@ -3,8 +3,8 @@
 const $ = require('jquery');
 global.$ = global.jQuery = $;
 
-require('jquery-ui');
-require('bootstrap-sass');
+require('jquery-ui'); // TODO is this required?
+require('bootstrap');
 require('jquery-slimscroll');
 require('bootstrap-select');
 
@@ -14,8 +14,7 @@ require('daterangepicker');
 
 // ------ AdminLTE framework ------
 require('./admin-lte.scss');
-require('admin-lte/dist/css/AdminLTE.min.css');
-require('admin-lte/dist/css/skins/_all-skins.css');
+require('admin-lte/dist/css/adminlte.min.css');
 require('./admin-lte-extensions.scss');
 
 global.$.AdminLTE = {};
@@ -24,6 +23,7 @@ require('admin-lte/dist/js/adminlte.min');
 
 // ------ Theme itself ------
 require('./default_avatar.png');
+require('./adminltelogo.png');
 
 // ------ icheck for enhanced radio buttons and checkboxes ------
 require('icheck');

Resources/assets/admin-lte.scss

@@ -1,11 +1,10 @@
-
-$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
+//$icon-font-path: "~bootstrap/assets/fonts/bootstrap/";
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
 
-@import '~bootstrap-sass/assets/stylesheets/bootstrap';
+@import '~bootstrap/dist/css/bootstrap';
 @import '~@fortawesome/fontawesome-free/scss/fontawesome';
 @import '~@fortawesome/fontawesome-free/scss/regular';
 @import '~@fortawesome/fontawesome-free/scss/solid';
 @import '~@fortawesome/fontawesome-free/scss/brands';
 @import '~daterangepicker/daterangepicker.css';
-@import '~bootstrap-select/dist/css/bootstrap-select.min.css';
+@import '~bootstrap-select/dist/css/bootstrap-select.min.css';

Resources/docs/bundle_options.md

@@ -10,10 +10,12 @@ admin_lte:
  options:
  default_avatar: 'bundles/adminlte/images/default_avatar.png'
  skin: 'skin-blue'
- fixed_layout: false
+ fixed_header: true
+ fixed_menu: false
+ fixed_footer: false
  boxed_layout: false
  collapsed_sidebar: false
- mini_sidebar: false
+ mini_sidebar: true
 ```
 
 Available AdminLTE skins are: 

Resources/docs/configurations.md

@@ -74,10 +74,12 @@ admin_lte:
  options: 
  default_avatar: 'bundles/adminlte/images/default_avatar.png'
  skin: 'skin-blue'
- fixed_layout: false
+ fixed_header: true
+ fixed_menu: false
+ fixed_footer: false
  boxed_layout: false
  collapsed_sidebar: false
- mini_sidebar: false
+ mini_sidebar: true
  form_theme: default
  max_navbar_notifications: 5
  max_navbar_tasks: 5
@@ -89,13 +91,11 @@ admin_lte:
  theme: 
  widget: 
  type: 'primary'
- bordered: true
  collapsible: false
  collapsible_title: 'Collapse'
  removable: false
  removable_title: 'Remove'
  solid: false
- use_footer: true
  button: 
  type: 'primary'
  size: false