Upgrade to AdminLTE 3

assets/js/admin.js

@@ -26,10 +26,11 @@
     Admin.setup_select2(subject);
     Admin.setup_icheck(subject);
     Admin.setup_checkbox_range_selection(subject);
-    Admin.setup_xeditable(subject);
     Admin.setup_form_tabs_for_errors(subject);
     Admin.setup_inline_form_errors(subject);
+    Admin.setup_list_view(subject);
     Admin.setup_tree_view(subject);
+    Admin.setup_history_view(subject);
     Admin.setup_collection_counter(subject);
     Admin.setup_sticky_elements(subject);
     Admin.setup_readmore_elements(subject);
@@ -111,7 +112,7 @@
 
         select.select2({
           width: () => Admin.get_select2_width(select),
-          theme: 'bootstrap',
+          theme: 'bootstrap4',
           dropdownAutoWidth: true,
           minimumResultsForSearch,
           placeholder: allowClearEnabled ? ' ' : '', // allowClear needs placeholder to work properly
@@ -205,29 +206,6 @@
     });
   },
 
-  setup_xeditable(subject) {
-    Admin.log('[core|setup_xeditable] configure xeditable on', subject);
-    jQuery('.x-editable', subject).editable({
-      emptyclass: 'editable-empty btn btn-sm btn-default',
-      emptytext: '<i class="fas fa-pencil-alt"></i>',
-      container: 'body',
-      placement: 'auto',
-      success(response) {
-        const html = jQuery(response);
-        Admin.setup_xeditable(html);
-        jQuery(this).closest('td').replaceWith(html);
-      },
-      error: (xhr) => {
-        // On some error responses, we return JSON.
-        if (xhr.getResponseHeader('Content-Type') === 'application/json') {
-          return JSON.parse(xhr.responseText);
-        }
-
-        return xhr.responseText;
-      },
-    });
-  },
-
   /**
    * render log message
    * @param mixed
@@ -533,12 +511,71 @@
     }
   },
 
+  setup_list_view(subject) {
+    Admin.log('[core|setup_list_view] setup list view', subject);
+
+    // Toggle individual checkboxes when the batch checkbox is changed
+    jQuery('#list_batch_checkbox').on('ifChanged change', function () {
+      const checkboxes = jQuery(this)
+        .closest('table')
+        .find('td.sonata-ba-list-field-batch input[type="checkbox"], div.sonata-ba-list-field-batch input[type="checkbox"]')
+      ;
+
+      if (Admin.get_config('USE_ICHECK')) {
+        checkboxes.iCheck(jQuery(this).is(':checked') ? 'check' : 'uncheck');
+      } else {
+        checkboxes.prop('checked', this.checked);
+      }
+    });
+
+    // Add a CSS class to rows when they are selected
+    jQuery('td.sonata-ba-list-field-batch input[type="checkbox"], div.sonata-ba-list-field-batch input[type="checkbox"]')
+      .on('ifChanged change', function () {
+        jQuery(this)
+          .closest('tr, div.sonata-ba-list-field-batch')
+          .toggleClass('sonata-ba-list-row-selected', jQuery(this).is(':checked'))
+        ;
+      })
+      .trigger('ifChanged')
+    ;
+  },
+
   setup_tree_view(subject) {
     Admin.log('[core|setup_tree_view] setup tree view', subject);
 
     jQuery('ul.js-treeview', subject).treeView();
   },
 
+  setup_history_view(subject) {
+    Admin.log('[core|setup_history_view] setup history view', subject);
+
+    jQuery('a.revision-link, a.revision-compare-link').bind('click', function (event) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      const action = jQuery(this).hasClass('revision-link')
+        ? 'show'
+        : 'compare';
+
+      jQuery('#revision-detail').html('');
+
+      if (action === 'show') {
+        jQuery('table#revisions tbody tr').removeClass('current');
+        jQuery(this).parent('').removeClass('current');
+      }
+
+      jQuery.ajax({
+        url: jQuery(this).attr('href'),
+        dataType: 'html',
+        success: function (data) {
+          jQuery('#revision-detail').html(data);
+        }
+      });
+
+      return false;
+    });
+  },
+
   /** Return the width for simple and sortable select2 element * */
   get_select2_width(element) {
     const ereg = /width:(auto|(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc)))/i;
