[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:
qsm-odoo
2018-04-18 14:47:42 +02:00
parent 5ea27d471e
commit 374af562e8
3 changed files with 46 additions and 33 deletions
@@ -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);