[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>

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);

addons/web/static/src/scss/ribbon.scss

@@ -15,18 +15,25 @@
     & span {
         z-index: 1;
         position: absolute;
-        display: block;
+        display: grid;
+        align-items: center;
         width: 225px;
-        padding: 15px 40px;
+        height: 48px;
+        padding: 0 44px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
         color: #fff;
         font: 700 18px/1 'Lato', sans-serif;
         text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
         text-transform: uppercase;
         text-align: center;
-        white-space: nowrap;
         overflow: hidden;
-        text-overflow: ellipsis;
+        user-select: none;
+        &.o_small {
+            font-size: 12px;
+        }
+        &.o_medium {
+            font-size: 15px;
+        }
     }
 
     &-top-right {

addons/web/static/src/xml/ribbon.xml

@@ -3,7 +3,9 @@
 
     <t t-name="web.ribbon">
         <div class="ribbon ribbon-top-right">
-            <span t-att-class="widget.bgColor ? widget.bgColor : 'bg-success'"><t t-esc="widget.text"/></span>
+            <span t-att-class="widget.className" t-att-title="widget.tooltip">
+                <t t-esc="widget.text"/>
+            </span>
         </div>
     </t>