[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

2 files changed, 43 insertions, 0 deletions

diff --git a/addons/web/static/src/js/widgets/ribbon.js b/addons/web/static/src/js/widgets/ribbon.js
new file mode 100644
index 00000000000..719b98e21b6
--- /dev/null
+++ b/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;
+});
\ No newline at end of file
diff --git a/addons/web/static/src/xml/ribbon.xml b/addons/web/static/src/xml/ribbon.xml
new file mode 100644
index 00000000000..f8d3efdbb72
--- /dev/null
+++ b/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>
\ No newline at end of file