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,8 +171,7 @@ module BoxesHelper
171 "before-block-#{block.id}" 171 "before-block-#{block.id}"
172 end 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 end 175 end
177 176
178 # makes the given block draggable so it can be moved away. 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,23 +6,53 @@
6 <%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %> 6 <%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>
7 <% end %> 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 </div> 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 </div> 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 </div> 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 <div id="bs-block-header"> 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 <h1><%= @block.name %></h1> 5 <h1><%= @block.name %></h1>
6 <p><%= @block.short_description %></p> 6 <p><%= @block.short_description %></p>
7 </div> 7 </div>
8 8
9 - <div id="bs-block-images"> 9 + <div id="block-info-images">
10 <div style="white-space: nowrap;"> 10 <div style="white-space: nowrap;">
11 <% if @block.previews.empty? %> 11 <% if @block.previews.empty? %>
12 <% for i in 0..2 %> 12 <% for i in 0..2 %>
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 </div> 20 </div>
21 </div> 21 </div>
22 22
23 - <div id="bs-block-info"> 23 + <div id="block-info-description">
24 <h2><%= _('Description') %></h2> 24 <h2><%= _('Description') %></h2>
25 <p><%= @block.description %></p> 25 <p><%= @block.description %></p>
26 <h2><%= _('What\'s New') %></h2> 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 #block-types .block-type { 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 display: inline-block; 39 display: inline-block;
  40 + overflow: auto;
9 width: 112px; 41 width: 112px;
10 - text-align: center; 42 + cursor: move;
11 vertical-align: top; 43 vertical-align: top;
12 - min-height: 0;  
13 } 44 }
14 45
  46 +
15 #block-types .button-bar { 47 #block-types .button-bar {
16 margin: 0; 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 width: 770px; 59 width: 770px;
22 padding: 15px; 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 float: left; 65 float: left;
27 padding-right: 10px; 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 display: inline-block; 70 display: inline-block;
56 float: left; 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 display: inline-block; 75 display: inline-block;
62 margin: 0; 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 margin: 0; 82 margin: 0;
68 margin-top: 10px; 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 margin: 0; 89 margin: 0;
74 } 90 }
75 91
76 -#bs-block-images {  
77 - /*border: 1px solid red;*/ 92 +#block-info-images {
78 clear: both; 93 clear: both;
79 overflow-x: auto; 94 overflow-x: auto;
80 padding-top: 15px; 95 padding-top: 15px;
81 } 96 }
82 97
83 -#bs-block-info {  
84 - /*border: 1px solid red;*/ 98 +#block-info-description {
85 margin-top: 20px; 99 margin-top: 20px;
86 } 100 }
public/javascripts/block_store.js 0 → 100644
  Diff comments   View file @86affbe
@@ -0,0 +1,65 @@ @@ -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 +