Add visual context on tree view

issue8562
review261951002

CHANGELOG

@@ -1,3 +1,4 @@
+* Support visual context on tree view
 * Support multiselection field
 * Support dot notation on PYSON Eval
 * Manage sequence

src/sao.less

@@ -66,8 +66,12 @@
     white-space: nowrap;
 }
 
-.table-row-variant(selected, @state-info-bg);
-.list-group-item-variant(selected, @state-info-bg, @state-info-text);
+.list-group-item-variant(selected; @state-info-bg; @state-info-text);
+.table-row-variant(selected; @state-info-bg);
+/* Duplicate bootstrap variant to have precedence over selected */
+.table-row-variant(success; @state-success-bg);
+.table-row-variant(warning; @state-warning-bg);
+.table-row-variant(danger; @state-danger-bg);
 
 .tab-form, .tab-board {
     nav.toolbar {

src/view/tree.js

@@ -1244,6 +1244,18 @@
                     break;
             }
 
+            function apply_visual(el, visual) {
+                ['muted', 'success', 'warning', 'danger'].forEach(
+                    function(name) {
+                        var klass = name == 'muted' ? 'text-muted' : name;
+                        if (name == visual) {
+                            el.addClass(klass);
+                        } else {
+                            el.removeClass(klass);
+                        }
+                    });
+            }
+
             if (this._drawed_record !== this.record.identity) {
                 for (var i = 0; i < this.tree.columns.length; i++) {
                     var column = this.tree.columns[i];
@@ -1281,6 +1293,8 @@
                             }
                         }
                     }
+                    apply_visual(
+                        td, this.record.expr_eval(column.attributes.visual));
                     if ((column.header.is(':hidden') && thead_visible) ||
                         column.header.css('display') == 'none') {
                         td.hide();
@@ -1325,6 +1339,8 @@
                     update_expander();
                 }
             }
+            apply_visual(
+                this.el, this.record.expr_eval(this.tree.attributes.visual));
             if (this.record.deleted || this.record.removed) {
                 this.el.css('text-decoration', 'line-through');
             } else {