Software category search by checkbox

Signed-off-by: Hebert Douglas <hebertdougl@gmail.com> Signed-off-by: Luciano Prestes <lucianopcbr@gmail.com>

Software category search by checkbox
Signed-off-by: Hebert Douglas <hebertdougl@gmail.com> Signed-off-by: Luciano Prestes <lucianopcbr@gmail.com>
Luciano Prestes · Gabriela Navarro
1 parent bf6d5fe0
Showing 6 changed files with 321 additions and 29 deletions Show diff stats
lib/ext/search_controller.rb
lib/mpog_software_plugin.rb
public/catalog-filter.js
public/style.css
views/search/_catalog_filter.html.erb
views/search/_mpog_search_form.html.erb
@@ -22,9 +22,31 @@ class SearchController
   def software_infos
-    @titles[:software_infos] = _("Software Catalog")
+    @titles[:software_infos] = _("Public Software Catalog")
     @category_filters = []
     @categories = Category.all
+    @selected_categories = params[:selected_categories]
+
+    @selected_categories_name = []
+    @message_selected_options = "Most options"
+    unless @selected_categories.nil?
+      @message_selected_options = _("Selected options: ")
+      @selected_categories.each do |k, v|
+        @message_selected_options << "#{k}; "
+        @selected_categories_name << k
+      end
+    end
+
+    @categories.sort!{|a, b| a.name <=> b.name}
+    @categories_groupe_one = []
+    @categories_groupe_two = []
+    (0..(@categories.count - 1)).each do |i|
+      if i % 2 == 0
+        @categories_groupe_one << @categories[i]
+      else
+        @categories_groupe_two << @categories[i]
+      end
+    end
     results = filter_software_infos_list
     results = results.paginate(:per_page => 24, :page => params[:page])
@@ -54,11 +76,16 @@ class SearchController
   def filter_software_infos_list
     filtered_software_list = SoftwareInfo.like_search(params[:query])
-    if not params[:categories].blank?
-      @category_filters = params[:categories].select {|c| c.to_i != 0 }
+    category_ids = []
+    unless params[:selected_categories].blank?
+      category_ids = params[:selected_categories].values
+    end
+    category_ids = category_ids.map(&:to_i)
+    unless category_ids.empty?
       filtered_software_list.select! do |software|
-        !(software.community.category_ids & @category_filters).blank?
+        result_ids = (software.community.category_ids & category_ids).sort
+        result_ids == category_ids.sort
       end
     end
@@ -130,6 +130,7 @@ class MpogSoftwarePlugin &lt; Noosfero::Plugin
       mpog-search.js
       software-catalog.js
       mpog-software-block.js
+      catalog-filter.js
     )
   end
@@ -0,0 +1,59 @@
+jQuery(function(){
+  function show_head_message() {
+    if (jQuery("#filter-categories-select-catalog").text().blank()){
+      jQuery("#filter-categories-select-catalog").hide();
+      jQuery("#filter-option-catalog-software").show();
+    }else{
+      jQuery("#filter-categories-select-catalog").show();
+      jQuery("#filter-option-catalog-software").hide();
+    }
+  }
+
+  show_head_message();
+
+  jQuery("#filter-categories-option").hide();
+  jQuery("#filter-option-catalog-software").click(function(){
+    jQuery("#filter-categories-option").slideDown();
+    jQuery("#filter-option-catalog-software").hide();
+  });
+
+  jQuery("#filter-categories-option").hide();
+  jQuery("#filter-categories-select-catalog").click(function(){
+    jQuery("#filter-categories-option").slideDown();
+    jQuery("#filter-categories-select-catalog").hide();
+  });
+
+  jQuery("#close-filter-catalog").click(function(){
+    jQuery("#filter-categories-option").slideUp();
+    show_head_message();
+  });
+
+  jQuery("#cleanup-filter-catalg").click(function(){
+    jQuery("#filter-categories-option").slideUp();
+    jQuery("#filter-option-catalog-software").show();
+    jQuery("#group-categories input:checked").each(function() {
+      jQuery(this).prop('checked', false);
+    });
+  });
+
+  jQuery(".categories-catalog").click(function(){
+    jQuery("#filter-categories-option").slideUp();
+    jQuery("#filter-categories-select-catalog").show();
+    jQuery("#filter-option-catalog-software").hide();
+  });
+
+  jQuery(".project-software").click(function(){
+    jQuery("#filter-categories-option").slideUp();
+    jQuery("#filter-categories-select-catalog").show();
+    jQuery("#filter-option-catalog-software").hide();
+  });
+
+  function clear_categories_filter(e) {
+    e.preventDefault();
+    jQuery("#categories-filter input:checked").each(function() {
+      jQuery(this).prop('checked', false);
+    });
+  }
+});
+
+
@@ -268,3 +268,194 @@
   background-color:rgba(255, 255, 255, 0.9);
 }
 /* End software block main area definitions */
