Commit 7d51ce8bb73d7cb3491dda7ae5f6fd00f826d91c

Authored by Rodrigo Souto
2 parents e27f555d b1c7003c

Merge commit 'refs/merge-requests/298' of git://gitorious.org/noosfero/noosfero …

…into merge-requests/298

Added html_safe that was missing on the block_helper new method

Conflicts:
	app/views/box_organizer/_highlights_block.rhtml
	test/unit/application_helper_test.rb
app/helpers/application_helper.rb
... ... @@ -266,7 +266,10 @@ module ApplicationHelper
266 266 end
267 267  
268 268 def button_bar(options = {}, &block)
269   - concat(content_tag('div', capture(&block) + tag('br', :style => 'clear: left;'), { :class => 'button-bar' }.merge(options)))
  269 + options[:class].nil? ?
  270 + options[:class]='button-bar' :
  271 + options[:class]+=' button-bar'
  272 + concat(content_tag('div', capture(&block) + tag('br', :style => 'clear: left;'), options))
270 273 end
271 274  
272 275 VIEW_EXTENSIONS = %w[.rhtml .html.erb]
... ...
app/helpers/block_helper.rb
... ... @@ -6,4 +6,21 @@ module BlockHelper
6 6 content_tag 'h3', content_tag('span', h(title)), :class => tag_class
7 7 end
8 8  
  9 + def highlights_block_config_image_fields(block, image={})
  10 + "
  11 + <tr class=\"image-data-line\">
  12 + <td>
  13 + #{select_tag 'block[images][][image_id]', content_tag(:option) + option_groups_from_collection_for_select(block.folder_choices, :images, :name, :id, :name, image[:image_id].to_i).html_safe}
  14 + </td>
  15 + <td>#{text_field_tag 'block[images][][address]', image[:address], :class => 'highlight-address', :size => 20}</td>
  16 + <td>#{text_field_tag 'block[images][][position]', image[:position], :class => 'highlight-position', :size => 1}</td>
  17 + </tr><tr class=\"image-title\">
  18 + <td colspan=\"3\"><label>#{
  19 + content_tag('span', _('Title')) +
  20 + text_field_tag('block[images][][title]', image[:title], :class => 'highlight-title', :size => 45)
  21 + }</label></td>
  22 + </tr>
  23 + "
  24 + end
  25 +
9 26 end
... ...
app/views/box_organizer/_block_types.rhtml
... ... @@ -1,10 +0,0 @@
1   -<% block_types.in_groups_of(2) do |block1, block2| %>
2   - <div style='float: left; width: 48%; padding-top: 2px;'>
3   - <%= labelled_radio_button(block1.description, :type, block1.name) %>
4   - </div>
5   - <% if block2 %>
6   - <div style='float: left; width: 48%; padding-top: 2px;'>
7   - <%= labelled_radio_button(block2.description, :type, block2.name) %>
8   - </div>
9   - <% end %>
10   -<% end %>
app/views/box_organizer/_highlights_block.rhtml
1 1 <strong><%= _('Highlights') %></strong>
2   -<div id='edit-highlights-block' style='width:450px'>
3   -<table id='highlights' class='noborder'>
4   - <tr><th><%= _('Image') %></th><th><%= _('Address') %></th><th><%= _('Position') %></th><th><%= _('Title') %></th></tr>
  2 +
  3 +<table class="noborder"><tbody id="highlights-data-table">
  4 + <tr><th><%= _('Image') %></th><th><%= _('Address') %></th><th><%= _('Position') %></th></tr>
5 5 <% for image in @block.images do %>
6   - <tr>
7   - <td>
8   - <%= select_tag 'block[images][][image_id]', content_tag(:option) + option_groups_from_collection_for_select(@block.folder_choices, :images, :name, :id, :name, image[:image_id].to_i).html_safe, :style => "width: 100px" %></p>
9   - </td>
10   - <td><%= text_field_tag 'block[images][][address]', image[:address], :class => 'highlight-address', :size => 10 %></td>
11   - <td><%= text_field_tag 'block[images][][position]', image[:position], :class => 'highlight-position', :size => 3 %></td>
12   - <td><%= text_field_tag 'block[images][][title]', image[:title], :class => 'highlight-title', :size => 10 %></td>
13   - </tr>
  6 + <%= highlights_block_config_image_fields @block, image %>
