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
5 changed files with 143 additions and 6 deletions
|
|
@ -204,3 +204,40 @@ body > #body-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
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; -*-
|
## -*- coding: utf-8; -*-
|
||||||
<%namespace file="/menu.mako" import="main_menu_items" />
|
<%namespace file="/menu.mako" import="main_menu_items" />
|
||||||
<%namespace file="/grids/nav.mako" import="grid_index_nav" />
|
<%namespace file="/grids/nav.mako" import="grid_index_nav" />
|
||||||
|
<%namespace file="/feedback_dialog.mako" import="feedback_dialog" />
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -53,7 +54,7 @@
|
||||||
% endif
|
% endif
|
||||||
|
|
||||||
<div class="feedback">
|
<div class="feedback">
|
||||||
${h.link_to("Feedback", url('feedback'), class_='button')}
|
<button type="button" id="feedback">Feedback</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- global -->
|
</div><!-- global -->
|
||||||
|
|
@ -105,6 +106,7 @@
|
||||||
|
|
||||||
</div><!-- body-wrapper -->
|
</div><!-- body-wrapper -->
|
||||||
|
|
||||||
|
${feedback_dialog()}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
@ -139,6 +141,7 @@
|
||||||
var noop_url = '${request.route_url('noop')}';
|
var noop_url = '${request.route_url('noop')}';
|
||||||
</script>
|
</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.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js'))}
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="extra_javascript()"></%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.
|
Form schema for user feedback.
|
||||||
"""
|
"""
|
||||||
allow_extra_fields = True
|
allow_extra_fields = True
|
||||||
|
referrer = fe.validators.NotEmpty()
|
||||||
user = forms.validators.ValidUser()
|
user = forms.validators.ValidUser()
|
||||||
user_name = fe.validators.NotEmpty()
|
user_name = fe.validators.NotEmpty()
|
||||||
message = fe.validators.NotEmpty()
|
message = fe.validators.NotEmpty()
|
||||||
|
|
@ -122,9 +123,8 @@ class CommonView(View):
|
||||||
if data['user']:
|
if data['user']:
|
||||||
data['user_url'] = self.request.route_url('users.view', uuid=data['user'].uuid)
|
data['user_url'] = self.request.route_url('users.view', uuid=data['user'].uuid)
|
||||||
send_email(self.rattail_config, 'user_feedback', data=data)
|
send_email(self.rattail_config, 'user_feedback', data=data)
|
||||||
self.request.session.flash("Thank you for your feedback.")
|
return {'ok': True}
|
||||||
return httpexceptions.HTTPFound(location=form.data['referrer'])
|
return {'error': "Form did not validate!"}
|
||||||
return {'form': forms.FormRenderer(form)}
|
|
||||||
|
|
||||||
def consume_batch_id(self):
|
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')
|
config.add_view(cls, attr='about', route_name='mobile.about', renderer='/mobile/about.mako')
|
||||||
|
|
||||||
# feedback
|
# feedback
|
||||||
config.add_route('feedback', '/feedback')
|
config.add_route('feedback', '/feedback', request_method='POST')
|
||||||
config.add_view(cls, attr='feedback', route_name='feedback', renderer='/feedback.mako')
|
config.add_view(cls, attr='feedback', route_name='feedback', renderer='json')
|
||||||
|
|
||||||
# consume batch ID
|
# consume batch ID
|
||||||
config.add_tailbone_permission('common', 'common.consume_batch_id',
|
config.add_tailbone_permission('common', 'common.consume_batch_id',
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue