From 86affbef93e042e2354613d542b474388fbb8cc2 Mon Sep 17 00:00:00 2001 From: Francisco Marcelo de Araújo Lima Júnior Date: Wed, 30 Jul 2014 14:37:25 -0300 Subject: [PATCH] improve feature to add or move blocks --- app/helpers/boxes_helper.rb | 3 +-- app/views/box_organizer/index.html.erb | 62 ++++++++++++++++++++++++++++++++++++++++++++++---------------- app/views/box_organizer/show_block_type_info.html.erb | 8 ++++---- public/designs/themes/noosfero/block_store.css | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------- public/javascripts/block_store.js | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 174 insertions(+), 66 deletions(-) create mode 100644 public/javascripts/block_store.js diff --git a/app/helpers/boxes_helper.rb b/app/helpers/boxes_helper.rb index 6739525..cb19981 100644 --- a/app/helpers/boxes_helper.rb +++ b/app/helpers/boxes_helper.rb @@ -171,8 +171,7 @@ module BoxesHelper "before-block-#{block.id}" end - content_tag('div', ' ', :id => id, :class => 'block-target', :style => "border: 1px solid red;" ) + - drop_receiving_element(id, :url => { :action => 'add_or_move_block', :target => id }, :accept => box.acceptable_blocks, :hoverclass => 'block-target-hover') + 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') end # makes the given block draggable so it can be moved away. diff --git a/app/views/box_organizer/index.html.erb b/app/views/box_organizer/index.html.erb index 016d4a9..ac49753 100644 --- a/app/views/box_organizer/index.html.erb +++ b/app/views/box_organizer/index.html.erb @@ -6,23 +6,53 @@ <%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %> <% end %> -
- <% @blocks.each do |block| %> - -
-
- <%= link_to content_tag('span', _('Help on this block')), - {:controller => 'environment_design', :action => 'show_block_type_info', :type => block.name}, - :class => "button icon-button icon-help colorbox", - :title => _('Help on this block') %> -
-
-
- <%= image_tag(block.icon, height: '48', width: '48', class: 'block-type-icon', alt: '' ) %> +<% cont = 0 %> +<% i = 0 %> + +
+
+ + <% @blocks.each do |block| %> + + <% if cont == 0 && i < @blocks.length %> +
+ <% end %> + + <% cont += 1 %> + +
+
+ <%= link_to content_tag('span', _('Help on this block')), + {:controller => 'environment_design', :action => 'show_block_type_info', :type => block.name}, + :class => "button icon-button icon-help colorbox", + :title => _('Help on this block') %> +
+
+
+ <%= image_tag(block.icon, height: '48', width: '48', class: 'block-type-icon', alt: '' ) %> +
+ <%= _(block.description) %>
- <%= _(block.description) %> + + <%= draggable_element("block-#{block.name}", :revert => true) %> + + <% if cont == 5 || i == @blocks.length %> + <% cont = 0 %>
+ <% end %> + + <% i += 1 %> - <%= draggable_element("block-#{block.name}", :revert => true) %> - <% end %> + <% end %> + +
+ + + +
+ +<%= javascript_include_tag('block_store') %> diff --git a/app/views/box_organizer/show_block_type_info.html.erb b/app/views/box_organizer/show_block_type_info.html.erb index b48f79b..e428401 100644 --- a/app/views/box_organizer/show_block_type_info.html.erb +++ b/app/views/box_organizer/show_block_type_info.html.erb @@ -1,12 +1,12 @@ -
+
- <%= image_tag(@block.icon, height: '48', width: '48', id: 'bs-block-icon', alt: '' ) %> + <%= image_tag(@block.icon, height: '48', width: '48', id: 'block-info-icon', alt: '' ) %>

<%= @block.name %>

<%= @block.short_description %>

-
+
<% if @block.previews.empty? %> <% for i in 0..2 %> @@ -20,7 +20,7 @@
-
+

<%= _('Description') %>

<%= @block.description %>

<%= _('What\'s New') %>

diff --git a/public/designs/themes/noosfero/block_store.css b/public/designs/themes/noosfero/block_store.css index 57242e9..5d578cf 100644 --- a/public/designs/themes/noosfero/block_store.css +++ b/public/designs/themes/noosfero/block_store.css @@ -1,86 +1,100 @@ -#block-types { - white-space: nowrap; - margin: 20px 0; +.block-types-group { + display: none; +} + +.block-types-group.active { + display: block; +} + +#block-types-navigation a#next { + float: right; +} + +/*tirando a borda do colorbox se puder configurar para não ter me avise*/ +r, +#cboxTopLeft, +#cboxTopRight, +#cboxMiddleLeft, +#cboxContent, +#cboxMiddleRight, +#cboxBottomCenter, +#cboxBottomLeft, +#cboxBottomRight + { background-image: none; } + +/*background do colorbox*/ +#cboxLoadedContent { + background-color: #f5f5f5; + border-radius: 20px; } #block-types .block-type { - cursor: move; + min-height: 0; + border: 0px solid #AAA; + margin: 0px; + padding: 0px; + text-align: center; + height: auto; + float: none; display: inline-block; + overflow: auto; width: 112px; - text-align: center; + cursor: move; vertical-align: top; - min-height: 0; } + #block-types .button-bar { margin: 0; + display: inline; + position: absolute; + right: 5%; + border: 0px solid #AAA; + margin: 0px; + padding: 0px; } -#bs-block-container { - /*border: 1px solid red;*/ + +#block-info-container { width: 770px; padding: 15px; + color: #444; } -#bs-block-container #bs-block-icon { +#block-info-container #block-info-icon { float: left; padding-right: 10px; } -#bs-block-container #bs-block-menu { - border: 1px solid red; - display: inline-block; - float: right; - background: #efefef; - background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); - background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); - background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); - box-shadow: 0px 0px 9px rgba(0,0,0,0.15); - padding: 0 20px; - /*border-radius: 10px;*/ - list-style: none; - position: relative; - display: inline-table; -} - -#bs-block-container #bs-block-menu:hover { - background: #4b545f; - background: linear-gradient(top, #4f5964 0%, #5f6975 40%); - background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); - background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); -} - -#bs-block-container #bs-block-header { - /*border: 1px solid red;*/ +#block-info-container #block-info-header { display: inline-block; float: left; } -#bs-block-container #bs-block-header h1 { - /*border: 1px solid red;*/ +#block-info-container #block-info-header h1 { display: inline-block; margin: 0; + font-weight: normal; + font-family: "Arial Black", Liberation Sans, Arial, sans-serif; } -#bs-block-container h2 { - /*border: 1px solid red;*/ +#block-info-container h2 { margin: 0; margin-top: 10px; + font-weight: normal; + font-family: "Arial Black", Liberation Sans, Arial, sans-serif; } -#bs-block-container p { - /*border: 1px solid red;*/ +#block-info-container p { margin: 0; } -#bs-block-images { - /*border: 1px solid red;*/ +#block-info-images { clear: both; overflow-x: auto; padding-top: 15px; } -#bs-block-info { - /*border: 1px solid red;*/ +#block-info-description { margin-top: 20px; } diff --git a/public/javascripts/block_store.js b/public/javascripts/block_store.js new file mode 100644 index 0000000..7006b5c --- /dev/null +++ b/public/javascripts/block_store.js @@ -0,0 +1,65 @@ +jQuery(document).ready(function () { + + // navigation - click action + jQuery('#block-types-navigation a#previous').click(PreviousSlide); + jQuery('#block-types-navigation a#next').click(NextSlide); + + // set first block types group active + jQuery('.block-types-group').first().addClass('active'); + jQuery(".block-types-group.active + .block-types-group").addClass('next'); + + firstBlockTypesGroup = jQuery(".block-types-group").first(); + lastBlockTypesGroup = jQuery(".block-types-group").last(); + jQuery("#block-types-navigation a#previous").hide(); +}); + +function NextSlide() { + // get active block-types-group + activeBlockTypesGroup = jQuery(".block-types-group.active"); + + // get next block-types-group + nextBlockTypesGroup = jQuery(".block-types-group.next").first(); + + // switch active group + activeBlockTypesGroup.removeClass('active'); + activeBlockTypesGroup.addClass('prev'); + activeBlockTypesGroup.css({"display":"none"}); + nextBlockTypesGroup.removeClass('next'); + nextBlockTypesGroup.addClass('active'); + nextBlockTypesGroup.css({"display": "block"}); + + jQuery(".block-types-group.active + .block-types-group").addClass('next'); + + activeBlockTypesGroup = jQuery(".block-types-group.active"); + + jQuery("#block-types-navigation a#previous").show(); + + if ( activeBlockTypesGroup.is( lastBlockTypesGroup ) ) { + jQuery("#block-types-navigation a#next").hide(); + } +} + +function PreviousSlide() { + // get active block-types-group + activeBlockTypesGroup = jQuery(".block-types-group.active"); + + // get previous block-types-group + previousBlockTypesGroup = jQuery(".block-types-group.prev").last(); + + // switch active group + activeBlockTypesGroup.removeClass('active'); + activeBlockTypesGroup.addClass('next'); + activeBlockTypesGroup.css({"display":"none"}); + previousBlockTypesGroup.removeClass('prev'); + previousBlockTypesGroup.addClass('active'); + previousBlockTypesGroup.css({"display": "block"}); + + activeBlockTypesGroup = jQuery(".block-types-group.active"); + + jQuery("#block-types-navigation a#next").show(); + + if ( activeBlockTypesGroup.is( firstBlockTypesGroup ) ) { + jQuery("#block-types-navigation a#previous").hide(); + } +} + -- libgit2 0.21.2