From 84dfbcc48fd52118d78a370ce4e4bd6ab122601e Mon Sep 17 00:00:00 2001
From: David Beguin <dbe@odoo.com>
Date: Thu, 13 Sep 2018 16:43:46 +0200
Subject: [PATCH] [IMP] website_livechat : improves statistics design

The statistic bar size is now related to the value of the rating
+ Adds small modififications to align correctly the different divs
+ harmonize icons size
+ show white icon for readability
+ Add inline padding to team member icon for readability
(inline because this part will be completelly reviewed in next version)

Task ID 1883227
---
 .../rating/static/src/img/rating_0_white.png  | Bin 0 -> 2286 bytes
 .../rating/static/src/img/rating_10_white.png | Bin 0 -> 2293 bytes
 .../rating/static/src/img/rating_1_white.png  | Bin 0 -> 2259 bytes
 .../rating/static/src/img/rating_5_white.png  | Bin 0 -> 2180 bytes
 .../views/website_livechat.xml                |  90 +++++++++---------
 5 files changed, 46 insertions(+), 44 deletions(-)
 create mode 100644 addons/rating/static/src/img/rating_0_white.png
 create mode 100644 addons/rating/static/src/img/rating_10_white.png
 create mode 100644 addons/rating/static/src/img/rating_1_white.png
 create mode 100644 addons/rating/static/src/img/rating_5_white.png

diff --git a/addons/rating/static/src/img/rating_0_white.png b/addons/rating/static/src/img/rating_0_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6c3ef8c79c304e1a384be7efdfa98b5aec99708
GIT binary patch
literal 2286
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

literal 0
HcmV?d00001

diff --git a/addons/rating/static/src/img/rating_10_white.png b/addons/rating/static/src/img/rating_10_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..d756eee931fbac071b661000e324363a8afe2ff0
GIT binary patch
literal 2293
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

literal 0
HcmV?d00001

