diff --git a/lib/assets/images/css3buttons/icons.png b/lib/assets/images/css3buttons/icons.png index 1c76039..9eb56cc 100755 Binary files a/lib/assets/images/css3buttons/icons.png and b/lib/assets/images/css3buttons/icons.png differ diff --git a/lib/assets/stylesheets/css3buttons/styles.css.erb b/lib/assets/stylesheets/css3buttons/styles.css.erb index d36dbb5..1a5f4e2 100644 --- a/lib/assets/stylesheets/css3buttons/styles.css.erb +++ b/lib/assets/stylesheets/css3buttons/styles.css.erb @@ -239,6 +239,11 @@ http://github.com/necolas/css3-github-buttons .button.user.icon:focus:before, .button.user.icon:active:before { background-position: -12px -360px; } +.button.dropdown.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -373px; } +.button.dropdown.icon:hover:before, +.button.dropdown.icon:focus:before, +.button.dropdown.icon:active:before { background-position: -12px -373px; } + /* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */ @@ -352,7 +357,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; } @@ -426,3 +433,125 @@ 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 ul.split-menu-wrap { + margin:0; +} + +.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.55em; + + -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: -99999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ + 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 */ + display:block; + z-index:500; +} + +/* ............................................................................................................. 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; +} + +/* ------------------------------------------------------------------------------------------------------------- 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; +} diff --git a/lib/css3buttons.rb b/lib/css3buttons.rb index c69dd51..5b81c23 100644 --- a/lib/css3buttons.rb +++ b/lib/css3buttons.rb @@ -5,7 +5,10 @@ module Css3buttons require 'css3buttons/engine' 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/button_helper.rb b/lib/css3buttons/helpers/button_helper.rb index 3c2be02..8755678 100644 --- a/lib/css3buttons/helpers/button_helper.rb +++ b/lib/css3buttons/helpers/button_helper.rb @@ -63,6 +63,19 @@ 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 + + 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/helpers/split_button_helper.rb b/lib/css3buttons/helpers/split_button_helper.rb new file mode 100644 index 0000000..866a658 --- /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_safe, 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.html_safe, :class => 'split main') + dropdown.html_safe, :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.html_safe, :class => 'split dropdown') + end + + # wrap the remaining links in an
  • tag + # and insert it into a