[ADD] web: add a new ribbon widget (POC)

Purpose
=======

The ribbon widget adds a ribbon on the top right of a form
to make some status more visible.

You have to specify the text attribute to show the text on
the ribbon. You can also specify a bg_color attribute to
color the background with a bootstrap background color class.

Note: This is an ugly draft of the final widget, that is supposed
to land in master in a few days. As this PR brings a lot of
functional changes in several files, it has become quite difficult
to maintain it over the days.

The final responsive version will come with:
https://www.odoo.com/web#id=2032621&action=333&active_id=965&model=project.task&view_type=form&menu_id=4720

addons/web/static/src/js/widgets/ribbon.js

@@ -0,0 +1,35 @@
+odoo.define('web.ribbon', function (require) {
+    'use strict';
+
+    /**
+     * This widget adds a ribbon on the top right side of the form
+     *
+     *      - You can specify the text with the text 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,
+     *        bg-light, bg-dark, bg-white)
+     *
+     *        If you don't specify the bg_color attribute the bg-success class will be used
+     *        by default.
+     */
+
+    var widgetRegistry = require('web.widget_registry');
+    var Widget = require('web.Widget');
+
+    var RibbonWidget = Widget.extend({
+        template: 'web.ribbon',
+        xmlDependencies: ['/web/static/src/xml/ribbon.xml'],
+
+        init: function (parent, data, options) {
+            this._super.apply(this, arguments);
+            this.text = options.attrs.text;
+            this.bgColor = options.attrs.bg_color;
+        }
+
+    });
+
+    widgetRegistry.add('web_ribbon', RibbonWidget);
+
+    return RibbonWidget;
+});

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<template>
+
+    <t t-name="web.ribbon">
+    	<span t-att-class="'badge badge-primary ' + (widget.bgColor ? widget.bgColor : 'bg-success')" style="position: absolute;"><t t-esc="widget.text"/></span>
+    </t>
+
+</template>

addons/web/views/webclient_templates.xml

@@ -273,6 +273,7 @@
 
         <script type="text/javascript" src="/web/static/src/js/widgets/dropdown_menu.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/pie_chart.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/ribbon.js"></script>
         <script type="text/javascript" src="/web/static/src/js/apps.js"></script>
 
         <script type="text/javascript" src="/web/static/src/js/fields/abstract_field.js"></script>