diff --git a/addons/rating/static/src/img/rating_1_white.png b/addons/rating/static/src/img/rating_1_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f37da2cd9d79cf471860b5dac96222379c743cf
GIT binary patch
literal 2259
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
RJ~RDh@B+iZdd{|e{{h`bn(+Vt

literal 0
HcmV?d00001

diff --git a/addons/rating/static/src/img/rating_5_white.png b/addons/rating/static/src/img/rating_5_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..d146dc5b37d7356402bef6b25761297990630025
GIT binary patch
literal 2180
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

literal 0
HcmV?d00001

diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 1398d9ba557..03341c2a857 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -65,51 +65,53 @@
                     <div class="row mt32">
                         <div class="col-lg-8">
                             <t t-if="len(ratings) &gt; 0">
-                                <div class="col">
-                                    <h3>Statistics</h3>
-                                    <div class="row">
-                                        <div class="col-lg-4">
-                                            <div class="card bg-warning text-white">
-                                                <div class="card-body text-center">
-                                                    <img src="/rating/static/src/img/rating_5.png" style="height:50px" alt="Neutral face"/>
-                                                </div>
-                                                <div class="card-body text-center">
-                                                    <h2 style="margin: 0">
-                                                        <b style="font-size: 50px">
-                                                            <t t-esc="percentage['okay']" />
-                                                        </b>
-                                                        <small>%</small>
-                                                    </h2>
+                                <div class="row">
+                                    <div class="col-lg-12 mb32">
+                                        <h3>Statistics</h3>
+                                        <div class="row">
+                                            <div class="col-lg-5">
+                                                <div class="card bg-success text-white" t-attf-style="height: #{150 + int(percentage['great'])}px;">
+                                                    <div class="card-body text-center">
+                                                        <img src="/rating/static/src/img/rating_10_white.png" style="height:40px" alt="Happy face"/>
+                                                    </div>
+                                                    <div class="card-body text-center">
+                                                        <h2 style="margin: 0">
+                                                            <b style="font-size: 30px">
+                                                                <t t-esc="percentage['great']" />
+                                                            </b>
+                                                            <small>%</small>
+                                                        </h2>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div class="col-lg-5">
-                                            <div class="card bg-success text-white">
-                                                <div class="card-body text-center">
-                                                    <img src="/rating/static/src/img/rating_10.png" style="height:60px" alt="Happy face"/>
-                                                </div>
-                                                <div class="card-body text-center">
-                                                    <h2 style="margin: 0">
-                                                        <b style="font-size: 60px">
-                                                            <t t-esc="percentage['great']" />
-                                                        </b>
-                                                        <small>%</small>
-                                                    </h2>
+                                            <div class="col-lg-4">
+                                                <div class="card bg-warning text-white" t-attf-style="height: #{150 + int(percentage['okay'])}px;">
+                                                    <div class="card-body text-center">
+                                                        <img src="/rating/static/src/img/rating_5_white.png" style="height:40px" alt="Neutral face"/>
+                                                    </div>
+                                                    <div class="card-body text-center">
+                                                        <h2 style="margin: 0">
+                                                            <b style="font-size: 30px">
+                                                                <t t-esc="percentage['okay']" />
+                                                            </b>
+                                                            <small>%</small>
+                                                        </h2>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div class="col-lg-3">
-                                            <div class="card bg-danger text-white">
-                                                <div class="card-body text-center">
-                                                    <img src="/rating/static/src/img/rating_1.png" style="height:40px" alt="Sad face"/>
-                                                </div>
-                                                <div class="card-body text-center">
-                                                    <h2 style="margin: 0">
-                                                        <b style="font-size: 40px">
-                                                            <t t-esc="percentage['bad']" />
-                                                        </b>
-                                                        <small>%</small>
-                                                    </h2>
+                                            <div class="col-lg-3">
+                                                <div class="card bg-danger text-white" t-attf-style="height: #{150 + int(percentage['bad'])}px;">
+                                                    <div class="card-body text-center">
+                                                        <img src="/rating/static/src/img/rating_1_white.png" style="height:40px" alt="Sad face"/>
+                                                    </div>
+                                                    <div class="card-body text-center">
+                                                        <h2 style="margin: 0">
+                                                            <b style="font-size: 30px">
+                                                                <t t-esc="percentage['bad']" />
+                                                            </b>
+                                                            <small>%</small>
+                                                        </h2>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
@@ -120,7 +122,7 @@
                                         <h3>The <t t-esc="len(ratings)"/> last feedbacks</h3>
                                         <div style="text-align:center">
                                             <t t-foreach="ratings" t-as="rating">
-                                                <img t-attf-src='/rating/static/src/img/rating_#{int(rating.rating)}.png' t-att-alt="rating.res_name"/>
+                                                <img t-attf-src='/rating/static/src/img/rating_#{int(rating.rating)}.png' t-att-alt="rating.res_name" width="48px" height="48px"/>
                                                 <t t-if="(rating_index+1) % 10 == 0">
                                                     <br/>
                                                 </t>
@@ -130,7 +132,7 @@
                                 </div>
                             </t>
                             <t t-if="len(ratings) == 0">
-                                <h4 style="text-align:center">This is no rating for this channel for now.</h4>
+                                <h4 style="text-align:center">There is no rating for this channel for now.</h4>
                             </t>
                         </div>
                         <div class="col-lg-4 mb32">
@@ -139,7 +141,7 @@
                                 <div class="media mt-3">
                                     <t t-if="user.image_small">
                                         <img t-att-src="user.image_small and ('data:image/png;base64,' + to_text(user.image_small)) or '/web/static/src/img/placeholder.png'"
-                                            class="rounded" t-att-alt="user.name"/>
+                                            class="rounded" style="padding-right: 8px;" t-att-alt="user.name"/>
                                     </t>
                                     <div class="media-body">
                                         <h5><t t-esc="user.name"/></h5>