Download as
Browse Code »

Commit f476a761f710c3c201c94dff939fdd9ec351d30c

Authored by Joenio Costa
Committed by Antonio Terceiro
1 parent 8bac0258
Exists in master and in 23 other branches activate_plugin, api_fixies, api_tasks, article_blog_visualization_format, article_layout_refactoring, article_layout_temp, blog_page_bug, clone_article, communities_ratings, design_template, event_layout, fix_forum, fix_optional_fields, fix_suggest_article, folder_improvments, manage_organization, merge_deactive_and_ban, news_page, script_to_update, stable, template_mirror_block, tests, tests_fixies

More user-friendly icon selector for block of links 

(ActionItem1428)
Showing 12 changed files with 133 additions and 23 deletions   Show diff stats
app/helpers/box_organizer_helper.rb 0 → 100644
  Diff comments   View file @f476a76
... ... @@ -0,0 +1,7 @@
  1 +module BoxOrganizerHelper
  2 +
  3 + def icon_selector(icon = 'no-ico')
  4 + render :partial => 'icon_selector', :locals => { :icon => icon }
  5 + end
  6 +
  7 +end
... ...
app/models/link_list_block.rb
  Diff comments   View file @f476a76
... ... @@ -73,10 +73,9 @@ class LinkListBlock < Block
73 73 true
74 74 end
75 75  
76   - def icons_options(selected = nil)
  76 + def icons_options
77 77 ICONS.map do |i|
78   - select = "selected='1'" if i[0] == selected
79   - "<option class='icon-#{i[0]}' value='#{i[0]}' #{select}>#{gettext(i[1])}</option>"
  78 + "<span class=\"icon-#{i[0]}\" onclick=\"changeIcon(this, '#{i[0]}')\"></span>"
80 79 end
81 80 end
82 81  
... ...
app/views/box_organizer/_icon_selector.rhtml 0 → 100644
  Diff comments   View file @f476a76
... ... @@ -0,0 +1,7 @@
  1 +<div class='icon' style='width:16px; height:16px;' onclick="hideOthersIconSelector(this); showIconSelector(this)">
  2 + <%= hidden_field_tag 'block[links][][icon]', icon %>
  3 + <span class='icon-<%= icon %>' style='display:block; width:16px; height:16px;'></span>
  4 + <div class="icon-selector" style='display:none;'>
  5 + <%= @block.icons_options %>
  6 + </div>
  7 +</div>
... ...
app/views/box_organizer/_link_list_block.rhtml
  Diff comments   View file @f476a76
1 1 <strong><%= _('Links') %></strong>
2 2 <div id='edit-link-list-block'>
3 3 <table id='links' class='noborder'>
4   - <tr><th><%= _('Icon') %></th><th><%= _('Name') %></th><th><%= _('Address') %></th></tr>
  4 + <tr><th></th><th><%= _('Name') %></th><th><%= _('Address') %></th></tr>
5 5 <% for link in @block.links do %>
6 6 <tr>
7   - <td><%= select_tag 'block[links][][icon]', @block.icons_options(link['icon']) %></td>
8   - <td><%= text_field_tag 'block[links][][name]', link[:name], :maxlength => 20 %></td>
9   - <td class='cel-address'><%= text_field_tag 'block[links][][address]', link[:address] %></td>
  7 + <td>
  8 + <%= icon_selector(link['icon']) %>
  9 + </td>
  10 + <td><%= text_field_tag 'block[links][][name]', link[:name], :class => 'link-name', :maxlength => 20 %></td>
  11 + <td class='cel-address'><%= text_field_tag 'block[links][][address]', link[:address], :class => 'link-address' %></td>
10 12 </tr>
11 13 <% end %>
12 14 </table>
13 15 </div>
14 16  
15 17 <%= link_to_function(_('New link'), nil, :class => 'button icon-add with-text') do |page|
16   - page.insert_html :bottom, 'links', content_tag('tr', content_tag('td', select_tag('block[links][][icon]', @block.icons_options)) + content_tag('td',text_field_tag('block[links][][name]', '', :maxlength => 20)) + content_tag('td',text_field_tag('block[links][][address]', nil, :class => 'cel-address'))) +
  18 + page.insert_html :bottom, 'links', content_tag('tr',
  19 + content_tag('td', icon_selector('ok')) +
  20 + content_tag('td', text_field_tag('block[links][][name]', '', :maxlength => 20)) +
  21 + content_tag('td', text_field_tag('block[links][][address]', nil, :class => 'cel-address'))
  22 + ) +
