[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.
This commit is contained in:
Ankit Sathvara
2017-07-07 16:18:23 +02:00
committed by Yannick Tivisse
parent c9f0352ac6
commit f41bd82f66
4 changed files with 108 additions and 1 deletions
@@ -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,