+
+/* Software catalog definitions */
+
+#main-content-wrapper-8 h2{
+  margin:0px;
+  font-family: arial;
+  font-weight: normal;
+  font-size: 16px;
+  color: #F50054;
+  text-transform: uppercase;
+}
+
+#main-content-wrapper-8 h1{
+  font-family: arial;
+  color:#121D2B;
+}
+
+.search-form{
+  background:#EAEBEE; /*#1A397D;*/
+  /*padding:10px;*/
+  padding: 5px 5px 1px 10px;
+  border-top-left-radius:4px;
+  border-top-right-radius: 4px;
+}
+
+.search-form h3{
+  text-transform: uppercase;
+  font-family: arial;
+  font-size: 14px;
+  margin-bottom: 5px;
+  color:#2B51A8;
+}
+
+#search-input{
+  width: 700px;
+  border-radius:3px;
+  font-size: 140%;
+  background: #ffffff;
+  border: medium none;
+}
+
+input.button.with-text.icon-search.submit{
+  font-size: 14px;
+  background:#2B51A8; /*#2B65CD;*#1A397D;*/
+  margin-top:8px;
+  color:#ffffff;
+  text-transform: uppercase;
+  border-radius: 4px;
+  /*border: 1px solid #ffffff;*/
+  border: 1px solid #2B51A8;
+  padding: 5px 15px;
+
+}
+
+#filter-option-catalog-software{
+  padding:8px;
+  color:#000;
+  text-transform: uppercase;
+  text-align: right;
+  border-top: 1px solid #ffffff;
+  background-color: #D4D5DC; /*#172857;*/
+  border-bottom-left-radius:4px;
+  border-bottom-right-radius: 4px;
+}
+
+#filter-option-catalog-software:hover{
+  background-color: #2B65CD;
+  border-bottom-left-radius:4px;
+  border-bottom-right-radius: 4px;
+  cursor:pointer;
+}
+
+#filter-categories-select-catalog{
+  border-top: 1px solid #ffffff;
+  margin:0px;
+  cursor:pointer;
+  padding: 8px;
+  /*color: #FFF;*/
+  text-transform: uppercase;
+}
+
+#filter-categories-option{
+  border-top: 1px solid #ffffff;
+  padding: 15px 10px;
+}
+
+/*#filter-categories{
+  margin:10px 5px;
+  color:#ffffff;
+}*/
+
+#filter-categories-catalog h4{
+  margin:10px 5px;
+  color:#000;
+}
+
+#group-categories{
+  line-height: 31px;
+}
+
+#gruop-catalog-01{
+  float:left;
+  width: 50%;
+}
+
+#gruop-catalog-02{
+  margin-left: 50%;
+  line-height: 31px;
+}
+
+.project-software{
+  border-top: 1px dashed;
+  border-bottom: 1px dashed;
+  margin-top:10px;
+  padding:10px;
+}
+
+
+#filter-catalog-software{
+  /*border: 1px solid #ffffff;*/
+  background-color: #D4D5DC; /*#ccc;#172857;*/
+  border-bottom-left-radius:4px;
+  border-bottom-right-radius: 4px;
+
+}
+
+#cleanup-filter-catalg{
+  margin-left:5px;
+}
+
+#cleanup-filter-catalg{
+  background:#2B65CD; /*#1A397D;*/
+  margin-top:5px;
+  color:#ffffff;
+  /*text-transform: uppercase;*/
+  border-radius: 4px;
+  /*border: 1px solid #ffffff;*/
+  border: 1px solid #2B65CD;
+  padding: 5px 10px;
+  font-size: 12px;
+}
+#cleanup-filter-catalg:hover{
+  background-color: #172857;
+}
+
+#close-filter-catalog{
+  float:right;
+  border:none;
+  background: none;
+  font-size:12px;
+  margin-top: 5px;
+  color: #000;
+  text-transform: uppercase;
+  padding: 5px;
+
+}
+/*
+#close-filter-catalog:hover{
+  background:#2B65CD;
+  border-radius: 4px;
+  margin-top: 5px;
+  color: #FFF;
+  text-transform: uppercase;
+  border-radius: 4px;
+  border: 1px solid #2B65CD;
+  padding: 5px;
+}
+
+#close-filter-catalog:after{
+    content:"︿";
+    padding-left: 7px;
+    padding-right: 4px;
+    color: #172857;
+    background: none repeat scroll 0% 0% #EEE;
+    border-radius: 4px;
+    font-size: 15px;
+    line-height: 20px;
+    text-align: center;
+    position: relative;
+    margin-left: 5px;
+    top: 2px;
+    margin-right: 15px;
+}
+*/
+
+input[type=checkbox] {
+  border:1px solid #000;
+  margin:8px;
+  cursor:pointer;
+}
+/* End software catalog definitions */
 \ No newline at end of file
