Upgrade AdminLTE to v3

sonata-project · Sep 18, 2023 · bd3a88b · bd3a88b
1 parent 22186c0
commit bd3a88b
Show file tree

Hide file tree

Showing 88 changed files with 4,124 additions and 23,346 deletions.
diff --git a/assets/js/admin.js b/assets/js/admin.js
@@ -26,7 +26,6 @@ const Admin = {
     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_tree_view(subject);
@@ -111,7 +110,7 @@ const Admin = {
 
         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 +204,6 @@ const Admin = {
     });
   },
 
-  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
@@ -592,7 +568,7 @@ const Admin = {
     }
 
     const options = {
-      theme: 'bootstrap',
+      theme: 'bootstrap4',
       width: () => Admin.get_select2_width(subject),
       dropdownAutoWidth: true,
       data: [...selectedItems, ...unselectedItems],

diff --git a/assets/js/app.js b/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';

diff --git a/assets/scss/admin-lte-fas.scss b/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,

diff --git a/assets/scss/app.scss b/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';

diff --git a/assets/scss/styles.scss b/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;

diff --git a/docs/cookbook/recipe_sonata_admin_without_user_bundle.rst b/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) }}
 

diff --git a/docs/images/box_class.png → docs/images/card_class.png b/docs/images/box_class.png → docs/images/card_class.png
diff --git a/docs/reference/action_create_edit.rst b/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

diff --git a/docs/reference/action_show.rst b/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')

diff --git a/docs/reference/dashboard.rst b/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 }