From f476a761f710c3c201c94dff939fdd9ec351d30c Mon Sep 17 00:00:00 2001 From: Joenio Costa Date: Mon, 3 May 2010 20:14:25 -0300 Subject: [PATCH] More user-friendly icon selector for block of links --- app/helpers/box_organizer_helper.rb | 7 +++++++ app/models/link_list_block.rb | 5 ++--- app/views/box_organizer/_icon_selector.rhtml | 7 +++++++ app/views/box_organizer/_link_list_block.rhtml | 16 +++++++++++----- config/cucumber.yml | 2 +- features/edit_block_of_links.feature | 22 ++++++++++++++++++++++ features/step_definitions/selenium_steps.rb | 21 +++++++++++++++++++++ features/support/paths.rb | 9 +++++---- lib/tasks/cucumber.rake | 6 ++++++ public/javascripts/application.js | 21 +++++++++++++++++++++ public/stylesheets/application.css | 38 +++++++++++++++++++++++++++++--------- test/unit/link_list_block_test.rb | 2 +- 12 files changed, 133 insertions(+), 23 deletions(-) create mode 100644 app/helpers/box_organizer_helper.rb create mode 100644 app/views/box_organizer/_icon_selector.rhtml create mode 100644 features/edit_block_of_links.feature create mode 100644 features/step_definitions/selenium_steps.rb diff --git a/app/helpers/box_organizer_helper.rb b/app/helpers/box_organizer_helper.rb new file mode 100644 index 0000000..cccdcd7 --- /dev/null +++ b/app/helpers/box_organizer_helper.rb @@ -0,0 +1,7 @@ +module BoxOrganizerHelper + + def icon_selector(icon = 'no-ico') + render :partial => 'icon_selector', :locals => { :icon => icon } + end + +end diff --git a/app/models/link_list_block.rb b/app/models/link_list_block.rb index 580e6d5..36fce6f 100644 --- a/app/models/link_list_block.rb +++ b/app/models/link_list_block.rb @@ -73,10 +73,9 @@ class LinkListBlock < Block true end - def icons_options(selected = nil) + def icons_options ICONS.map do |i| - select = "selected='1'" if i[0] == selected - "" + "" end end diff --git a/app/views/box_organizer/_icon_selector.rhtml b/app/views/box_organizer/_icon_selector.rhtml new file mode 100644 index 0000000..cd6080a --- /dev/null +++ b/app/views/box_organizer/_icon_selector.rhtml @@ -0,0 +1,7 @@ +
+ <%= hidden_field_tag 'block[links][][icon]', icon %> + + +
diff --git a/app/views/box_organizer/_link_list_block.rhtml b/app/views/box_organizer/_link_list_block.rhtml index 7a5686d..a48b00b 100644 --- a/app/views/box_organizer/_link_list_block.rhtml +++ b/app/views/box_organizer/_link_list_block.rhtml @@ -1,18 +1,24 @@ <%= _('Links') %> <%= link_to_function(_('New link'), nil, :class => 'button icon-add with-text') do |page| - 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'))) + + page.insert_html :bottom, 'links', content_tag('tr', + content_tag('td', icon_selector('ok')) + + content_tag('td', text_field_tag('block[links][][name]', '', :maxlength => 20)) + + content_tag('td', text_field_tag('block[links][][address]', nil, :class => 'cel-address')) + ) + javascript_tag("$('edit-link-list-block').scrollTop = $('edit-link-list-block').scrollHeight") end %> diff --git a/config/cucumber.yml b/config/cucumber.yml index 09f3c7e..e89c790 100644 --- a/config/cucumber.yml +++ b/config/cucumber.yml @@ -1,2 +1,2 @@ -default: --tags ~@selenium,~@wip --exclude features/support/selenium.rb +default: --tags ~@selenium,~@wip --exclude features/support/selenium.rb --exclude features/step_definitions/selenium_steps.rb selenium: --tags @selenium,~@wip diff --git a/features/edit_block_of_links.feature b/features/edit_block_of_links.feature new file mode 100644 index 0000000..45ad7c9 --- /dev/null +++ b/features/edit_block_of_links.feature @@ -0,0 +1,22 @@ +Feature: edit_block_of_links + As a profile owner + I want to edit a block of links + + Background: + Given I am on the homepage + And the following users + | login | name | + | eddievedder | Eddie Vedder | + And the following blocks + | owner | type | + | eddievedder | LinkListBlock | + And I am logged in as "eddievedder" + + @selenium + Scenario: show the icon selector + And I follow "Edit sideboxes" + Given I follow "Edit" within ".link-list-block" + And I follow "New link" + And the ".icon-selector" should not be visible + When I click ".icon" + Then the ".icon-selector" should be visible diff --git a/features/step_definitions/selenium_steps.rb b/features/step_definitions/selenium_steps.rb new file mode 100644 index 0000000..69dfa09 --- /dev/null +++ b/features/step_definitions/selenium_steps.rb @@ -0,0 +1,21 @@ +require File.expand_path(File.join(File.dirname(__FILE__), "..", "support", "paths")) + +def string_to_element_locator(selector) + if selector.gsub!(/^\./, '') + "css=[class='#{selector}']" + else + raise "I can't find '#{selector}'!" + end +end + +Then /^the "([^\"]*)" should be visible$/ do |selector| + selenium.is_visible(string_to_element_locator(selector)).should be_true +end + +Then /^the "([^\"]*)" should not be visible$/ do |selector| + selenium.is_visible(string_to_element_locator(selector)).should be_false +end + +When /^I click "([^\"]*)"$/ do |selector| + selenium.click(string_to_element_locator(selector)) +end diff --git a/features/support/paths.rb b/features/support/paths.rb index 4320860..3417932 100644 --- a/features/support/paths.rb +++ b/features/support/paths.rb @@ -18,10 +18,11 @@ module NavigationHelpers article_id = Person[$2].articles.find_by_slug($1.to_slug).id "/myprofile/#{$2}/cms/edit/#{article_id}" - when /edit BlogArchivesBlock of (.+)/ - owner = Profile[$1] - block = BlogArchivesBlock.find(:all).select{|i| i.owner == owner}.first - "/myprofile/#{$1}/profile_design/edit/#{block.id}" + when /edit (.*Block) of (.+)/ + owner = Profile[$2] + klass = $1.constantize + block = klass.find(:all).select{|i| i.owner == owner}.first + "/myprofile/#{$2}/profile_design/edit/#{block.id}" when /^(.*)'s homepage$/ '/%s' % Profile.find_by_name($1).identifier diff --git a/lib/tasks/cucumber.rake b/lib/tasks/cucumber.rake index 36b0228..78d1ec0 100644 --- a/lib/tasks/cucumber.rake +++ b/lib/tasks/cucumber.rake @@ -23,6 +23,12 @@ begin t.cucumber_opts = "--color --tags @wip:2 --wip --format #{ENV['CUCUMBER_FORMAT'] || 'progress'}" end + Cucumber::Rake::Task.new({:selenium => 'db:test:prepare'}, 'Run features with selenium') do |t| + t.binary = vendored_cucumber_binary + t.fork = true # You may get faster startup if you set this to false + t.cucumber_opts = "--color -p selenium --format #{ENV['CUCUMBER_FORMAT'] || 'pretty'}" + end + desc 'Run all features' task :all => [:ok, :wip] end diff --git a/public/javascripts/application.js b/public/javascripts/application.js index fff7c6f..4ad81b6 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -78,3 +78,24 @@ function disable_button(button) { button.disable(); button.addClassName("disabled"); } + +/* ICON SELECTOR - LinkListBlock */ + +function showIconSelector(main_div) { + iconSelector = jQuery(main_div).children('.icon-selector')[0]; + jQuery(iconSelector).toggle(); +} + +function changeIcon(iconSelected, iconName) { + iconSelector = iconSelected.parentNode; + setTimeout('iconSelector.style.display = "none"', 100); + main_div = iconSelector.parentNode; + span = main_div.getElementsByTagName('span')[0]; + span.className = iconSelected.className; + iconInput = main_div.getElementsByTagName('input')[0]; + iconInput.value = iconName; +} + +function hideOthersIconSelector(current_div) { + jQuery('.icon-selector').not(jQuery(current_div).children('.icon-selector')).hide(); +} diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 1cd1bae..19a441f 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -1513,7 +1513,6 @@ input.disabled { text-decoration: none; } - /* ==> blocks/link-list-block.css <<= */ #edit-link-list-block { @@ -1527,7 +1526,7 @@ input.disabled { } #edit-link-list-block table .cel-address { - width: 180px; + width: 220px; } #edit-link-list-block table .cel-address input { @@ -1557,15 +1556,36 @@ input.disabled { padding-left: 23px; } -#edit-link-list-block select { - width: 80px; +.icon-selector { + background: #EEE; + border: 1px solid #555; + padding: 10px; + width: 110px; + height: 110px; + position: absolute; + z-index: 100; +} +.icon { + border:1px solid #EEE; +} +.icon:hover { + border: 1px solid black; + cursor: pointer; + background-color: #555; } -#edit-link-list-block option { - background-repeat: no-repeat; - padding-left: 23px; - margin: 2px; - height: 16px; +.icon-selector span { + height:16px; + width:16px; + border:1px solid #555; + margin:2px; + display: block; + float: left; +} + +.icon-selector span:hover { + border: 1px solid black; + background-color: #555; } /* ==> blocks/profile-list-block.css <<= */ diff --git a/test/unit/link_list_block_test.rb b/test/unit/link_list_block_test.rb index cecb009..ad96016 100644 --- a/test/unit/link_list_block_test.rb +++ b/test/unit/link_list_block_test.rb @@ -43,7 +43,7 @@ class LinkListBlockTest < ActiveSupport::TestCase should 'display options for icons' do l = LinkListBlock.new l.icons_options.each do |option| - assert_match(/