-<div id="catalog-list">
-<br>
-<ul>
-  <% @category_filters.each do |filter_id| %>
-    <li class="category_box"> <%= _(Category.find(filter_id).name) %>
-    <span class="catalog-remove-item" data-id="<%= filter_id %>" >x</span>
-    </li>
-  <% end %>
-</ul>
-</div>
+<div id="main-content-wrapper-8"> <!-- id do Noosfero -->
+
+<div id="filter-catalog-software">
+
+  <div id="filter-option-catalog-software"> Mais opções </div>
+   <!--Quando tiver filtros(categorias)selecionados mostrar esta opção: Opções selecionadas-->
-<div id="catalog-filter">
-  <div id='selected-options'>
-    <span><%= _('Selected options: ') %> sagdhjasgdhjagsd</span>
-  </div>
+  <div id="filter-categories-select-catalog"> <%= @message_selected_options %> </div>
-  <div id='categories'>
-    <div id='categories-left'>
-      <ul>
-        <% @categories.each do |category| %>
-          <li>
-            <%= labelled_check_box category.name, "categories[]", category.id %>
-          </li>
+  <div id="filter-categories-option">
+
+  <div id="filter-categories-catalog"><h4> <%= _("Categories") %> </h4></div>
+    <div id="group-categories">
+      <div id="gruop-catalog-01">
+        <% @categories_groupe_one.each do |category| %>
+          <label>
+            <%= check_box_tag("selected_categories[#{category.name}]", category.id, @selected_categories_name.include?(category.name), :class => "categories-catalog") %>
+                    <%= _("#{category.name}") %>
+          </label> <br>
+        <% end %>
+      </div>
+      <div id="group-catalog-02">
+        <% @categories_groupe_two.each do |category| %>
+          <label>
+            <%= check_box_tag("selected_categories[#{category.name}]", category.id, @selected_categories_name.include?(category.name), :class => "categories-catalog") %>
+                    <%= _("#{category.name}") %>
+          </label> <br>
         <% end %>
-      </ul>
+      </div>
     </div>
-  </div>
+
+  <div class="project-software"> <%= _("Software Projects:") %>
+    <label><input type="checkbox" name="filter" value="Incluir nos resultados"> <%= _("Include in results") %> </label>
+    <span class"doubts-catalog-software" title="Incluir projetos de software em desenvolvimento que ainda não são oficialmente Software Público Brasileiro.">(?)</span>
+    <!--<p><acronym title="Incluir projetos de software em desenvolvimento que ainda não são oficialmente Software Público Brasileiro.">(?)
+    </acronym></p>-->
+  </div><br>
+  <%= button_tag _("Clean up"), :id => "cleanup-filter-catalg", :type => "button" %>
+  <%= button_tag _("Close"), :id => "close-filter-catalog", :type => "button" %>
 </div>
 </div>
