Commit 8e7fe1a5e88ad525a33ee884a62a2934a8552271

Authored by Victor Costa
1 parent 894e8962

Improved layout for categories selection

(ActionItem2928)
app/helpers/categories_helper.rb
@@ -50,7 +50,10 @@ module CategoriesHelper @@ -50,7 +50,10 @@ module CategoriesHelper
50 50
51 #FIXME make this test 51 #FIXME make this test
52 def selected_category_link(cat) 52 def selected_category_link(cat)
53 - link_to_function(cat.full_name, nil, :id => "remove-selected-category-#{cat.id}-button", :class => 'select-subcategory-link') {|page| page["selected-category-#{cat.id}"].remove} 53 + content_tag('div', button_to_function_without_text(:remove, _('Remove'), nil) {|page| page["selected-category-#{cat.id}"].remove} +
  54 + link_to_function(cat.full_name(' → '), nil, :id => "remove-selected-category-#{cat.id}-button", :class => 'select-subcategory-link') {|page| page["selected-category-#{cat.id}"].remove},
  55 + :class => 'selected-category'
  56 + )
54 end 57 end
55 58
56 end 59 end
app/views/shared/_select_categories.rhtml
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 <% categories_for_selection = @categories.select{|i| !@object.respond_to?(:accept_category?) || @object.accept_category?(i)} %> 3 <% categories_for_selection = @categories.select{|i| !@object.respond_to?(:accept_category?) || @object.accept_category?(i)} %>
4 4
5 <% if !@current_category.nil? %> 5 <% if !@current_category.nil? %>
6 - <div class="category-helper-label"><%= _('Selected:') %></div>  
7 <%= hidden_field_tag "#{object_name}[#{object_name}_category_id]", @current_category.id unless multiple %> 6 <%= hidden_field_tag "#{object_name}[#{object_name}_category_id]", @current_category.id unless multiple %>
8 <%= hidden_field_tag "#{object_name}[category_ids][]", @current_category.id if multiple %> 7 <%= hidden_field_tag "#{object_name}[category_ids][]", @current_category.id if multiple %>
9 <%= button_to_remote_without_text(:back, _('Back'), 8 <%= button_to_remote_without_text(:back, _('Back'),
@@ -17,14 +16,14 @@ @@ -17,14 +16,14 @@
17 categories.push(@current_category) while @current_category = @current_category.parent 16 categories.push(@current_category) while @current_category = @current_category.parent
18 %> 17 %>
19 <%= categories.compact.reverse.map{|i| 18 <%= categories.compact.reverse.map{|i|
20 - link_to_remote(i.name, 19 + link_to_remote(i.name,
21 :update => "select-categories", 20 :update => "select-categories",
22 :url => { :action => 'update_categories', :category_id => i.id, :id => @object }, 21 :url => { :action => 'update_categories', :category_id => i.id, :id => @object },
23 :loaded => visual_effect(:highlight, "select-categories"), 22 :loaded => visual_effect(:highlight, "select-categories"),
24 :class => 'select-current-category-link')}.join(' &rarr; ') 23 :class => 'select-current-category-link')}.join(' &rarr; ')
25 %> 24 %>
26 <%= button_to_function_without_text(:add, _('Add'), nil, :id => 'save-category-button') do |page| 25 <%= button_to_function_without_text(:add, _('Add'), nil, :id => 'save-category-button') do |page|
27 - page.insert_html :bottom, 'selected-categories', content_tag('span', 26 + page.insert_html :bottom, 'selected-categories', content_tag('div',
28 hidden_field_tag("#{object_name}[category_ids][]", categories.first.id) + 27 hidden_field_tag("#{object_name}[category_ids][]", categories.first.id) +
29 selected_category_link(categories.first), :id => "selected-category-#{categories.first.id}") 28 selected_category_link(categories.first), :id => "selected-category-#{categories.first.id}")
30 end if multiple %> 29 end if multiple %>
app/views/shared/_select_categories_top.rhtml
@@ -8,21 +8,19 @@ @@ -8,21 +8,19 @@
8 <%= hidden_field_tag "#{object_name}[category_ids][]", nil %> 8 <%= hidden_field_tag "#{object_name}[category_ids][]", nil %>
9 9
10 <div id="category-ajax-selector"> 10 <div id="category-ajax-selector">
11 -<div id="select-categories">  
12 - <%= render :partial => 'shared/select_categories', :locals => {:object_name => object_name, :multiple => true, :categories_selected => categories_selected }, :layout => false %>  
13 -</div>  
14 -  
15 <% unless categories_selected.nil? %> 11 <% unless categories_selected.nil? %>
16 -<hr>  
17 <div id="selected-categories"> 12 <div id="selected-categories">
18 - <span class="label"><%= _('Selected categories:') %></span> 13 + <div class="label"><%= _('Selected categories:') %></div>
19 <% categories_selected.each do |cat| %> 14 <% categories_selected.each do |cat| %>
20 - <span id="selected-category-<%= cat.id %>"> 15 + <div id="selected-category-<%= cat.id %>">
21 <%= hidden_field_tag("#{object_name}[category_ids][]", cat.id) %> 16 <%= hidden_field_tag("#{object_name}[category_ids][]", cat.id) %>
22 <%= selected_category_link(cat) %> 17 <%= selected_category_link(cat) %>
23 - </span> 18 + </div>
24 <% end %> 19 <% end %>
25 </div> 20 </div>
26 -<div style="clear: both;"></div>  
27 <% end %> 21 <% end %>
  22 +<div id="select-categories">
  23 + <%= render :partial => 'shared/select_categories', :locals => {:object_name => object_name, :multiple => true, :categories_selected => categories_selected }, :layout => false %>
  24 +</div>
  25 +
28 </div> 26 </div>
public/stylesheets/application.css
@@ -360,11 +360,15 @@ div.pending-tasks { @@ -360,11 +360,15 @@ div.pending-tasks {
360 #category-ajax-selector a { 360 #category-ajax-selector a {
361 font-size: 12px; 361 font-size: 12px;
362 } 362 }
363 -#selected-categories span {  
364 - float: left; 363 +#selected-categories {
  364 + padding-bottom: 5px;
365 } 365 }
366 #selected-categories .label { 366 #selected-categories .label {
367 font-weight: bold; 367 font-weight: bold;
  368 + margin-bottom: 10px;
  369 +}
  370 +.selected-category {
  371 + padding: 2px 0;
368 } 372 }
369 #category-ajax-selector .box-title { 373 #category-ajax-selector .box-title {
370 position: absolute; 374 position: absolute;
@@ -398,11 +402,6 @@ div.pending-tasks { @@ -398,11 +402,6 @@ div.pending-tasks {
398 top: 4px; 402 top: 4px;
399 right: 2px; 403 right: 2px;
400 } 404 }
401 -#category-ajax-selector .icon-add {  
402 - right: 25px;  
403 - display: block;  
404 - position: absolute;  
405 -}  
406 #profile-header, #profile-footer { 405 #profile-header, #profile-footer {
407 clear: both; 406 clear: both;
408 max-height: 150px; 407 max-height: 150px;