14 7 <% end %>
15   -</table>
16   -</div>
  8 +</tbody></table>
17 9  
18 10 <%= link_to_function(_('New highlight'), nil, :class => 'button icon-add with-text') do |page|
19   - page.insert_html :bottom, 'highlights', content_tag('tr',
20   - content_tag('td', select_tag('block[images][][image_id]', content_tag(:option) + option_groups_from_collection_for_select(@block.folder_choices, :images, :name, :id, :name).html_safe, :style => "width: 100px")) +
21   - content_tag('td', text_field_tag('block[images][][address]', nil, :class => 'highlight-address', :size => 10)) +
22   - content_tag('td', text_field_tag('block[images][][position]', nil, :class => 'highlight-position', :size => 3)) +
23   - content_tag('td', text_field_tag('block[images][][title]', nil, :class => 'highlight-position', :size => 10))
24   - ) +
25   - javascript_tag("$('edit-link-list-block').scrollTop = $('edit-link-list-block').scrollHeight")
  11 + page.insert_html :bottom, 'highlights-data-table', highlights_block_config_image_fields(@block)
26 12 end %>
27 13  
28 14 <%= labelled_form_field _('Image transition:'), select('block', 'interval', [[_('No automatic transition'), 0]] + [1, 2, 3, 4, 5, 10, 20, 30, 60].map {|item| [n_('Every 1 second', 'Every %d seconds', item) % item, item]}) %>
... ...
app/views/box_organizer/add_block.rhtml
1   -<div style='height:350px'>
  1 +<div id="add-block-dialog">
2 2 <% form_tag do %>
3 3  
4 4 <p><%= _('In what area do you want to put your new block?') %></p>
5 5  
  6 + <div id="box-position">
6 7 <% @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 + <% name = box.central? ? _('Main area') : _('Area %d') % box.position %>
  9 + <%= labelled_radio_button(name, :box_id, box.id, box.central?, { 'data-position' => box.position }) %>
8 10 <% end %>
  11 + </div>
9 12  
10 13 <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);
  14 + jQuery('#box-position input').bind('change',
  15 + function () {
  16 + showCenter = jQuery(this).attr('data-position') == '1';
  17 + jQuery('#center-block-types').toggle(showCenter);
  18 + jQuery('#side-block-types').toggle(!showCenter);
  19 + }
  20 + );
23 21 </script>
24 22  
25 23 <p><%= _('Select the type of block you want to add to your page.') %></p>
26 24  
27   - <div id='center-block-types'>
28   - <%= render :partial => 'block_types', :locals => { :block_types => @center_block_types } %>
  25 + <div id="center-block-types" class="block-types">
  26 + <% @center_block_types.each do |block| %>
  27 + <div>
  28 + <%= labelled_radio_button(block.description, :type, block.name) %>
  29 + </div>
  30 + <% end %>
29 31 </div>
30 32  
31   - <div id='side-block-types' style='display:none'>
32   - <%= render :partial => 'block_types', :locals => { :block_types => @side_block_types } %>
  33 + <div id="side-block-types" class="block-types" style="display:none">
  34 + <% @side_block_types.each do |block| %>
  35 + <div>
  36 + <%= labelled_radio_button(block.description, :type, block.name) %>
  37 + </div>
  38 + <% end %>
33 39 </div>
34 40  
35 41 <br style='clear: both'/>
... ...
app/views/box_organizer/edit.rhtml
1   -<div style='width: 500px;'>
2   - <h2><%= _('Editing block') %></h2>
  1 +<div class="block-config-options <%= @block.class.name %>-options">
  2 + <h2 class="title"><%= _('Editing block') %></h2>
