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	205	end
206	206
207	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	209	end
210	210
211	211	if !block.main?
...	...
...	...	@@ -8,6 +8,10 @@ module ColorboxHelper
8	8	button(type, label, url, colorbox_options(options))
9	9	end
10	10
	11	+ def colorbox_icon_button(type, label, url, options = {})
	12	+ icon_button(type, label, url, colorbox_options(options))
	13	+ end
	14	+
11	15	# options must be an HTML options hash as passed to link_to etc.
12	16	#
13	17	# returns a new hash with colorbox class added. Keeps existing classes.
...	...
1	1	<% block_types.in_groups_of(2) do \|block1, block2\| %>
2	2	<div style='float: left; width: 48%; padding-top: 2px;'>
3		- <%= radio_button_tag('type', block1.name) %>
4		- <%= label_tag "type_#{block1.name.downcase}", block1.description %>
	3	+ <%= labelled_radio_button(block1.description, :type, block1.name) %>
5	4	</div>
6	5	<% if block2 %>
7	6	<div style='float: left; width: 48%; padding-top: 2px;'>
8		- <%= radio_button_tag('type', block2.name) %>
9		- <%= label_tag "type_#{block2.name.downcase}", block2.description %>
	7	+ <%= labelled_radio_button(block2.description, :type, block2.name) %>
10	8	</div>
11	9	<% end %>
12	10	<% end %>
...	...
1	1	<strong><%= _('Highlights') %></strong>
2		-<div id='edit-highlights-block'>
	2	+<div id='edit-highlights-block' style='width:450px'>
3	3	<table id='highlights' class='noborder'>
4	4	<tr><th><%= _('Image') %></th><th><%= _('Address') %></th><th><%= _('Position') %></th><th><%= _('Title') %></th></tr>
5	5	<% for image in @block.images do %>
...	...
1	1	<strong><%= _('Links') %></strong>
2		-<div id='edit-link-list-block'>
	2	+<div id='edit-link-list-block' style='width:450px'>
3	3	<table id='links' class='noborder'>
4	4	<tr><th><%= _('Icon') %></th><th><%= _('Name') %></th><th><%= _('Address') %></th></tr>
5	5	<% for link in @block.links do %>
...	...
1		-<%= labelled_form_field(_('HTML code'), text_area(:block, :html, :style => 'width: 100%', :rows => 15)) %>
	1	+<%= labelled_form_field(_('HTML code'), text_area(:block, :html, :style => 'width: 90%', :rows => 15)) %>
...	...
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	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	1	<h1><%= _('Editing sideboxes')%></h1>
2	2
3	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	5	<%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>
6	6	<% end %>
...	...
...	...	@@ -922,7 +922,7 @@ jQuery(function($) {
922	922	$('.colorbox').live('click', function() {
923	923	$.fn.colorbox({
924	924	href:$(this).attr('href'),
925		- maxWidth: '500',
	925	+ maxWidth: '600',
926	926	maxHeight: '550',
927	927	open:true
928	928	});
...	...