+</div>
 \ No newline at end of file
@@ -3,6 +3,8 @@
   <%= form_tag( { :controller => 'search', :action => @asset ? @asset : 'index', :asset => nil, :category_path => ( @category ? @category.path : nil ) },
                  :method => 'get', :class => 'search_form' ) do %>
+    <div style="margin:0;padding:0;display:inline">
+      <input name="utf8" type="hidden" value="&#x2713;" /></div>
     <%= hidden_field_tag :display, params[:display] %>
     <%= hidden_field_tag :filter, params[:filter] %>
@@ -12,12 +14,11 @@
         <%= javascript_tag "jQuery('#search-input').attr('title', \"#{hint}\").hint()" if defined?(hint) %>
       </span>
-      <%= submit_button(:search, _('Search')) %>
+      <%= submit_button(:search, _('Search'), :class => "button with-text icon-search submit") %>
     </div>
     <%= render :partial => 'search_form_extra_fields' %>
     <%= render :partial => 'catalog_filter' %>
-
   <% end %>
   <% if @empty_query %>
	@@ -22,9 +22,31 @@ class SearchController		@@ -22,9 +22,31 @@ class SearchController
22		22
23		23
24	def software_infos	24	def software_infos
25	- @titles[:software_infos] = _("Software Catalog")	25	+ @titles[:software_infos] = _("Public Software Catalog")
26	@category_filters = []	26	@category_filters = []
27	@categories = Category.all	27	@categories = Category.all
		28	+ @selected_categories = params[:selected_categories]
		29	+
		30	+ @selected_categories_name = []
		31	+ @message_selected_options = "Most options"
		32	+ unless @selected_categories.nil?
		33	+ @message_selected_options = _("Selected options: ")
		34	+ @selected_categories.each do \|k, v\|
		35	+ @message_selected_options << "#{k}; "
		36	+ @selected_categories_name << k
		37	+ end
		38	+ end
		39	+
		40	+ @categories.sort!{\|a, b\| a.name <=> b.name}
		41	+ @categories_groupe_one = []
		42	+ @categories_groupe_two = []
		43	+ (0..(@categories.count - 1)).each do \|i\|
		44	+ if i % 2 == 0
		45	+ @categories_groupe_one << @categories[i]
		46	+ else
		47	+ @categories_groupe_two << @categories[i]
		48	+ end
		49	+ end
28		50
29	results = filter_software_infos_list	51	results = filter_software_infos_list
30	results = results.paginate(:per_page => 24, :page => params[:page])	52	results = results.paginate(:per_page => 24, :page => params[:page])
	@@ -54,11 +76,16 @@ class SearchController		@@ -54,11 +76,16 @@ class SearchController
54	def filter_software_infos_list	76	def filter_software_infos_list
55	filtered_software_list = SoftwareInfo.like_search(params[:query])	77	filtered_software_list = SoftwareInfo.like_search(params[:query])
56		78
57	- if not params[:categories].blank?
58	- @category_filters = params[:categories].select {\|c\| c.to_i != 0 }	79	+ category_ids = []
		80	+ unless params[:selected_categories].blank?
		81	+ category_ids = params[:selected_categories].values
		82	+ end
		83	+ category_ids = category_ids.map(&:to_i)
59		84
		85	+ unless category_ids.empty?
60	filtered_software_list.select! do \|software\|	86	filtered_software_list.select! do \|software\|
61	- !(software.community.category_ids & @category_filters).blank?	87	+ result_ids = (software.community.category_ids & category_ids).sort
		88	+ result_ids == category_ids.sort
62	end	89	end
63	end	90	end
64		91
	@@ -130,6 +130,7 @@ class MpogSoftwarePlugin < Noosfero::Plugin		@@ -130,6 +130,7 @@ class MpogSoftwarePlugin < Noosfero::Plugin
130	mpog-search.js	130	mpog-search.js
131	software-catalog.js	131	software-catalog.js
132	mpog-software-block.js	132	mpog-software-block.js
		133	+ catalog-filter.js
