Replacing lightbox by colorbox on profile_design

"Add a block" button "Edit" buttons on blocks Also replaced radio_button_tag and label_tag by labelled_radio_button

Replacing lightbox by colorbox on profile_design
"Add a block" button "Edit" buttons on blocks Also replaced radio_button_tag and label_tag by labelled_radio_button
Daniela Feitosa
1 parent a39440b0
Showing 11 changed files with 85 additions and 74 deletions Show diff stats
app/helpers/boxes_helper.rb
app/helpers/colorbox_helper.rb
app/views/box_organizer/_block_types.rhtml
app/views/box_organizer/_highlights_block.rhtml
app/views/box_organizer/_link_list_block.rhtml
app/views/box_organizer/_raw_html_block.rhtml
app/views/box_organizer/add_block.rhtml
app/views/box_organizer/edit.rhtml
app/views/box_organizer/index.rhtml
public/javascripts/application.js
test/unit/colorbox_helper_test.rb
@@ -205,7 +205,7 @@ module BoxesHelper
     end
     if block.editable?
-      buttons << lightbox_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
+      buttons << colorbox_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
     end
     if !block.main?
@@ -8,6 +8,10 @@ module ColorboxHelper
     button(type, label, url, colorbox_options(options))
   end
+  def colorbox_icon_button(type, label, url, options = {})
+    icon_button(type, label, url, colorbox_options(options))
+  end
+
   # options must be an HTML options hash as passed to link_to etc.
   #
   # returns a new hash with colorbox class added. Keeps existing classes.
 <% block_types.in_groups_of(2) do |block1, block2| %>
   <div style='float: left; width: 48%; padding-top: 2px;'>
-    <%= radio_button_tag('type', block1.name) %>
-    <%= label_tag "type_#{block1.name.downcase}", block1.description %>
+    <%= labelled_radio_button(block1.description, :type, block1.name) %>
   </div>
   <% if block2 %>
     <div style='float: left; width: 48%; padding-top: 2px;'>
-      <%= radio_button_tag('type', block2.name) %>
-      <%= label_tag "type_#{block2.name.downcase}", block2.description %>
+      <%= labelled_radio_button(block2.description, :type, block2.name) %>
     </div>
   <% end %>
 <% end %>
 <strong><%= _('Highlights') %></strong>
-<div id='edit-highlights-block'>
+<div id='edit-highlights-block' style='width:450px'>
 <table id='highlights' class='noborder'>
   <tr><th><%= _('Image') %></th><th><%= _('Address') %></th><th><%= _('Position') %></th><th><%= _('Title') %></th></tr>
   <% for image in @block.images do %>
 <strong><%= _('Links') %></strong>
-<div id='edit-link-list-block'>
+<div id='edit-link-list-block' style='width:450px'>
 <table id='links' class='noborder'>
   <tr><th><%= _('Icon') %></th><th><%= _('Name') %></th><th><%= _('Address') %></th></tr>
   <% for link in @block.links do %>
