Download as
Browse Code »

Commit 86affbef93e042e2354613d542b474388fbb8cc2

Authored by Francisco Marcelo de Araújo Lima Júnior
1 parent 9ec2cf52
Exists in theme-brasil-digital-from-staging and in 9 other branches angular_poc, api-article-archived, backup-7-jan-2016, captcha_serpro_plugin, login-captcha, production, resend_confirmation_email, staging, staging_rails3

improve feature to add or move blocks

Showing 5 changed files with 174 additions and 66 deletions   Show diff stats
app/helpers/boxes_helper.rb
  Diff comments   View file @86affbe
... ... @@ -171,8 +171,7 @@ module BoxesHelper
171 171 "before-block-#{block.id}"
172 172 end
173 173  
174   - content_tag('div', ' ', :id => id, :class => 'block-target', :style => "border: 1px solid red;" ) +
175   - drop_receiving_element(id, :url => { :action => 'add_or_move_block', :target => id }, :accept => box.acceptable_blocks, :hoverclass => 'block-target-hover')
  174 + content_tag('div', ' ', :id => id, :class => 'block-target' ) + drop_receiving_element(id, :url => { :action => 'add_or_move_block', :target => id }, :accept => box.acceptable_blocks, :hoverclass => 'block-target-hover')
176 175 end
177 176  
178 177 # makes the given block draggable so it can be moved away.
... ...
app/views/box_organizer/index.html.erb
  Diff comments   View file @86affbe
... ... @@ -6,23 +6,53 @@
6 6 <%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>
7 7 <% end %>
8 8  
9   -<div id="block-types">
10   - <% @blocks.each do |block| %>
11   -
12   - <div id="block-<%=block.name%>" class="block-type <%= block.name.to_css_class %>">
13   - <div class="button-bar">
14   - <%= link_to content_tag('span', _('Help on this block')),
15   - {:controller => 'environment_design', :action => 'show_block_type_info', :type => block.name},
16   - :class => "button icon-button icon-help colorbox",
17   - :title => _('Help on this block') %>
18   - <br style="clear: left">
19   - </div>
20   - <div>
21   - <%= image_tag(block.icon, height: '48', width: '48', class: 'block-type-icon', alt: '' ) %>
  9 +<% cont = 0 %>
  10 +<% i = 0 %>
  11 +
  12 +<div id="block-types-container">
  13 + <div id="block-types">
  14 +
  15 + <% @blocks.each do |block| %>
  16 +
  17 + <% if cont == 0 && i < @blocks.length %>
  18 + <div class="block-types-group">
  19 + <% end %>
  20 +
  21 + <% cont += 1 %>
  22 +
  23 + <div id="block-<%=block.name%>" class="block-type <%= block.name.to_css_class %> drag">
  24 + <div class="button-bar">
  25 + <%= link_to content_tag('span', _('Help on this block')),
  26 + {:controller => 'environment_design', :action => 'show_block_type_info', :type => block.name},
  27 + :class => "button icon-button icon-help colorbox",
  28 + :title => _('Help on this block') %>
  29 + <br style="clear: left">
  30 + </div>
  31 + <div>
  32 + <%= image_tag(block.icon, height: '48', width: '48', class: 'block-type-icon', alt: '' ) %>
  33 + </div>
  34 + <span><%= _(block.description) %></span>
22 35 </div>
23   - <span><%= _(block.description) %></span>
  36 +
  37 + <%= draggable_element("block-#{block.name}", :revert => true) %>
  38 +
  39 + <% if cont == 5 || i == @blocks.length %>
  40 + <% cont = 0 %>
24 41 </div>
  42 + <% end %>
  43 +
  44 + <% i += 1 %>
25 45  
26   - <%= draggable_element("block-#{block.name}", :revert => true) %>
27   - <% end %>
  46 + <% end %>
  47 +
  48 + </div>
28 49 </div>
  50 +
  51 +<div id="block-types-navigation">
  52 + <a href="javascript:void(0)" id="previous">Previous block types</a>
  53 + <a href="javascript:void(0)" id="next">Next block types</a>
  54 +</div>
  55 +
  56 +<div style="clear:both;"></div>
  57 +
  58 +<%= javascript_include_tag('block_store') %>
