[IMP] web: web_ribbon: handle longer labels

This commit implements a simple heuristic to display longer texts
inside the web_ribbon widget: we adapt the font size according to
the text length, and we tolerate to display it on several lines.

This commit also allows to specify a tooltip in the xml (with
tooltip attribute).

Task 2185023

closes odoo/odoo#44279

Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

1 files changed, 16 insertions, 3 deletions

diff --git a/addons/web/static/src/js/widgets/ribbon.js b/addons/web/static/src/js/widgets/ribbon.js
index 37ebdbf75c1..a682c65a0af 100644
--- a/addons/web/static/src/js/widgets/ribbon.js
+++ b/addons/web/static/src/js/widgets/ribbon.js
@@ -5,6 +5,7 @@ odoo.define('web.ribbon', function (require) {
      * This widget adds a ribbon on the top right side of the form
      *
      *      - You can specify the text with the title attribute.
+     *      - You can specify the tooltip with the tooltip attribute.
      *      - You can specify a background color for the ribbon with the bg_color attribute
      *        using bootstrap classes :
      *        (bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info,
@@ -21,12 +22,24 @@ odoo.define('web.ribbon', function (require) {
         template: 'web.ribbon',
         xmlDependencies: ['/web/static/src/xml/ribbon.xml'],
 
+        /**
+         * @param {Object} options
+         * @param {string} options.attrs.title
+         * @param {string} options.attrs.text same as title
+         * @param {string} options.attrs.tooltip
+         * @param {string} options.attrs.bg_color
+         */
         init: function (parent, data, options) {
             this._super.apply(this, arguments);
             this.text = options.attrs.title || options.attrs.text;
-            this.bgColor = options.attrs.bg_color;
-        }
-
+            this.tooltip = options.attrs.tooltip;
+            this.className = options.attrs.bg_color ? options.attrs.bg_color : 'bg-success';
+            if (this.text.length > 15) {
+                this.className += ' o_small';
+            } else if (this.text.length > 10) {
+                this.className += ' o_medium';
+            }
+        },
     });
 
     widgetRegistry.add('web_ribbon', RibbonWidget);