-<%= labelled_form_field(_('HTML code'), text_area(:block, :html, :style => 'width: 100%', :rows => 15)) %>
+<%= labelled_form_field(_('HTML code'), text_area(:block, :html, :style => 'width: 90%', :rows => 15)) %>
-<% form_tag do %>
+<div style='height:350px'>
+  <% form_tag do %>
+
+    <p><%= _('In what area do you want to put your new block?') %></p>
+
+    <% @boxes.each do |box| %>
+      <%= labelled_radio_button(_("Area %d") % box.position, :box_id, box.id, box.central?, { :class => 'box-position', 'data-position' => box.position })  %>
+    <% end %>
+
+    <script type="text/javascript">
+      (function ($) {
+        $(document).ready(function () {
+          $(".box-position").live('change', function () {
+            if ($(this).attr('data-position') == '1') {
+              $('#center-block-types').show();
+              $('#side-block-types').hide();
+            } else {
+              $('#center-block-types').hide();
+              $('#side-block-types').show();
+            };
+          });
+      })})(jQuery);
+    </script>
+
+    <p><%= _('Select the type of block you want to add to your page.') %></p>
+
+    <div id='center-block-types'>
+      <%= render :partial => 'block_types', :locals => { :block_types => @center_block_types } %>
+    </div>
+
+    <div id='side-block-types' style='display:none'>
+      <%= render :partial => 'block_types', :locals => { :block_types => @side_block_types } %>
+    </div>
+
+    <br style='clear: both'/>
+
+    <% button_bar do %>
+      <%= submit_button(:add, _("Add")) %>
+      <%= colorbox_close_button(_('Close')) %>
+    <% end %>
-  <p><%= _('In what area do you want to put your new block?') %></p>
-
-  <% @boxes.each do |box| %>
-    <%= radio_button_tag 'box_id', box.id, box.central?, { :class => 'box-position', 'data-position' => box.position } %>
-    <%= label_tag _("Area %d") % box.position %>
-  <% end %>
-
-  <script type="text/javascript">
-    (function ($) {
-      $(document).ready(function () {
-        $(".box-position").live('change', function () {
-          if ($(this).attr('data-position') == '1') {
-            $('#center-block-types').show();
-            $('#side-block-types').hide();
-          } else {
-            $('#center-block-types').hide();
-            $('#side-block-types').show();
-          };
-        });
-    })})(jQuery);
-  </script>
-
-  <p><%= _('Select the type of block you want to add to your page.') %></p>
-
-  <div id='center-block-types'>
-    <%= render :partial => 'block_types', :locals => { :block_types => @center_block_types } %>
-  </div>
-
-  <div id='side-block-types' style='display:none'>
-    <%= render :partial => 'block_types', :locals => { :block_types => @side_block_types } %>
-  </div>
-
-  <br style='clear: both'/>
-
-  <% button_bar do %>
-    <%= submit_button(:add, _("Add")) %>
-    <%= lightbox_close_button(_('Close')) %>
   <% end %>
-
-<% end %>
+</div>
-<h2><%= _('Editing block') %></h2>
+<div style='width: 500px;'>
+  <h2><%= _('Editing block') %></h2>
-<% form_tag(:action => 'save', :id => @block.id) do %>
+  <% form_tag(:action => 'save', :id => @block.id) do %>
-  <%= labelled_form_field(_('Custom title for this block: '), text_field(:block, :title, :maxlength => 20)) %>
+    <%= labelled_form_field(_('Custom title for this block: '), text_field(:block, :title, :maxlength => 20)) %>
-  <%= render :partial => partial_for_class(@block.class) %>
+    <%= render :partial => partial_for_class(@block.class) %>
-  <%= labelled_form_field _('Display this block:'), '' %>
-  <div style='margin-left: 10px'>
-    <%= radio_button(:block, :display, 'always') %>
-    <%= label_tag('block_display_always', _('In all pages')) %>
-    <br/>
-    <%= radio_button(:block, :display, 'home_page_only') %>
-    <%= label_tag('block_display_home_page_only', _('Only in the homepage')) %>
-    <br/>
-    <%= radio_button(:block, :display, 'except_home_page') %>
-    <%= label_tag('block_display_except_home_page', _('In all pages, except in the homepage')) %>
-    <br/>
-    <%= radio_button(:block, :display, 'never') %>
-    <%= label_tag('block_display_never', _("Don't display")) %>
-  </div>
+    <%= labelled_form_field _('Display this block:'), '' %>
+    <div style='margin-left: 10px'>
+      <%= radio_button(:block, :display, 'always') %>
+      <%= label_tag('block_display_always', _('In all pages')) %>
+      <br/>
+      <%= radio_button(:block, :display, 'home_page_only') %>
+      <%= label_tag('block_display_home_page_only', _('Only in the homepage')) %>
+      <br/>
+      <%= radio_button(:block, :display, 'except_home_page') %>
+      <%= label_tag('block_display_except_home_page', _('In all pages, except in the homepage')) %>
+      <br/>
+      <%= radio_button(:block, :display, 'never') %>
+      <%= label_tag('block_display_never', _("Don't display")) %>
+    </div>
-  <%= labelled_form_field(_('Show for:'), select(:block, :language, [ [ _('all languages'), 'all']] + Noosfero.locales.map {|key, value| [value, key]} )) %>
+    <%= labelled_form_field(_('Show for:'), select(:block, :language, [ [ _('all languages'), 'all']] + Noosfero.locales.map {|key, value| [value, key]} )) %>
-  <% button_bar do %>
-    <%= submit_button(:save, _('Save')) %>
-    <%= lightbox_close_button(_('Cancel')) %>
-  <% end %>
+    <% button_bar do %>
+      <%= submit_button(:save, _('Save')) %>
+      <%= colorbox_close_button(_('Cancel')) %>
+    <% end %>
-<% end %>
+  <% end %>
+</div>
 <h1><%= _('Editing sideboxes')%></h1>
 <% button_bar do %>
