[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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user