More user-friendly icon selector for block of links

(ActionItem1428)

More user-friendly icon selector for block of links
(ActionItem1428)
Joenio Costa · Antonio Terceiro
1 parent 8bac0258
Showing 12 changed files with 133 additions and 23 deletions Show diff stats
app/helpers/box_organizer_helper.rb
app/models/link_list_block.rb
app/views/box_organizer/_icon_selector.rhtml
app/views/box_organizer/_link_list_block.rhtml
config/cucumber.yml
features/edit_block_of_links.feature
features/step_definitions/selenium_steps.rb
features/support/paths.rb
lib/tasks/cucumber.rake
public/javascripts/application.js
public/stylesheets/application.css
test/unit/link_list_block_test.rb
@@ -0,0 +1,7 @@
+module BoxOrganizerHelper
+
+  def icon_selector(icon = 'no-ico')
+    render :partial => 'icon_selector', :locals => { :icon => icon }
+  end
+
+end
@@ -73,10 +73,9 @@ class LinkListBlock &lt; Block
     true
   end
-  def icons_options(selected = nil)
+  def icons_options
     ICONS.map do |i|
-      select = "selected='1'" if i[0] == selected
-      "<option class='icon-#{i[0]}' value='#{i[0]}' #{select}>#{gettext(i[1])}</option>"
+      "<span class=\"icon-#{i[0]}\" onclick=\"changeIcon(this, '#{i[0]}')\"></span>"
     end
   end
@@ -0,0 +1,7 @@
+<div class='icon' style='width:16px; height:16px;' onclick="hideOthersIconSelector(this); showIconSelector(this)">
+  <%= hidden_field_tag 'block[links][][icon]', icon %>
+  <span class='icon-<%= icon %>' style='display:block; width:16px; height:16px;'></span>
+  <div class="icon-selector" style='display:none;'>
+     <%= @block.icons_options %>
+  </div>
+</div>
 <strong><%= _('Links') %></strong>
 <div id='edit-link-list-block'>
 <table id='links' class='noborder'>
-  <tr><th><%= _('Icon') %></th><th><%= _('Name') %></th><th><%= _('Address') %></th></tr>
+  <tr><th></th><th><%= _('Name') %></th><th><%= _('Address') %></th></tr>
   <% for link in @block.links do %>
     <tr>
-      <td><%= select_tag 'block[links][][icon]', @block.icons_options(link['icon']) %></td>
-      <td><%= text_field_tag 'block[links][][name]', link[:name], :maxlength => 20 %></td>
-      <td class='cel-address'><%= text_field_tag 'block[links][][address]', link[:address] %></td>
+      <td>
+         <%= icon_selector(link['icon']) %>
+      </td>
+      <td><%= text_field_tag 'block[links][][name]', link[:name], :class => 'link-name', :maxlength => 20 %></td>
+      <td class='cel-address'><%= text_field_tag 'block[links][][address]', link[:address], :class => 'link-address' %></td>
     </tr>
   <% end %>
 </table>
 </div>
 <%= 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 %>
-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
+}
@@ -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 <<= */ 
@@ -43,7 +43,7 @@ class LinkListBlockTest &lt; ActiveSupport::TestCase
   should 'display options for icons' do
     l = LinkListBlock.new
     l.icons_options.each do |option|
-      assert_match(/<option class='icon-.+' value='.+' (selected='1')?>[^<>]+<\/option>/, option)
+      assert_match(/<span class=\"icon-.+\" onclick=\"changeIcon\(this, '.+'\)\"><\/span>/, option)
     end
   end
@@ -0,0 +1,7 @@		@@ -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
@@ -0,0 +1,7 @@		@@ -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>
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	selenium: --tags @selenium,~@wip	2	selenium: --tags @selenium,~@wip
@@ -0,0 +1,22 @@		@@ -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
@@ -0,0 +1,21 @@		@@ -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
	@@ -23,6 +23,12 @@ begin		@@ -23,6 +23,12 @@ begin
23	t.cucumber_opts = "--color --tags @wip:2 --wip --format #{ENV['CUCUMBER_FORMAT'] \|\| 'progress'}"	23	t.cucumber_opts = "--color --tags @wip:2 --wip --format #{ENV['CUCUMBER_FORMAT'] \|\| 'progress'}"
24	end	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	desc 'Run all features'	32	desc 'Run all features'
27	task :all => [:ok, :wip]	33	task :all => [:ok, :wip]
28	end	34	end
	@@ -78,3 +78,24 @@ function disable_button(button) {		@@ -78,3 +78,24 @@ function disable_button(button) {
78	button.disable();	78	button.disable();
79	button.addClassName("disabled");	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	+}
	@@ -43,7 +43,7 @@ class LinkListBlockTest < ActiveSupport::TestCase		@@ -43,7 +43,7 @@ class LinkListBlockTest < ActiveSupport::TestCase
43	should 'display options for icons' do	43	should 'display options for icons' do
44	l = LinkListBlock.new	44	l = LinkListBlock.new
45	l.icons_options.each do \|option\|	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	end	47	end
48	end	48	end
49		49