133	)	134	)
134	end	135	end
135		136
@@ -0,0 +1,59 @@		@@ -0,0 +1,59 @@
	1	+jQuery(function(){
	2	+ function show_head_message() {
	3	+ if (jQuery("#filter-categories-select-catalog").text().blank()){
	4	+ jQuery("#filter-categories-select-catalog").hide();
	5	+ jQuery("#filter-option-catalog-software").show();
	6	+ }else{
	7	+ jQuery("#filter-categories-select-catalog").show();
	8	+ jQuery("#filter-option-catalog-software").hide();
	9	+ }
	10	+ }
	11	+
	12	+ show_head_message();
	13	+
	14	+ jQuery("#filter-categories-option").hide();
	15	+ jQuery("#filter-option-catalog-software").click(function(){
	16	+ jQuery("#filter-categories-option").slideDown();
	17	+ jQuery("#filter-option-catalog-software").hide();
	18	+ });
	19	+
	20	+ jQuery("#filter-categories-option").hide();
	21	+ jQuery("#filter-categories-select-catalog").click(function(){
	22	+ jQuery("#filter-categories-option").slideDown();
	23	+ jQuery("#filter-categories-select-catalog").hide();
	24	+ });
	25	+
	26	+ jQuery("#close-filter-catalog").click(function(){
	27	+ jQuery("#filter-categories-option").slideUp();
	28	+ show_head_message();
	29	+ });
	30	+
	31	+ jQuery("#cleanup-filter-catalg").click(function(){
	32	+ jQuery("#filter-categories-option").slideUp();
	33	+ jQuery("#filter-option-catalog-software").show();
	34	+ jQuery("#group-categories input:checked").each(function() {
	35	+ jQuery(this).prop('checked', false);
	36	+ });
	37	+ });
	38	+
	39	+ jQuery(".categories-catalog").click(function(){
	40	+ jQuery("#filter-categories-option").slideUp();
	41	+ jQuery("#filter-categories-select-catalog").show();
	42	+ jQuery("#filter-option-catalog-software").hide();
	43	+ });
	44	+
	45	+ jQuery(".project-software").click(function(){
	46	+ jQuery("#filter-categories-option").slideUp();
	47	+ jQuery("#filter-categories-select-catalog").show();
	48	+ jQuery("#filter-option-catalog-software").hide();
	49	+ });
	50	+
	51	+ function clear_categories_filter(e) {
	52	+ e.preventDefault();
	53	+ jQuery("#categories-filter input:checked").each(function() {
	54	+ jQuery(this).prop('checked', false);
	55	+ });
	56	+ }
	57	+});
	58	+
	59	+
	@@ -268,3 +268,194 @@		@@ -268,3 +268,194 @@
