[ADD] web: Add new widget to toogle a boolean with a slider

Purpose
=======

Currently, it's not possible to activate a boolean on a non-editable list view without adding 2 buttons linked to a python method. These buttons aren't aligned and the result is not pretty.

This commit adds a new widget that allows to toggle a boolean record by record by clicking on the slider.

addons/web/static/src/js/fields/basic_fields.js

@@ -1506,6 +1506,52 @@ var FieldBooleanButton = AbstractField.extend({
     },
 });
 
+var BooleanToggle = FieldBoolean.extend({
+    events: {
+        'click': '_onClick'
+    },
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     * @private
+     */
+    _render: function () {
+        this._super.apply(this, arguments);
+        this._renderToggleSwitch();
+    },
+
+    /**
+     * Display toggle switch
+     *
+     * @private
+     */
+    _renderToggleSwitch: function () {
+        this.$el.addClass("o_boolean_toggle");
+        var $div = $('<div class="slider"></div>');
+        $div.insertAfter(this.$("input[type=checkbox]"));
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Toggle active value
+     *
+     * @private
+     * @param {MouseEvent} event
+     */
+    _onClick: function (event) {
+        event.stopPropagation();
+        this._setValue(!this.value);
+        this.$el.closest(".o_data_row").toggleClass('text-muted', this.value);
+    },
+
+});
+
 var StatInfo = AbstractField.extend({
     supportedFieldTypes: ['integer', 'float'],
 
@@ -2258,6 +2304,7 @@ return {
     FieldBinaryImage: FieldBinaryImage,
     FieldBoolean: FieldBoolean,
     FieldBooleanButton: FieldBooleanButton,
+    BooleanToggle: BooleanToggle,
     FieldChar: FieldChar,
     FieldDate: FieldDate,
     FieldDateTime: FieldDateTime,

addons/web/static/src/js/fields/field_registry.js

@@ -41,6 +41,7 @@ registry
     .add('state_selection', basic_fields.StateSelectionWidget)
     .add('kanban_state_selection', basic_fields.StateSelectionWidget)
     .add('boolean_button', basic_fields.FieldBooleanButton)
+    .add('boolean_toggle', basic_fields.BooleanToggle)
     .add('statinfo', basic_fields.StatInfo)
     .add('percentpie', basic_fields.FieldPercentPie)
     .add('float_time', basic_fields.FieldFloatTime)
@@ -70,5 +71,4 @@ registry
 // Special fields
 registry
     .add('timezone_mismatch', special_fields.FieldTimezoneMismatch);
-
 });

addons/web/static/src/less/webclient.less

@@ -88,3 +88,45 @@ a {
 .oe_highlight {
     .btn-primary;
 }
+
+// Boolean Toggle widget
+div.o_boolean_toggle {
+    position: relative;
+    display: inline-block;
+    width: 32px !important;
+    height: 18px;
+
+    > input {
+        display: none;
+    }
+
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #a0a0a0;
+        border-radius: 24px;
+
+        &:before {
+            position: absolute;
+            content: "";
+            height: 12px;
+            width: 12px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            border-radius: 50%;
+        }
+    }
+
+    > input:checked + .slider {
+        background-color: @odoo-brand-optional;
+
+        &:before {
+            .translate(14px; 0px); 
+        }
+    }
+}

addons/web/static/tests/fields/basic_fields_tests.js

@@ -353,6 +353,24 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.module('FieldBooleanToggle');
+
+    QUnit.test('use boolean toggle widget in form view', function (assert) {
+        assert.expect(2);
+
+        var form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form><field name="bar" widget="boolean_toggle"/></form>',
+            res_id: 2,
+        });
+
+        assert.strictEqual(form.$(".o_checkbox.o_boolean_toggle").length, 1, "Boolean toggle widget applied to boolean field");
+        assert.strictEqual(form.$(".o_checkbox.o_boolean_toggle").find(".slider").length, 1, "Boolean toggle contains slider to toggle");
+        form.destroy();
+    });
+
     QUnit.module('FieldToggleButton');
 
     QUnit.test('use toggle_button in list view', function (assert) {