17 23 javascript_tag("$('edit-link-list-block').scrollTop = $('edit-link-list-block').scrollHeight")
18 24 end %>
... ...
config/cucumber.yml
  Diff comments   View file @f476a76
1   -default: --tags ~@selenium,~@wip --exclude features/support/selenium.rb
  1 +default: --tags ~@selenium,~@wip --exclude features/support/selenium.rb --exclude features/step_definitions/selenium_steps.rb
2 2 selenium: --tags @selenium,~@wip
... ...
features/edit_block_of_links.feature 0 → 100644
  Diff comments   View file @f476a76
... ... @@ -0,0 +1,22 @@
  1 +Feature: edit_block_of_links
  2 + As a profile owner
  3 + I want to edit a block of links
  4 +
  5 + Background:
  6 + Given I am on the homepage
  7 + And the following users
  8 + | login | name |
  9 + | eddievedder | Eddie Vedder |
  10 + And the following blocks
  11 + | owner | type |
  12 + | eddievedder | LinkListBlock |
  13 + And I am logged in as "eddievedder"
  14 +
  15 + @selenium
  16 + Scenario: show the icon selector
  17 + And I follow "Edit sideboxes"
  18 + Given I follow "Edit" within ".link-list-block"
  19 + And I follow "New link"
  20 + And the ".icon-selector" should not be visible
  21 + When I click ".icon"
  22 + Then the ".icon-selector" should be visible
... ...
features/step_definitions/selenium_steps.rb 0 → 100644
  Diff comments   View file @f476a76
... ... @@ -0,0 +1,21 @@
  1 +require File.expand_path(File.join(File.dirname(__FILE__), "..", "support", "paths"))
  2 +
  3 +def string_to_element_locator(selector)
  4 + if selector.gsub!(/^\./, '')
  5 + "css=[class='#{selector}']"
  6 + else
  7 + raise "I can't find '#{selector}'!"
  8 + end
  9 +end
  10 +
  11 +Then /^the "([^\"]*)" should be visible$/ do |selector|
  12 + selenium.is_visible(string_to_element_locator(selector)).should be_true
  13 +end
  14 +
  15 +Then /^the "([^\"]*)" should not be visible$/ do |selector|
  16 + selenium.is_visible(string_to_element_locator(selector)).should be_false
  17 +end
  18 +
  19 +When /^I click "([^\"]*)"$/ do |selector|
  20 + selenium.click(string_to_element_locator(selector))
  21 +end
... ...
features/support/paths.rb
  Diff comments   View file @f476a76
... ... @@ -18,10 +18,11 @@ module NavigationHelpers
18 18 article_id = Person[$2].articles.find_by_slug($1.to_slug).id
19 19 "/myprofile/#{$2}/cms/edit/#{article_id}"
20 20  
21   - when /edit BlogArchivesBlock of (.+)/
22   - owner = Profile[$1]
23   - block = BlogArchivesBlock.find(:all).select{|i| i.owner == owner}.first
24   - "/myprofile/#{$1}/profile_design/edit/#{block.id}"
  21 + when /edit (.*Block) of (.+)/
  22 + owner = Profile[$2]
  23 + klass = $1.constantize
  24 + block = klass.find(:all).select{|i| i.owner == owner}.first
  25 + "/myprofile/#{$2}/profile_design/edit/#{block.id}"
25 26  
26 27 when /^(.*)'s homepage$/
27 28 '/%s' % Profile.find_by_name($1).identifier
... ...
lib/tasks/cucumber.rake
  Diff comments   View file @f476a76
... ... @@ -23,6 +23,12 @@ begin
23 23 t.cucumber_opts = "--color --tags @wip:2 --wip --format #{ENV['CUCUMBER_FORMAT'] || 'progress'}"
24 24 end
25 25  
  26 + Cucumber::Rake::Task.new({:selenium => 'db:test:prepare'}, 'Run features with selenium') do |t|
  27 + t.binary = vendored_cucumber_binary
  28 + t.fork = true # You may get faster startup if you set this to false
  29 + t.cucumber_opts = "--color -p selenium --format #{ENV['CUCUMBER_FORMAT'] || 'pretty'}"
  30 + end
  31 +