@@ -592,7 +629,7 @@
     }
 
     const options = {
-      theme: 'bootstrap',
+      theme: 'bootstrap4',
       width: () => Admin.get_select2_width(subject),
       dropdownAutoWidth: true,
       data: [...selectedItems, ...unselectedItems],

assets/js/app.js

@@ -14,7 +14,7 @@ import '../scss/app.scss';
 import $ from 'jquery';
 
 // jQuery scrollTo is not directly used in SonataAdmin
-// but it is used on SonataPage, SonataArticle and SonataDashboard
+// but it is used on SonataPage
 import 'jquery.scrollto';
 
 // Only using sortable widget from jQuery UI library
@@ -24,18 +24,12 @@ import 'bootstrap';
 
 import 'jquery-form';
 
-// Boostrap 3 JavaScript for the X-editable library
-import 'x-editable/dist/bootstrap3-editable/js/bootstrap-editable';
-
 // Full version of Select2, needed because SonataAdmin needs
 // compat dropdownCss and it only comes on the full version
 import 'select2/dist/js/select2.full';
 import 'admin-lte';
 import 'icheck';
 
-// jQuery SlimScroll is used in AdminLTE v2
-import 'jquery-slimscroll';
-
 // No Framework Waypoints version and sticky shortcut
 import 'waypoints/lib/noframework.waypoints';
 import 'waypoints/lib/shortcuts/sticky';

assets/scss/admin-lte-fas.scss

@@ -32,11 +32,11 @@
   font-size: 20px;
 }
 
