Skip to content

Commit

Permalink
Restyling of feedback tab, including auto-hiding. Related to Redmine …
Browse files Browse the repository at this point in the history 
…issues #2307 and #2306.

[Author:    yln <[email protected]>]
  • Loading branch information
@gsrohde
yln authored and gsrohde committed Jul 16, 2014
1 parent 6a1450c commit ea33b51
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 89 deletions.
1 change: 1 addition & 0 deletions app/mailers/contact_mailer.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ def feedback_email(email_params)
@email_body = email_params[:feedback_text]
@sender_name = email_params[:sender]
@sender_email = email_params[:sender_email]
@problem_location = email_params[:location]
@type = email_params[:type]
admins = User.where(page_access_level: 1).map! do |attributes|
"#{attributes.name} < #{attributes.email}>"
Expand Down
9 changes: 5 additions & 4 deletions app/views/contact_mailer/feedback_email.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body>
<p>Feedback Type:</p>
<p><%= @type %></p>
<p>Username:</p>
<p><%= @sender_name %></p>
<p>Feedback Type: <%= @type %></p>
<p>Username: <%= @sender_name %></p>
<%if @problem_location!=nil%>
<p>Problem URL: <%=@problem_location%></p>
<%end%>
<p>Message:</p>
<p><%= @email_body %></p>
</body>
Expand Down
10 changes: 6 additions & 4 deletions app/views/contact_mailer/feedback_email.text.erb
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
Feedback Type:
<%= @type %>
Feedback Type: <%= @type %>

Userame:
<%= @sender_name %>
Userame: <%= @sender_name %>

<%if @problem_location!=nil%>
Problem URL: <%=@problem_location%>
<%end%>

Message:
<%= @email_body %>
60 changes: 48 additions & 12 deletions app/views/feedback/_fbtab.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,62 @@
<div id = "feedback-tab" style="cursor:pointer;height:90px; width:35px;border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid solid solid none; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-top-left-radius: 0px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 0px; -webkit-box-shadow: rgba(255, 255, 255, 0.247059) 1px 1px 1px inset, rgba(0, 0, 0, 0.498039) 0px 1px 2px; box-shadow: rgba(255, 255, 255, 0.247059) 1px 1px 1px inset, rgba(0, 0, 0, 0.498039) 0px 1px 2px; font-style: normal; font-variant: normal; font-weight: bold; font-size: 14px; line-height: 1em; font-family: Arial, sans-serif; position: fixed; left: 0px; top: 50%; z-index: 9999; margin-top: -62px;background: url(http://widget.uservoice.com/dcache/widget/feedback-tab.png?t=Feedback&c=ffffff&r=90) 50% 10px no-repeat rgb(8, 167, 5); "></div>
<div class="dialog-all dialog-form">
<%= javascript_include_tag 'lazy/feedback.js' %>

