From 00e50336d3d73ab2f535ad58fefd0b8840b9b97f Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Thu, 21 Jul 2011 22:09:25 -0500 Subject: [PATCH 01/11] adding intial helpers for creating split buttons --- lib/css3buttons.rb | 1 + lib/css3buttons/helpers/button_helper.rb | 6 ++++++ lib/css3buttons/split_button_group.rb | 23 +++++++++++++++++++++++ lib/css3buttons/version.rb | 2 +- 4 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 lib/css3buttons/split_button_group.rb diff --git a/lib/css3buttons.rb b/lib/css3buttons.rb index 0ad1b31..0846df0 100644 --- a/lib/css3buttons.rb +++ b/lib/css3buttons.rb @@ -6,5 +6,6 @@ module Helpers autoload :ButtonHelper, 'css3buttons/helpers/button_helper' end autoload :ButtonGroup, 'css3buttons/button_group' + autoload :SplitButtonGroup, 'css3buttons/split_button_group' ActionController::Base.helper(Css3buttons::Helpers::ButtonHelper) end diff --git a/lib/css3buttons/helpers/button_helper.rb b/lib/css3buttons/helpers/button_helper.rb index 3c2be02..a4c5d63 100644 --- a/lib/css3buttons/helpers/button_helper.rb +++ b/lib/css3buttons/helpers/button_helper.rb @@ -63,6 +63,12 @@ def minor_button_group(*args, &block) group = Css3buttons::ButtonGroup.new(self, options) group.render(&block) if block_given? end + + def split_button_group(*args, &block) + options = args.extract_options! + group = Css3buttons::SplitButtonGroup.new(self, options) + group.render(&block) if block_given? + end protected def add_classes_to_html_options(classes, html_options = {}) diff --git a/lib/css3buttons/split_button_group.rb b/lib/css3buttons/split_button_group.rb new file mode 100644 index 0000000..6df3df1 --- /dev/null +++ b/lib/css3buttons/split_button_group.rb @@ -0,0 +1,23 @@ +module Css3buttons + class SplitButtonGroup + include ActionView::Helpers::TagHelper + attr_reader :template, :button_count, :options + + def initialize(template, options) + @button_count = 0 + @template = template + @options = options + @options[:wrapper_tag] ||= :div + end + + def render(&block) + html_options = @options.clone + html_options.delete(:wrapper_tag) + html_options.delete(:minor) + html_options[:class] ||= '' + html_options[:class] = (html_options[:class].split(" ") + ['split-button-group']).join(" ") + content_tag(@options[:wrapper_tag], @template.capture(&block), html_options) if block_given? + end + end +end + diff --git a/lib/css3buttons/version.rb b/lib/css3buttons/version.rb index 3af731c..ffcd332 100644 --- a/lib/css3buttons/version.rb +++ b/lib/css3buttons/version.rb @@ -1,3 +1,3 @@ module Css3buttons - VERSION = "0.9.5" + VERSION = "0.9.6" end From 80606d063d545679e7e513023ec38d9c2c646302 Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Sat, 23 Jul 2011 17:26:33 -0500 Subject: [PATCH 02/11] added an icon and styling for a dropdown button --- .../templates/public/images/gh-icons.png | Bin 3948 -> 4857 bytes .../stylesheets/css3-github-buttons.css | 5 +++++ 2 files changed, 5 insertions(+) diff --git a/lib/generators/css3buttons/templates/public/images/gh-icons.png b/lib/generators/css3buttons/templates/public/images/gh-icons.png index 1c76039d948d1e884436b7c5f297cc3cafe99854..9eb56cc4da381bb2eb20974276382b24cea4dec3 100644 GIT binary patch literal 4857 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 Date: Sat, 23 Jul 2011 17:30:35 -0500 Subject: [PATCH 03/11] added ability to display buttons in a list and added styling to appear as split buttons --- lib/css3buttons/split_button_group.rb | 20 +++- .../stylesheets/css3-github-buttons.css | 96 +++++++++++++++++++ 2 files changed, 114 insertions(+), 2 deletions(-) diff --git a/lib/css3buttons/split_button_group.rb b/lib/css3buttons/split_button_group.rb index 6df3df1..8c1420c 100644 --- a/lib/css3buttons/split_button_group.rb +++ b/lib/css3buttons/split_button_group.rb @@ -1,5 +1,5 @@ module Css3buttons - class SplitButtonGroup + class SplitButtonGroup < ActionView::Base include ActionView::Helpers::TagHelper attr_reader :template, :button_count, :options @@ -11,12 +11,28 @@ def initialize(template, options) end def render(&block) + # parse the passed in block's content + content = @template.capture(&block) + + # convert the string to an array of links + links = content.strip.gsub(/\r*?\n+\t*?\s+/, "::").split("::") + + # extract the first link from the array + main_action = links.shift + + # wrap the remaining links in an
  • tag + list = links.map { |link| content_tag(:li, link, :class => 'split-menu-item') } + menu = content_tag(:ul, list.join("\n").html_safe, :class => 'split-menu') + + dropdown = content_tag(:li, "".html_safe + menu, :class => 'split dropdown') + split_btn = content_tag(:ul, content_tag(:li, main_action, :class => 'split main') + dropdown, :class => 'split-menu-wrap') + html_options = @options.clone html_options.delete(:wrapper_tag) html_options.delete(:minor) html_options[:class] ||= '' html_options[:class] = (html_options[:class].split(" ") + ['split-button-group']).join(" ") - content_tag(@options[:wrapper_tag], @template.capture(&block), html_options) if block_given? + content_tag(@options[:wrapper_tag], split_btn, html_options) if block_given? end end end diff --git a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css index 83a38ef..2411bfa 100644 --- a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css +++ b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css @@ -397,3 +397,99 @@ http://github.com/necolas/css3-github-buttons .button-container .button-group { vertical-align: top; } + +/* --------------------------------------------------------------------------------------------------------- SPLIT BUTTON GROUPS */ + +.split-button-group { + display: inline-block; + list-style: none; + padding: 0; + margin: 0; + + /* IE hacks */ + zoom: 1; + *display: inline; +} + + +.split-button-group .button { + float: left; + margin-left: -1px; +} + + + +.split-button-group .split { + display: inline; + position:relative; +} + +.split-button-group .split.main .button { + -webkit-border-top-right-radius:0; + -webkit-border-bottom-right-radius:0; + -moz-border-radius-topright:0; + -moz-border-radius-bottomright:0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.split-button-group .split.dropdown .button.dropdown.icon:before { margin: 0 0.25em 0; } + +.split-button-group .split.dropdown .button { + margin-left:-1px; + float:none; + padding:0.5em 0.3em 0.6em; + + -webkit-border-top-left-radius:0; + -webkit-border-bottom-left-radius:0; + -moz-border-radius-topleft:0; + -moz-border-radius-bottomleft:0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.split-button-group .split.dropdown .button:hover { + border-bottom:1px solid #888; +} + +.split-button-group li { + list-style:none; + padding: 0; + margin: 0; +} + +.split-button-group li ul { + padding: 0; + margin-top:-5px; + min-width:78px; + max-width:120px; + width: 90px; + list-style: none; + position: absolute; + right: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ +} + +.split-button-group .split.dropdown .button:hover, +.split-button-group .split-menu { + -moz-box-shadow: 0 0 5px #888; + -webkit-box-shadow: 0 0 5px #888; + -khtml-box-shadow: 0 0 5px #888; + box-shadow: 0 0 5px #888; +} + + +.split-button-group .split-menu .button.icon:before { + margin: 0 0.75em 0 0.25em; +} + +.split-button-group .split-menu .button { + display: block; + border-top: none; + padding-left:1.4em; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.split-button-group li:hover ul{ + right:0; /* Bring back on-screen when needed */ +} From dc870792be20e8fe9b6d509e4502523301be8f32 Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Sat, 23 Jul 2011 18:00:47 -0500 Subject: [PATCH 04/11] added the pill_split_button_group helper method and some styling to match the pill styling --- lib/css3buttons/helpers/button_helper.rb | 7 +++++++ lib/css3buttons/split_button_group.rb | 13 ++++++++++--- .../public/stylesheets/css3-github-buttons.css | 13 ++++++++++++- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/lib/css3buttons/helpers/button_helper.rb b/lib/css3buttons/helpers/button_helper.rb index a4c5d63..8755678 100644 --- a/lib/css3buttons/helpers/button_helper.rb +++ b/lib/css3buttons/helpers/button_helper.rb @@ -69,6 +69,13 @@ def split_button_group(*args, &block) group = Css3buttons::SplitButtonGroup.new(self, options) group.render(&block) if block_given? end + + def pill_split_button_group(*args, &block) + options = args.extract_options! + options[:pill] = true + group = Css3buttons::SplitButtonGroup.new(self, options) + group.render(&block) if block_given? + end protected def add_classes_to_html_options(classes, html_options = {}) diff --git a/lib/css3buttons/split_button_group.rb b/lib/css3buttons/split_button_group.rb index 8c1420c..4f663b8 100644 --- a/lib/css3buttons/split_button_group.rb +++ b/lib/css3buttons/split_button_group.rb @@ -1,5 +1,5 @@ module Css3buttons - class SplitButtonGroup < ActionView::Base + class SplitButtonGroup include ActionView::Helpers::TagHelper attr_reader :template, :button_count, :options @@ -24,14 +24,21 @@ def render(&block) list = links.map { |link| content_tag(:li, link, :class => 'split-menu-item') } menu = content_tag(:ul, list.join("\n").html_safe, :class => 'split-menu') - dropdown = content_tag(:li, "".html_safe + menu, :class => 'split dropdown') + dropdown_link_classes = "dropdown icon button" + dropdown_link_classes += " pill" if @options[:pill] + + dropdown_link = "" + + dropdown = content_tag(:li, dropdown_link.html_safe + menu, :class => 'split dropdown') split_btn = content_tag(:ul, content_tag(:li, main_action, :class => 'split main') + dropdown, :class => 'split-menu-wrap') html_options = @options.clone html_options.delete(:wrapper_tag) - html_options.delete(:minor) + html_options.delete(:pill) html_options[:class] ||= '' html_options[:class] = (html_options[:class].split(" ") + ['split-button-group']).join(" ") + html_options[:class] = (html_options[:class].split(" ") + ['pill-group']).join(" ") if @options[:pill] + content_tag(@options[:wrapper_tag], split_btn, html_options) if block_given? end end diff --git a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css index 2411bfa..fe4b78b 100644 --- a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css +++ b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css @@ -438,7 +438,7 @@ http://github.com/necolas/css3-github-buttons .split-button-group .split.dropdown .button { margin-left:-1px; float:none; - padding:0.5em 0.3em 0.6em; + padding:0.5em 0.3em 0.55em; -webkit-border-top-left-radius:0; -webkit-border-bottom-left-radius:0; @@ -493,3 +493,14 @@ http://github.com/necolas/css3-github-buttons .split-button-group li:hover ul{ right:0; /* Bring back on-screen when needed */ } + +/* ............................................................................................................. Pill */ + +.pill-group .split.main .button { + -webkit-border-top-left-radius:25em; + -webkit-border-bottom-left-radius:25em; + -moz-border-radius-topleft:25em; + -moz-border-radius-bottomleft:25em; + border-top-left-radius: 25em; + border-bottom-left-radius: 25em; +} \ No newline at end of file From e561719a67ea15c6d69c73ccd0fbac49094e77b3 Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Sat, 23 Jul 2011 18:32:59 -0500 Subject: [PATCH 05/11] cleaned up the styling for split buttons within a .button-container --- .../stylesheets/css3-github-buttons.css | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css index fe4b78b..cf76427 100644 --- a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css +++ b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css @@ -323,7 +323,9 @@ http://github.com/necolas/css3-github-buttons .button + .button, .button + .button-group, .button-group + .button, -.button-group + .button-group { +.button-group + .button-group, +.split-button-group + .button, +.split-button-group + .button-group { margin-left: 15px; } @@ -411,14 +413,15 @@ http://github.com/necolas/css3-github-buttons *display: inline; } +.split-button-group ul.split-menu-wrap { + margin:0; +} .split-button-group .button { - float: left; - margin-left: -1px; + float: left; + margin-left: -1px; } - - .split-button-group .split { display: inline; position:relative; @@ -503,4 +506,15 @@ http://github.com/necolas/css3-github-buttons -moz-border-radius-bottomleft:25em; border-top-left-radius: 25em; border-bottom-left-radius: 25em; +} + +/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */ +/* For mixing buttons and button groups, e.g., in a navigation bar */ + +.button-container .split-button-group { + vertical-align: top; +} + +.button-container .split-button-group li ul { + margin-top:0; } \ No newline at end of file From 3bbaebe2634a74507a3a1490983a7c533cf1bc34 Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Sat, 23 Jul 2011 18:34:03 -0500 Subject: [PATCH 06/11] added a z-index so the split-menu will stand a chance of not being hidden by another element --- .../templates/public/stylesheets/css3-github-buttons.css | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css index cf76427..0808326 100644 --- a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css +++ b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css @@ -469,6 +469,7 @@ http://github.com/necolas/css3-github-buttons list-style: none; position: absolute; right: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ + z-index:500; } .split-button-group .split.dropdown .button:hover, From 6e7ba58ebc848c1e306d513492a964c3505e7b07 Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Sat, 23 Jul 2011 18:45:44 -0500 Subject: [PATCH 07/11] added the Split Button documentation to the readme --- readme.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index d5eabc1..8ed73ee 100644 --- a/readme.md +++ b/readme.md @@ -9,11 +9,18 @@ fantastic CSS library - without cluttering up your views and calls to # What's new in version this version? +## 0.9.6 + +Added ability to render a block of buttons as a split button and styled +so the first button will remain displayed while the remaining buttons +will be displayed in a drop down. Also added a new dropdown icon and css +classes to display + ## 0.9.5 Not a whole lot, mainly just fixes for bad paths in the CSS that crept through in the last update. As well as prepping for version 1.0.0 with -will be compaitible with the Rails 3.1 asset pipeline. +will be compatible with the Rails 3.1 asset pipeline. ## 0.9.4 @@ -117,6 +124,25 @@ And, of course, minor groups: <% end %> +## Split Buttons (Button groups) + +Split Buttons (no javascript!), similar to Button Groups, are extremely easy to create by using a `split_button_group`, like so: + + <%= split_button_group do %> + <%= primary_add_button_link_to "New Post", @post %> + <%= button_link_to "Edit", edit_post_path(@post) %> + <%= negative_trash_button_link_to "Delete", @post, :confirm => "Are you sure? %> + <% end %> + +Pill Split Buttons are also easy to do: + + <%= pill_split_button_group do %> + <%= primary_add_button_link_to "New Post", @post %> + <%= button_link_to "Edit", edit_post_path(@post) %> + <%= negative_trash_button_link_to "Delete", @post, :confirm => "Are you sure? %> + <% end %> + + ## Submit tags, button tags and using icons on form buttons Submit tags were ushered in with version 0.9.2. Everything works as it does above, except instead of `button_link_to` it's `button_submit_tag`. Example: From 45e732358317beaf7faf933bec920fc8109bd525 Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Sun, 24 Jul 2011 10:26:37 -0500 Subject: [PATCH 08/11] oops...should probably hide the submenu to avoid a horizontal scroll bar --- .../templates/public/stylesheets/css3-github-buttons.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css index 0808326..80c5b7b 100644 --- a/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css +++ b/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css @@ -468,8 +468,8 @@ http://github.com/necolas/css3-github-buttons width: 90px; list-style: none; position: absolute; - right: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ - z-index:500; + right: -99999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ + display:none; } .split-button-group .split.dropdown .button:hover, @@ -482,7 +482,7 @@ http://github.com/necolas/css3-github-buttons .split-button-group .split-menu .button.icon:before { - margin: 0 0.75em 0 0.25em; + margin: 0 0.75em 0 0.25em; } .split-button-group .split-menu .button { @@ -496,6 +496,8 @@ http://github.com/necolas/css3-github-buttons .split-button-group li:hover ul{ right:0; /* Bring back on-screen when needed */ + display:block; + z-index:500; } /* ............................................................................................................. Pill */ From 59a7be8bc95a37ea79fbadbcf0df9d392aed2e5d Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Sun, 24 Jul 2011 11:06:38 -0500 Subject: [PATCH 09/11] moved the creation of the split button to the new split_button_helper --- lib/css3buttons.rb | 2 + .../helpers/split_button_helper.rb | 53 +++++++++++++++++++ lib/css3buttons/split_button_group.rb | 31 ++--------- 3 files changed, 58 insertions(+), 28 deletions(-) create mode 100644 lib/css3buttons/helpers/split_button_helper.rb diff --git a/lib/css3buttons.rb b/lib/css3buttons.rb index 0846df0..f706e1c 100644 --- a/lib/css3buttons.rb +++ b/lib/css3buttons.rb @@ -4,8 +4,10 @@ module Css3buttons module Helpers autoload :ButtonHelper, 'css3buttons/helpers/button_helper' + autoload :SplitButtonHelper, 'css3buttons/helpers/split_button_helper' end autoload :ButtonGroup, 'css3buttons/button_group' autoload :SplitButtonGroup, 'css3buttons/split_button_group' ActionController::Base.helper(Css3buttons::Helpers::ButtonHelper) + ActionController::Base.helper(Css3buttons::Helpers::SplitButtonHelper) end diff --git a/lib/css3buttons/helpers/split_button_helper.rb b/lib/css3buttons/helpers/split_button_helper.rb new file mode 100644 index 0000000..b6899f4 --- /dev/null +++ b/lib/css3buttons/helpers/split_button_helper.rb @@ -0,0 +1,53 @@ +module Css3buttons + module Helpers + module SplitButtonHelper + include ActionView::Helpers::TagHelper + include ActionView::Helpers::UrlHelper + + def render_split_button(content, options) + html_options = options.clone + html_options.delete(:wrapper_tag) + html_options.delete(:pill) + html_options[:class] ||= '' + html_options[:class] = (html_options[:class].split(" ") + ['split-button-group']).join(" ") + html_options[:class] = (html_options[:class].split(" ") + ['pill-group']).join(" ") if options[:pill] + + # convert the string to an array of links + links = content.strip.gsub(/\r*?\n+\t*?\s+/, "::").split("::") + + # pass the creation of the button off to the helpers + split_btn = create_split_button(links, options) + + # return the final split button + wrapping element + content_tag(options[:wrapper_tag], split_btn, html_options) + end + + # extracts the first link from the array and + # keeps it as the main action and creates the + # markup for the main action + dropdown button + def create_split_button(links, options) + main_action = links.shift + dropdown = create_dropdown(links, options) + content_tag(:ul, content_tag(:li, main_action, :class => 'split main') + dropdown, :class => 'split-menu-wrap') + end + + # creates the drop down's button + menu + def create_dropdown(links, options) + menu = create_dropdown_menu(links) + + dropdown_link_classes = "dropdown icon button" + dropdown_link_classes += " pill" if options[:pill] + dropdown_link = link_to "", "javascript:void(0);", :class => dropdown_link_classes + + content_tag(:li, dropdown_link.html_safe + menu, :class => 'split dropdown') + end + + # wrap the remaining links in an
  • tag + # and insert it into a
      element + def create_dropdown_menu(links) + list = links.map { |link| content_tag(:li, link, :class => 'split-menu-item') } + content_tag(:ul, list.join("\n").html_safe, :class => 'split-menu') + end + end + end +end \ No newline at end of file diff --git a/lib/css3buttons/split_button_group.rb b/lib/css3buttons/split_button_group.rb index 4f663b8..bcac1ea 100644 --- a/lib/css3buttons/split_button_group.rb +++ b/lib/css3buttons/split_button_group.rb @@ -1,6 +1,6 @@ module Css3buttons class SplitButtonGroup - include ActionView::Helpers::TagHelper + include Css3buttons::Helpers::SplitButtonHelper attr_reader :template, :button_count, :options def initialize(template, options) @@ -12,34 +12,9 @@ def initialize(template, options) def render(&block) # parse the passed in block's content - content = @template.capture(&block) - - # convert the string to an array of links - links = content.strip.gsub(/\r*?\n+\t*?\s+/, "::").split("::") - - # extract the first link from the array - main_action = links.shift - - # wrap the remaining links in an
    • tag - list = links.map { |link| content_tag(:li, link, :class => 'split-menu-item') } - menu = content_tag(:ul, list.join("\n").html_safe, :class => 'split-menu') - - dropdown_link_classes = "dropdown icon button" - dropdown_link_classes += " pill" if @options[:pill] - - dropdown_link = "" - - dropdown = content_tag(:li, dropdown_link.html_safe + menu, :class => 'split dropdown') - split_btn = content_tag(:ul, content_tag(:li, main_action, :class => 'split main') + dropdown, :class => 'split-menu-wrap') - - html_options = @options.clone - html_options.delete(:wrapper_tag) - html_options.delete(:pill) - html_options[:class] ||= '' - html_options[:class] = (html_options[:class].split(" ") + ['split-button-group']).join(" ") - html_options[:class] = (html_options[:class].split(" ") + ['pill-group']).join(" ") if @options[:pill] + content = @template.capture(&block) - content_tag(@options[:wrapper_tag], split_btn, html_options) if block_given? + render_split_button(content, @options) if block_given? end end end From 147a267260dfbd93e90d17ec126c31559ae70544 Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Sun, 24 Jul 2011 11:16:12 -0500 Subject: [PATCH 10/11] added the 'dropdown' to the list of available icons to test in the spec --- spec/button_helper_spec.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/button_helper_spec.rb b/spec/button_helper_spec.rb index a2c8280..0f58a33 100644 --- a/spec/button_helper_spec.rb +++ b/spec/button_helper_spec.rb @@ -4,7 +4,7 @@ describe Css3buttons::Helpers::ButtonHelper do before :each do - @icons = ["book","calendar","chat","check","clock","cog","comment","cross","downarrow","fork","heart","home","key","leftarrow","lock","loop","magnifier","mail","move","pen","pin","plus","reload","rightarrow","rss","tag","trash","unlock","uparrow","user"] + @icons = ["book","calendar","chat","check","clock","cog","comment","cross","downarrow","fork","heart","home","key","leftarrow","lock","loop","magnifier","mail","move","pen","pin","plus","reload","rightarrow","rss","tag","trash","unlock","uparrow","user","dropdown"] @qualifiers = ['pill', 'negative', 'positive', 'danger', 'safe'] @label = "Search this site" @path = "/search/site" From bedce0d9f1912cb967855901d6f2c30688c0c4b1 Mon Sep 17 00:00:00 2001 From: grafikchaos Date: Mon, 2 Jan 2012 13:27:11 -0600 Subject: [PATCH 11/11] add html_safe method to the helper's content --- lib/css3buttons/helpers/split_button_helper.rb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/css3buttons/helpers/split_button_helper.rb b/lib/css3buttons/helpers/split_button_helper.rb index b6899f4..866a658 100644 --- a/lib/css3buttons/helpers/split_button_helper.rb +++ b/lib/css3buttons/helpers/split_button_helper.rb @@ -19,7 +19,7 @@ def render_split_button(content, options) split_btn = create_split_button(links, options) # return the final split button + wrapping element - content_tag(options[:wrapper_tag], split_btn, html_options) + content_tag(options[:wrapper_tag], split_btn.html_safe, html_options) end # extracts the first link from the array and @@ -28,7 +28,7 @@ def render_split_button(content, options) def create_split_button(links, options) main_action = links.shift dropdown = create_dropdown(links, options) - content_tag(:ul, content_tag(:li, main_action, :class => 'split main') + dropdown, :class => 'split-menu-wrap') + content_tag(:ul, content_tag(:li, main_action.html_safe, :class => 'split main') + dropdown.html_safe, :class => 'split-menu-wrap') end # creates the drop down's button + menu @@ -39,13 +39,13 @@ def create_dropdown(links, options) dropdown_link_classes += " pill" if options[:pill] dropdown_link = link_to "", "javascript:void(0);", :class => dropdown_link_classes - content_tag(:li, dropdown_link.html_safe + menu, :class => 'split dropdown') + content_tag(:li, dropdown_link.html_safe + menu.html_safe, :class => 'split dropdown') end # wrap the remaining links in an
    • tag # and insert it into a
        element def create_dropdown_menu(links) - list = links.map { |link| content_tag(:li, link, :class => 'split-menu-item') } + list = links.map { |link| content_tag(:li, link.html_safe, :class => 'split-menu-item') } content_tag(:ul, list.join("\n").html_safe, :class => 'split-menu') end end