-  <%= lightbox_button('add', _('Add a block'), { :action => 'add_block' }) %> 
+  <%= colorbox_button('add', _('Add a block'), { :action => 'add_block' }) %>
   <%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>
 <% end %>
@@ -922,7 +922,7 @@ jQuery(function($) {
   $('.colorbox').live('click', function() {
     $.fn.colorbox({
       href:$(this).attr('href'),
-      maxWidth: '500',
+      maxWidth: '600',
       maxHeight: '550',
       open:true
     });
@@ -27,4 +27,10 @@ class ColorboxHelperTest &lt; ActiveSupport::TestCase
     assert_equal '[button]', colorbox_button('type', 'label', { :action => 'popup'})
   end
+  should 'provide colorbox_icon_button' do
+    expects(:icon_button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'colorbox' })).returns('[button]')
+
+    assert_equal '[button]', colorbox_icon_button('type', 'label', { :action => 'popup'})
+  end
+
 end
	@@ -205,7 +205,7 @@ module BoxesHelper		@@ -205,7 +205,7 @@ module BoxesHelper
205	end	205	end
206		206
207	if block.editable?	207	if block.editable?
208	- buttons << lightbox_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })	208	+ buttons << colorbox_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
209	end	209	end
210		210
211	if !block.main?	211	if !block.main?
1	<strong><%= _('Highlights') %></strong>	1	<strong><%= _('Highlights') %></strong>
2	-<div id='edit-highlights-block'>	2	+<div id='edit-highlights-block' style='width:450px'>
3	<table id='highlights' class='noborder'>	3	<table id='highlights' class='noborder'>
4	<tr><th><%= _('Image') %></th><th><%= _('Address') %></th><th><%= _('Position') %></th><th><%= _('Title') %></th></tr>	4	<tr><th><%= _('Image') %></th><th><%= _('Address') %></th><th><%= _('Position') %></th><th><%= _('Title') %></th></tr>
5	<% for image in @block.images do %>	5	<% for image in @block.images do %>
1	<strong><%= _('Links') %></strong>	1	<strong><%= _('Links') %></strong>
2	-<div id='edit-link-list-block'>	2	+<div id='edit-link-list-block' style='width:450px'>
3	<table id='links' class='noborder'>	3	<table id='links' class='noborder'>
4	<tr><th><%= _('Icon') %></th><th><%= _('Name') %></th><th><%= _('Address') %></th></tr>	4	<tr><th><%= _('Icon') %></th><th><%= _('Name') %></th><th><%= _('Address') %></th></tr>
5	<% for link in @block.links do %>	5	<% for link in @block.links do %>
1	-<% form_tag do %>	1	+<div style='height:350px'>
		2	+ <% form_tag do %>
		3	+
		4	+ <p><%= _('In what area do you want to put your new block?') %></p>
		5	+
		6	+ <% @boxes.each do \|box\| %>
		7	+ <%= labelled_radio_button(_("Area %d") % box.position, :box_id, box.id, box.central?, { :class => 'box-position', 'data-position' => box.position }) %>
		8	+ <% end %>
		9	+
		10	+ <script type="text/javascript">
		11	+ (function ($) {
		12	+ $(document).ready(function () {
		13	+ $(".box-position").live('change', function () {
		14	+ if ($(this).attr('data-position') == '1') {
		15	+ $('#center-block-types').show();
		16	+ $('#side-block-types').hide();
		17	+ } else {
		18	+ $('#center-block-types').hide();
		19	+ $('#side-block-types').show();
		20	+ };
		21	+ });
		22	+ })})(jQuery);
		23	+ </script>
		24	+
		25	+ <p><%= _('Select the type of block you want to add to your page.') %></p>
		26	+
		27	+ <div id='center-block-types'>
		28	+ <%= render :partial => 'block_types', :locals => { :block_types => @center_block_types } %>
		29	+ </div>
		30	+
		31	+ <div id='side-block-types' style='display:none'>
		32	+ <%= render :partial => 'block_types', :locals => { :block_types => @side_block_types } %>
		33	+ </div>
		34	+
		35	+ <br style='clear: both'/>
		36	+
		37	+ <% button_bar do %>
		38	+ <%= submit_button(:add, _("Add")) %>
		39	+ <%= colorbox_close_button(_('Close')) %>
		40	+ <% end %>
