Makes tickets and timelogs filters collapsible (UI).

git-svn-id: svn+ssh://rubyforge.org/var/svn/redmine/trunk@2891 e93f8b46-1217-0410-a6f0-8f06a7374b81

10 files changed, 59 insertions, 35 deletions

diff --git a/app/views/issues/calendar.rhtml b/app/views/issues/calendar.rhtml
index 089482927..000e3cdc4 100644
--- a/app/views/issues/calendar.rhtml
+++ b/app/views/issues/calendar.rhtml
@@ -1,20 +1,18 @@
 <% form_tag({}, :id => 'query_form') do %>
 <% if @query.new_record? %>
-    <h2><%= l(:label_calendar) %></h2>
-    <fieldset id="filters"><legend><%= l(:label_filter_plural) %></legend>
+<h2><%= l(:label_calendar) %></h2>
+<fieldset id="filters" class="collapsible">
+  <legend onclick="toggleFieldset(this);"><%= l(:label_filter_plural) %></legend>
+  <div>
     <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
-    </fieldset>
+  </div>
+</fieldset>
 <% else %>
     <h2><%=h @query.name %></h2>
     <% html_title @query.name %>
 <% end %>
 
-<fieldset id="date-range"><legend><%= l(:label_date_range) %></legend>
-    <%= select_month(@month, :prefix => "month", :discard_type => true) %>
-    <%= select_year(@year, :prefix => "year", :discard_type => true) %>
-</fieldset>
-
-<p style="float:right; margin:0px;">
+<p style="float:right;">
 <%= link_to_remote ('&#171; ' + (@month==1 ? "#{month_name(12)} #{@year-1}" : "#{month_name(@month-1)}")), 
                         {:update => "content", :url => { :year => (@month==1 ? @year-1 : @year), :month =>(@month==1 ? 12 : @month-1) }},
                         {:href => url_for(:action => 'calendar', :year => (@month==1 ? @year-1 : @year), :month =>(@month==1 ? 12 : @month-1))}
@@ -26,6 +24,9 @@
 </p>
 
 <p class="buttons">