-.box-header > .fas,
-.box-header > .far,
-.box-header > .fab,
-.box-header > .fal,
-.box-header > .fad {
+.card-header > .fas,
+.card-header > .far,
+.card-header > .fab,
+.card-header > .fal,
+.card-header > .fad {
   display: inline-block;
   font-size: 18px;
   line-height: 1;
@@ -94,11 +94,11 @@
   width: 20px;
 }
 
-.box .overlay > .fas,
-.box .overlay > .far,
-.box .overlay > .fab,
-.box .overlay > .fal,
-.box .overlay > .fad,
+.card .overlay > .fas,
+.card .overlay > .far,
+.card .overlay > .fab,
+.card .overlay > .fal,
+.card .overlay > .fad,
 .overlay-wrapper .overlay > .fas,
 .overlay-wrapper .overlay > .far,
 .overlay-wrapper .overlay > .fab,

assets/scss/app.scss

@@ -7,13 +7,8 @@
  * file that was distributed with this source code.
  */
 
-@import '~bootstrap/dist/css/bootstrap.css';
-
-// Add Font Awesome Free and the v4 compatibility layer
-// this layer should only be removed when we are sure we have replaced
-// all icons to the new naming on all Sonata code
+// Add Font Awesome Free
 @import '~@fortawesome/fontawesome-free/css/all.css';
-@import '~@fortawesome/fontawesome-free/css/v4-shims.css';
 
 // Add Source Sans Pro Font with all options
 // This font is used by AdminLTE
@@ -25,18 +20,14 @@
 @import '~@fontsource/source-sans-pro/600-italic.css';
 @import '~@fontsource/source-sans-pro/700.css';
 
-// Basic AdminLTE styles without any plugins,
-// because they conflict with Select2 v4
-@import '~admin-lte/dist/css/alt/AdminLTE-without-plugins.css';
+// Basic AdminLTE styles
+@import '~admin-lte/dist/css/adminlte.css';
 @import '~icheck/skins/square/blue.css';
 
 // Only use sortable widget from jQuery UI library
 @import '~jquery-ui/themes/base/sortable.css';
 @import '~select2/dist/css/select2.css';
-@import '~select2-bootstrap-theme/dist/select2-bootstrap.css';
-
-// Boostrap 3 styles for the X-editable library
-@import '~x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css';
+@import '~@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.css';
 
 // SonataAdmin custom styles
 @import './styles';

assets/scss/layout.scss

@@ -144,9 +144,7 @@ td {
   &.pager ul {
     float: left;
     list-style: none;
-    margin: 2px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 2px auto;
 
     li {
       float: left;

assets/scss/styles.scss

@@ -18,22 +18,6 @@ html {
   position: relative;
 }
 
-footer {
-  background-color: #333;
-  bottom: 0;
-  height: 20px;
-  position: absolute;
-  width: 100%;
-
-  p {
-    margin: 0;
-  }
-
-  a {
-    color: #f6f6f6;
-  }
-}
-
 .logo {
   img {
     display: inline;
@@ -58,10 +42,6 @@ body > .header .logo {
   font-family: 'Source Sans Pro', sans-serif;
 }
 
-.main-header {
-  height: 50px;
-}
-
 .open > .dropdown-menu {
   animation-duration: 0.3s;
 }
@@ -362,7 +342,7 @@ td.sonata-ba-list-label {
 }
 
 /* side filter */
-.box .box-header h4.box-title.filter_legend {
+.card .card-header h4.card-title.filter_legend {
   cursor: pointer;
   padding-left: 20px;
   position: relative;

docs/cookbook/recipe_sonata_admin_without_user_bundle.rst

@@ -349,7 +349,7 @@ Login template resembling Sonata style
                     <span>Login</span>
                 </a>
             </div>
-            <div class="login-box-body">
+            <div class="login-card-body">
                 {% block sonata_user_login_form %}
                     {% block sonata_user_login_error %}
                         {% if error %}
@@ -365,7 +365,7 @@ Login template resembling Sonata style
                             </div>
                         {% endfor %}
                     {% endfor %}
-                    <p class="login-box-msg">{{ 'Authentication'|trans }}</p>
+                    <p class="login-card-msg">{{ 'Authentication'|trans }}</p>
                     <form action="{{ path("admin_login") }}" method="post" role="form">
                         {{ form_row(form._token) }}
 

docs/reference/action_create_edit.rst

@@ -114,8 +114,8 @@ options for the group itself.
   value is set to ``col-md-12``.
 - ``fields``: The fields in your form group (you should NOT override this
   unless you know what you're doing).
-- ``box_class``: The class for your form group box in the admin; by default,
-  the value is set to ``box box-primary``.
+- ``card_class``: The class for your form group box in the admin; by default,
+  the value is set to ``card card-primary``.
 - ``description``: A text shown at the top of the form group.
 - ``translation_domain``: The translation domain for the form group title
   (the Admin translation domain is used by default).
@@ -132,7 +132,7 @@ To specify options, do as follows::
                 ->tab('General') // the tab call is optional
                     ->with('Addresses', [
                         'class'       => 'col-md-8',
-                        'box_class'   => 'box box-solid box-danger',
+                        'card_class'  => 'card card-danger',
                         'description' => 'Lorem ipsum',
                         // ...
                     ])
@@ -144,10 +144,10 @@ To specify options, do as follows::
         }
     }
 
-Here is an example of what you can do with customizing the box_class on
+Here is an example of what you can do with customizing the card_class on
 a group:
 
-.. figure:: ../images/box_class.png
+.. figure:: ../images/card_class.png
    :align: center
    :alt: Box Class
    :width: 500

docs/reference/action_show.rst

@@ -33,8 +33,8 @@ When adding a group to your show page, you may specify some options for the grou
   is set to ``col-md-12``.
 - ``fields``: the fields in your group (you should NOT override this unless
   you know what you're doing).
-- ``box_class``: the class for your group box in the admin; by default,
-  the value is set to ``box box-primary``.
+- ``card_class``: the class for your group box in the admin; by default,
+  the value is set to ``card card-primary``.
 - ``description``: A text shown at the top of the show group.
 - ``translation_domain``: The translation domain for the show group title
   (the Admin translation domain is used by default).
@@ -54,7 +54,7 @@ To specify options, do as follow::
                 ->tab('General') // the tab call is optional
                     ->with('Addresses', [
                         'class'       => 'col-md-8',
-                        'box_class'   => 'box box-solid box-danger',
+                        'card_class'  => 'card card-danger',
                         'description' => 'Lorem ipsum',
                     ])
                         ->add('title')

docs/reference/dashboard.rst

@@ -268,9 +268,9 @@ counter is related to the filters from one admin
                     type:     sonata.admin.block.stats   # block id
                     settings:
                         code:  sonata.page.admin.page    # admin code - service id
-                        icon:  fas fa-magic               # font awesome icon
+                        icon:  fas fa-magic              # font awesome icon
                         text:  app.page.stats            # static text or translation message
-                        color: bg-yellow                 # colors: bg-green, bg-red and bg-aqua
+                        color: bg-warning                # colors: bg-primary, bg-secondary, bg-success, ...
                         filters:                         # filter values
                             edited: { value: 1 }