[ADD] web: add dynamic widget to toggle boolean button

4 files changed, 39 insertions, 0 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 10556c1e30f..91b8fe7e927 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -301,6 +301,12 @@
 .openerp .oe_button_box .oe_stat_button {
   display: inline-table;
 }
+.openerp .oe_button_box .oe_stat_button .o_stat_info:not(.is_true) > .o_stat_text.oe_true {
+  display: none;
+}
+.openerp .oe_button_box .oe_stat_button .o_stat_info.is_true > .o_stat_text.oe_false {
+  display: none;
+}
 .openerp button.oe_toggle_button {
   box-shadow: none;
   white-space: nowrap;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 64a73b8addd..f04f963ae37 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -359,6 +359,10 @@ $sheet-padding: 16px
         text-align: right
         .oe_stat_button
             display: inline-table
+            .o_stat_info:not(.is_true) > .o_stat_text.oe_true
+                display: none
+            .o_stat_info.is_true > .o_stat_text.oe_false
+                display: none
     button.oe_toggle_button
         box-shadow: none
         white-space: nowrap
diff --git a/addons/web/static/src/js/views/form_widgets.js b/addons/web/static/src/js/views/form_widgets.js
index 0d42f3d4469..f3fe595fec9 100644
--- a/addons/web/static/src/js/views/form_widgets.js
+++ b/addons/web/static/src/js/views/form_widgets.js
@@ -630,6 +630,29 @@ var FieldBoolean = common.AbstractField.extend({
 });
 
 /**
+    This widget is intended to be used on stat button boolean fields.
+    It is a read-only field that will display a simple string "<label of value>".
+*/
+var FieldBooleanButton = common.AbstractField.extend({
+    template: 'BooleanButton',
+    init: function() {
+        this._super.apply(this, arguments);
+        this.true_string = this.options['true'] || _t('True');
+        this.false_string = this.options['false'] || _t('False');
+    },
+    render_value: function() {
+        this._super();
+        this.$el.toggleClass("is_true", this.get_value());
+        if (this.node.attrs.class) {
+            this.$el.addClass(this.node.attrs.class);
+        }
+    },
+    is_false: function() {
+        return false;
+    },
+});
+
+/**
     The progressbar field expect a float from 0 to 100.
 */
 var FieldProgressBar = common.AbstractField.extend(common.ReinitializeFieldMixin, {
@@ -1597,6 +1620,7 @@ core.form_widget_registry
     .add('radio', FieldRadio)
     .add('reference', FieldReference)
     .add('boolean', FieldBoolean)
+    .add('boolean_button', FieldBooleanButton)
     .add('toggle_button', FieldToggleBoolean)
     .add('float', FieldFloat)
     .add('percentpie', FieldPercentPie)
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 9a73d59e03f..bbed4b59880 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1436,4 +1436,9 @@
     <img t-attf-src="#{_s}/web/static/src/img/icons/#{widget.icon}" t-att-alt="widget.string"/>
 </button>
 
+<div t-name="BooleanButton" class="o_stat_info is_true">
+    <span class="o_stat_text oe_true text-success"><t t-esc="widget.true_string"/></span>
+    <span class="o_stat_text oe_false text-danger"><t t-esc="widget.false_string"/></span>
+</div>
+
 </templates>