pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] rating : rating icons improvement

Browse Source 
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
This commit is contained in:
Carlos Valverde
2021-06-04 14:39:43 +00:00
parent bd4886446b
commit 9e8a709f80
8 changed files with 50 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/rating/static/src/img/rating_1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

addons/rating/static/src/img/rating_1.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 454 B

addons/rating/static/src/img/rating_3.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

addons/rating/static/src/img/rating_3.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 380 B

addons/rating/static/src/img/rating_5.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

addons/rating/static/src/img/rating_5.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 466 B

addons/rating/static/src/scss/rating.scss
+26 -3
View File
@@ -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;
}
}
}
}
}
addons/rating/views/rating_template.xml
+21 -24
View File
@@ -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>