From 374af562e86d8f534665ff793478f7a8b0f4ede2 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 16 Feb 2018 14:58:20 +0100
Subject: [PATCH] [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
- ...
---
.../src/js/views/basic/basic_renderer.js | 32 +++++++++++++++++
.../static/src/js/views/form/form_renderer.js | 35 ++++++-------------
.../static/src/js/views/list/list_renderer.js | 12 ++-----
3 files changed, 46 insertions(+), 33 deletions(-)
diff --git a/addons/web/static/src/js/views/basic/basic_renderer.js b/addons/web/static/src/js/views/basic/basic_renderer.js
index 80cdd05bff5c..c05d467052e2 100644
--- a/addons/web/static/src/js/views/basic/basic_renderer.js
+++ b/addons/web/static/src/js/views/basic/basic_renderer.js
@@ -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
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index eb9ea1f59073..3f8c343d599d 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -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);
diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index 54f556e474b5..a304bd0a597f 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -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);
--
GitLab