Merge pull request #674 from marmelab/css_class_list

[RFR] Apply cssClasses both to th and td in listView

examples/blog/config.js

@@ -88,11 +88,14 @@
                 nga.field('id').label('id'), // The default displayed name is the camelCase field name. label() overrides id
                 nga.field('title'), // the default list field type is "string", and displays as a string
                 nga.field('published_at', 'date'),  // Date field type allows date formatting
-                nga.field('average_note', 'float'), // Float type also displays decimal digits
-                nga.field('views', 'number'),
+                nga.field('average_note', 'float') // Float type also displays decimal digits
+                    .cssClasses('hidden-xs'),
+                nga.field('views', 'number')
+                    .cssClasses('hidden-xs'),
                 nga.field('tags', 'reference_many') // a Reference is a particular type of field that references another entity
                     .targetEntity(tag) // the tag entity is defined later in this file
                     .targetField(nga.field('name')) // the field to be displayed in this list
+                    .cssClasses('hidden-xs')
             ])
             .filters([
                 nga.field('category', 'choice').choices([
@@ -175,14 +178,16 @@
                 nga.field('created_at', 'date')
                     .label('Posted'),
                 nga.field('author.name')
-                    .label('Author'),
+                    .label('Author')
+                    .cssClasses('hidden-xs'),
                 nga.field('body', 'wysiwyg')
                     .stripTags(true)
                     .map(truncate),
                 nga.field('post_id', 'reference')
                     .label('Post')
                     .targetEntity(post)
                     .targetField(nga.field('title').map(truncate))
+                    .cssClasses('hidden-xs')
             ])
             .filters([
                 nga.field('q', 'template')
@@ -249,6 +254,7 @@
                 nga.field('custom', 'template')
                     .label('Upper name')
                     .template('{{ entry.values.name.toUpperCase() }}')
+                    .cssClasses('hidden-xs')
             ])
             .filters([
                 nga.field('published', 'template')

src/javascripts/ng-admin/Crud/field/maField.js

@@ -37,7 +37,7 @@ function maField(FieldViewConfiguration) {
             scope.datastore = scope.datastore();
 
             scope.getClassesForField = function(field, entry) {
-                return 'ng-admin-field-' + field.name().replace('.', '_') + ' ' + (field.getCssClasses(entry) || 'col-sm-10 col-md-8 col-lg-7');
+                return 'ng-admin-field-' + field.name().replace('.', '_') + ' ' + 'ng-admin-type-' + field.type() + ' ' + (field.getCssClasses(entry) || 'col-sm-10 col-md-8 col-lg-7');
             };
 
             scope.getInputForField = function(field) {

src/javascripts/ng-admin/Crud/list/maDatagrid.js

@@ -25,7 +25,8 @@ define(function (require) {
             <th ng-if="selection">
                 <ma-datagrid-multi-selector toggle-select-all="toggleSelectAll()" selection="selection" entries="entries"/>
             </th>
-            <th ng-repeat="field in fields() track by $index" ng-class="'ng-admin-column-' + field.name()">
+            <th ng-repeat="field in fields() track by $index" ng-class="field.getCssClasses(entry)"
+            class="ng-admin-column-{{ ::field.name() }} ng-admin-type-{{ ::field.type() }}">
                 <a ng-click="datagrid.sort(field)">
                     <span class="glyphicon {{ datagrid.sortDir === 'DESC' ? 'glyphicon-chevron-down': 'glyphicon-chevron-up' }}" ng-if="datagrid.isSorting(field)"></span>
 
@@ -43,7 +44,7 @@ define(function (require) {
             <td ng-if="selection">
                 <ma-datagrid-item-selector toggle-select="toggleSelect(entry)" selection="selection" entry="entry"/>
             </td>
-            <td ng-repeat="field in fields() track by $index" ng-class="field.getCssClasses(entry)">
+            <td ng-repeat="field in fields() track by $index" ng-class="field.getCssClasses(entry)" class="ng-admin-column-{{ ::field.name() }} ng-admin-type-{{ ::field.type() }}">
                 <ma-column field="::field" entry="::entry" entity="::entity"></ma-column>
             </td>
             <td ng-if="datagrid.shouldDisplayActions" class="ng-admin-column-actions">

src/javascripts/ng-admin/Crud/show/show.html

@@ -22,7 +22,7 @@ <h1 compile="::showController.title">
 
         <label class="col-sm-2 control-label">{{ field.label() }}</label>
 
-        <div class="show-value" ng-class="::'ng-admin-field-' + field.name() + ' ' + (field.getCssClasses(entry) || 'col-sm-10 col-md-8 col-lg-7')">
+        <div class="show-value" ng-class="::'ng-admin-field-' + field.name() + ' ' + 'ng-admin-type-' + field.type() + ' ' + (field.getCssClasses(entry) || 'col-sm-10 col-md-8 col-lg-7')">
 
             <ma-column field="::field" entry="::entry" entity="::showController.entity" datastore="::showController.dataStore"></ma-column>
 

src/javascripts/test/e2e/ShowViewSpec.js

@@ -28,9 +28,9 @@ describe('ShowView', function () {
             $$('.ng-admin-field-comments th').then(function (inputs) {
                 expect(inputs.length).toBe(4);
 
-                expect(inputs[0].getAttribute('class')).toBe('ng-scope ng-admin-column-id');
-                expect(inputs[1].getAttribute('class')).toBe('ng-scope ng-admin-column-created_at');
-                expect(inputs[2].getAttribute('class')).toBe('ng-scope ng-admin-column-body');
+                expect(inputs[0].getAttribute('class')).toBe('ng-admin-column-id ng-admin-type-string');
+                expect(inputs[1].getAttribute('class')).toBe('ng-admin-column-created_at ng-admin-type-string');
+                expect(inputs[2].getAttribute('class')).toBe('ng-admin-column-body ng-admin-type-string');
             });
         });
     });