Redesigned actions, improved button classes

Resources/doc/cookbook/recipe_custom_action.rst

@@ -132,7 +132,7 @@ namespace of your custom Admin Controller.
 
     {# src/Acme/DemoBundle/Resources/views/CRUD/list__action_clone.html.twig #}
 
-    <a class="btn btn-small" href="{{ admin.generateObjectUrl('clone', object) }}">clone</a>
+    <a class="btn btn-sm" href="{{ admin.generateObjectUrl('clone', object) }}">clone</a>
 
 Right now ``clone`` is not a known route, we define it in the next step.
 

Resources/public/Admin.js

@@ -58,7 +58,7 @@ var Admin = {
 
     setup_xeditable: function(subject) {
         jQuery('.x-editable', subject).editable({
-            emptyclass: 'editable-empty btn btn-small',
+            emptyclass: 'editable-empty btn btn-sm',
             emptytext: '<i class="glyphicon glyphicon-edit"></i>',
             success: function(response) {
                 if('KO' === response.status) {
@@ -116,7 +116,7 @@ var Admin = {
                 fieldShortDescription = input.closest('.field-container').find('.field-short-description'),
                 select2 = input.closest('.select2-container')
                 ;
-    
+
             if (fieldShortDescription.length) {
                 target = fieldShortDescription;
             } else if (select2.length) {

Resources/public/css/layout.css

@@ -1,5 +1,5 @@
 body{
-    padding-top: 70px;
+    padding-top: 50px;
 }
 
 @media (max-width: 978px) {
@@ -335,7 +335,3 @@ legend.sonata-ba-fieldset-collapsed-description + .sonata-ba-collapsed-fields {
 .form-horizontal .control-group {
     margin-bottom: 10px;
 }
-
-span.field-actions {
-    margin-left: 10px;
-}

Resources/views/Button/acl_button.html.twig

@@ -10,7 +10,7 @@ file that was distributed with this source code.
 #}
 
 {% if admin.isAclEnabled() and admin.hasRoute('acl') and admin.id(object) and admin.isGranted('MASTER', object)%}
-    <a class="btn btn-info sonata-action-element" href="{{ admin.generateObjectUrl('acl', object) }}">
+    <a class="btn btn-default sonata-action-element" href="{{ admin.generateObjectUrl('acl', object) }}">
         <i class="fa fa-users"></i>
         {{ 'link_action_acl'|trans({}, 'SonataAdminBundle') }}</a>
 {% endif %}

Resources/views/Button/history_button.html.twig

@@ -10,7 +10,7 @@ file that was distributed with this source code.
 #}
 
 {% if admin.hasroute('history') and admin.id(object) and admin.isGranted('EDIT', object) %}
-    <a class="btn btn-info sonata-action-element" href="{{ admin.generateObjectUrl('history', object) }}">
+    <a class="btn btn-default sonata-action-element" href="{{ admin.generateObjectUrl('history', object) }}">
         <i class="fa fa-archive"></i>
         {{ 'link_action_history'|trans({}, 'SonataAdminBundle') }}</a>
 {% endif %}

Resources/views/Button/list_button.html.twig

@@ -10,7 +10,7 @@ file that was distributed with this source code.
 #}
 
 {% if admin.hasroute('list') and admin.isGranted('LIST')%}
-    <a class="btn btn-info sonata-action-element" href="{{ admin.generateUrl('list') }}">
+    <a class="btn btn-default sonata-action-element" href="{{ admin.generateUrl('list') }}">
         <i class="fa fa-list"></i>
         {{ 'link_action_list'|trans({}, 'SonataAdminBundle') }}</a>
 {% endif %}

Resources/views/Button/show_button.html.twig

@@ -10,7 +10,7 @@ file that was distributed with this source code.
 #}
 
 {% if admin.hasroute('show') and admin.id(object) and admin.isGranted('VIEW', object) and admin.show|length > 0 %}
-    <a class="btn btn-info sonata-action-element" href="{{ admin.generateObjectUrl('show', object) }}">
+    <a class="btn btn-default sonata-action-element" href="{{ admin.generateObjectUrl('show', object) }}">
         <i class="fa fa-eye"></i>
         {{ 'link_action_show'|trans({}, 'SonataAdminBundle') }}</a>
 {% endif %}

Resources/views/CRUD/action.html.twig

@@ -12,7 +12,7 @@ file that was distributed with this source code.
 {% extends base_template %}
 
 {% block actions %}
-    <div class="btn-group sonata-actions">
+    <div class="btn-group btn-group-justified sonata-actions">
         {% include 'SonataAdminBundle:Button:create_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:list_button.html.twig' %}
     </div>

Resources/views/CRUD/base_acl.html.twig

@@ -12,7 +12,7 @@ file that was distributed with this source code.
 {% extends base_template %}
 
 {% block actions %}
-    <div class="btn-group sonata-actions">
+    <div class="btn-group btn-group-justified sonata-actions">
         {% include 'SonataAdminBundle:Button:edit_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:history_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:show_button.html.twig' %}

Resources/views/CRUD/base_edit.html.twig

@@ -20,7 +20,7 @@ file that was distributed with this source code.
 {% endblock%}
 
 {% block actions %}
-    <div class="btn-group sonata-actions">
+    <div class="btn-group btn-group-justified sonata-actions">
         {% include 'SonataAdminBundle:Button:show_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:history_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:acl_button.html.twig' %}

Resources/views/CRUD/base_history.html.twig

@@ -12,7 +12,7 @@ file that was distributed with this source code.
 {% extends base_template %}
 
 {% block actions %}
-    <div class="btn-group sonata-actions">
+    <div class="btn-group btn-group-justified sonata-actions">
         {% include 'SonataAdminBundle:Button:edit_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:acl_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:show_button.html.twig' %}

Resources/views/CRUD/base_list.html.twig

@@ -12,7 +12,7 @@ file that was distributed with this source code.
 {% extends base_template %}
 
 {% block actions %}
-    <div class="sonata-actions">
+    <div class="pull-right sonata-actions">
         {% include 'SonataAdminBundle:Core:create_button.html.twig' %}
     </div>
 {% endblock %}

Resources/views/CRUD/base_show.html.twig

@@ -12,7 +12,7 @@ file that was distributed with this source code.
 {% extends base_template %}
 
 {% block actions %}
-    <div class="btn-group sonata-actions">
+    <div class="btn-group btn-group-justified sonata-actions">
         {% include 'SonataAdminBundle:Button:edit_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:history_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:list_button.html.twig' %}

Resources/views/CRUD/batch_confirmation.html.twig

@@ -12,7 +12,7 @@ file that was distributed with this source code.
 {% extends base_template %}
 
 {% block actions %}
-    <div class="btn-group sonata-actions">
+    <div class="btn-group btn-group-justified sonata-actions">
         {% include 'SonataAdminBundle:Button:list_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:create_button.html.twig' %}
     </div>

Resources/views/CRUD/delete.html.twig

@@ -12,7 +12,7 @@ file that was distributed with this source code.
 {% extends base_template %}
 
 {% block actions %}
-    <div class="btn-group sonata-actions">
+    <div class="btn-group btn-group-justified sonata-actions">
         {% include 'SonataAdminBundle:Button:list_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:edit_button.html.twig' %}
         {% include 'SonataAdminBundle:Button:create_button.html.twig' %}

Resources/views/standard_layout.html.twig

@@ -44,6 +44,7 @@ file that was distributed with this source code.
 
             <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/bootstrap3-editable/bootstrap3-editable/css/bootstrap-editable.css") }}" />
             <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/css/styles.css") }}" />
+            <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/css/layout.css") }}" />
         {% endblock %}
 
         {% block javascripts %}
@@ -260,12 +261,11 @@ file that was distributed with this source code.
 
                         {% block sonata_admin_content %}
 
-                            {% if _list_table is empty and _list_filters is empty and _actions is not empty %}
+                            {#{% if _list_table is empty and _list_filters is empty and _actions is not empty %}#}
+                            {% if _actions is not empty %}
                                 <div class="row">
-                                    <div class="col-sm-6 col-sm-offset-6">
-                                        <div class="pull-right">
-                                            {{ _actions|raw }}
-                                        </div>
+                                    <div class="{% if _list_filters|trim %}col-md-10{% else %}col-md-12{% endif %}">
+                                        {{ _actions|raw }}
                                     </div>
                                 </div>
                                 <br/>
@@ -291,16 +291,6 @@ file that was distributed with this source code.
                                 <div class="row">
                                     <div class="sonata-ba-list {% if _list_filters|trim %}col-md-10{% else %}col-md-12{% endif %}">
                                         {{ _list_table|raw }}
-
-                                        {% if _actions is not empty %}
-                                            <div class="row">
-                                                <div class="col-sm-3 col-sm-offset-9">
-                                                    <div class="pull-right">
-                                                        {{ _actions|raw }}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        {% endif %}
                                     </div>
 
                                     {% if _list_filters|trim %}