3 3  
4 4 <% form_tag(:action => 'save', :id => @block.id) do %>
5 5  
... ...
app/views/box_organizer/index.rhtml
1 1 <h1><%= _('Editing sideboxes')%></h1>
2 2  
3   -<% button_bar do %>
  3 +<% button_bar :class=>'design-menu' do %>
4 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 %>
... ...
app/views/catalog/index.rhtml
... ... @@ -68,20 +68,20 @@
68 68  
69 69 <% if product.description %>
70 70 <li class="product-description expand-box">
71   - <span id="product-description-button"><%= _('description') %></span>
72   - <div>
  71 + <span class="product-description-button"><%= _('description') %></span>
  72 + <div class="float-box">
73 73 <div class="arrow"></div>
74   - <div class="content" id="product-description"><%= txt2html(product.description || '') %></div>
  74 + <div class="content"><%= product.description %></div>
75 75 </div>
76 76 </li>
77 77 <% end %>
78 78  
79 79 <% if product.price_described? %>
80 80 <li class="product-price-composition expand-box">
81   - <span id="product-price-composition-button"><%= _('price composition') %></span>
82   - <div>
  81 + <span class="product-price-composition-button"><%= _('price composition') %></span>
  82 + <div class="float-box">
83 83 <div class="arrow"></div>
84   - <div class="content" id="product-price-composition">
  84 + <div class="content">
85 85 <% product.inputs.relevant_to_price.each do |i| %>
86 86 <div class="search-product-input-dots-to-price">
87 87 <div class="search-product-input-name"><%= i.product_category.name %></div>
... ... @@ -102,9 +102,9 @@
102 102 <% if product.inputs.count > 0 %>
103 103 <li class="product-inputs expand-box">
104 104 <span id="inputs-button"><%= _('inputs and raw materials') %></span>
105   - <div>
  105 + <div class="float-box">
106 106 <div class="arrow"></div>
107   - <div class="content" id="inputs-description">
  107 + <div class="content">
108 108 <% product.inputs.each do |i| %>
109 109 <div>
110 110 <%= _('%{amount_used} %{unit} of') % {:amount_used => i.amount_used, :unit => i.unit.singular} + ' ' if i.has_all_price_details? %>
... ...
app/views/cms/select_article_type.rhtml
  1 +<div class="select-article-type">
  2 +
1 3 <h2> <%= _('Choose the type of content:') %> </h2>
2 4  
3   -<ul id="article_types">
  5 +<ul class="article-types">
4 6 <% for type in @article_types %>
5 7 <% action = type[:class].name == 'UploadedFile' ? {:action => 'upload_files'} : {:action => 'new', :type => type[:class].name} %>
6 8 <% content_tag('a', :href => url_for(action.merge(:parent_id => @parent_id, :back_to => @back_to))) do %>
... ... @@ -14,3 +16,5 @@
14 16 <br style="clear:both" />
15 17  
16 18 <%= colorbox_close_button(_('Cancel')) %>
  19 +
  20 +</div>
... ...
po/pt/noosfero.po
... ... @@ -2256,7 +2256,7 @@ msgstr &quot;Empreendimentos são desabilitados quando criados&quot;
2256 2256  
2257 2257 #: app/models/environment.rb:121
2258 2258 msgid "Enterprises are validated when created"
2259   -msgstr "Empreendimentos são validadod quando criados"
  2259 +msgstr "Empreendimentos são validadodos quando criados"