26 32 desc 'Run all features'
27 33 task :all => [:ok, :wip]
28 34 end
... ...
public/javascripts/application.js
  Diff comments   View file @f476a76
... ... @@ -78,3 +78,24 @@ function disable_button(button) {
78 78 button.disable();
79 79 button.addClassName("disabled");
80 80 }
  81 +
  82 +/* ICON SELECTOR - LinkListBlock */
  83 +
  84 +function showIconSelector(main_div) {
  85 + iconSelector = jQuery(main_div).children('.icon-selector')[0];
  86 + jQuery(iconSelector).toggle();
  87 +}
  88 +
  89 +function changeIcon(iconSelected, iconName) {
  90 + iconSelector = iconSelected.parentNode;
  91 + setTimeout('iconSelector.style.display = "none"', 100);
  92 + main_div = iconSelector.parentNode;
  93 + span = main_div.getElementsByTagName('span')[0];
  94 + span.className = iconSelected.className;
  95 + iconInput = main_div.getElementsByTagName('input')[0];
  96 + iconInput.value = iconName;
  97 +}
  98 +
  99 +function hideOthersIconSelector(current_div) {
  100 + jQuery('.icon-selector').not(jQuery(current_div).children('.icon-selector')).hide();
  101 +}
... ...
public/stylesheets/application.css
  Diff comments   View file @f476a76
... ... @@ -1513,7 +1513,6 @@ input.disabled {
1513 1513 text-decoration: none;
1514 1514 }
1515 1515  
1516   -
1517 1516 /* ==> blocks/link-list-block.css <<= */
1518 1517  
1519 1518 #edit-link-list-block {
... ... @@ -1527,7 +1526,7 @@ input.disabled {
1527 1526 }
1528 1527  
1529 1528 #edit-link-list-block table .cel-address {
1530   - width: 180px;
  1529 + width: 220px;
1531 1530 }
1532 1531  
1533 1532 #edit-link-list-block table .cel-address input {
... ... @@ -1557,15 +1556,36 @@ input.disabled {
1557 1556 padding-left: 23px;
1558 1557 }
1559 1558  
1560   -#edit-link-list-block select {
1561   - width: 80px;
  1559 +.icon-selector {
  1560 + background: #EEE;
  1561 + border: 1px solid #555;
  1562 + padding: 10px;
  1563 + width: 110px;
  1564 + height: 110px;
  1565 + position: absolute;
  1566 + z-index: 100;
  1567 +}
  1568 +.icon {
  1569 + border:1px solid #EEE;
  1570 +}
  1571 +.icon:hover {
  1572 + border: 1px solid black;
  1573 + cursor: pointer;
  1574 + background-color: #555;
1562 1575 }
1563 1576  
1564   -#edit-link-list-block option {
1565   - background-repeat: no-repeat;
1566   - padding-left: 23px;
1567   - margin: 2px;
1568   - height: 16px;
  1577 +.icon-selector span {
  1578 + height:16px;
  1579 + width:16px;
  1580 + border:1px solid #555;
  1581 + margin:2px;
  1582 + display: block;
  1583 + float: left;
  1584 +}
  1585 +
  1586 +.icon-selector span:hover {
  1587 + border: 1px solid black;
  1588 + background-color: #555;
1569 1589 }
1570 1590  
1571 1591 /* ==> blocks/profile-list-block.css <<= */
... ...
test/unit/link_list_block_test.rb
  Diff comments   View file @f476a76
... ... @@ -43,7 +43,7 @@ class LinkListBlockTest &lt; ActiveSupport::TestCase
43 43 should 'display options for icons' do
44 44 l = LinkListBlock.new
45 45 l.icons_options.each do |option|
46   - assert_match(/<option class='icon-.+' value='.+' (selected='1')?>[^<>]+<\/option>/, option)
  46 + assert_match(/<span class=\"icon-.+\" onclick=\"changeIcon\(this, '.+'\)\"><\/span>/, option)
47 47 end
48 48 end
49 49  
... ...