[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)
This commit is contained in:
qsm-odoo
2018-07-27 12:36:54 +02:00
parent 6e223b9273
commit f4fbaf1efa
22 changed files with 192 additions and 155 deletions
@@ -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