Improved layout for categories selection

(ActionItem2928)

Improved layout for categories selection
(ActionItem2928)
Victor Costa
1 parent 894e8962
Showing 4 changed files with 19 additions and 20 deletions Show diff stats
app/helpers/categories_helper.rb
app/views/shared/_select_categories.rhtml
app/views/shared/_select_categories_top.rhtml
public/stylesheets/application.css
@@ -50,7 +50,10 @@ module CategoriesHelper
   #FIXME make this test
   def selected_category_link(cat)
-    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}
+    content_tag('div', button_to_function_without_text(:remove, _('Remove'), nil) {|page| page["selected-category-#{cat.id}"].remove} +
+      link_to_function(cat.full_name(' &rarr; '), nil, :id => "remove-selected-category-#{cat.id}-button", :class => 'select-subcategory-link') {|page| page["selected-category-#{cat.id}"].remove},
+      :class => 'selected-category'
+    )
   end
 end
@@ -3,7 +3,6 @@
 <% categories_for_selection = @categories.select{|i| !@object.respond_to?(:accept_category?) || @object.accept_category?(i)} %>
 <% if !@current_category.nil? %>
-  <div class="category-helper-label"><%= _('Selected:') %></div>
   <%= hidden_field_tag "#{object_name}[#{object_name}_category_id]", @current_category.id unless multiple %>
   <%= hidden_field_tag "#{object_name}[category_ids][]", @current_category.id if multiple %>
   <%= button_to_remote_without_text(:back, _('Back'),
@@ -17,14 +16,14 @@
     categories.push(@current_category) while @current_category = @current_category.parent
   %>
   <%= categories.compact.reverse.map{|i|
-    link_to_remote(i.name, 
+    link_to_remote(i.name,
       :update => "select-categories",
       :url => { :action => 'update_categories', :category_id => i.id, :id => @object },
       :loaded => visual_effect(:highlight, "select-categories"),
       :class => 'select-current-category-link')}.join(' &rarr; ')
   %>
   <%= button_to_function_without_text(:add, _('Add'), nil, :id => 'save-category-button') do |page|
-    page.insert_html :bottom, 'selected-categories', content_tag('span', 
+    page.insert_html :bottom, 'selected-categories', content_tag('div',
       hidden_field_tag("#{object_name}[category_ids][]", categories.first.id) +
       selected_category_link(categories.first), :id => "selected-category-#{categories.first.id}")
   end if multiple %>
@@ -8,21 +8,19 @@
 <%= hidden_field_tag "#{object_name}[category_ids][]", nil %>
 <div id="category-ajax-selector">
-<div id="select-categories">
-    <%= render :partial => 'shared/select_categories', :locals => {:object_name => object_name, :multiple => true, :categories_selected => categories_selected }, :layout => false %>
-</div>
-
 <% unless categories_selected.nil? %>
-<hr>
 <div id="selected-categories">
-  <span class="label"><%= _('Selected categories:') %></span>
+  <div class="label"><%= _('Selected categories:') %></div>
   <% categories_selected.each do |cat| %>
-    <span id="selected-category-<%= cat.id %>">
+    <div id="selected-category-<%= cat.id %>">
       <%= hidden_field_tag("#{object_name}[category_ids][]", cat.id) %>
       <%= selected_category_link(cat) %>
-    </span>
+    </div>
   <% end %>
 </div>
-<div style="clear: both;"></div>
 <% end %>
+<div id="select-categories">
+  <%= render :partial => 'shared/select_categories', :locals => {:object_name => object_name, :multiple => true, :categories_selected => categories_selected }, :layout => false %>
+</div>
+
 </div>
@@ -360,11 +360,15 @@ div.pending-tasks {
 #category-ajax-selector a {
   font-size: 12px;
 }
-#selected-categories span {
-  float: left;
+#selected-categories {
+  padding-bottom: 5px;
 }
 #selected-categories .label {
   font-weight: bold;
+  margin-bottom: 10px;
+}
+.selected-category {
+  padding: 2px 0;
 }
 #category-ajax-selector .box-title {
   position: absolute;
@@ -398,11 +402,6 @@ div.pending-tasks {
   top: 4px;
   right: 2px;
 }
-#category-ajax-selector .icon-add {
-  right: 25px;
-  display: block;
-  position: absolute;
-}
 #profile-header, #profile-footer {
   clear: both;
   max-height: 150px;