<div id = "feedback-tab" style="cursor:pointer;height:90px; width:25px;border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid solid solid none; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-top-left-radius: 0px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 0px; -webkit-box-shadow: rgba(255, 255, 255, 0.247059) 1px 1px 1px inset, rgba(0, 0, 0, 0.498039) 0px 1px 2px; box-shadow: rgba(255, 255, 255, 0.247059) 1px 1px 1px inset, rgba(0, 0, 0, 0.498039) 0px 1px 2px; font-style: normal; font-variant: normal; font-weight: bold; font-size: 14px; line-height: 1em; font-family: Arial, sans-serif; position: fixed; left: 0px; top: 50%; z-index: 9999; margin-top: -62px;background: url(http://widget.uservoice.com/dcache/widget/feedback-tab.png?t=Feedback&c=ffffff&r=90) 50% 10px no-repeat rgb(70,70,70); "></div>
<div class="dialog-all dialog-form-suggest">
<span class="dialog-close">x</span><br>
<div style="width:100%;text-align:center;font-weight:bold;font-size:14px">How can we improve this site?</div>
<%=form_for :feedback_email, :url =>{:controller =>'feedback', :action =>'feedback_email'}, :remote =>true do |f|%>
<%=f.hidden_field :type, :value =>"suggest feature" %>
<%=f.hidden_field :sender,:value =>current_user %>
<%=f.hidden_field :sender_email,:value =>current_user.email %>
<%=f.label :feedback_subject,"Subject",{:style =>"font-weight:normal"} %>
<%=f.text_field :feedback_subject %>
<%=f.label :feedback_text,"Details",{:style =>"font-weight:normal"} %>
<%=f.text_area :feedback_text , {:rows=> 5, :style=>"font-size:13px;"}%>
<%=submit_tag "Submit", {:class => "button button-primary feedback-submit", :style =>"font-size:12px"}%>
<button class="button button-info dialog-cancel" style="float:left;font-size:12px">Cancel</button>
<span class="feedback-spinner" style="font-size:12px"></span>
<%end%>
</div>
<div class="dialog-all dialog-form-problem">
<span class="dialog-close">x</span><br>
<div id="form-title" style="width:100%;text-align:center;font-weight:bold;"></div>
<div style="width:100%;text-align:center;font-weight:bold;">Report a Problem</div>
<%=form_for :feedback_email, :url =>{:controller =>'feedback', :action =>'feedback_email'}, :remote =>true do |f|%>
<%=f.hidden_field :type, :value =>"" %>
<%=f.hidden_field :type, :value =>"report problem" %>
<%=f.hidden_field :sender,:value =>current_user %>
<%=f.hidden_field :sender_email,:value =>current_user.email %>
<%=f.label :feedback_subject,"Subject",{:style =>"font-weight:normal"} %>
<%=f.text_field :feedback_subject %>
<%=f.label :location,"Problem encountered on",{:style =>"font-weight:normal"} %>
<% @current_url = request.url%>
<%=f.text_field :location, :value=>@current_url%>
<%=f.label :feedback_text,"Details",{:style =>"font-weight:normal"} %>
<%=f.text_area :feedback_text , {:rows=> 5, :style=>"font-size:13px;"}%>
<%=submit_tag "Submit", {:class => "button button-warning feedback-submit", :style =>"font-size:12px"}%>
<button class="button button-info dialog-cancel" style="float:right;font-size:12px">Cancel</button>
<%=submit_tag "Submit", {:class => "button button-primary feedback-submit", :style =>"font-size:12px"}%>
<button class="button button-info dialog-cancel" style="float:left;font-size:12px">Cancel</button>
<span class="feedback-spinner" style="font-size:12px"></span>
<%end%>
</div>
<div class="dialog-all dialog-form-contact">
<span class="dialog-close">x</span><br>
<div style="width:100%;text-align:center;font-weight:bold;">Contact Us</div>
<%=form_for :feedback_email, :url =>{:controller =>'feedback', :action =>'feedback_email'}, :remote =>true do |f|%>
<%=f.hidden_field :type, :value =>"contact" %>
<%=f.hidden_field :sender,:value =>current_user %>
<%=f.hidden_field :sender_email,:value =>current_user.email %>
<%=f.label :feedback_subject,"Subject",{:style =>"font-weight:normal"} %>
<%=f.text_field :feedback_subject %>
<%=f.label :feedback_text,"Details",{:style =>"font-weight:normal"} %>
<%=f.text_area :feedback_text , {:rows=> 5, :style=>"font-size:13px;"}%>
<%=submit_tag "Submit", {:class => "button button-primary feedback-submit", :style =>"font-size:12px"}%>
<button class="button button-info dialog-cancel" style="float:left;font-size:12px">Cancel</button>
<span class="feedback-spinner" style="font-size:12px"></span>
<%end%>
</div>
<div id="dialog-main" class="dialog-all" title="Feedback">
<span class="dialog-close">x</span>
<button class="button button-primary" id="suggest" style="width:100%;font-size:12px;margin-bottom:5px;padding:3px">Suggest a Feature</button>
<hr class="hr">&nbsp;or&nbsp;<hr class="hr">
<button class="button button-warning" id="report" style="width:100%;font-size:12px;margin-top:8px;padding:3px">Report a Problem</button>
<hr class="hr">&nbsp;or&nbsp;<hr class="hr">
<button class="button button-info" id="contact" style="width:100%;font-size:12px;margin-top:8px;padding:3px">Contact Us</button>
<button class="button button-primary" id="suggest" style="width:100%;font-size:12px;padding:3px">Suggest a Feature</button>
<br><br>
<button class="button button-warning" id="report" style="width:100%;font-size:12px;padding:3px">Report a Problem</button>
<br><br>
<button class="button button-info" id="contact" style="width:100%;font-size:12px;padding:3px">Contact Us</button>
</div>
<%= javascript_include_tag 'lazy/feedback.js' %>
149 changes: 80 additions & 69 deletions public/javascripts/lazy/feedback.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,9 @@
jQuery(function(){jQuery(".ui-dialog-titlebar").hide();});
jQuery( document ).ready(function($) {

jQuery('body').click(function(e){
x = e.clientX ;
y = e.clientY+jQuery(document).scrollTop();
jQuery('.dialog-all').each(function(){
if(jQuery(this).dialog("isOpen")){
minx = jQuery(this).offset().left -5;
maxx = jQuery(this).offset().left + jQuery(this).dialog("option","width") + 5;
miny = jQuery(this).offset().top -5;
maxy = jQuery(this).offset().top + jQuery(this).dialog("option","height") + 5;
tminx = jQuery("#feedback-tab").offset().left-5;
tmaxx = jQuery("#feedback-tab").offset().left+ jQuery("#feedback-tab").width() + 5;
tminy = jQuery("#feedback-tab").offset().top-5 ;
tmaxy = jQuery("#feedback-tab").offset().top+ jQuery("#feedback-tab").height() + 5;
inthis = x>=minx && x<=maxx && y>=miny && y<=maxy;
intab = x>=tminx && x<=tmaxx && y>=tminy && y<=tmaxy;
if(!inthis && !intab)
jQuery(this).dialog("close");
}
});
});

jQuery(".dialog-cancel").click(function(){
jQuery(".dialog-all").dialog("close");
return false;
});

jQuery(".dialog-all").dialog({
$(".dialog-all").dialog({
autoOpen: false,
modal: false,
draggable: false,
draggable: true,
resizable: false,
dialogClass: "fixed-dialog",
show:{
Expand All @@ -45,30 +19,61 @@ jQuery(".dialog-all").dialog({
at: "right center",
of: "#feedback-tab",
},
close: function(){
jQuery("#feedback_email_feedback_subject").val("");
jQuery("#feedback_email_feedback_text").val("");
}
});

jQuery( ".dialog-form" ).dialog({
height: 340,
$( ".dialog-all" ).dialog({
height: 'auto',
width: 250,
});

jQuery( "#dialog-main" ).dialog({
height: 220,
$( "#dialog-main" ).dialog({
height: 190,
width: 150,
});

jQuery(".hr").css({
$(".ui-dialog-titlebar").hide();

$('body').click(function(e){
x = e.clientX ;
y = e.clientY+$(document).scrollTop();
tminx = $("#feedback-tab").offset().left-5;
tmaxx = $("#feedback-tab").offset().left+ $("#feedback-tab").width() + 5;
tminy = $("#feedback-tab").offset().top-5 ;
tmaxy = $("#feedback-tab").offset().top+ $("#feedback-tab").height() + 5;
intab = x>=tminx && x<=tmaxx && y>=tminy && y<=tmaxy;
if(!$('#dialog-main').dialog("isOpen") &&
!$('.dialog-form-suggest').dialog("isOpen")&&
!$('.dialog-form-problem').dialog("isOpen")&&
!$('.dialog-form-contact').dialog("isOpen") &&
!intab)
$('#feedback-tab').stop().animate({left:-18});
$('.dialog-all').each(function(){
if($(this).dialog("isOpen")){
minx = $(this).offset().left -5;
maxx = $(this).offset().left + $(this).width() + 5;
miny = $(this).offset().top -5;
maxy = $(this).offset().top + $(this).height() + 5;
inthis = x>=minx && x<=maxx && y>=miny && y<=maxy;
if(!inthis && !intab)
$(this).dialog("close");
}
});
});

$(document).mousemove(function(e){
xpos = e.pageX;
if(xpos<10)
$('#feedback-tab').stop().animate({left:0},'fast');
});

$(".hr").css({
"border-top":"1px solid #000000",
"display":"inline-block",
"width":"39%",
"margin":"0px",
});

jQuery(".dialog-close").css({
$(".dialog-close").css({
"float":"right",
"color":"#aaa",
"margin-bottom":"10px",
Expand All @@ -77,55 +82,61 @@ jQuery(".dialog-close").css({
"cursor":"pointer",
});

jQuery(".fixed-dialog").css
$(".fixed-dialog").css
({
"position": "fixed",
"left": "0px",
"top": "50%",
"left": "0px",
"top": "50%",
"margin-top": "-62px",
"background" : "rgba(220,220,220,0.8)",
});

jQuery(".fixed-dialog form").css
$(".fixed-dialog form").css
({
"margin-top": "10px",
});
$(".feedback-submit").css
({
"float":"right",
});

jQuery("#feedback-tab").click(function(){
if(!jQuery("#dialog-main").dialog("isOpen")){
jQuery(".dialog-all").dialog("close");
jQuery("#dialog-main").dialog("open");
$(".dialog-cancel").click(function(){
$('form').trigger('reset');
$(".dialog-all").dialog("close");
});
$("#feedback-tab").click(function(){
if(!$("#dialog-main").dialog("isOpen")){
$(".dialog-all").dialog("close");
$("#dialog-main").dialog("open");
}
else
jQuery(".dialog-all").dialog("close");
$(".dialog-all").dialog("close");
});

$("#suggest").click(function(){
$(".dialog-form-suggest").dialog("open");
$("#dialog-main").dialog("close");
});

jQuery("#suggest").click(function(){
jQuery(".dialog-form").dialog("open");
jQuery("#form-title").html("Suggest a Feature");
jQuery("#feedback_email_type").val("Suggest a Feature");
jQuery("#dialog-main").dialog("close");
$("#contact").click(function(){
$(".dialog-form-contact").dialog("open");
$("#dialog-main").dialog("close");
});

jQuery("#contact").click(function(){
jQuery(".dialog-form").dialog("open");
jQuery("#form-title").html("Contact Us");
jQuery("#feedback_email_type").val("Contact");
jQuery("#dialog-main").dialog("close");
$("#report").click(function(){
$(".dialog-form-problem").dialog("open");
$("#dialog-main").dialog("close");
});

jQuery("#report").click(function(){
jQuery(".dialog-form").dialog("open");
jQuery("#form-title").html("Report a Problem");
jQuery("#feedback_email_type").val("Report a Problem");
jQuery("#dialog-main").dialog("close");
$(".dialog-close").click(function(){
$('form').trigger('reset');
$(".dialog-all").dialog("close");
});

jQuery(".dialog-close").click(function(){
jQuery(".dialog-all").dialog("close");
$(".feedback-submit").click(function(){
$(".feedback-spinner").html("&nbsp;processing&nbsp;<img height='10px' width='10px' src='http://d3fildg3jlcvty.cloudfront.net/20140604-01/graphics/ajax-loader.gif' />");
$(".dialog-cancel").attr("disabled","disabled");
setTimeout(function(){$(".feedback-submit").attr("disabled","disabled");},500);
});

jQuery(".feedback-submit").click(function(){
jQuery(".feedback-spinner").html("&nbsp;processing&nbsp;<img height='10px' width='10px' src='http://d3fildg3jlcvty.cloudfront.net/20140604-01/graphics/ajax-loader.gif' />");
jQuery(".dialog-cancel").attr("disabled","disabled");
setTimeout(function(){jQuery(".feedback-submit").attr("disabled","disabled");},500);
});

0 comments on commit ea33b51

Please sign in to comment.