2260 2260  
2261 2261 #: app/models/environment.rb:122
2262 2262 msgid "Show a balloon with profile links when a profile image is clicked"
... ...
public/javascripts/catalog.js
1 1 (function($) {
2 2  
3   -$('#product-list .product .expand-box').live('click', function () {
4   - $('.expand-box').each(function(index, element){ this.clicked = false; toggle_expandbox(this); });
5   - this.clicked = !this.clicked;
6   - toggle_expandbox(this);
7   - $.each($(this).siblings('.expand-box'), function(index, value) { value.clicked = false; toggle_expandbox(value); });
8   -
9   - return false;
10   -});
11   -
12   -$(document).live('click', function() {
13   - $.each($('#product-list .product .expand-box'), function(index, value) { value.clicked = false; toggle_expandbox(value); });
14   -});
15   -
16   -$(document).click(function (event) {
17   - if ($(event.target).parents('.expand-box').length == 0) {
18   - $('.expand-box').each(function(index, element){
19   - $(element).removeClass('open');
20   - $(element).children('div').toggle(false);
21   - });
22   - }
23   -});
24   -
25   -var rows = {};
26   -$('#product-list .product').each(function (index, element) {
27   - obj = rows[$(element).offset().top] || {};
28   -
29   - obj.heights = obj.heights || [];
30   - obj.elements = obj.elements || [];
31   - obj.heights.push($(element).height());
32   - obj.elements.push(element);
33   -
34   - rows[$(element).offset().top] = obj;
35   -});
36   -
37   -$.each(rows, function(top, obj) {
38   - maxWidth = Array.max(obj.heights);
39   - $(obj.elements).height(maxWidth);
40   -});
  3 + function toggle_expandbox(element, open) {
  4 + element.clicked = open;
  5 + $(element).toggleClass('open', open);
  6 + }
  7 +
  8 + $('#product-list .expand-box').live('click', function () {
  9 + var me = this;
  10 + $('.expand-box').each(function(index, element){
  11 + if ( element != me ) toggle_expandbox(element, false);
  12 + });
  13 + toggle_expandbox(me, !me.clicked);
  14 + return false;
  15 + });
  16 +
  17 + $('#product-list .float-box').live('click', function () {
  18 + return false;
  19 + });
  20 +
  21 + $(document).click(function (event) {
  22 + if ($(event.target).parents('.expand-box').length == 0) {
  23 + $('#product-list .expand-box').each(function(index, element){
  24 + toggle_expandbox(element, false);
  25 + });
  26 + }
  27 + });
41 28  
42 29 })(jQuery);
43   -
44   -function toggle_expandbox(e) {
45   - jQuery(e).toggleClass('open', e.clicked);
46   - jQuery(e).children('div').toggle(e.clicked).css({left: jQuery(e).position().left-180, top: jQuery(e).position().top-10});
47   -}
... ...
public/stylesheets/application.css
... ... @@ -1538,10 +1538,10 @@ a.button.disabled, input.disabled {
1538 1538 * style for blocks
1539 1539 ***********************************************************/
1540 1540  
1541   - #content .communities-block .profile-image {
1542   - float: none;
1543   - padding-left: 0px;
1544   - max-width: none;
  1541 +#content .communities-block .profile-image {
  1542 + float: none;
  1543 + padding-left: 0px;
  1544 + max-width: none;
1545 1545 }
1546 1546 #content .communities-block .vcard .profile_link {
1547 1547 text-align: center;
... ... @@ -1594,30 +1594,30 @@ a.button.disabled, input.disabled {
1594 1594 .invisible-block a.icon-button {
1595 1595 position: relative;
1596 1596 }
1597   -/***********************************************************
1598   - * the handles to where you can drag the blocks
1599   - ***********************************************************/
  1597 +/************************************************
  1598 + * the handles to where you can drag the blocks *
  1599 + ************************************************/
1600 1600  
1601   - .block-target {
1602   - margin: 5px;
1603   - height: 2px;
1604   - height: 15px;
1605   - border: 1px dashed #e0e0e0;
  1601 +.block-target {
  1602 + margin: 5px;
  1603 + height: 2px;
  1604 + height: 15px;
  1605 + border: 1px dashed #e0e0e0;
1606 1606 }
1607 1607 .block-target-hover {
1608 1608 background: #ffd;
1609 1609 border: 1px solid red;
1610 1610 height: 30px;
1611 1611 }
1612   -/***********************************************************
1613   - * put borders around boxes and blocks when organizing boxes
1614   - ***********************************************************/
  1612 +/*************************************************************
  1613 + * put borders around boxes and blocks when organizing boxes *
  1614 + *************************************************************/
1615 1615  
1616   - #box-organizer div.box {
1617   - border: 1px solid #ccc;
1618   - background-color: white;
1619   - background-repeat: no-repeat;
1620   - background-position: top right;
  1616 +#box-organizer div.box {
  1617 + border: 1px solid #ccc;
  1618 + background-color: white;
  1619 + background-repeat: no-repeat;
  1620 + background-position: top right;
1621 1621 }
1622 1622 #box-organizer div.box-1 {
1623 1623 background-image: url(../images/blocks/1.png);
... ... @@ -1651,6 +1651,36 @@ a.button.disabled, input.disabled {
1651 1651 margin-top: 1em;
1652 1652 text-align: center;
1653 1653 }
  1654 +
  1655 +/****************************************
  1656 + * Block options editor floating window *
  1657 + ****************************************/
  1658 +
  1659 +#cboxLoadedContent {
  1660 + background: #FFF;
  1661 + box-shadow: 0 0 15px #888 inset;
  1662 + border-radius: 5px;
  1663 + border: 1px solid #777;
  1664 + border-left: none;
  1665 + border-right: none;
  1666 +}
  1667 +
  1668 +.block-config-options {
  1669 + padding: 0px 10px 0px 30px;
  1670 +}
  1671 +
  1672 +#add-block-dialog {
  1673 + display: inline-block;
  1674 + padding: 0px 5px 0px 20px;
  1675 +}
  1676 +
  1677 +#add-block-dialog .block-types {
  1678 + column-count: 2;
  1679 + -ms-column-count: 2;
  1680 + -moz-column-count: 2;
  1681 + -webkit-column-count: 2;
  1682 +}
  1683 +