268	background-color:rgba(255, 255, 255, 0.9);	268	background-color:rgba(255, 255, 255, 0.9);
269	}	269	}
270	/* End software block main area definitions */	270	/* End software block main area definitions */
		271	+
		272	+/* Software catalog definitions */
		273	+
		274	+#main-content-wrapper-8 h2{
		275	+ margin:0px;
		276	+ font-family: arial;
		277	+ font-weight: normal;
		278	+ font-size: 16px;
		279	+ color: #F50054;
		280	+ text-transform: uppercase;
		281	+}
		282	+
		283	+#main-content-wrapper-8 h1{
		284	+ font-family: arial;
		285	+ color:#121D2B;
		286	+}
		287	+
		288	+.search-form{
		289	+ background:#EAEBEE; /#1A397D;/
		290	+ /padding:10px;/
		291	+ padding: 5px 5px 1px 10px;
		292	+ border-top-left-radius:4px;
		293	+ border-top-right-radius: 4px;
		294	+}
		295	+
		296	+.search-form h3{
		297	+ text-transform: uppercase;
		298	+ font-family: arial;
		299	+ font-size: 14px;
		300	+ margin-bottom: 5px;
		301	+ color:#2B51A8;
		302	+}
		303	+
		304	+#search-input{
		305	+ width: 700px;
		306	+ border-radius:3px;
		307	+ font-size: 140%;
		308	+ background: #ffffff;
		309	+ border: medium none;
		310	+}
		311	+
		312	+input.button.with-text.icon-search.submit{
		313	+ font-size: 14px;
		314	+ background:#2B51A8; /#2B65CD;#1A397D;*/
		315	+ margin-top:8px;
		316	+ color:#ffffff;
		317	+ text-transform: uppercase;
		318	+ border-radius: 4px;
		319	+ /border: 1px solid #ffffff;/
		320	+ border: 1px solid #2B51A8;
		321	+ padding: 5px 15px;
		322	+
		323	+}
		324	+
		325	+#filter-option-catalog-software{
		326	+ padding:8px;
		327	+ color:#000;
		328	+ text-transform: uppercase;
		329	+ text-align: right;
		330	+ border-top: 1px solid #ffffff;
		331	+ background-color: #D4D5DC; /#172857;/
		332	+ border-bottom-left-radius:4px;
		333	+ border-bottom-right-radius: 4px;
		334	+}
		335	+
		336	+#filter-option-catalog-software:hover{
		337	+ background-color: #2B65CD;
		338	+ border-bottom-left-radius:4px;
		339	+ border-bottom-right-radius: 4px;
		340	+ cursor:pointer;
		341	+}
		342	+
		343	+#filter-categories-select-catalog{
		344	+ border-top: 1px solid #ffffff;
		345	+ margin:0px;
		346	+ cursor:pointer;
		347	+ padding: 8px;
		348	+ /color: #FFF;/
		349	+ text-transform: uppercase;
		350	+}
		351	+
		352	+#filter-categories-option{
		353	+ border-top: 1px solid #ffffff;
		354	+ padding: 15px 10px;
		355	+}
		356	+
		357	+/*#filter-categories{
		358	+ margin:10px 5px;
		359	+ color:#ffffff;
		360	+}*/
		361	+
		362	+#filter-categories-catalog h4{
		363	+ margin:10px 5px;
		364	+ color:#000;
		365	+}
		366	+
		367	+#group-categories{
		368	+ line-height: 31px;
		369	+}
		370	+
		371	+#gruop-catalog-01{
		372	+ float:left;
		373	+ width: 50%;
		374	+}
		375	+
		376	+#gruop-catalog-02{
		377	+ margin-left: 50%;
		378	+ line-height: 31px;
		379	+}
		380	+
		381	+.project-software{
		382	+ border-top: 1px dashed;
		383	+ border-bottom: 1px dashed;
		384	+ margin-top:10px;
		385	+ padding:10px;
		386	+}
		387	+
		388	+
		389	+#filter-catalog-software{
		390	+ /border: 1px solid #ffffff;/
		391	+ background-color: #D4D5DC; /#ccc;#172857;/
		392	+ border-bottom-left-radius:4px;
		393	+ border-bottom-right-radius: 4px;
		394	+
		395	+}
		396	+
		397	+#cleanup-filter-catalg{
		398	+ margin-left:5px;
		399	+}
		400	+
		401	+#cleanup-filter-catalg{
		402	+ background:#2B65CD; /#1A397D;/
		403	+ margin-top:5px;
		404	+ color:#ffffff;
		405	+ /text-transform: uppercase;/
		406	+ border-radius: 4px;
		407	+ /border: 1px solid #ffffff;/
		408	+ border: 1px solid #2B65CD;
		409	+ padding: 5px 10px;
		410	+ font-size: 12px;
		411	+}
		412	+#cleanup-filter-catalg:hover{
		413	+ background-color: #172857;
		414	+}
		415	+
		416	+#close-filter-catalog{
		417	+ float:right;
		418	+ border:none;
		419	+ background: none;
		420	+ font-size:12px;
		421	+ margin-top: 5px;
		422	+ color: #000;
		423	+ text-transform: uppercase;
		424	+ padding: 5px;
		425	+
		426	+}
		427	+/*
		428	+#close-filter-catalog:hover{
		429	+ background:#2B65CD;
		430	+ border-radius: 4px;
		431	+ margin-top: 5px;
		432	+ color: #FFF;
		433	+ text-transform: uppercase;
		434	+ border-radius: 4px;
		435	+ border: 1px solid #2B65CD;
		436	+ padding: 5px;
		437	+}
		438	+
		439	+#close-filter-catalog:after{
		440	+ content:"︿";
		441	+ padding-left: 7px;
		442	+ padding-right: 4px;
		443	+ color: #172857;
		444	+ background: none repeat scroll 0% 0% #EEE;
		445	+ border-radius: 4px;
		446	+ font-size: 15px;
		447	+ line-height: 20px;
		448	+ text-align: center;
		449	+ position: relative;
		450	+ margin-left: 5px;
		451	+ top: 2px;
		452	+ margin-right: 15px;
		453	+}
		454	+*/
		455	+
		456	+input[type=checkbox] {
		457	+ border:1px solid #000;
		458	+ margin:8px;
		459	+ cursor:pointer;
		460	+}
		461	+/* End software catalog definitions */