+<%= select_month(@month, :prefix => "month", :discard_type => true) %>
+<%= select_year(@year, :prefix => "year", :discard_type => true) %>
+
 <%= link_to_remote l(:button_apply), 
                    { :url => { :set_filter => (@query.new_record? ? 1 : nil) },
                      :update => "content",
diff --git a/app/views/issues/gantt.rhtml b/app/views/issues/gantt.rhtml
index 0b38982ce..e1526cc1c 100644
--- a/app/views/issues/gantt.rhtml
+++ b/app/views/issues/gantt.rhtml
@@ -1,23 +1,18 @@
 <% form_tag(params.merge(:month => nil, :year => nil, :months => nil), :id => 'query_form') do %>
 <% if @query.new_record? %>
-    <h2><%=l(:label_gantt)%></h2>
-    <fieldset id="filters"><legend><%= l(:label_filter_plural) %></legend>
+<h2><%=l(:label_gantt)%></h2>
+<fieldset id="filters" class="collapsible">
+  <legend onclick="toggleFieldset(this);"><%= l(:label_filter_plural) %></legend>
+	<div>
     <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
-    </fieldset>
+  </div>
+</fieldset>
 <% else %>
     <h2><%=h @query.name %></h2>
     <% html_title @query.name %>
 <% end %>
 
-<fieldset id="date-range"><legend><%= l(:label_date_range) %></legend>
-    <%= text_field_tag 'months', @gantt.months, :size => 2 %>
-    <%= l(:label_months_from) %>
-    <%= select_month(@gantt.month_from, :prefix => "month", :discard_type => true) %>
-    <%= select_year(@gantt.year_from, :prefix => "year", :discard_type => true) %>
-    <%= hidden_field_tag 'zoom', @gantt.zoom %>
-</fieldset>
-
-<p style="float:right; margin:0px;">
+<p style="float:right;">
 <%= if @gantt.zoom < 4
     link_to_remote image_tag('zoom_in.png'), {:url => @gantt.params.merge(:zoom => (@gantt.zoom+1)), :update => 'content'}, {:href => url_for(@gantt.params.merge(:zoom => (@gantt.zoom+1)))}
   else
@@ -31,6 +26,12 @@
 </p>
 
 <p class="buttons">
+<%= text_field_tag 'months', @gantt.months, :size => 2 %>
+<%= l(:label_months_from) %>
+<%= select_month(@gantt.month_from, :prefix => "month", :discard_type => true) %>
+<%= select_year(@gantt.year_from, :prefix => "year", :discard_type => true) %>
+<%= hidden_field_tag 'zoom', @gantt.zoom %>
+
 <%= link_to_remote l(:button_apply), 
                    { :url => { :set_filter => (@query.new_record? ? 1 : nil) },
                      :update => "content",
diff --git a/app/views/issues/index.rhtml b/app/views/issues/index.rhtml
index e74dbafc1..408a00eaa 100644
--- a/app/views/issues/index.rhtml
+++ b/app/views/issues/index.rhtml
@@ -5,11 +5,19 @@
     <% form_tag({ :controller => 'queries', :action => 'new' }, :id => 'query_form') do %>
     <%= hidden_field_tag('project_id', @project.to_param) if @project %>
 		<div id="query_form_content">
-    <fieldset id="filters"><legend><%= l(:label_filter_plural) %></legend>
-    <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
+    <fieldset id="filters" class="collapsible">
+    	<legend onclick="toggleFieldset(this);"><%= l(:label_filter_plural) %></legend>
+    	<div>
+    		<%= render :partial => 'queries/filters', :locals => {:query => @query} %>
+    	</div>
     </fieldset>
-		<p><%= l(:field_group_by) %>
-		<%= select_tag('group_by', options_for_select([[]] + @query.groupable_columns.collect {|c| [c.caption, c.name.to_s]}, @query.group_by)) %></p>
+    <fieldset class="collapsible collapsed">
+    	<legend onclick="toggleFieldset(this);">Options</legend>
+    	<div style="display: none;">
+				<%= l(:field_group_by) %>
+				<%= select_tag('group_by', options_for_select([[]] + @query.groupable_columns.collect {|c| [c.caption, c.name.to_s]}, @query.group_by)) %></p>
+			</div>
+		</fieldset>
 		</div>
     <p class="buttons">
 
diff --git a/app/views/timelog/_date_range.rhtml b/app/views/timelog/_date_range.rhtml
index 9b4557e1f..0375d3457 100644
--- a/app/views/timelog/_date_range.rhtml
+++ b/app/views/timelog/_date_range.rhtml
@@ -1,4 +1,6 @@
-<fieldset id="filters"><legend><%= l(:label_date_range) %></legend>
+<fieldset id="date-range" class="collapsible">
+<legend onclick="toggleFieldset(this);"><%= l(:label_date_range) %></legend>
+<div>
 <p>
 <%= radio_button_tag 'period_type', '1', !@free_period %>
 <%= select_tag 'period', options_for_period_select(params[:period]),
@@ -11,9 +13,16 @@
 <%= l(:label_date_from_to, :start => (text_field_tag('from', @from, :size => 10) + calendar_for('from')),
 													 :end => (text_field_tag('to', @to, :size => 10) + calendar_for('to'))) %>
 </span>
-<%= submit_tag l(:button_apply), :name => nil %>
 </p>
+</div>
 </fieldset>
+<p class="buttons">
+	<%= link_to_remote l(:button_apply), 
+	                   { :url => { },
+	                     :update => "content",
+	                     :with => "Form.serialize('query_form')"
+	                   }, :class => 'icon icon-checked' %>
+</p>
 
 <div class="tabs">
 <% url_params = @free_period ? { :from => @from, :to => @to } : { :period => params[:period] } %>
diff --git a/app/views/timelog/details.rhtml b/app/views/timelog/details.rhtml
index 20cf8cea4..eecfec2eb 100644
--- a/app/views/timelog/details.rhtml
+++ b/app/views/timelog/details.rhtml
@@ -6,7 +6,7 @@
 

 <h2><%= l(:label_spent_time) %></h2>

 

-<% form_remote_tag( :url => {}, :html => {:method => :get}, :method => :get, :update => 'content' ) do %>

+<% form_remote_tag( :url => {}, :html => {:method => :get, :id => 'query_form'}, :method => :get, :update => 'content' ) do %>

 <%# TOOD: remove the project_id and issue_id hidden fields, that information is

 already in the URI %>

 <%= hidden_field_tag('project_id', params[:project_id]) if @project %>

diff --git a/app/views/timelog/report.rhtml b/app/views/timelog/report.rhtml
index 52bd11f48..2107fcf72 100644
--- a/app/views/timelog/report.rhtml
+++ b/app/views/timelog/report.rhtml
@@ -6,7 +6,7 @@
 
 <h2><%= l(:label_spent_time) %></h2>
 
-<% form_remote_tag(:url => {}, :html => {:method => :get}, :method => :get, :update => 'content') do %>
+<% form_remote_tag(:url => {}, :html => {:method => :get, :id => 'query_form'}, :method => :get, :update => 'content') do %>
   <% @criterias.each do |criteria| %>
     <%= hidden_field_tag 'criterias[]', criteria, :id => nil %>
   <% end %>
diff --git a/public/images/arrow_collapsed.png b/public/images/arrow_collapsed.png
new file mode 100644
index 000000000..abe1f1d23
--- /dev/null
+++ b/public/images/arrow_collapsed.png
diff --git a/public/images/arrow_expanded.png b/public/images/arrow_expanded.png
new file mode 100644
index 000000000..4daa4f7c6
--- /dev/null
+++ b/public/images/arrow_expanded.png
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 93d4a8bda..cc75c8180 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -33,6 +33,12 @@ function toggleRowGroup(el) {
 	}
 }
 
+function toggleFieldset(el) {
+	var fieldset = Element.up(el, 'fieldset');
+	fieldset.toggleClassName('collapsed');
+	Effect.toggle(fieldset.down('div'), 'slide', {duration:0.2});
+}
+
 var fileFieldCount = 1;
 
 function addFileField() {
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index d4249dfb8..61f039b04 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -200,17 +200,16 @@ p.breadcrumb { font-size: 0.9em; margin: 4px 0 4px 0;}
 p.subtitle { font-size: 0.9em; margin: -6px 0 12px 0; font-style: italic; } 
 p.footnote { font-size: 0.9em; margin-top: 0px; margin-bottom: 0px; }
 
-#query_form_content { font-size: 0.9em; padding: 4px; background: #f6f6f6; border: 1px solid #e4e4e4; }
-#query_form_content fieldset#filters { border-left: 0; border-right: 0; }
-#query_form_content p { margin-top: 0.5em; margin-bottom: 0.5em; }
+fieldset.collapsible { border-width: 1px 0 0 0; font-size: 0.9em; }
+fieldset.collapsible legend { padding-left: 16px; background: url(../images/arrow_expanded.png) no-repeat 0% 40%; cursor:pointer; }
+fieldset.collapsible.collapsed legend { background-image: url(../images/arrow_collapsed.png); }
 
-fieldset#filters, fieldset#date-range { padding: 0.7em; margin-bottom: 8px; }
-fieldset#filters p { margin: 1.2em 0 0.8em 2px; }
+fieldset#date-range p { margin: 2px 0 2px 0; }
 fieldset#filters table { border-collapse: collapse; }
 fieldset#filters table td { padding: 0; vertical-align: middle; }
 fieldset#filters tr.filter { height: 2em; }
 fieldset#filters td.add-filter { text-align: right; vertical-align: top; }
-.buttons { font-size: 0.9em; margin-bottom: 1.4em; }
+.buttons { font-size: 0.9em; margin-bottom: 1.4em; margin-top: 1em; }
 
 div#issue-changesets {float:right; width:45%; margin-left: 1em; margin-bottom: 1em; background: #fff; padding-left: 1em; font-size: 90%;}
 div#issue-changesets .changeset { padding: 4px;}