1654 1684 /* ==> blocks/tags-block.css <<= */
1655 1685  
1656 1686 .tags-block {
... ... @@ -2494,6 +2524,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2494 2524 -webkit-border-radius: 10px 0px 0px 10px;
2495 2525 border-radius: 10px 0px 0px 10px;
2496 2526 width: 202px;
  2527 + position: relative;
2497 2528 }
2498 2529 #product-list .expand-box > span {
2499 2530 padding-left: 20px;
... ... @@ -2524,17 +2555,22 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2524 2555 #product-list li.product .expand-box > span {
2525 2556 text-transform: uppercase;
2526 2557 }
2527   -#product-list li.product .expand-box > div {
  2558 +#product-list li.product .expand-box .float-box {
2528 2559 display: none;
2529 2560 position: absolute;
  2561 + left: -220px;
  2562 + top: -11px;
2530 2563 z-index: 10;
2531 2564 }
  2565 +#product-list li.product .expand-box.open .float-box {
  2566 + display: block;
  2567 +}
2532 2568 #product-list li.product .expand-box .content {
2533 2569 font-size: 11px;
2534 2570 padding: 6px 5px;
2535 2571 overflow: auto;
2536 2572 max-height: 200px;
2537   - width: 160px;
  2573 + width: 200px;
2538 2574 border-radius: 5px;
2539 2575 -moz-border-radius: 5px;
2540 2576 -webkit-border-radius: 5px;
... ... @@ -2797,7 +2833,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2797 2833 position: relative;
2798 2834 clear: left;
2799 2835 }
2800   -#product-description, #product-details, #product-info, .input-item {
  2836 +#product-details, #product-info, .input-item {
