From f0e6486e13ad44df5eaf96b11f96c58e14e8be6b Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Mon, 24 Jan 2022 08:03:33 +0000
Subject: [PATCH] [REF] web: update rainbow man and revamp scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prior this commit the rainbow man was built with many separate SVGs and
a lot of raw SCSS.
This commit refactors the rainbow man in order to use less raw SCSS and
more SVG attributes instead.

It also improves the overall animation with a little rotation of the
rainbow man's head during the fade in animation.

task-2742831

closes odoo/odoo#83403

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../static/src/core/effects/rainbow_man.scss  | 308 ++++++------------
 .../static/src/core/effects/rainbow_man.xml   |  95 +++---
 2 files changed, 154 insertions(+), 249 deletions(-)

diff --git a/addons/web/static/src/core/effects/rainbow_man.scss b/addons/web/static/src/core/effects/rainbow_man.scss
index f0a9ba8db05..efcba1000b1 100644
--- a/addons/web/static/src/core/effects/rainbow_man.scss
+++ b/addons/web/static/src/core/effects/rainbow_man.scss
@@ -1,256 +1,146 @@
 .o_reward {
-  $reward-size: 400px;
-  $reward-size-mobile: 300px;
-  $reward-text-color: #727880;
-  $reward-base-time: 1.4s;
+    $-reward-base-time: 1.4s;
 
-  will-change: transform;
-  z-index: $zindex-modal;
-  padding: 50px;
-  margin: -5% auto 0 (-$reward-size / 2);
-  @include media-breakpoint-down(sm) {
-    margin: -5% auto 0 (-$reward-size-mobile / 2);
-  }
-  background-image: -webkit-radial-gradient(#edeff4 30%, transparent 70%, transparent);
-  background-image: -o-radial-gradient(#edeff4 30%, transparent 70%, transparent);
-  background-image: radial-gradient(#edeff4 30%, transparent 70%, transparent);
+    will-change: transform;
+    z-index: $zindex-modal;
+    animation: reward-fading $-reward-base-time * 0.5 ease-in-out forwards;
 
-  animation: reward-fading ($reward-base-time * 0.5) ease-in-out 0s 1 normal forwards;
-  @include o-position-absolute(20%, auto, auto, 50%);
-  @include size($reward-size, $reward-size);
-  @include media-breakpoint-down(sm) {
-    @include size($reward-size-mobile, $reward-size-mobile);
-  }
+    .o_reward_box {
+        transform-box: fill-box;
+    }
 
-  &.o_reward_fading {
-    display: block;
-    animation: reward-fading-reverse ($reward-base-time * 0.4) ease-in-out 0s 1 normal forwards;
+    &.o_reward_fading {
+        animation: reward-fading-reverse $-reward-base-time * 0.4 ease-in-out forwards;
+
+        .o_reward_face_group {
+            animation: reward-jump-reverse $-reward-base-time * 0.4 ease-in-out forwards;
+        }
+
+        .o_reward_rainbow_line {
+            animation: reward-rainbow-reverse $-reward-base-time * 0.5 ease-out forwards;
+        }
+    }
+
+    .o_reward_rainbow_man {
+        max-width: 400px;
+    }
+
+    .o_reward_rainbow_line {
+        animation: reward-rainbow $-reward-base-time * 0.8 ease-out 1 forwards;
+    }
 
     .o_reward_face_group {
-      animation: reward-jump-reverse ($reward-base-time * 0.4) ease-in-out 0s 1 normal forwards;
+        animation: reward-jump $-reward-base-time * 0.8 ease-in-out 1;
     }
 
-    .o_reward_rainbow {
-      path {
-        animation: reward-rainbow-reverse ($reward-base-time * 0.5) ease-out 0s 1 normal forwards;
-      }
-    }
-  }
-
-  .o_reward_face,
-  .o_reward_stars,
-  .o_reward_shadow,
-  .o_reward_thumbup {
-    margin: 0 auto;
-  }
-
-  .o_reward_rainbow {
-    path {
-      stroke-dasharray: 600 600;
-      stroke-dashoffset: -600;
-      fill: none;
-      stroke-linecap: round;
-      stroke-width: 21px;
-      animation: reward-rainbow $reward-base-time ease-out 0s 1 normal forwards;
-    }
-  }
-
-  .o_reward_face_group {
-    transform-origin: center;
-    animation: reward-jump $reward-base-time * 0.8 ease-in-out 0s 1 normal none running;
-    @include o-position-absolute(6%, 0, 0, 0);
-    @include size(100%, 60%);
-  }
-
-  .o_reward_face {
-    display: block;
-    top: 42%;
-    position: relative;
-    border-radius: 100%;
-    background: center center / contain no-repeat;
-    animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite alternate;
-    @include size(34%, 56.67%);
-  }
-
-  .o_reward_stars {
-    display: block;
-    @include size($reward-size * 0.75, $reward-size / 2);
-    @include media-breakpoint-down(sm) {
-      @include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
-    }
-    @include o-position-absolute(18%, 7%);
-
-    svg {
-      transform-origin: center center;
-      @include o-position-absolute(28%, $left: 3%);
-      animation: reward-stars $reward-base-time ease-in-out 0s infinite alternate-reverse;
-
-      &.star2,
-      &.star4 {
-        animation: reward-stars ($reward-base-time * 1.2) ease-in-out 0s infinite alternate;
-      }
-
-      &.star2 {
-        left: 20%;
-        top: 2%;
-      }
-
-      &.star3 {
-        left: 49%;
-        top: 6%;
-      }
-
-      &.star4 {
-        left: 70%;
-        top: 27%;
-      }
-    }
-  }
-
-  .o_reward_thumbup {
-    width: 40px;
-    display: block;
-    animation: reward-scale ($reward-base-time * 0.5) ease-in-out 0s infinite alternate;
-    @include o-position-absolute(63%, auto, auto, 65%);
-  }
-
-  .o_reward_msg_container {
-    will-change: transform;
-    padding-top: 11%;
-    width: 70%;
-    margin-left: 15%;
-
-    // Translate before animate
-    transform: translateY(5px);
-
-    animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite
-      alternate-reverse;
-    @include o-position-absolute(85%, auto, auto, 0%);
-
-    .o_reward_thumb_right {
-      height: 40px;
-      z-index: 1;
-      @include o-position-absolute(0, auto, auto, 16%);
+    .o_reward_face_wrap {
+        animation: reward-rotate $-reward-base-time * 0.8 cubic-bezier(.51,.92,.24,1.15) 1;
     }
 
-    .o_reward_msg {
-      margin-left: 7%;
-      margin-top: -9.5%;
-      padding: 25px 15px 20px;
-      background: white;
-      border: 1px solid #ecf1ff;
-      border-top-width: 0;
-      display: inline-block;
-
-      // Reset margins for first and penultimate childs (the last one is shadow)
-      *:first-child {
-        margin-top: 0;
-      }
+    .o_reward_face {
+        animation: reward-float $-reward-base-time ease-in-out $-reward-base-time infinite alternate;
     }
 
-    .o_reward_msg_content {
-      position: relative;
-      font-family: sans-serif;
-      text-align: left;
-      color: $reward-text-color;
+    .o_reward_star_01, .o_reward_star_03 {
+        animation: reward-stars $-reward-base-time ease-in-out infinite alternate-reverse;
+    }
+
+    .o_reward_star_02, .o_reward_star_04 {
+        animation: reward-stars $-reward-base-time * 1.2 ease-in-out infinite alternate;
+    }
+
+    .o_reward_thumbup {
+        animation: reward-scale $-reward-base-time * 0.5 ease-in-out 0s infinite alternate;
     }
 
     .o_reward_shadow_container {
-      transform: translateY(0px) rotateZ(0);
-      animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite alternate;
+        animation: reward-float $-reward-base-time ease-in-out infinite alternate;
     }
 
     .o_reward_shadow {
-      @include size(100%, 12px);
-      background-color: #e7eaf0;
-      border-radius: 100%;
-      transform: scale(0.8) rotateZ(0);
-      animation: reward-scale $reward-base-time ease-in-out $reward-base-time infinite alternate;
-      @include o-position-absolute(auto, auto, -40px, 0);
+        animation: reward-scale $-reward-base-time ease-in-out infinite alternate;
+    }
+
+    .o_reward_msg_container {
+        aspect-ratio: 1 / 1;
+        animation: reward-float-reverse $-reward-base-time ease-in-out infinite alternate-reverse;
     }
-  }
 }
 
 @keyframes reward-fading {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
 }
 
 @keyframes reward-fading-reverse {
-  100% {
-    opacity: 0;
-  }
+    100% {
+        opacity: 0;
+    }
 }
 
 @keyframes reward-jump {
-  0% {
-    transform: scale(0.5);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  to {
-    transform: scale(1);
-  }
+    0% {
+        transform: scale(0.5);
+    }
+    50% {
+        transform: scale(1.05);
+    }
 }
 
 @keyframes reward-jump-reverse {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  to {
-    transform: scale(0.5);
-  }
+    50% {
+        transform: scale(1.05);
+    }
+    to {
+        transform: scale(0.5);
+    }
 }
 
 @keyframes reward-rainbow {
-  to {
-    stroke-dashoffset: 0;
-  }
+    to {
+        stroke-dashoffset: 0;
+    }
 }
 
 @keyframes reward-rainbow-reverse {
-  from {
-    stroke-dashoffset: 0;
-  }
-  to {
-    stroke-dashoffset: -600;
-  }
+    from {
+        stroke-dashoffset: 0;
+    }
 }
 
 @keyframes reward-float {
-  from {
-    transform: translateY(0px);
-  }
-  to {
-    transform: translateY(5px);
-  }
+    to {
+        transform: translateY(5px);
+    }
+}
+
+@keyframes reward-float-reverse {
+    from {
+        transform: translateY(5px);
+    }
 }
 
 @keyframes reward-stars {
-  from {
-    transform: scale(0.3) rotate(0deg);
-  }
-  50% {
-    transform: scale(1) rotate(20deg);
-  }
-  to {
-    transform: scale(0.3) rotate(80deg);
-  }
+    from {
+        transform: scale(0.3) rotate(0deg);
+    }
+    50% {
+        transform: scale(1) rotate(20deg);
+    }
+    to {
+        transform: scale(0.3) rotate(80deg);
+    }
 }
 
 @keyframes reward-scale {
-  from {
-    transform: scale(0.8);
-  }
-  to {
-    transform: scale(1);
-  }
+    from {
+        transform: scale(.8);
+    }
+}
+
+@keyframes reward-rotate {
+    from {
+        transform: scale(.5) rotate(-30deg);
+    }
 }
diff --git a/addons/web/static/src/core/effects/rainbow_man.xml b/addons/web/static/src/core/effects/rainbow_man.xml
index d4e8a6515ed..6e339560bbf 100644
--- a/addons/web/static/src/core/effects/rainbow_man.xml
+++ b/addons/web/static/src/core/effects/rainbow_man.xml
@@ -2,57 +2,72 @@
 <templates xml:space="preserve">
 
     <t t-name="web.RainbowMan" owl="1">
-        <div class="o_reward" t-att-class="{ o_reward_fading: state.isFading }" t-on-animationend="onAnimationEnd">
-            <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-key="star_index">
-                <t t-call="web.RainbowMan.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"/>
+        <div class="o_reward position-absolute top-0 bottom-0 start-0 end-0 w-100 h-100" t-att-class="{ o_reward_fading: state.isFading }" t-on-animationend="onAnimationEnd">
+            <svg class="o_reward_rainbow_man position-absolute top-0 bottom-0 start-0 end-0 m-auto overflow-visible" viewBox="0 0 400 400">
+                <defs>
+                    <radialGradient id="o_reward_gradient_bg" cx="200" cy="200" r="200" gradientUnits="userSpaceOnUse">
+                        <stop offset="0.3" stop-color="#edeff4"/>
+                        <stop offset="1" stop-color="#edeff4" stop-opacity="0"/>
+                    </radialGradient>
+                    <symbol id="o_reward_star">
+                        <path d="M33 15.9C26.3558 13.6951 21.1575 8.4597 19 1.8 19 1.2477 18.5523.8 18 .8 17.4477.8 17 1.2477 17 1.8 14.6431 8.6938 9.0262 13.9736 2 15.9 1.3649 15.9.85 16.4149.85 17.05.85 17.6851 1.3649 18.2 2 18.2 8.6215 20.3845 13.8155 25.5785 16 32.2 16 32.7523 16.4477 33.2 17 33.2 17.5523 33.2 18 32.7523 18 32.2 20.3569 25.3062 25.9738 20.0264 33 18.1 33.6351 18.1 34.15 17.5851 34.15 16.95 34.15 16.3149 33.6351 15.8 33 15.8" fill="#FFFFFF"/>
                     </symbol>
-                </svg>
-                <span class="o_reward_face" t-attf-style="background-image:url({{props.imgUrl}});"/>
-
-                <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)"/>
+                    <symbol id="o_reward_thumb">
+                        <path d="M10 52C6 51 3 48 3 44 2 42 3 39 5 38 3 36 2 34 2 32 2 29 3 27 5 26 3 24 2 21 2 19 2 15 7 12 10 12L23 12C23 11 23 11 23 11L23 10C23 8 24 6 25 4 27 2 29 2 31 2 33 2 35 2 36 4 38 5 39 7 39 10L39 38C39 41 37 45 35 47 32 50 28 51 25 52L10 52 10 52Z" fill="#FBFBFC"/>
+                        <polygon fill="#ECF1FF" points="25 11 25 51 5 52 5 12"/>
+                        <path d="M31 0C28 0 26 1 24 3 22 5 21 7 21 10L10 10C8 10 6 11 4 12 2 14 1 16 1 19 1 21 1 24 2 26 1 27 1 29 1 32 1 34 1 36 2 38 1 40 0 42 1 45 1 50 5 53 10 54L25 54C29 54 33 52 36 49 39 46 41 42 41 38L41 10C41 4 36 0 31 0M31 4C34 4 37 6 37 10L37 38C37 41 35 44 33 46 31 48 28 49 25 50L10 50C7 49 5 47 5 44 4 41 6 38 9 37L9 37C6 37 5 35 5 32 5 28 6 26 9 26L9 26C6 26 5 22 5 19 5 16 8 14 11 14L23 14C24 14 25 12 25 11L25 10C25 7 28 4 31 4" fill="#A1ACBA"/>
+                    </symbol>
+                </defs>
+                <rect width="400" height="400" fill="url(#o_reward_gradient_bg)"/>
+                <g transform="translate(47 45) scale(0.9)" class="o_reward_rainbow">
+                    <path d="M270,170a100,100,0,0,0-200,0" class="o_reward_rainbow_line" stroke="#FF9E80" stroke-linecap="round" stroke-width="21" fill="none" stroke-dasharray="600 600" stroke-dashoffset="-600"/>
+                    <path d="M290,170a120,120,0,0,0-240,0" class="o_reward_rainbow_line" stroke="#FFE57F" stroke-linecap="round" stroke-width="21" fill="none" stroke-dasharray="600 600" stroke-dashoffset="-600"/>
+                    <path d="M310,170a140,140,0,0,0-280,0" class="o_reward_rainbow_line" stroke="#80D8FF" stroke-linecap="round" stroke-width="21" fill="none" stroke-dasharray="600 600" stroke-dashoffset="-600"/>
+                    <path d="M330,170a160,160,0,0,0-320,0" class="o_reward_rainbow_line" stroke="#C794BA" stroke-linecap="round" stroke-width="21" fill="none" stroke-dasharray="600 600" stroke-dashoffset="-600"/>
+                </g>
+                <g transform="translate(80 125)">
+                    <use href="#o_reward_star" transform-origin="center" class="o_reward_box o_reward_star_01"/>
+                </g>
+                <g transform="translate(140 75)">
+                    <use href="#o_reward_star" transform-origin="center" class="o_reward_box o_reward_star_02"/>
+                </g>
+                <g transform="translate(230 90)">
+                    <use href="#o_reward_star" transform-origin="center" class="o_reward_box o_reward_star_03"/>
+                </g>
+                <g transform="translate(275 120)">
+                    <use href="#o_reward_star" transform-origin="center" class="o_reward_box o_reward_star_04"/>
+                </g>
+                <g class="o_reward_face_group o_reward_box" transform-origin="center top">
+                    <g class="o_reward_shadow_container o_reward_box">
+                        <ellipse class="o_reward_shadow o_reward_box" cx="200" cy="105%" rx="100" ry="6" fill="#000" opacity="0.25" transform-origin="center"/>
+                    </g>
+                    <g class="o_reward_face_wrap o_reward_box" transform-origin="center">
+                        <image class="o_reward_face" x="132" y="125" width="136" height="136" t-attf-href="{{props.imgUrl}}"/>
+                    </g>
+                    <g transform="translate(258 174)">
+                        <use href="#o_reward_thumb" class="o_reward_box o_reward_thumbup" transform-origin="center"/>
+                    </g>
+                </g>
+            </svg>
+            <div class="o_reward_rainbow_man o_reward_msg_container position-absolute top-0 bottom-0 start-0 end-0 m-auto">
+                <div class="o_reward_face_group h-100 w-75 mx-auto">
+                    <svg viewBox="0 0 42 60" preserveAspectRatio="xMinYMax meet" width="37" height="65%" class="overflow-visible position-relative ms-5">
+                        <g class="o_reward_box">
+                            <use href="#o_reward_thumb" x="-60%" y="0" transform="rotate(-90) scale(1 -1)" transform-origin="center"/>
+                        </g>
                     </svg>
-                    <div class="o_reward_msg">
+                    <div class="o_reward_msg mx-4">
                         <div class="o_reward_msg_card">
-                            <div class="o_reward_msg_content">
+                            <div class="o_reward_msg_content text-muted px-3 py-4 bg-white d-inline-block border border-light border-top-0">
                                 <t t-if="!props.Component">
                                     <t t-out="props.message"/>
                                 </t>
                                 <t t-else="" t-component="props.Component" t-props="props.props"/>
                             </div>
-                            <div class="o_reward_shadow_container">
-                                <div class="o_reward_shadow"/>
-                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </t>
-
-    <t t-name="web.RainbowMan.Star" owl="1">
-        <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>
\ No newline at end of file
+</templates>