Replaced underscores by dashes in the CSS class names

EasyCorp · Jun 16, 2015 · e964bb1 · e964bb1
1 parent 5222da9
commit e964bb1
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 37 deletions.
diff --git a/Controller/AdminController.php b/Controller/AdminController.php
@@ -566,7 +566,7 @@ protected function createNewForm($entity, array $entityProperties)
     protected function createEntityForm($entity, array $entityProperties, $view)
     {
         $formCssClass = array_reduce($this->config['design']['form_theme'], function ($previousClass, $formTheme) {
-            return sprintf('theme_%s %s', strtolower(str_replace('.html.twig', '', basename($formTheme))), $previousClass);
+            return sprintf('theme-%s %s', strtolower(str_replace('.html.twig', '', basename($formTheme))), $previousClass);
         });
 
         $formBuilder = $this->createFormBuilder($entity, array(

diff --git a/Resources/doc/getting-started/5-design-customization.md b/Resources/doc/getting-started/5-design-customization.md
@@ -200,4 +200,24 @@ easy_admin:
     # ...
 ```
 
+Your own stylesheets can make use of the `id` and `class` attributes applied to
+the `<body>` element of each backend view. The `id` allows you to target
+specific entity instances:
+
+| View   | `<body>` ID attribute
+| ------ | --------------------------------------------------------------------
+| `edit` | `easyadmin-edit-<entity name>-<entity id>`
+| `list` | `easyadmin-list-<entity name>`
+| `new`  | `easyadmin-new-<entity name>`
+| `show` | `easyadmin-show-<entity name>-<entity id>`
+
+The `class` attribute allows you to target entire sections of the backend:
+
+| View   | `<body>` CSS class
+| ------ | --------------------------------------------------------------------
+| `edit` | `easyadmin edit edit-<entity name>`
+| `list` | `easyadmin list list-<entity name>`
+| `new`  | `easyadmin new new-<entity name>`
+| `show` | `easyadmin show show-<entity name>`
+
 [advanced-design-customization]: ../tutorials/advanced-design-customization.md
diff --git a/Resources/views/css/admin.css.twig b/Resources/views/css/admin.css.twig
@@ -641,24 +641,24 @@ body.list .pagination.last-page li:nth-child(2) {
 body.new form textarea {
     min-height: 250px;
 }
-body.new form .field_date select + select {
+body.new form .field-date select + select {
     margin-top: .5em;
 }
-body.new form .field_collection_action {
+body.new form .field-collection-action {
     margin-top: -15px;
 }
 
 body.new form #form-actions-row button,
 body.new form #form-actions-row a.btn {
     margin-bottom: 10px;
 }
-body.new form.theme_bootstrap_3_horizontal_layout #form-actions-row {
+body.new form.theme-bootstrap_3_horizontal_layout #form-actions-row {
     padding-left: 15px;
     padding-right: 15px;
 }
 
 @media (min-width: 768px) {
-    body.new form.theme_bootstrap_3_horizontal_layout #form-actions-row {
+    body.new form.theme-bootstrap_3_horizontal_layout #form-actions-row {
         margin-left: 16.66666667%;
     }
 }
@@ -669,24 +669,24 @@ body.new form.theme_bootstrap_3_horizontal_layout #form-actions-row {
 body.edit form textarea {
     min-height: 250px;
 }
-body.edit form .field_date select + select {
+body.edit form .field-date select + select {
     margin-top: .5em;
 }
-body.edit form .field_collection_action {
+body.edit form .field-collection-action {
     margin-top: -15px;
 }
 
 body.edit form #form-actions-row button,
 body.edit form #form-actions-row a.btn {
     margin-bottom: 10px;
 }
-body.edit form.theme_bootstrap_3_horizontal_layout #form-actions-row {
+body.edit form.theme-bootstrap_3_horizontal_layout #form-actions-row {
     padding-left: 15px;
     padding-right: 15px;
 }
 
 @media (min-width: 768px) {
-    body.edit form.theme_bootstrap_3_horizontal_layout #form-actions-row {
+    body.edit form.theme-bootstrap_3_horizontal_layout #form-actions-row {
         margin-left: 16.66666667%;
     }
 }
@@ -933,8 +933,8 @@ body.error .error-solution pre {
         margin-right: 10px;
     }
 
-    body.new form .field_date select + select,
-    body.edit form .field_date select + select {
+    body.new form .field-date select + select,
+    body.edit form .field-date select + select {
         margin-left: .5em;
         margin-top: 0;
     }

diff --git a/Resources/views/default/edit.html.twig b/Resources/views/default/edit.html.twig
@@ -2,11 +2,13 @@
 {% form_theme form with easyadmin_config('design.form_theme') %}
 
 {% set _entity_config = easyadmin_entity(app.request.query.get('entity')) %}
-{% set _trans_parameters = { '%entity_name%': _entity_config.name|trans, '%entity_label%': _entity_config.label|trans, '%entity_id%': attribute(entity, _entity_config.primary_key_field_name) } %}
+{% set _entity_id = attribute(entity, _entity_config.primary_key_field_name) %}
+{% set _trans_parameters = { '%entity_name%': _entity_config.name|trans, '%entity_label%': _entity_config.label|trans, '%entity_id%': _entity_id } %}
 
 {% extends _entity_config.templates.layout %}
 
-{% block body_class 'admin edit ' ~ _entity_config.name|lower %}
+{% block body_id 'easyadmin-edit-' ~ _entity_config.name ~ '-' ~ _entity_id %}
+{% block body_class 'edit edit-' ~ _entity_config.name|lower %}
 
 {% block content_title %}
     {{ _entity_config.edit.title|default('edit.page_title')|trans(_trans_parameters) }}

diff --git a/Resources/views/default/form.html.twig b/Resources/views/default/form.html.twig
@@ -31,7 +31,7 @@
                     });
                 {% endset %}
 
-                <div class="form-group field_collection_action">
+                <div class="form-group field-collection-action">
                     <a href="#" onclick="{{ add_item_javascript|raw }}" class="col-sm-12 text-right">
                         <i class="fa fa-plus-square"></i>
                         {{ field|length == 0 ? 'Add a new item' : 'Add another item' }}

diff --git a/Resources/views/default/layout.html.twig b/Resources/views/default/layout.html.twig
@@ -26,7 +26,7 @@
     </head>
 
     {% block body %}
-    <body id="{% block body_id %}{% endblock %}" class="{% block body_class %}{% endblock %}">
+    <body id="{% block body_id %}{% endblock %}" class="easyadmin {% block body_class %}{% endblock %}">
     <div id="wrapper" class="container">
         {% block wrapper %}
         <nav id="header" class="navbar navbar-default navbar-static-top" role="navigation">

diff --git a/Resources/views/default/list.html.twig b/Resources/views/default/list.html.twig
@@ -5,7 +5,8 @@
 
 {% extends _entity_config.templates.layout %}
 
-{% block body_class 'admin list ' ~ _entity_config.name|lower %}
+{% block body_id 'easyadmin-list-' ~ _entity_config.name %}
+{% block body_class 'list list-' ~ _entity_config.name|lower %}
 
 {% block head_stylesheets %}
     {{ parent() }}

diff --git a/Resources/views/default/new.html.twig b/Resources/views/default/new.html.twig
@@ -6,7 +6,8 @@
 
 {% extends _entity_config.templates.layout %}
 
-{% block body_class 'admin new ' ~ _entity_config.name|lower %}
+{% block body_id 'easyadmin-new-' ~ _entity_config.name %}
+{% block body_class 'new new-' ~ _entity_config.name|lower %}
 
 {% block content_title %}
     {{ _entity_config.new.title|default('new.page_title')|trans(_trans_parameters) }}

diff --git a/Resources/views/default/show.html.twig b/Resources/views/default/show.html.twig
@@ -1,11 +1,13 @@
 {% trans_default_domain "EasyAdminBundle" %}
 
 {% set _entity_config = easyadmin_entity(app.request.query.get('entity')) %}
-{% set _trans_parameters = { '%entity_name%': _entity_config.name|trans, '%entity_label%': _entity_config.label|trans, '%entity_id%': attribute(entity, _entity_config.primary_key_field_name) } %}
+{% set _entity_id = attribute(entity, _entity_config.primary_key_field_name) %}
+{% set _trans_parameters = { '%entity_name%': _entity_config.name|trans, '%entity_label%': _entity_config.label|trans, '%entity_id%': _entity_id } %}
 
 {% extends _entity_config.templates.layout %}
 
-{% block body_class 'admin show ' ~ _entity_config.name|lower %}
+{% block body_id 'easyadmin-show-' ~ _entity_config.name ~ '-' ~ _entity_id %}
+{% block body_class 'show show-' ~ _entity_config.name|lower %}
 
 {% block content_title %}
     {{ _entity_config.show.title|default('show.page_title')|trans(_trans_parameters) }}
@@ -14,7 +16,7 @@
 {% block main %}
     <div class="form-horizontal">
         {% for field, metadata in fields %}
-            <div class="form-group field_{{ metadata.type|default('default')|lower }} {{ metadata.css_class|default('') }}">
+            <div class="form-group field-{{ metadata.type|default('default')|lower }} {{ metadata.css_class|default('') }}">
                 <label class="col-sm-2 control-label">
                     {% if metadata.label %}
                         {{ metadata.label|trans }}

diff --git a/Resources/views/form/bootstrap_3_horizontal_layout.html.twig b/Resources/views/form/bootstrap_3_horizontal_layout.html.twig
@@ -26,7 +26,7 @@ col-sm-2
 
 {% block form_row -%}
 {% spaceless %}
-    <div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
+    <div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
         {{ form_label(form) }}
         <div class="{{ block('form_group_class') }}">
             {{ form_widget(form) }}
@@ -50,7 +50,7 @@ col-sm-2
 
 {% block checkbox_radio_row -%}
 {% spaceless %}
-    <div class="form-group {% if not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
+    <div class="form-group {% if not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
         <div class="{{ block('form_label_class') }}"></div>
         <div class="{{ block('form_group_class') }}">
             {{ form_widget(form) }}
@@ -62,7 +62,7 @@ col-sm-2
 
 {% block submit_row -%}
 {% spaceless %}
-    <div class="form-group field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
+    <div class="form-group field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
         <div class="{{ block('form_label_class') }}"></div>
         <div class="{{ block('form_group_class') }}">
             {{ form_widget(form) }}

diff --git a/Resources/views/form/bootstrap_3_layout.html.twig b/Resources/views/form/bootstrap_3_layout.html.twig
@@ -178,7 +178,7 @@
 {# Rows #}
 
 {% block form_row -%}
-    <div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
+    <div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
         {{- form_label(form) -}}
         {{- form_widget(form) -}}
         {{- form_errors(form) -}}
@@ -190,7 +190,7 @@
 {%- endblock form_row %}
 
 {% block button_row -%}
-    <div class="form-group field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
+    <div class="form-group field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
         {{- form_widget(form) -}}
     </div>
 {%- endblock button_row %}
@@ -216,14 +216,14 @@
 {%- endblock datetime_row %}
 
 {% block checkbox_row -%}
-    <div class="form-group {% if not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
+    <div class="form-group {% if not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
         {{- form_widget(form) -}}
         {{- form_errors(form) -}}
     </div>
 {%- endblock checkbox_row %}
 
 {% block radio_row -%}
-    <div class="form-group {% if not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
+    <div class="form-group {% if not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
         {{- form_widget(form) -}}
         {{- form_errors(form) -}}
     </div>

diff --git a/Tests/Controller/CustomizedBackendTest.php b/Tests/Controller/CustomizedBackendTest.php
@@ -178,7 +178,7 @@ public function testShowViewFieldClasses()
         $fieldClasses = array('integer', 'string', 'association');
 
         foreach ($fieldClasses as $i => $cssClass) {
-            $this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
+            $this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
         }
     }
 
@@ -274,7 +274,7 @@ public function testEditViewPageTitle()
     public function testEditViewFormClasses()
     {
         $crawler = $this->requestEditView();
-        $formClasses = array('theme_bootstrap_3_horizontal_layout', 'form-horizontal');
+        $formClasses = array('theme-bootstrap_3_horizontal_layout', 'form-horizontal');
 
         foreach ($formClasses as $cssClass) {
             $this->assertContains($cssClass, trim($crawler->filter('#main form')->eq(0)->attr('class')));
@@ -298,7 +298,7 @@ public function testEditViewFieldClasses()
         $fieldCustomClasses = array('integer', 'text', 'default');
 
         foreach ($fieldDefaultClasses as $i => $cssClass) {
-            $this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
+            $this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
         }
 
         foreach ($fieldCustomClasses as $i => $cssClass) {
@@ -363,7 +363,7 @@ public function testNewViewPageTitle()
     public function testNewViewFormClasses()
     {
         $crawler = $this->requestNewView();
-        $formClasses = array('theme_bootstrap_3_horizontal_layout', 'form-horizontal');
+        $formClasses = array('theme-bootstrap_3_horizontal_layout', 'form-horizontal');
 
         foreach ($formClasses as $cssClass) {
             $this->assertContains($cssClass, trim($crawler->filter('#main form')->eq(0)->attr('class')));
@@ -386,7 +386,7 @@ public function testNewViewFieldClasses()
         $fieldClasses = array('integer', 'text', 'default');
 
         foreach ($fieldClasses as $i => $cssClass) {
-            $this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
+            $this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
         }
     }
 

diff --git a/Tests/Controller/DefaultBackendTest.php b/Tests/Controller/DefaultBackendTest.php
@@ -243,7 +243,7 @@ public function testShowViewFieldClasses()
         $fieldClasses = array('integer', 'string', 'association');
 
         foreach ($fieldClasses as $i => $cssClass) {
-            $this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
+            $this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
         }
     }
 
@@ -339,7 +339,7 @@ public function testEditViewTitle()
     public function testEditViewFormClasses()
     {
         $crawler = $this->requestEditView();
-        $formClasses = array('theme_bootstrap_3_horizontal_layout', 'form-horizontal');
+        $formClasses = array('theme-bootstrap_3_horizontal_layout', 'form-horizontal');
 
         foreach ($formClasses as $cssClass) {
             $this->assertContains($cssClass, trim($crawler->filter('#main form')->eq(0)->attr('class')));
@@ -362,7 +362,7 @@ public function testEditViewFieldClasses()
         $fieldClasses = array('text', 'default');
 
         foreach ($fieldClasses as $i => $cssClass) {
-            $this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
+            $this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
         }
     }
 
@@ -423,7 +423,7 @@ public function testNewViewTitle()
     public function testNewViewFormClasses()
     {
         $crawler = $this->requestNewView();
-        $formClasses = array('theme_bootstrap_3_horizontal_layout', 'form-horizontal');
+        $formClasses = array('theme-bootstrap_3_horizontal_layout', 'form-horizontal');
 
         foreach ($formClasses as $cssClass) {
             $this->assertContains($cssClass, trim($crawler->filter('#main form')->eq(0)->attr('class')));
@@ -446,7 +446,7 @@ public function testNewViewFieldClasses()
         $fieldClasses = array('text', 'default');
 
         foreach ($fieldClasses as $i => $cssClass) {
-            $this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
+            $this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
         }
     }
 

diff --git a/UPGRADE.md b/UPGRADE.md
@@ -5,6 +5,26 @@ This document describes the backwards incompatible changes introduced by each
 EasyAdminBundle version and the needed changes to be made before upgrading to
 the next version.
 
+Upgrade to 1.5.5
+----------------
+
+In order to improve the consistency of the backend design, all CSS class names
+have been updated to use dashes instead of underscores, to match the syntax
+used by Bootstrap classes. This means that `field_date` is now `field-date`,
+`theme_boostrap...` is now `theme-bootstrap...`, etc.
+
+Moreover, the global `css` class applied to the `<body>` element of each view
+has changed:
+
+| View   | OLD `<body>` CSS class     | NEW `<body>` CSS class
+| ------ | -------------------------- | ---------------------------------------
+| `edit` | `admin edit <entity name>` | `easyadmin edit edit-<entity name>`
+| `list` | `admin list <entity name>` | `easyadmin list list-<entity name>`
+| `new`  | `admin new <entity name>`  | `easyadmin new new-<entity name>`
+| `show` | `admin show <entity name>` | `easyadmin show show-<entity name>`
+
+All these changes only affect you if your backend uses a custom stylesheet.
+
 Upgrade to 1.5.3
 ----------------
 

diff --git a/phpunit.xml.dist b/phpunit.xml.dist
@@ -28,6 +28,8 @@
 
     <php>
         <server name="KERNEL_DIR" value="./Tests/Fixtures/App" />
+        <ini name="error_reporting" value="-1" />
+        <ini name="memory_limit" value="-1" />
         <ini name="zend.enable_gc" value="0" />
     </php>