2		41
3	- <p><%= _('In what area do you want to put your new block?') %></p>
4	-
5	- <% @boxes.each do \|box\| %>
6	- <%= radio_button_tag 'box_id', box.id, box.central?, { :class => 'box-position', 'data-position' => box.position } %>
7	- <%= label_tag _("Area %d") % box.position %>
8	- <% end %>
9	-
10	- <script type="text/javascript">
11	- (function ($) {
12	- $(document).ready(function () {
13	- $(".box-position").live('change', function () {
14	- if ($(this).attr('data-position') == '1') {
15	- $('#center-block-types').show();
16	- $('#side-block-types').hide();
17	- } else {
18	- $('#center-block-types').hide();
19	- $('#side-block-types').show();
20	- };
21	- });
22	- })})(jQuery);
23	- </script>
24	-
25	- <p><%= _('Select the type of block you want to add to your page.') %></p>
26	-
27	- <div id='center-block-types'>
28	- <%= render :partial => 'block_types', :locals => { :block_types => @center_block_types } %>
29	- </div>
30	-
31	- <div id='side-block-types' style='display:none'>
32	- <%= render :partial => 'block_types', :locals => { :block_types => @side_block_types } %>
33	- </div>
34	-
35	- <br style='clear: both'/>
36	-
37	- <% button_bar do %>
38	- <%= submit_button(:add, _("Add")) %>
39	- <%= lightbox_close_button(_('Close')) %>
40	<% end %>	42	<% end %>
41	-
42	-<% end %>	43	+</div>
1	-<h2><%= _('Editing block') %></h2>	1	+<div style='width: 500px;'>
		2	+ <h2><%= _('Editing block') %></h2>
