[IMP] web: make `boolean_button` more specific, and change label on hover

The widget now provide labels that depend on widget option "terminology".  For
each terminology, it provides four button labels that are shown depending on
the field's value and hover status on the button.

4 files changed, 41 insertions, 12 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index b497982ad05..9f72d573ecc 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -301,10 +301,10 @@
 .openerp .oe_button_box .oe_stat_button {
   display: inline-table;
 }
-.openerp .oe_button_box .oe_stat_button .o_stat_info:not(.is_true) .o_true {
+.openerp .oe_button_box .oe_stat_button:not(:hover) .o_stat_info > .o_hover {
   display: none !important;
 }
-.openerp .oe_button_box .oe_stat_button .o_stat_info.is_true .o_false {
+.openerp .oe_button_box .oe_stat_button:hover .o_stat_info > :not(.o_hover) {
   display: none !important;
 }
 .openerp button.oe_toggle_button {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index ca7b3d293ab..48e7893bf10 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -359,10 +359,11 @@ $sheet-padding: 16px
         text-align: right
         .oe_stat_button
             display: inline-table
-            .o_stat_info:not(.is_true) .o_true
-                display: none !important
-            .o_stat_info.is_true .o_false
-                display: none !important
+        // boolean_button rules: show the elements depending on hover status
+        .oe_stat_button:not(:hover) .o_stat_info > .o_hover
+            display: none !important
+        .oe_stat_button:hover .o_stat_info > :not(.o_hover)
+            display: none !important
     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 d0e614d57cd..8a51e8aa480 100644
--- a/addons/web/static/src/js/views/form_widgets.js
+++ b/addons/web/static/src/js/views/form_widgets.js
@@ -634,13 +634,32 @@ var FieldBoolean = common.AbstractField.extend({
     It is a read-only field that will display a simple string "<label of value>".
 */
 var FieldBooleanButton = common.AbstractField.extend({
-    template: 'BooleanButton',
+    className: 'o_stat_info',
+    init: function() {
+        this._super.apply(this, arguments);
+        switch (this.options["terminology"]) {
+            case "active":
+                this.string_true = _t("Active");
+                this.hover_true = _t("Deactivate");
+                this.string_false = _t("Inactive");
+                this.hover_false = _t("Activate");
+                break;
+            case "archive":
+                this.string_true = _t("Not Archived");
+                this.hover_true = _t("Archive");
+                this.string_false = _t("Archived");
+                this.hover_false = _t("Unarchive");
+                break;
+            default:
+                this.string_true = _t("On");
+                this.hover_true = _t("Switch Off");
+                this.string_false = _t("Off");
+                this.hover_false = _t("Switch On");
+        }
+    },
     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);
-        }
+        this.$el.html(QWeb.render("BooleanButton", {widget: this}));
     },
     is_false: function() {
         return false;
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index cb698908cd8..dc448fbae2d 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1436,6 +1436,15 @@
     <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"/>
+<t t-name="BooleanButton">
+    <t t-if="widget.get_value()">
+        <span class="o_stat_text text-success"><t t-esc="widget.string_true"/></span>
+        <span class="o_stat_text o_hover text-danger"><t t-esc="widget.hover_true"/></span>
+    </t>
+    <t t-if="!widget.get_value()">
+        <span class="o_stat_text text-danger"><t t-esc="widget.string_false"/></span>
+        <span class="o_stat_text o_hover text-success"><t t-esc="widget.hover_false"/></span>
+    </t>
+</t>
 
 </templates>