[IMP] web: list: improve style of icon buttons

Buttons with icon and string attributes now have both their icon
and string displayed, whereas before only the icon was displayed
(the string was available as title).

We also force class btn-link to style buttons with icon, except if
another btn-xxx class is explicitely provided.

Part of task 2195254

2 files changed, 14 insertions, 2 deletions

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 68a449a9246..13deb446c1c 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -469,9 +469,18 @@ var ListRenderer = BasicRenderer.extend({
         var self = this;
         var nodeWithoutWidth = Object.assign({}, node);
         delete nodeWithoutWidth.attrs.width;
+
+        let extraClass = '';
+        if (node.attrs.icon) {
+            // if there is an icon, we force the btn-link style, unless a btn-xxx
+            // style class is explicitely provided
+            const btnStyleRegex = /\bbtn-(primary|secondary|link|success|info|warning|danger)\b/;
+            if (!btnStyleRegex.test(nodeWithoutWidth.attrs.class)) {
+                extraClass = 'btn-link o_icon_button';
+            }
+        }
         var $button = viewUtils.renderButtonFromNode(nodeWithoutWidth, {
-            extraClass: node.attrs.icon ? 'o_icon_button' : undefined,
-            textAsTitle: !!node.attrs.icon,
+            extraClass: extraClass,
         });
         this._handleAttributes($button, node);
         this._registerModifiers(node, record, $button);
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index a9076270ed2..4c0633cf0f3 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -42,6 +42,9 @@
                 width: 17px;
                 height: 17px;
             }
+            &.o_list_button .o_button_icon {
+                margin-right: 3px;
+            }
         }
 
         tfoot {