... ...
app/views/box_organizer/show_block_type_info.html.erb
  Diff comments   View file @86affbe
1   -<div id="bs-block-container">
  1 +<div id="block-info-container">
2 2  
3 3 <div id="bs-block-header">
4   - <%= image_tag(@block.icon, height: '48', width: '48', id: 'bs-block-icon', alt: '' ) %>
  4 + <%= image_tag(@block.icon, height: '48', width: '48', id: 'block-info-icon', alt: '' ) %>
5 5 <h1><%= @block.name %></h1>
6 6 <p><%= @block.short_description %></p>
7 7 </div>
8 8  
9   - <div id="bs-block-images">
  9 + <div id="block-info-images">
10 10 <div style="white-space: nowrap;">
11 11 <% if @block.previews.empty? %>
12 12 <% for i in 0..2 %>
... ... @@ -20,7 +20,7 @@
20 20 </div>
21 21 </div>
22 22  
23   - <div id="bs-block-info">
  23 + <div id="block-info-description">
24 24 <h2><%= _('Description') %></h2>
25 25 <p><%= @block.description %></p>
26 26 <h2><%= _('What\'s New') %></h2>
... ...
public/designs/themes/noosfero/block_store.css
  Diff comments   View file @86affbe
1   -#block-types {
2   - white-space: nowrap;
3   - margin: 20px 0;
  1 +.block-types-group {
  2 + display: none;
  3 +}
  4 +
  5 +.block-types-group.active {
  6 + display: block;
  7 +}
  8 +
  9 +#block-types-navigation a#next {
  10 + float: right;
  11 +}
  12 +
  13 +/*tirando a borda do colorbox se puder configurar para não ter me avise*/
  14 +r,
  15 +#cboxTopLeft,
  16 +#cboxTopRight,
  17 +#cboxMiddleLeft,
  18 +#cboxContent,
  19 +#cboxMiddleRight,
  20 +#cboxBottomCenter,
  21 +#cboxBottomLeft,
  22 +#cboxBottomRight
  23 + { background-image: none; }
  24 +
  25 +/*background do colorbox*/
  26 +#cboxLoadedContent {
  27 + background-color: #f5f5f5;
  28 + border-radius: 20px;
4 29 }
5 30  
6 31 #block-types .block-type {
7   - cursor: move;
  32 + min-height: 0;
  33 + border: 0px solid #AAA;
  34 + margin: 0px;
  35 + padding: 0px;
  36 + text-align: center;
  37 + height: auto;
  38 + float: none;
8 39 display: inline-block;
  40 + overflow: auto;
9 41 width: 112px;
10   - text-align: center;
  42 + cursor: move;
11 43 vertical-align: top;
12   - min-height: 0;
13 44 }
14 45  
  46 +
15 47 #block-types .button-bar {
16 48 margin: 0;
  49 + display: inline;
  50 + position: absolute;
  51 + right: 5%;
  52 + border: 0px solid #AAA;
  53 + margin: 0px;
  54 + padding: 0px;
17 55 }
18 56  
19   -#bs-block-container {
20   - /*border: 1px solid red;*/
  57 +
  58 +#block-info-container {
21 59 width: 770px;
22 60 padding: 15px;
  61 + color: #444;
23 62 }
24 63  
25   -#bs-block-container #bs-block-icon {
  64 +#block-info-container #block-info-icon {
26 65 float: left;
27 66 padding-right: 10px;
28 67 }
29 68  
30   -#bs-block-container #bs-block-menu {
31   - border: 1px solid red;
32   - display: inline-block;
33   - float: right;
34   - background: #efefef;
35   - background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
36   - background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
37   - background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
38   - box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
39   - padding: 0 20px;
40   - /*border-radius: 10px;*/
41   - list-style: none;
42   - position: relative;
43   - display: inline-table;
44   -}
45   -
46   -#bs-block-container #bs-block-menu:hover {
47   - background: #4b545f;
48   - background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
49   - background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
50   - background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
51   -}
52   -
53   -#bs-block-container #bs-block-header {
54   - /*border: 1px solid red;*/
  69 +#block-info-container #block-info-header {
55 70 display: inline-block;
56 71 float: left;
57 72 }
58 73  
59   -#bs-block-container #bs-block-header h1 {
60   - /*border: 1px solid red;*/
  74 +#block-info-container #block-info-header h1 {