2		3
3	-<% form_tag(:action => 'save', :id => @block.id) do %>	4	+ <% form_tag(:action => 'save', :id => @block.id) do %>
4		5
5	- <%= labelled_form_field(_('Custom title for this block: '), text_field(:block, :title, :maxlength => 20)) %>	6	+ <%= labelled_form_field(_('Custom title for this block: '), text_field(:block, :title, :maxlength => 20)) %>
6		7
7	- <%= render :partial => partial_for_class(@block.class) %>	8	+ <%= render :partial => partial_for_class(@block.class) %>
8		9
9	- <%= labelled_form_field _('Display this block:'), '' %>
10	- <div style='margin-left: 10px'>
11	- <%= radio_button(:block, :display, 'always') %>
12	- <%= label_tag('block_display_always', _('In all pages')) %>
13	- <br/>
14	- <%= radio_button(:block, :display, 'home_page_only') %>
15	- <%= label_tag('block_display_home_page_only', _('Only in the homepage')) %>
16	- <br/>
17	- <%= radio_button(:block, :display, 'except_home_page') %>
18	- <%= label_tag('block_display_except_home_page', _('In all pages, except in the homepage')) %>
19	- <br/>
20	- <%= radio_button(:block, :display, 'never') %>
21	- <%= label_tag('block_display_never', _("Don't display")) %>
22	- </div>	10	+ <%= labelled_form_field _('Display this block:'), '' %>
		11	+ <div style='margin-left: 10px'>
		12	+ <%= radio_button(:block, :display, 'always') %>
		13	+ <%= label_tag('block_display_always', _('In all pages')) %>
		14	+ <br/>
		15	+ <%= radio_button(:block, :display, 'home_page_only') %>
		16	+ <%= label_tag('block_display_home_page_only', _('Only in the homepage')) %>
		17	+ <br/>
		18	+ <%= radio_button(:block, :display, 'except_home_page') %>
		19	+ <%= label_tag('block_display_except_home_page', _('In all pages, except in the homepage')) %>
		20	+ <br/>
		21	+ <%= radio_button(:block, :display, 'never') %>
		22	+ <%= label_tag('block_display_never', _("Don't display")) %>
		23	+ </div>
23		24
24	- <%= labelled_form_field(_('Show for:'), select(:block, :language, [ [ _('all languages'), 'all']] + Noosfero.locales.map {\|key, value\| [value, key]} )) %>	25	+ <%= labelled_form_field(_('Show for:'), select(:block, :language, [ [ _('all languages'), 'all']] + Noosfero.locales.map {\|key, value\| [value, key]} )) %>
25		26
26	- <% button_bar do %>
27	- <%= submit_button(:save, _('Save')) %>
28	- <%= lightbox_close_button(_('Cancel')) %>
29	- <% end %>	27	+ <% button_bar do %>
		28	+ <%= submit_button(:save, _('Save')) %>
		29	+ <%= colorbox_close_button(_('Cancel')) %>
		30	+ <% end %>
30		31
31	-<% end %>	32	+ <% end %>
		33	+</div>
1	<h1><%= _('Editing sideboxes')%></h1>	1	<h1><%= _('Editing sideboxes')%></h1>
2		2
3	<% button_bar do %>	3	<% button_bar do %>
4	- <%= lightbox_button('add', _('Add a block'), { :action => 'add_block' }) %>	4	+ <%= colorbox_button('add', _('Add a block'), { :action => 'add_block' }) %>
5	<%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>	5	<%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>
6	<% end %>	6	<% end %>
	@@ -922,7 +922,7 @@ jQuery(function($) {		@@ -922,7 +922,7 @@ jQuery(function($) {
922	$('.colorbox').live('click', function() {	922	$('.colorbox').live('click', function() {
923	$.fn.colorbox({	923	$.fn.colorbox({
924	href:$(this).attr('href'),	924	href:$(this).attr('href'),
925	- maxWidth: '500',	925	+ maxWidth: '600',
926	maxHeight: '550',	926	maxHeight: '550',
927	open:true	927	open:true
928	});	928	});
	@@ -27,4 +27,10 @@ class ColorboxHelperTest < ActiveSupport::TestCase		@@ -27,4 +27,10 @@ class ColorboxHelperTest < ActiveSupport::TestCase
27	assert_equal '[button]', colorbox_button('type', 'label', { :action => 'popup'})	27	assert_equal '[button]', colorbox_button('type', 'label', { :action => 'popup'})
28	end	28	end
29		29
		30	+ should 'provide colorbox_icon_button' do
		31	+ expects(:icon_button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'colorbox' })).returns('[button]')
		32	+
		33	+ assert_equal '[button]', colorbox_icon_button('type', 'label', { :action => 'popup'})
		34	+ end
		35	+
30	end	36	end