From f4fbaf1efae11e8bd3b1a2938ab765d391764a1b Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 24 May 2018 16:56:42 +0200
Subject: [REF] web, *: BS4, use custom BS4 checkbox everywhere

Before this commit, Odoo used checkboxes in three different ways:

- A simple <input type="checkbox"/>, mainly in the frontend. The style
  is browser dependant.

- Same as above but with the BS3, checkbox structure. The style is still
  the same, but the alignement is supposed to be better (which is not
  always the case).

- The Odoo official structure:
	```
	<div class="o_checkbox">
	    <input type="checkbox"/>
	    <span/>
	</div>
	```
  which allows to have a cross-browser checkbox style and correct
  alignements.

The goal after this commit is to only use the BS4 *custom* checkbox
structure to achieve the same goal as our official structure (and
remove that one):

```
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">...</label>
</div>
```

/!\ Labels are now required (use a zero-width space if necessary)
---
 addons/web/static/src/js/fields/basic_fields.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'addons/web/static/src/js/fields/basic_fields.js')

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index b48ea9022f9..edea04e0e48 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -701,8 +701,8 @@ var FieldBoolean = AbstractField.extend({
         // The formatValue of boolean fields renders HTML elements similar to
         // the one rendered by the widget itself. Even though the event might
         // have been fired on the non-widget version of this field, we can still
-        // test the presence of its o_checkbox class.
-        if (activated && options && options.event && $(options.event.target).parents('.o_checkbox').length) {
+        // test the presence of its custom class.
+        if (activated && options && options.event && $(options.event.target).closest('.custom-control.custom-checkbox').length) {
             this._setValue(!this.value);  // Toggle the checkbox
         }
         return activated;
@@ -737,6 +737,15 @@ var FieldBoolean = AbstractField.extend({
         }
         return rendered;
     },
+    /**
+     * Associates the 'for' attribute of the internal label.
+     *
+     * @override
+     */
+    setIDForLabel: function (id) {
+        this._super.apply(this, arguments);
+        this.$('.custom-control-label').attr('for', id);
+    },
 
     //--------------------------------------------------------------------------
     // Private
-- 
cgit v1.2.3