[REF] web: review button rendering
Button rendering was most of the time wrong, incomplete or performed with duplicated code. This led to: - Both primary and default classes were put on some statusbar buttons - Icons were not able to be put for statusbar buttons - Stat buttons and list buttons code were duplicated - Classes and style were added twice - ...
This commit is contained in:
@@ -356,6 +356,9 @@ var BasicRenderer = AbstractRenderer.extend({
|
||||
* @param {Object} node
|
||||
*/
|
||||
_handleAttributes: function ($el, node) {
|
||||
if ($el.is('button')) {
|
||||
return;
|
||||
}
|
||||
if (node.attrs.class) {
|
||||
$el.addClass(node.attrs.class);
|
||||
}
|
||||
@@ -514,6 +517,35 @@ var BasicRenderer = AbstractRenderer.extend({
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Renders a button according to a given node element.
|
||||
*
|
||||
* @private
|
||||
* @param {Object} node
|
||||
* @param {Object} [options]
|
||||
* @param {string} [options.extraClass]
|
||||
* @param {boolean} [options.textAsTitle=false]
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
_renderButtonFromNode: function (node, options) {
|
||||
var btnOptions = {
|
||||
attrs: _.omit(node.attrs, 'icon', 'string', 'type', 'name', 'attrs', 'modifiers', 'options'),
|
||||
icon: node.attrs.icon,
|
||||
};
|
||||
if (options && options.extraClass) {
|
||||
var classes = btnOptions.attrs.class ? btnOptions.attrs.class.split(' ') : [];
|
||||
btnOptions.attrs.class = _.uniq(classes.concat(options.extraClass.split(' '))).join(' ');
|
||||
}
|
||||
var str = (node.attrs.string || '').replace(/_/g, '');
|
||||
if (str) {
|
||||
if (options && options.textAsTitle) {
|
||||
btnOptions.attrs.title = str;
|
||||
} else {
|
||||
btnOptions.text = str;
|
||||
}
|
||||
}
|
||||
return dom.renderButton(btnOptions);
|
||||
},
|
||||
/**
|
||||
* Instantiates the appropriate AbstractField specialization for the given
|
||||
* node and prepares its rendering and addition to the DOM. Indeed, the
|
||||
|
||||
@@ -356,10 +356,11 @@ var FormRenderer = BasicRenderer.extend({
|
||||
|
||||
// Add the dropdown with folded buttons if any
|
||||
if (folded_buttons.length) {
|
||||
$result.append($("<button>", {
|
||||
type: 'button',
|
||||
'class': "btn btn-sm oe_stat_button o_button_more dropdown-toggle",
|
||||
'data-toggle': "dropdown",
|
||||
$result.append(dom.renderButton({
|
||||
attrs: {
|
||||
class: 'oe_stat_button o_button_more dropdown-toggle',
|
||||
'data-toggle': 'dropdown',
|
||||
},
|
||||
text: _t("More"),
|
||||
}));
|
||||
|
||||
@@ -392,9 +393,8 @@ var FormRenderer = BasicRenderer.extend({
|
||||
* @returns {jQueryElement}
|
||||
*/
|
||||
_renderHeaderButton: function (node) {
|
||||
var $button = $('<button>')
|
||||
.text(node.attrs.string)
|
||||
.addClass('btn btn-sm btn-default');
|
||||
var $button = this._renderButtonFromNode(node);
|
||||
|
||||
this._addOnClickAction($button, node);
|
||||
this._handleAttributes($button, node);
|
||||
this._registerModifiers(node, this.state, $button);
|
||||
@@ -582,18 +582,9 @@ var FormRenderer = BasicRenderer.extend({
|
||||
* @returns {jQueryElement}
|
||||
*/
|
||||
_renderStatButton: function (node) {
|
||||
var $button = $('<button>').addClass('btn btn-sm oe_stat_button');
|
||||
if (node.attrs.icon) {
|
||||
$('<div>')
|
||||
.addClass('fa fa-fw o_button_icon')
|
||||
.addClass(node.attrs.icon)
|
||||
.appendTo($button);
|
||||
}
|
||||
if (node.attrs.string) {
|
||||
$('<span>')
|
||||
.text(node.attrs.string)
|
||||
.appendTo($button);
|
||||
}
|
||||
var $button = this._renderButtonFromNode(node, {
|
||||
extraClass: 'oe_stat_button',
|
||||
});
|
||||
$button.append(_.map(node.children, this._renderNode.bind(this)));
|
||||
this._addOnClickAction($button, node);
|
||||
this._handleAttributes($button, node);
|
||||
@@ -633,11 +624,7 @@ var FormRenderer = BasicRenderer.extend({
|
||||
* @returns {jQueryElement}
|
||||
*/
|
||||
_renderTagButton: function (node) {
|
||||
var $button = dom.renderButton({
|
||||
attrs: _.omit(node.attrs, 'icon', 'string'),
|
||||
icon: node.attrs.icon,
|
||||
text: (node.attrs.string || '').replace(/_/g, ''),
|
||||
});
|
||||
var $button = this._renderButtonFromNode(node);
|
||||
$button.append(_.map(node.children, this._renderNode.bind(this)));
|
||||
this._addOnClickAction($button, node);
|
||||
this._handleAttributes($button, node);
|
||||
|
||||
@@ -312,16 +312,10 @@ var ListRenderer = BasicRenderer.extend({
|
||||
* @returns {jQuery} a <button> element
|
||||
*/
|
||||
_renderButton: function (record, node) {
|
||||
var $button = $('<button>', {
|
||||
type: 'button',
|
||||
title: node.attrs.string,
|
||||
var $button = this._renderButtonFromNode(node, {
|
||||
extraClass: node.attrs.icon ? 'o_icon_button' : undefined,
|
||||
textAsTitle: !!node.attrs.icon,
|
||||
});
|
||||
if (node.attrs.icon) {
|
||||
$button.addClass('o_icon_button');
|
||||
$button.append($('<i>', {class: 'fa ' + node.attrs.icon}));
|
||||
} else {
|
||||
$button.text(node.attrs.string);
|
||||
}
|
||||
this._handleAttributes($button, node);
|
||||
this._registerModifiers(node, record, $button);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user