[IMP] Web: ListView: semantics classes for row decoration

based on bootstrap contextual colors, and bold/italic fonts.

Backward compatibility is ensured as the ListView is monkey-patched
to keep interpreting colors and fonts attributes.

5 files changed, 119 insertions, 60 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 40050a72e2d..09079d3a03a 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -2555,6 +2555,12 @@
   height: 27px;
   border-top: 1px solid #ddd;
 }
+.openerp .oe_list_content > tbody > tr.text-bf {
+  font-weight: bold;
+}
+.openerp .oe_list_content > tbody > tr.text-it {
+  font-style: italic;
+}
 .openerp .oe_list_content > tbody > tr > td.oe_list_field_cell {
   padding: 3px 6px;
   white-space: pre-line;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index c619cc15e1e..fe781954510 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -2103,6 +2103,10 @@ $sheet-padding: 16px
             > tr
                 height: $row-height
                 border-top: 1px solid #ddd
+                &.text-bf
+                    font-weight: bold
+                &.text-it
+                    font-style: italic
                 > td.oe_list_field_cell
                     padding: 3px 6px
                     white-space: pre-line
diff --git a/addons/web/static/src/js/compatibility.js b/addons/web/static/src/js/compatibility.js
index cb1b3b795de..cc80915735a 100644
--- a/addons/web/static/src/js/compatibility.js
+++ b/addons/web/static/src/js/compatibility.js
@@ -183,6 +183,84 @@ function start_modules (modules) {
     return openerp;
 };
 
+// Monkey-patching of the ListView for backward compatibiliy of the colors and
+// fonts row's attributes, as they are deprecated in 9.0.
+ListView.include({
+    load_list: function(data) {
+        this._super(data);
+        if (this.fields_view.arch.attrs.colors) {
+            this.colors = _(this.fields_view.arch.attrs.colors.split(';')).chain()
+                .compact()
+                .map(function(color_pair) {
+                    var pair = color_pair.split(':'),
+                        color = pair[0],
+                        expr = pair[1];
+                    return [color, py.parse(py.tokenize(expr)), expr];
+                }).value();
+        }
+
+        if (this.fields_view.arch.attrs.fonts) {
+            this.fonts = _(this.fields_view.arch.attrs.fonts.split(';')).chain().compact()
+                .map(function(font_pair) {
+                    var pair = font_pair.split(':'),
+                        font = pair[0],
+                        expr = pair[1];
+                    return [font, py.parse(py.tokenize(expr)), expr];
+                }).value();
+        }
+    },
+    /**
+     * Returns the style for the provided record in the current view (from the
+     * ``@colors`` and ``@fonts`` attributes)
+     *
+     * @param {Record} record record for the current row
+     * @returns {String} CSS style declaration
+     */
+    style_for: function (record) {
+        var len, style= '';
+
+        var context = _.extend({}, record.attributes, {
+            uid: session.uid,
+            current_date: moment().format('YYYY-MM-DD')
+            // TODO: time, datetime, relativedelta
+        });
+        var i;
+        var pair;
+        var expression;
+        if (this.fonts) {
+            for(i=0, len=this.fonts.length; i<len; ++i) {
+                pair = this.fonts[i];
+                var font = pair[0];
+                expression = pair[1];
+                if (py.PY_isTrue(py.evaluate(expression, context))) {
+                    switch(font) {
+                    case 'bold':
+                        style += 'font-weight: bold;';
+                        break;
+                    case 'italic':
+                        style += 'font-style: italic;';
+                        break;
+                    case 'underline':
+                        style += 'text-decoration: underline;';
+                        break;
+                    }
+                }
+            }
+        }
+ 
+        if (!this.colors) { return style; }
+        for(i=0, len=this.colors.length; i<len; ++i) {
+            pair = this.colors[i];
+            var color = pair[0];
+            expression = pair[1];
+            if (py.PY_isTrue(py.evaluate(expression, context))) {
+                return style += 'color: ' + color + ';';
+            }
+        }
+        return style;
+     },
+});
+
 
 });
 
diff --git a/addons/web/static/src/js/views/list_view.js b/addons/web/static/src/js/views/list_view.js
index c8f2112dd77..314daaf1f08 100644
--- a/addons/web/static/src/js/views/list_view.js
+++ b/addons/web/static/src/js/views/list_view.js
@@ -20,6 +20,18 @@ var _lt = core._lt;
 var QWeb = core.qweb;
 var list_widget_registry = core.list_widget_registry;
 