2801 2837 overflow: hidden;
2802 2838 }
2803 2839 #product-info {
... ... @@ -2993,11 +3029,17 @@ table.cms-articles a.icon, table.cms-articles a.icon-parent-folder {
2993 3029 table.cms-articles .icon:hover {
2994 3030 background-color: transparent;
2995 3031 }
2996   -#article_types {
  3032 +
  3033 +.select-article-type {
  3034 + padding: 5px 20px;
  3035 + width: 455px;
  3036 +}
  3037 +
  3038 +.article-types {
2997 3039 padding-left: 5px;
2998 3040 margin-top: 20px;
2999 3041 }
3000   -#article_types li {
  3042 +.article-types li {
3001 3043 list-style: none;
3002 3044 float: left;
3003 3045 width: 180px;
... ... @@ -3011,18 +3053,18 @@ table.cms-articles .icon:hover {
3011 3053 -moz-border-radius: 5px;
3012 3054 -webkit-border-radius: 5px;
3013 3055 }
3014   -#article_types .description {
  3056 +.article-types .description {
3015 3057 color: #888a85;
3016 3058 font-size: smaller;
3017 3059 }
3018   -#article_types .icon-newrss-feed, #content .icon-rss-feed {
  3060 +.article-types .icon-newrss-feed, #content .icon-rss-feed {
3019 3061 background-image: url(../images/icons-mime/rss-feed-16.png);
3020 3062 }
3021   -#article_types a {
  3063 +.article-types a {
3022 3064 text-decoration: none;
3023 3065 color: black;
3024 3066 }
3025   -#article_types li.mouseover {
  3067 +.article-types li.mouseover {
3026 3068 background-color: #eeeeec;
3027 3069 }
3028 3070 .controller-cms #article-subitems-hide.hide-button {
... ... @@ -4324,6 +4366,39 @@ h1#agenda-title {
4324 4366 text-align: center;
4325 4367 overflow: hidden;
4326 4368 }
  4369 +
  4370 +.block-config-options.HighlightsBlock-options {
  4371 + min-width: 450px;
  4372 +}
  4373 +
  4374 +.block-config-options.HighlightsBlock-options .image-data-line select {
  4375 + width: 150px;
  4376 +}
  4377 +
  4378 +.block-config-options.HighlightsBlock-options td {
  4379 + text-align: center;
  4380 +}
  4381 +
  4382 +.block-config-options.HighlightsBlock-options .image-data-line td {
  4383 + padding-top: 7px;
  4384 +}
  4385 +
  4386 +.block-config-options.HighlightsBlock-options .image-title {
  4387 + white-space: nowrap;
  4388 + border-bottom: 1px solid #CCC;
  4389 +}
  4390 +.block-config-options.HighlightsBlock-options .image-title:last-child {
  4391 + border: none;
  4392 +}
  4393 +
  4394 +.block-config-options.HighlightsBlock-options .image-title td {
  4395 + padding-bottom: 7px;
  4396 +}
  4397 +
  4398 +.block-config-options.HighlightsBlock-options .image-title span {
  4399 + padding-right: 5px;
  4400 +}
  4401 +
4327 4402 /* Featured Products stuff */
4328 4403  
4329 4404 .featured-product-items {
... ... @@ -5659,12 +5734,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5659 5734  
5660 5735 /* Captcha */
5661 5736  
5662   -/* Colorbox */
5663   -
5664   -#cboxClose {
5665   - display: none !important;
5666   -}
5667   -
5668 5737 /* Signup interface {{{ */
5669 5738  
5670 5739 #url-check {
... ...
test/unit/application_helper_test.rb
... ... @@ -727,7 +727,37 @@ class ApplicationHelperTest &lt; ActiveSupport::TestCase
727 727 assert_nil default_folder_for_image_upload(profile)
728 728 end
729 729  
  730 + should 'envelop a html with button-bar div' do
  731 + result = button_bar { '<b>foo</b>' }
  732 + assert_equal '<div class="button-bar"><b>foo</b>'+
  733 + '<br style=\'clear: left;\' /></div>', result
  734 + end
  735 +
  736 + should 'add more classes to button-bar envelope' do
  737 + result = button_bar :class=>'test' do
  738 + '<b>foo</b>'
  739 + end
  740 + assert_equal '<div class="test button-bar"><b>foo</b>'+
  741 + '<br style=\'clear: left;\' /></div>', result
  742 + end
  743 +
  744 + should 'add more attributes to button-bar envelope' do
  745 + result = button_bar :id=>'bt1' do
  746 + '<b>foo</b>'
  747 + end
  748 + assert_equal '<div class="button-bar" id="bt1"><b>foo</b>'+
  749 + '<br style=\'clear: left;\' /></div>', result
  750 + end
  751 +
730 752 protected
731 753 include NoosferoTestHelper
732 754  
  755 + def capture
  756 + yield
  757 + end
  758 +
  759 + def concat(str)
  760 + str
  761 + end
  762 +
733 763 end
... ...