[ADD] web, *: add rainbowification

This commit introduces the 'rainbowification' feature to the web client
(and to some affected addons).  This feature is essentially a way to
display a nice friendly message when some business event happens.  For
example, a encouraging message is displayed when the user clear her/his
inbox, or when a salesman closes a deal.

The mechanism currently only displays a 'rainbowman', but could be
extended later to add other kind of animation.

There are a few different ways to display a 'rainbowman':
- any JS code can simply trigger_up an event ('show_effect') with some
  options: for example
    this.trigger_up('show_effect', {
        type: 'rainbow_man',
        fadeout: 'no',
        message: $done,
        click_close: false,
    });
- an action returned by the server can have an 'effect' key, with some
  options
- the do_execute_action method accepts a 'effect' option.  This is
  useful when one wants to specify a rainbow on an action button in a
  form view

Joint work with: dbh <dbh@odoo.com>, ged <ged@odoo.com>

1 files changed, 52 insertions, 0 deletions

diff --git a/addons/web/static/src/xml/rainbow_man.xml b/addons/web/static/src/xml/rainbow_man.xml
new file mode 100644
index 00000000000..744912a9a94
--- /dev/null
+++ b/addons/web/static/src/xml/rainbow_man.xml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="rainbow_man.notification">
+        <div class="o_reward">
+            <svg class="o_reward_rainbow" viewBox="0 0 340 180">
+                <path d="M270,170a100,100,0,0,0-200,0" style="stroke:#FF9E80;"/>
+                <path d="M290,170a120,120,0,0,0-240,0" style="stroke:#FFE57F;"/>
+                <path d="M310,170a140,140,0,0,0-280,0" style="stroke:#80D8FF;"/>
+                <path d="M330,170a160,160,0,0,0-320,0" style="stroke:#c794ba;"/>
+            </svg>
+            <div class="o_reward_stars" t-foreach="[1, 2, 3, 4]" t-as="star">
+                <t t-call="rainbow_man.star">
+                    <t t-set="class" t-value="star"/>
+                </t>
+            </div>
+            <div class="o_reward_face_group">
+                <svg style="display:none">
+                    <symbol id="thumb">
+                        <path d="M10,52 C6,51 3,48 3,44 C2,42 3,39 5,38 C3,36 2,34 2,32 C2,29 3,27 5,26 C3,24 2,21 2,19 C2,15 7,12 10,12 L23,12 C23,11 23,11 23,11 L23,10 C23,8 24,6 25,4 C27,2 29,2 31,2 C33,2 35,2 36,4 C38,5 39,7 39,10 L39,38 C39,41 37,45 35,47 C32,50 28,51 25,52 L10,52 L10,52 Z" fill="#FBFBFC"/>
+                        <polygon fill="#ECF1FF" points="25 11 25 51 5 52 5 12"/>
+                        <path d="M31,0 C28,0 26,1 24,3 C22,5 21,7 21,10 L10,10 C8,10 6,11 4,12 C2,14 1,16 1,19 C1,21 1,24 2,26 C1,27 1,29 1,32 C1,34 1,36 2,38 C1,40 0,42 1,45 C1,50 5,53 10,54 L25,54 C29,54 33,52 36,49 C39,46 41,42 41,38 L41,10 C41,4 36,3.38176876e-16 31,0 M31,4 C34,4 37,6 37,10 L37,38 C37,41 35,44 33,46 C31,48 28,49 25,50 L10,50 C7,49 5,47 5,44 C4,41 6,38 9,37 L9,37 C6,37 5,35 5,32 C5,28 6,26 9,26 L9,26 C6,26 5,22 5,19 C5,16 8,14 11,14 L23,14 C24,14 25,12 25,11 L25,10 C25,7 28,4 31,4" id="Shape" fill="#A1ACBA"/>
+                    </symbol>
+                </svg>
+                <span class="o_reward_face" t-attf-style="background-image:url(#{widget.options.img_url});"/>
+
+                <svg class="o_reward_thumbup" viewBox="0 0 42 60">
+                    <use href="#thumb"/>
+                </svg>
+
+                <div class="o_reward_msg_container">
+                    <svg class="o_reward_thumb_right" viewBox="0 0 100 55">
+                        <use href="#thumb" transform="scale(-1, 1.2) rotate(-90) translate(-42,-60)"/>
+                    </svg>
+                    <div class="o_reward_msg">
+                        <div class="o_reward_msg_card">
+                            <div class="o_reward_msg_content"/>
+                            <div class="o_reward_shadow_container">
+                                <div class="o_reward_shadow"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </t>
+    <t t-name="rainbow_man.star">
+        <svg t-attf-class="star{{ star }}" width="35px" height="34px" viewBox="0 0 35 34">
+            <path fill="#fff" d="M33,15.9 C26.3557814,13.6951256 21.1575294,8.45974313 19,1.8 C19,1.24771525 18.5522847,0.8 18,0.8 C17.4477153,0.8 17,1.24771525 17,1.8 C14.6431206,8.69377078 9.02624222,13.9736364 2,15.9 C1.36487254,15.9 0.85,16.4148725 0.85,17.05 C0.85,17.6851275 1.36487254,18.2 2,18.2 C8.6215326,20.3844521 13.8155479,25.5784674 16,32.2 C16,32.7522847 16.4477153,33.2 17,33.2 C17.5522847,33.2 18,32.7522847 18,32.2 C20.3568794,25.3062292 25.9737578,20.0263636 33,18.1 C33.6351275,18.1 34.15,17.5851275 34.15,16.95 C34.15,16.3148725 33.6351275,15.8 33,15.8"></path>
+        </svg>
+    </t>
+</templates>