Convert user feedback mechanism to use modal dialog
instead of navigating to new page. this is how it should have been done to begin with...
This commit is contained in:
Lance Edgar
parent
827cc592b4
commit
8d002f76d2
|
|
@ -204,3 +204,40 @@ body > #body-wrapper {
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/******************************
|
||||
* feedback
|
||||
******************************/
|
||||
|
||||
#feedback-dialog {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#feedback-dialog p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#feedback-dialog .red {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#feedback-dialog .field-wrapper {
|
||||
margin-top: 1em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#feedback-dialog .field {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
#feedback-dialog .referrer .field {
|
||||
clear: both;
|
||||
float: none;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#feedback-dialog textarea {
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
58
tailbone/static/js/tailbone.feedback.js
Normal file
58
tailbone/static/js/tailbone.feedback.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
|
||||
$(function() {
|
||||
|
||||
$('#feedback').click(function() {
|
||||
var dialog = $('#feedback-dialog');
|
||||
var form = dialog.find('form');
|
||||
var textarea = form.find('textarea');
|
||||
dialog.find('.referrer .field').html(location.href);
|
||||
textarea.val('');
|
||||
dialog.dialog({
|
||||
title: "User Feedback",
|
||||
width: 500,
|
||||
modal: true,
|
||||
buttons: [
|
||||
{
|
||||
text: "Send",
|
||||
click: function(event) {
|
||||
|
||||
var msg = $.trim(textarea.val());
|
||||
if (! msg) {
|
||||
alert("Please enter a message.");
|
||||
textarea.select();
|
||||
textarea.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
disable_button(dialog_button(event));
|
||||
|
||||
var data = {
|
||||
_csrf: form.find('input[name="_csrf"]').val(),
|
||||
referrer: location.href,
|
||||
user: form.find('input[name="user"]').val(),
|
||||
user_name: form.find('input[name="user_name"]').val(),
|
||||
message: msg
|
||||
};
|
||||
|
||||
$.ajax(form.attr('action'), {
|
||||
method: 'POST',
|
||||
data: data,
|
||||
success: function(data) {
|
||||
dialog.dialog('close');
|
||||
alert("Message successfully sent.\n\nThank you for your feedback.");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "Cancel",
|
||||
click: function() {
|
||||
dialog.dialog('close');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
## -*- coding: utf-8; -*-
|
||||
<%namespace file="/menu.mako" import="main_menu_items" />
|
||||
<%namespace file="/grids/nav.mako" import="grid_index_nav" />
|
||||
<%namespace file="/feedback_dialog.mako" import="feedback_dialog" />
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -53,7 +54,7 @@
|
|||
% endif
|
||||
|
||||
<div class="feedback">
|
||||
${h.link_to("Feedback", url('feedback'), class_='button')}
|
||||
<button type="button" id="feedback">Feedback</button>
|
||||
</div>
|
||||
|
||||
</div><!-- global -->
|
||||
|
|
@ -105,6 +106,7 @@
|
|||
|
||||
</div><!-- body-wrapper -->
|
||||
|
||||
${feedback_dialog()}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -139,6 +141,7 @@
|
|||
var noop_url = '${request.route_url('noop')}';
|
||||
</script>
|
||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js') + '?ver={}'.format(tailbone.__version__))}
|
||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js'))}
|
||||
</%def>
|
||||
|
||||
<%def name="extra_javascript()"></%def>
|
||||
|
|
|
|||
39
tailbone/templates/feedback_dialog.mako
Normal file
39
tailbone/templates/feedback_dialog.mako
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
## -*- coding: utf-8; -*-
|
||||
|
||||
<%def name="feedback_dialog()">
|
||||
<div id="feedback-dialog">
|
||||
${h.form(url('feedback'))}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('user', value=request.user.uuid if request.user else None)}
|
||||
|
||||
<p>
|
||||
Questions, suggestions, comments, complaints, etc. <span class="red">regarding this website</span>
|
||||
are welcome and may be submitted below.
|
||||
</p>
|
||||
|
||||
<div class="field-wrapper referrer">
|
||||
<label for="referrer">Referring URL</label>
|
||||
<div class="field"></div>
|
||||
</div>
|
||||
|
||||
% if request.user:
|
||||
${h.hidden('user_name', value=six.text_type(request.user))}
|
||||
% else:
|
||||
<div class="field-wrapper">
|
||||
<label for="user_name">Your Name</label>
|
||||
<div class="field">
|
||||
${h.text('user_name')}
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label for="referrer">Message</label>
|
||||
<div class="field">
|
||||
${h.textarea('message', cols=45, rows=15)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${h.end_form()}
|
||||
</div>
|
||||
</%def>
|
||||
|
|
@ -50,6 +50,7 @@ class Feedback(fe.Schema):
|
|||
Form schema for user feedback.
|
||||
"""
|
||||
allow_extra_fields = True
|
||||
referrer = fe.validators.NotEmpty()
|
||||
user = forms.validators.ValidUser()
|
||||
user_name = fe.validators.NotEmpty()
|
||||
message = fe.validators.NotEmpty()
|
||||
|
|
@ -122,9 +123,8 @@ class CommonView(View):
|
|||
if data['user']:
|
||||
data['user_url'] = self.request.route_url('users.view', uuid=data['user'].uuid)
|
||||
send_email(self.rattail_config, 'user_feedback', data=data)
|
||||
self.request.session.flash("Thank you for your feedback.")
|
||||
return httpexceptions.HTTPFound(location=form.data['referrer'])
|
||||
return {'form': forms.FormRenderer(form)}
|
||||
return {'ok': True}
|
||||
return {'error': "Form did not validate!"}
|
||||
|
||||
def consume_batch_id(self):
|
||||
"""
|
||||
|
|
@ -176,8 +176,8 @@ class CommonView(View):
|
|||
config.add_view(cls, attr='about', route_name='mobile.about', renderer='/mobile/about.mako')
|
||||
|
||||
# feedback
|
||||
config.add_route('feedback', '/feedback')
|
||||
config.add_view(cls, attr='feedback', route_name='feedback', renderer='/feedback.mako')
|
||||
config.add_route('feedback', '/feedback', request_method='POST')
|
||||
config.add_view(cls, attr='feedback', route_name='feedback', renderer='json')
|
||||
|
||||
# consume batch ID
|
||||
config.add_tailbone_permission('common', 'common.consume_batch_id',
|
||||
|
|
|
|||
Loading…
Reference in a new issue