From 9e8a709f80e3e4620bfa92decb383781b04d64c8 Mon Sep 17 00:00:00 2001
From: Carlos Valverde <cvs@odoo.com>
Date: Fri, 4 Jun 2021 09:17:21 +0000
Subject: [PATCH] [IMP] rating : rating icons improvement

Previous rating icons had readability issues, especially when used in
small containers. For this reason, this commit includes the following
improvements:

- New rating icons have been designed and included in PNG and SVG, in
order to increase readability.
- 'Thank you for rating our services!' template, in the 'rating'
module, has been revamped, by removing the old '.card' template and by
improving the shadow effect cast on focus plus a better user
interaction.

--

task-2531541
Closes: #71094
---
 addons/rating/static/src/img/rating_1.png | Bin 2328 -> 1671 bytes
 addons/rating/static/src/img/rating_1.svg |   1 +
 addons/rating/static/src/img/rating_3.png | Bin 2186 -> 1533 bytes
 addons/rating/static/src/img/rating_3.svg |   1 +
 addons/rating/static/src/img/rating_5.png | Bin 2398 -> 1693 bytes
 addons/rating/static/src/img/rating_5.svg |   1 +
 addons/rating/static/src/scss/rating.scss |  29 ++++++++++++--
 addons/rating/views/rating_template.xml   |  45 ++++++++++------------
 8 files changed, 50 insertions(+), 27 deletions(-)
 create mode 100644 addons/rating/static/src/img/rating_1.svg
 create mode 100644 addons/rating/static/src/img/rating_3.svg
 create mode 100644 addons/rating/static/src/img/rating_5.svg

diff --git a/addons/rating/static/src/img/rating_1.png b/addons/rating/static/src/img/rating_1.png
index e6d82264f116769db7f9b312038799011e965f30..e291961794285059fd5cd81eb455514dde9e97ee 100644
GIT binary patch
literal 1671
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
Rmv;aF002ovPDHLkV1o3dAB6w_

literal 2328
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