61 75 display: inline-block;
62 76 margin: 0;
  77 + font-weight: normal;
  78 + font-family: "Arial Black", Liberation Sans, Arial, sans-serif;
63 79 }
64 80  
65   -#bs-block-container h2 {
66   - /*border: 1px solid red;*/
  81 +#block-info-container h2 {
67 82 margin: 0;
68 83 margin-top: 10px;
  84 + font-weight: normal;
  85 + font-family: "Arial Black", Liberation Sans, Arial, sans-serif;
69 86 }
70 87  
71   -#bs-block-container p {
72   - /*border: 1px solid red;*/
  88 +#block-info-container p {
73 89 margin: 0;
74 90 }
75 91  
76   -#bs-block-images {
77   - /*border: 1px solid red;*/
  92 +#block-info-images {
78 93 clear: both;
79 94 overflow-x: auto;
80 95 padding-top: 15px;
81 96 }
82 97  
83   -#bs-block-info {
84   - /*border: 1px solid red;*/
  98 +#block-info-description {
85 99 margin-top: 20px;
86 100 }
... ...
public/javascripts/block_store.js 0 → 100644
  Diff comments   View file @86affbe
... ... @@ -0,0 +1,65 @@
  1 +jQuery(document).ready(function () {
  2 +
  3 + // navigation - click action
  4 + jQuery('#block-types-navigation a#previous').click(PreviousSlide);
  5 + jQuery('#block-types-navigation a#next').click(NextSlide);
  6 +
  7 + // set first block types group active
  8 + jQuery('.block-types-group').first().addClass('active');
  9 + jQuery(".block-types-group.active + .block-types-group").addClass('next');
  10 +
  11 + firstBlockTypesGroup = jQuery(".block-types-group").first();
  12 + lastBlockTypesGroup = jQuery(".block-types-group").last();
  13 + jQuery("#block-types-navigation a#previous").hide();
  14 +});
  15 +
  16 +function NextSlide() {
  17 + // get active block-types-group
  18 + activeBlockTypesGroup = jQuery(".block-types-group.active");
  19 +
  20 + // get next block-types-group
  21 + nextBlockTypesGroup = jQuery(".block-types-group.next").first();
  22 +
  23 + // switch active group
  24 + activeBlockTypesGroup.removeClass('active');
  25 + activeBlockTypesGroup.addClass('prev');
  26 + activeBlockTypesGroup.css({"display":"none"});
  27 + nextBlockTypesGroup.removeClass('next');
  28 + nextBlockTypesGroup.addClass('active');
  29 + nextBlockTypesGroup.css({"display": "block"});
  30 +
  31 + jQuery(".block-types-group.active + .block-types-group").addClass('next');
  32 +
  33 + activeBlockTypesGroup = jQuery(".block-types-group.active");
  34 +
  35 + jQuery("#block-types-navigation a#previous").show();
  36 +
  37 + if ( activeBlockTypesGroup.is( lastBlockTypesGroup ) ) {
  38 + jQuery("#block-types-navigation a#next").hide();
  39 + }
  40 +}
  41 +
  42 +function PreviousSlide() {
  43 + // get active block-types-group
  44 + activeBlockTypesGroup = jQuery(".block-types-group.active");
  45 +
  46 + // get previous block-types-group
  47 + previousBlockTypesGroup = jQuery(".block-types-group.prev").last();
  48 +
  49 + // switch active group
  50 + activeBlockTypesGroup.removeClass('active');
  51 + activeBlockTypesGroup.addClass('next');
  52 + activeBlockTypesGroup.css({"display":"none"});
  53 + previousBlockTypesGroup.removeClass('prev');
  54 + previousBlockTypesGroup.addClass('active');
  55 + previousBlockTypesGroup.css({"display": "block"});
  56 +
  57 + activeBlockTypesGroup = jQuery(".block-types-group.active");
  58 +
  59 + jQuery("#block-types-navigation a#next").show();
  60 +
  61 + if ( activeBlockTypesGroup.is( firstBlockTypesGroup ) ) {
  62 + jQuery("#block-types-navigation a#previous").hide();
  63 + }
  64 +}
  65 +
... ...