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