271	\ No newline at end of file	462	\ No newline at end of file
1	-<div id="catalog-list">
2	-<br>
3	-<ul>
4	- <% @category_filters.each do \|filter_id\| %>
5	- <li class="category_box"> <%= _(Category.find(filter_id).name) %>
6	- <span class="catalog-remove-item" data-id="<%= filter_id %>" >x</span>
7	- </li>
8	- <% end %>
9	-</ul>
10	-</div>	1	+<div id="main-content-wrapper-8"> <!-- id do Noosfero -->
		2	+
		3	+<div id="filter-catalog-software">
		4	+
		5	+ <div id="filter-option-catalog-software"> Mais opções </div>
		6	+ <!--Quando tiver filtros(categorias)selecionados mostrar esta opção: Opções selecionadas-->
11		7
12	-<div id="catalog-filter">
13	- <div id='selected-options'>
14	- <span><%= _('Selected options: ') %> sagdhjasgdhjagsd</span>
15	- </div>	8	+ <div id="filter-categories-select-catalog"> <%= @message_selected_options %> </div>
16		9
17	- <div id='categories'>
18	- <div id='categories-left'>
19	- <ul>
20	- <% @categories.each do \|category\| %>
21	- <li>
22	- <%= labelled_check_box category.name, "categories[]", category.id %>
23	- </li>	10	+ <div id="filter-categories-option">
		11	+
		12	+ <div id="filter-categories-catalog"><h4> <%= _("Categories") %> </h4></div>
		13	+ <div id="group-categories">
		14	+ <div id="gruop-catalog-01">
		15	+ <% @categories_groupe_one.each do \|category\| %>
		16	+ <label>
		17	+ <%= check_box_tag("selected_categories[#{category.name}]", category.id, @selected_categories_name.include?(category.name), :class => "categories-catalog") %>
		18	+ <%= _("#{category.name}") %>
		19	+ </label> <br>
		20	+ <% end %>
		21	+ </div>
		22	+ <div id="group-catalog-02">
		23	+ <% @categories_groupe_two.each do \|category\| %>
		24	+ <label>
		25	+ <%= check_box_tag("selected_categories[#{category.name}]", category.id, @selected_categories_name.include?(category.name), :class => "categories-catalog") %>
		26	+ <%= _("#{category.name}") %>
		27	+ </label> <br>
24	<% end %>	28	<% end %>
25	- </ul>	29	+ </div>
26	</div>	30	</div>
27	- </div>	31	+
		32	+ <div class="project-software"> <%= _("Software Projects:") %>
		33	+ <label><input type="checkbox" name="filter" value="Incluir nos resultados"> <%= _("Include in results") %> </label>
		34	+ <span class"doubts-catalog-software" title="Incluir projetos de software em desenvolvimento que ainda não são oficialmente Software Público Brasileiro.">(?)</span>
		35	+ <!--<p><acronym title="Incluir projetos de software em desenvolvimento que ainda não são oficialmente Software Público Brasileiro.">(?)
		36	+ </acronym></p>-->
		37	+ </div><br>
		38	+ <%= button_tag _("Clean up"), :id => "cleanup-filter-catalg", :type => "button" %>
		39	+ <%= button_tag _("Close"), :id => "close-filter-catalog", :type => "button" %>
28	</div>	40	</div>
29	</div>	41	</div>
		42	+</div>
30	\ No newline at end of file	43	\ No newline at end of file