vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: New 1-10 rating design

Browse source
This commit is contained in:
shariquerik 2021-06-15 10:54:04 +05:30
parent 1f83d3d54f
commit 09c7d66ae2
3 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frappe/public/scss/common/controls.scss
View file

@ -241,6 +241,7 @@ textarea.form-control {
// rating
.rating {
cursor: pointer;
--star-fill: var(--gray-300);
.star-hover {
--star-fill: var(--yellow-100);
@ -248,6 +249,24 @@ textarea.form-control {
.star-click {
--star-fill: var(--yellow-300);
}
.rating-box {
background-color: var(--gray-300);
border-radius: 5px;
font-size: 14px;
text-align: center;
padding: 2px;
cursor: pointer;
width: 25px;
height: 25px;
margin: 4px 2px;
}
.rating-hover {
background-color: var(--yellow-100);
}
.rating-click {
background-color: var(--yellow-300);
}
}
.frappe-control .control-value {

51
frappe/templates/includes/feedback/feedback.html
View file

@ -12,17 +12,9 @@
</div>
<div class="col-sm-6">
<div class="rating">
<svg class="icon icon-md" data-rating="1">
<use href="#icon-star"></use>
</svg><svg class="icon icon-md" data-rating="2">
<use href="#icon-star"></use>
</svg><svg class="icon icon-md" data-rating="3">
<use href="#icon-star"></use>
</svg><svg class="icon icon-md" data-rating="4">
<use href="#icon-star"></use>
</svg><svg class="icon icon-md" data-rating="5">
<use href="#icon-star"></use>
</svg>
{% for rating in [1, 2, 3, 4, 5 ,6, 7, 8, 9, 10] %}
<div class="icon rating-box" data-rating="{{ rating }}">{{ rating }}</div>
{% endfor %}
</div>
</div>
</div>
@ -44,8 +36,8 @@
<script type="text/javascript">
frappe.ready(() => {
let feedback = "{{ user_feedback.feedback or ''}}"
let rating = parseInt("{{ user_feedback.rating or 0 }}")
let user_rating = parseInt("{{ user_feedback.rating or 0 }}")
let rating = user_rating;
feedback && $("#submit-feedback").html(__("Update"));
if (frappe.is_user_logged_in()) {
@ -60,36 +52,35 @@
$('.give-feedback').click(() => toggle_feedback());
$('.rating').find('svg').hover((ev) => {
$('.rating').find('.rating-box').hover((ev) => {
const el = $(ev.currentTarget);
rating = el.data('rating');
el.parent().children('svg').each( function(e) {
el.parent().children('.rating-box').each( function(e) {
if (e < rating) {
$(this).addClass('star-hover');
$(this).addClass('rating-hover');
} else {
$(this).removeClass('star-hover');
$(this).removeClass('rating-hover');
}
});
}, (ev) => {
const el = $(ev.currentTarget);
el.parent().children('svg').each( function() {
$(this).removeClass('star-hover');
el.parent().children('.rating-box').each( function() {
$(this).removeClass('rating-hover');
});
});
$('.rating').find('svg').click((ev) => {
$('.rating').find('.rating-box').click((ev) => {
const el = $(ev.currentTarget);
rating = el.data('rating');
el.parent().children('svg').each( function(e) {
el.parent().children('.rating-box').each( function(e) {
if (e < rating) {
$(this).addClass('star-click');
$(this).addClass('rating-click');
} else {
$(this).removeClass('star-click');
$(this).removeClass('rating-click');
}
});
});
$('#submit-feedback').click((ev) => {
let update = ev.target.innerText !== __("Submit");
let args = {
@ -126,13 +117,14 @@
set_rating(0);
} else {
feedback = $("[name='feedback']").val();
user_rating = rating;
$("#submit-feedback").html(__("Update"));
}
frappe.msgprint({message:__("Thank you for your valuable feedback!"), indicator:'green'});
}
})
} else {
if (feedback == $("[name='feedback']").val()) {
if (feedback == $("[name='feedback']").val() && rating == user_rating) {
frappe.msgprint({message:__("Please update rating or feedback before saving."), indicator:'red'});
return false;
}
@ -142,6 +134,7 @@
callback: function(r) {
toggle_feedback();
feedback = $("[name='feedback']").val();
user_rating = rating;
frappe.msgprint({message:__("Feedback updated successfully!"), indicator:'green'});
}
})
@ -155,12 +148,12 @@
})
function set_rating(rating) {
let el = $('.rating').find('svg');
el.children('svg').prevObject.each( function(e) {
let el = $('.rating').find('.rating-box');
el.children('.rating-box').prevObject.each( function(e) {
if (e < rating) {
$(this).addClass('star-click');
$(this).addClass('rating-click');
} else {
$(this).removeClass('star-click');
$(this).removeClass('rating-click');
}
});
}

2
frappe/templates/includes/feedback/feedback.py
View file

@ -37,7 +37,7 @@ def update_feedback(reference_doctype, reference_name, rating, feedback, feedbac
def send_mail(feedback, subject):
doc = frappe.get_doc(feedback.reference_doctype, feedback.reference_name)
message = ("<p>{0} ({1})</p>".format(feedback.feedback, feedback.rating)
+ "<p><a href='{0}/app/marketing-asset-feedback/{1}' style='font-size: 80%'>{2}</a></p>".format(frappe.utils.get_request_site_address(),
feedback.name,