diff --git a/addons/rating/static/src/img/rating_1.svg b/addons/rating/static/src/img/rating_1.svg
new file mode 100644
index 00000000000..1a03ef19299
--- /dev/null
+++ b/addons/rating/static/src/img/rating_1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68"><path d="M34,68A34,34,0,1,1,68,34,34,34,0,0,1,34,68ZM34,4A30,30,0,1,0,64,34,30,30,0,0,0,34,4Z" style="fill:#d23f3a"/><path d="M49.55,51.18a2,2,0,0,1-1.63-.84,17.2,17.2,0,0,0-27.84,0A2,2,0,0,1,16.82,48a21.21,21.21,0,0,1,34.36,0,2,2,0,0,1-1.63,3.2Z" style="fill:#d23f3a"/><circle cx="20.9" cy="30.19" r="4.79" style="fill:#d23f3a"/><circle cx="47" cy="30.19" r="4.79" style="fill:#d23f3a"/></svg>
\ No newline at end of file
diff --git a/addons/rating/static/src/img/rating_3.png b/addons/rating/static/src/img/rating_3.png
index 8ec3a2a7325d8287ea0f01d8d10869ad9ae47570..69942a2e20a2d4deed35fd0958384ad55e081aa5 100644
GIT binary patch
literal 1533
zcmV<Z1p@ksP)<h;3K|Lk000e1NJLTq002b*002b@1^@s69E~d}00009a7bBm000XT
z000XT0n*)m`~Uz2uSrBfRCt{2T+MCUNECi+?149_11c57TS3&psslTB0_&~7as{gZ
zyvME}N(GTR5IZnC2yeW3F~&!NdU`W_Lk>kU$OjlOBx*SG@%_&m{_*zqM!#{6KgZ;w
zOyeaH-3niwq9p%0!j#@|HAyMccuhoWkgy`6kBXn=MD$8T2lE#t`QZvv9hQ_bjW<M8
z{Vf6w`<;mP=5Huz3Qh`C;sJl5h>%c#oNbikuOSBxMoLdIDm7Uu)r#XKBsoDyDbv^x
zu~m?9gnc*}5~3tOImTSU_Efg$lVU1QQIc={S8$GAq+sIDEfYTCn%*`5HtL>;{&rlJ
znQL5xx1lpBnBcQRI)aKcyY~v@xK#DuD9LwS#_vQ*nZ`y$A1z-GMusqtCDisG+gzd~
zzxN&2o0Kw*jda`zU*!<ntHcs)PPdR+$w(XZ-T0`k7by-xjC4GV8HJKtf{mS7Yv-pX
z#X(4C-5mlBTlYOm@{Q(}DpJZcHhTG0`08_%<j*6m-wLSHK_EtDV_Hc;&hkU}YLbLh
za1hfvZzn0R?#AE8z5`DI7Get67i%1I(=zv+K*-Y^2r<CIAK1qW*c>aYl44PtW0d6U
zAr>$s$~4{yv5eJ0xFm)Dpg<HkM{E&CHL-<x(2)Xf!vmqKM5#jn@d<yR3qiHsA*xTA
z#;?qlWKoh!Wy4uPh_#ILuXs>*At?xcxN#L3ogsKxVIi3WNqzW5*%<lE5P<r>u%Ry=
z_!%iMJiJyhnGik@_<CZ*Gc~xR@Z6x7OH85#Vwa3vex@C5r0hqV{jlH<`fS~NGmHmj
zUZlWCH=|%<-FG4Crj2`S@noxe<S1MC%$3_nqe81H<ftVDdc~6`wSh%!^No2fGu|Uy
zVQ*lZM|KbM|2L4O0#t|xbG2Q$kv;@6ZBYg_Q>nC2;SQvA2GS0xo>Sow^U#7Pgd!<?
zK%Z*3rg)<&@Hn6$)rWY#zS?xSB*iDB7juXX*SO##1sbSI2Yk{~%X324fBAT#`f&J=
zqA{d>-Mi-ZK9M(HU+rYticBiNm3?tsoAoVjBZxdYE_v}uM_d_y5K?dxlS4cqHfiET
zh=00bBamO98W^nB6SR{FLE0AXlR|eSVXOzlB$W*a-t{y{d)LreHAv`nkH&+$fJ=R5
zSBve5I!SDj!kO<IS4<r|E~{1WM*0w#efhBk)(HMa`Vi1`4$T?dJk&0_CPgxiydw3h
z02M~QTT!o{dmm$Lnit>u6s=tr{R;4L%~FN2))Y>P38kB)Y_z15X?*I~*%%513Pl=X
zI4NgZ!d)`YFD{C@5+EUC5<<4^3Jyzg{%qZ6q*y9a8cCT-My;s<@%0p(l#3lg^u+$h
ze)yqn%M_KhG54Aenp&{1`+3pGBayPilV7-gI7e6>_+PwN<s!_7q2g)&-Q3-CqrJ3=
zqtv`(%YAl231IF!g*#!lLR2@A6pOTc^4Uh160je|cLJ<MskWXsZj?yU!HE;Hf>+{w
zZ?`t*(N=krjO)R3e`Pelj_f71>0FM4cs;R?%?<Xp)~JbrN9cqmW2b#=t<l2w^Mdh5
zNX%r3!4@me^fOH?rR}(0B0u1)XE+QnnLQ%MTwD8RE2ygZ@J4IFO`98^M$V3FG@6M!
z6GA>)91UW4Ze(oCkFnh~qSfAnP{;E=Hu0n}&ip_+c9u$^HzCyHWY`j0rM9ztN4UMg
z$U#`Jb+l)Ao$+a+@4-qb!D{0DP-V!zIpyKXFW9l{gx*JRTaKz#sA?9~@qD$nf<)XZ
zPr?UL-;js3?=4A}grYi|Y$;GxXOg9sGuwDO^w;&?LJfMXAGW3{cJrKR2m~dg!eB3e
zfaGjibiXSykTJ+hAO?R`2&8AzIG*1{f(qE9y{}E`f~&u2r|}}0RZAb+PuQKSzhLI~
j>xTpc>ty<6Kt%roNHw6TI<?<Y00000NkvXXu0mjf^~2Fx

literal 2186
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
M07*qoM6N<$f^J9*^#A|>

diff --git a/addons/rating/static/src/img/rating_3.svg b/addons/rating/static/src/img/rating_3.svg
new file mode 100644
index 00000000000..5cee881f2ab
--- /dev/null
+++ b/addons/rating/static/src/img/rating_3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68"><path d="M34,68A34,34,0,1,1,68,34,34,34,0,0,1,34,68ZM34,4A30,30,0,1,0,64,34,30,30,0,0,0,34,4Z" style="fill:#f7931e"/><path d="M18.45,47.15a2,2,0,0,1,0-4h31.1a2,2,0,0,1,0,4Z" style="fill:#f7931e"/><circle cx="20.9" cy="30.19" r="4.79" style="fill:#f7931e"/><circle cx="47" cy="30.19" r="4.79" style="fill:#f7931e"/></svg>
\ No newline at end of file
diff --git a/addons/rating/static/src/img/rating_5.png b/addons/rating/static/src/img/rating_5.png
index 3af034234c0a7af5d6750f5f33beb41dff14a0cc..015baac529b011a3ee77f038a0c93e8e3c6516f2 100644
GIT binary patch
literal 1693
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

literal 2398
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
QNdN!<07*qoM6N<$f+WIUA^-pY

diff --git a/addons/rating/static/src/img/rating_5.svg b/addons/rating/static/src/img/rating_5.svg
new file mode 100644
index 00000000000..9ac69427d39
--- /dev/null
+++ b/addons/rating/static/src/img/rating_5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68"><path d="M34,68A34,34,0,1,1,68,34,34,34,0,0,1,34,68ZM34,4A30,30,0,1,0,64,34,30,30,0,0,0,34,4Z" style="fill:#008818"/><path d="M34,55.21a21.26,21.26,0,0,1-17.18-8.78,2,2,0,1,1,3.26-2.36,17.18,17.18,0,0,0,27.84,0,2,2,0,0,1,3.26,2.36A21.26,21.26,0,0,1,34,55.21Z" style="fill:#008818"/><circle cx="20.9" cy="30.19" r="4.79" style="fill:#008818"/><circle cx="47" cy="30.19" r="4.79" style="fill:#008818"/></svg>
\ No newline at end of file
diff --git a/addons/rating/static/src/scss/rating.scss b/addons/rating/static/src/scss/rating.scss
index 768d261a3dc..389441fe853 100644
--- a/addons/rating/static/src/scss/rating.scss
+++ b/addons/rating/static/src/scss/rating.scss
@@ -1,8 +1,31 @@
 /* Rating feedback */
 .o_rating_page_submit {
 
-    .o_rating_label.active {
-        filter: drop-shadow(0 0 5px black);
-        -webkit-filter: drop-shadow(0 0 5px black);
+    .btn-group > .btn:not(:first-child),
+    .btn-group > .btn-group:not(:first-child) > .btn {
+        margin-left: 0 !important;
+    }
+    .o_rating_label {
+        transition: .3s;
+        &:hover {
+            transform: scale(1.1);
+        }
+        a {
+            &.bg-white:hover,
+            &.bg-white:focus {
+                background-color: #ffffff !important;
+            }
+        }
+        &.active {
+            filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
+            -webkit-filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
+            transform: scale(1.1);
+            a {
+                &.bg-white:hover,
+                &.bg-white:focus {
+                    background-color: #ffffff !important;
+                }
+            }
+        }
     }
 }
diff --git a/addons/rating/views/rating_template.xml b/addons/rating/views/rating_template.xml
index f182d248619..09b972ea6ac 100644
--- a/addons/rating/views/rating_template.xml
+++ b/addons/rating/views/rating_template.xml
@@ -17,30 +17,27 @@
         <!-- External page: rate and submit feedback -->
         <template id="rating_external_page_submit" name="Rating Page Submit">
             <t t-call="web.frontend_layout">
-                <div class="container card mb-5 mt-4 o_rating_page_submit">
-                    <div class="card-body">
-                        <div class="row text-center justify-content-center">
-                            <h1 class="col-12 mt-5">Thank you for rating our services!</h1>
-                            <form t-attf-action="/rate/#{token}/submit_feedback" method="post">
-                                <div class="btn-group btn-group-toggle row" data-toggle="buttons">
-                                    <t t-foreach="rate_names" t-as="rate_name">
-                                        <label t-attf-class="col-xs-12 btn o_rating_label shadow-none {{rate == rate_name and 'active' or ''}}">
-                                            <input type="radio" name="rate" t-attf-id="rate_{{rate_name}}" t-att-value="rate_name" t-att-checked="rate == rate_name"/>
-                                            <a class="o_rating" href="#">
-                                                <img t-attf-src='/rating/static/src/img/rating_#{rate_name}.png' t-att-alt="rate_name_value" t-att-title="rate_name_value"/>
-                                            </a>
-                                        </label>
-                                    </t>
-                                </div>
-                                <div class="clearfix"></div>
-                                <p class="mt-5">
-                                    Feel free to write a feedback on your experience:
-                                </p>
-                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                                <textarea class="form-control" name="feedback" rows="8" t-att-value="rating.feedback"></textarea>
-                                <button type="submit" class="btn btn-primary" style="margin-top:8px;">Send Feedback</button>
-                            </form>
-                        </div>
+                <div class="container mb-5 mt-4 o_rating_page_submit">
+                    <div class="row text-center justify-content-center">
+                        <h1 class="col-12 mt-5">Thank you for rating our services!</h1>
+                        <form class="col-md-6" t-attf-action="/rate/#{token}/submit_feedback" method="post">
+                            <div class="btn-group btn-group-toggle row flex-nowrap justify-content-center w-100 mt-5" data-toggle="buttons">
+                                <t t-foreach="rate_names" t-as="rate_name">
+                                    <label t-attf-class="col p-4 btn o_rating_label shadow-none {{rate == rate_name and 'active' or ''}}">
+                                        <input type="radio" name="rate" t-attf-id="rate_{{rate_name}}" t-att-value="rate_name" t-att-checked="rate == rate_name"/>
+                                        <a class="o_rating d-block bg-white rounded-circle" href="#">
+                                            <img t-attf-src='/rating/static/src/img/rating_#{rate_name}.svg' t-att-alt="rate_name_value" t-att-title="rate_name_value"/>
+                                        </a>
+                                    </label>
+                                </t>
+                            </div>
+                            <p class="mt-5">
+                                Feel free to write a feedback on your experience:
+                            </p>
+                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                            <textarea class="form-control" name="feedback" rows="8" t-att-value="rating.feedback"></textarea>
+                            <button type="submit" class="btn btn-primary mt-4" style="margin-top:8px;">Send Feedback</button>
+                        </form>
                     </div>
                 </div>
             </t>