+// Allowed decoration on the list's rows: bold, italic and bootstrap semantics classes
+var row_decoration = [
+    'decoration-bf',
+    'decoration-it',
+    'decoration-danger',
+    'decoration-info',
+    'decoration-muted',
+    'decoration-primary',
+    'decoration-success',
+    'decoration-warning'
+];
+
 var ListView = View.extend( /** @lends instance.web.ListView# */ {
     _template: 'ListView',
     display_name: _lt('List'),
@@ -166,55 +178,26 @@ var ListView = View.extend( /** @lends instance.web.ListView# */ {
         return this._super();
     },
     /**
-     * Returns the style for the provided record in the current view (from the
-     * ``@colors`` and ``@fonts`` attributes)
+     * Computes and returns the classnames for the provided record (from the
+     * ``@decoration`` attribute)
      *
      * @param {Record} record record for the current row
-     * @returns {String} CSS style declaration
+     * @returns {String} classnames
      */
-    style_for: function (record) {
-        var len, style= '';
-
+    compute_decoration_classnames: function (record) {
+        var classnames= '';
         var context = _.extend({}, record.attributes, {
             uid: session.uid,
             current_date: moment().format('YYYY-MM-DD')
             // TODO: time, datetime, relativedelta
         });
-        var i;
-        var pair;
-        var expression;
-        if (this.fonts) {
-            for(i=0, len=this.fonts.length; i<len; ++i) {
-                pair = this.fonts[i];
-                var font = pair[0];
-                expression = pair[1];
-                if (py.PY_isTrue(py.evaluate(expression, context))) {
-                    switch(font) {
-                    case 'bold':
-                        style += 'font-weight: bold;';
-                        break;
-                    case 'italic':
-                        style += 'font-style: italic;';
-                        break;
-                    case 'underline':
-                        style += 'text-decoration: underline;';
-                        break;
-                    }
-                }
-            }
-        }
 
-        if (!this.colors) { return style; }
-        for(i=0, len=this.colors.length; i<len; ++i) {
-            pair = this.colors[i];
-            var color = pair[0];
-            expression = pair[1];
-            if (py.PY_isTrue(py.evaluate(expression, context))) {
-                return style += 'color: ' + color + ';';
+        _.each(this.decoration, function(expr, decoration) {
+            if (py.PY_isTrue(py.evaluate(expr, context))) {
+                classnames += ' ' + decoration.replace('decoration', 'text');
             }
-            // TODO: handle evaluation errors
-        }
-        return style;
+        });
+        return classnames;
     },
     /**
      * Called after loading the list view's description, sets up such things
@@ -243,26 +226,13 @@ var ListView = View.extend( /** @lends instance.web.ListView# */ {
         this.fields_view = data;
         this.name = "" + this.fields_view.arch.attrs.string;
 
-        if (this.fields_view.arch.attrs.colors) {
-            this.colors = _(this.fields_view.arch.attrs.colors.split(';')).chain()
-                .compact()
-                .map(function(color_pair) {
-                    var pair = color_pair.split(':'),
-                        color = pair[0],
-                        expr = pair[1];
-                    return [color, py.parse(py.tokenize(expr)), expr];
-                }).value();
-        }
-
-        if (this.fields_view.arch.attrs.fonts) {
-            this.fonts = _(this.fields_view.arch.attrs.fonts.split(';')).chain().compact()
-                .map(function(font_pair) {
-                    var pair = font_pair.split(':'),
-                        font = pair[0],
-                        expr = pair[1];
-                    return [font, py.parse(py.tokenize(expr)), expr];
-                }).value();
-        }
+        // Retrieve the decoration defined on the model's list view
+        this.decoration = _.pick(this.fields_view.arch.attrs, function(value, key) {
+            return row_decoration.indexOf(key) >= 0;
+        });
+        this.decoration = _.mapObject(this.decoration, function(value) {
+            return py.parse(py.tokenize(value));
+        });
 
         this.setup_columns(this.fields_view.fields, this.grouped);
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index c5913ce43ed..e0044346686 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -729,7 +729,8 @@
 </t>
 <tr t-name="ListView.row"
         t-att-data-id="record.get('id')"
-        t-att-style="view.style_for(record)">
+        t-attf-style="#{(view.fonts || view.colors) ? view.style_for(record) : ''}"
+        t-attf-class="#{view.compute_decoration_classnames(record)}">
     <t t-set="asData" t-value="record.toForm().data"/>
     <t t-foreach="columns" t-as="column">
         <td t-if="column.meta"> </td>