feature #444 Translated boolean labels when using "toggle" fields (ja…

…viereguiluz)

This PR was squashed before being merged into the master branch (closes #444).

Discussion
----------

Translated boolean labels when using "toggle" fields

This is related to #443 but it translates boolean labels also when using "toggle" fields. Besides, the boolean labels are now of the same width (for most languages at least), which improves the overall design:

English toggle:

![toggle_en](https://cloud.githubusercontent.com/assets/73419/9771020/b0bcae90-5733-11e5-80f7-cf1a4b6c87d7.png)

French toggle:

![toggle_fr](https://cloud.githubusercontent.com/assets/73419/9771026/b376963c-5733-11e5-858c-bef163f95cdc.png)

English label;

![label_en](https://cloud.githubusercontent.com/assets/73419/9771031/b7cfaf66-5733-11e5-9e4d-847820cd9e14.png)

French label:

![label_fr](https://cloud.githubusercontent.com/assets/73419/9771027/b588d14c-5733-11e5-904b-881804bfe30c.png)

Commits
-------

8866b28 Translated boolean labels when using "toggle" fields

Resources/translations/EasyAdminBundle.en.xlf

@@ -92,6 +92,16 @@
                 <target><![CDATA[<strong>%start%</strong> - <strong>%end%</strong> of <strong>%results%</strong>]]></target>
             </trans-unit>
 
+            <!-- labels -->
+            <trans-unit id="label.true">
+                <source>label.true</source>
+                <target>Yes</target>
+            </trans-unit>
+            <trans-unit id="label.false">
+                <source>label.false</source>
+                <target>No</target>
+            </trans-unit>
+
             <!-- misc. elements -->
             <trans-unit id="header.close">
                 <source>header.close</source>
@@ -121,14 +131,6 @@
                 <source>errors</source>
                 <target>Error|Errors</target>
             </trans-unit>
-            <trans-unit id="boolean.true">
-                <source>boolean.true</source>
-                <target>Yes</target>
-            </trans-unit>
-            <trans-unit id="boolean.false">
-                <source>boolean.false</source>
-                <target>No</target>
-            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/translations/EasyAdminBundle.fr.xlf

@@ -92,6 +92,16 @@
                 <target><![CDATA[<strong>%start%</strong> - <strong>%end%</strong> sur <strong>%results%</strong>]]></target>
             </trans-unit>
 
+            <!-- labels -->
+            <trans-unit id="label.true">
+                <source>label.true</source>
+                <target>Oui</target>
+            </trans-unit>
+            <trans-unit id="label.false">
+                <source>label.false</source>
+                <target>Non</target>
+            </trans-unit>
+
             <!-- misc. elements -->
             <trans-unit id="header.close">
                 <source>header.close</source>
@@ -121,14 +131,6 @@
                 <source>errors</source>
                 <target>Erreur|Erreurs</target>
             </trans-unit>
-            <trans-unit id="boolean.true">
-                <source>boolean.true</source>
-                <target>Oui</target>
-            </trans-unit>
-            <trans-unit id="boolean.false">
-                <source>boolean.false</source>
-                <target>Non</target>
-            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/views/css/admin.css.twig

@@ -184,8 +184,9 @@ div.flash-error strong {
 }
 .label {
     color: {{ colors.white }};
+    display: inline-block;
     font-size: 11px;
-    padding: 2px 4px;
+    padding: 4px;
     text-transform: uppercase;
 }
 .label-success {
@@ -201,12 +202,19 @@ div.flash-error strong {
     color: {{ colors.text }};
 }
 
+/* this makes boolean labels to be of the same width for most languages */
+.boolean .label,
+.toggle .label {
+    min-width: 33px;
+}
+
 /* Switches / toggles
    ------------------------------------------------------------------------- */
 .toggle .btn {
     border-radius: 3px;
     font-size: 11px;
     font-weight: bold;
+    text-transform: uppercase;
 }
 .toggle .toggle.btn-success {
     border-color: {{ colors.success }};
@@ -239,6 +247,11 @@ div.flash-error strong {
     margin-top: 1px;
     margin-right: 5px;
 }
+.toggle .toggle-on.btn-xs,
+.toggle .toggle-off.btn-xs {
+    padding-left: 4px;
+    text-align: center;
+}
 
 /* Badges
    ------------------------------------------------------------------------- */

Resources/views/default/field_boolean.html.twig

@@ -1,6 +1,7 @@
 {% trans_default_domain "EasyAdminBundle" %}
+
 {% if value == true %}
-    <span class="label label-success">{{ 'boolean.true'|trans }}</span>
+    <span class="label label-success">{{ 'label.true'|trans }}</span>
 {% else %}
-    <span class="label label-danger">{{ 'boolean.false'|trans }}</span>
-{% endif %}
+    <span class="label label-danger">{{ 'label.false'|trans }}</span>
+{% endif %}

Resources/views/default/field_toggle.html.twig

@@ -1,8 +1,14 @@
+{% trans_default_domain "EasyAdminBundle" %}
+
 {% if view == 'show' %}
-    <span class="label label-{{ value == true ? 'success' : 'danger' }}">{{ value == true ? 'YES' : 'NO' }}</span>
+    {% if value == true %}
+        <span class="label label-success">{{ 'label.true'|trans }}</span>
+    {% else %}
+        <span class="label label-danger">{{ 'label.false'|trans }}</span>
+    {% endif %}
 {% else %}
     <input type="checkbox" {{ value == true ? 'checked' : '' }}
        data-toggle="toggle" data-size="mini"
        data-onstyle="success" data-offstyle="danger"
-       data-on="YES" data-off="NO">
+       data-on="{{ 'label.true'|trans }}" data-off="{{ 'label.false'|trans }}">
 {% endif %}