input groups #839

Closed
wants to merge 4 commits into
from
@@ -286,3 +286,79 @@ This stylesheet forms part of the Formtastic Rails Plugin
padding:0;
}
+
+/* ICONISH SEGMENTS INPUTS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .iconish_segments .input-prepend .add-on {
+ -moz-border-radius-topleft: 5px;
+ -moz-border-radius-bottomleft: 5px;
+ -webkit-border-top-left-radius: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ -khtml-border-top-left-radius: 5px;
+ -khtml-border-bottom-left-radius: 5px;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ margin-right: -1px;
+}
+.formtastic .iconish_segments .input-append .add-on,
+.formtastic .iconish_segments .input-append button {
+ -moz-border-radius-topright: 5px;
+ -moz-border-radius-bottomright: 5px;
+ -moz-border-radius-topleft: 0;
+ -moz-border-radius-bottomleft: 0;
+ -webkit-border-top-right-radius: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ -webkit-border-top-left-radius: 0;
+ -webkit-border-bottom-left-radius: 0;
+ -khtml-border-top-right-radius: 5px;
+ -khtml-border-bottom-right-radius: 5px;
+ -khtml-border-top-left-radius: 0;
+ -khtml-border-bottom-left-radius: 0;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ margin-left: -1px;
+}
+.formtastic .iconish_segments .input-prepend.input-append .add-on:first-child {
+ -moz-border-radius-topleft: 5px;
+ -moz-border-radius-bottomleft: 5px;
+ -moz-border-radius-topright: 0;
+ -moz-border-radius-bottomright: 0;
+ -webkit-border-top-left-radius: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ -webkit-border-top-right-radius: 0;
+ -webkit-border-bottom-right-radius: 0;
+ -khtml-border-top-left-radius: 5px;
+ -khtml-border-bottom-left-radius: 5px;
+ -khtml-border-top-right-radius: 0;
+ -khtml-border-bottom-right-radius: 0;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ margin-left: 0;
+ margin-right: -1px;
+}
+
+.formtastic .iconish-segments-controls {
+ float: left;
+ display: block;
+ width: 72%;
+}
+.formtastic .iconish-segments-controls > * {
+ float: left;
+ display: block;
+ padding: 4px;
+ border: 1px solid #CCC;
+ line-height: 18px;
+}
+.formtastic .iconish-segments-controls .add-on,
+.formtastic .iconish-segments-controls button {
+ background-color: #EEE;
+ color: inherit;
+ font-size: 13px;
+}
+.formtastic .iconish-segments-controls input {
+ height: 18px;
+}
@@ -105,6 +105,7 @@ module InputHelper
# * `:time_zone` (see {Inputs::TimeZoneInput})
# * `:time_select` (see {Inputs::TimeSelectInput})
# * `:url` (see {Inputs::UrlInput})
+ # * `:iconish_segments` (see {Inputs::IconishSegmentsInput})
#
# Calling `:as => :string` (for example) will call `#to_html` on a new instance of
# `Formtastic::Inputs::StringInput`. Before this, Formtastic will try to instantiate a top-level
View
@@ -32,6 +32,7 @@ module Inputs
autoload :TimeZoneInput
autoload :Timeish
autoload :UrlInput
+ autoload :IconishSegmentsInput
end
end
@@ -0,0 +1,151 @@
+module Formtastic
+ module Inputs
+
+ # Outputs a simple `<label> with input groups `<div class="iconish-segments-controls">` wrapped in the standard
+ # `<li>` wrapper. Input groups provide an easy way to give more context to your inputs. Context is given by
+ # appending and/or prepending `<span class="add-on">` to `<input type="text">`. If you need to render a button
+ # next to your field just pass in a code block with `:input_append => lambda { button_tag }`. This will render
+ # `<button>` instead of `<span class="add-on">`. It is also possible to render an image inside
+ # `<span class="add-on">` with `:input_prepend => lambda { image_tag("icon.png") }`. This will output a simple
+ # `<img />` wrapped in the default `<span class="add-on"` wrapper.
+ #
+ # @example Full form context and output
+ #
+ # <= semantic_form_for(@bank_account) do |f| %>
+ # <%= f.inputs do %>
+ # <%= f.input :money, :as => :iconish_segments, :input_prepend => '$', :input_append => '.00' %>
+ # <% end %>
+ # <% end %>
+ #
+ # <form...>
+ # <fieldset...>
+ # <ol>
+ # <li... class="iconish_segments">
+ # <label... for="bank_account_money"><Money/label>
+ # <div class="iconish-segments-controls input-prepend input-append">
+ # <span class="add-on">$</span>
+ # <input type="text" id="bank_account_money" name="bank_account[money]" />
+ # <span class="add-on">.00</span>
+ # </div>
+ # </li>
+ # </ol>
+ # </fieldset>
+ # </form>
+ #
+ # @example Pass in a block
+ #
+ # <= semantic_form_for(@bank_account) do |f| %>
+ # <%= f.inputs do %>
+ # <%= f.input :money, :as => :iconish_segments, :input_prepend => lambda { image_tag("money.png") } %>
+ # <% end %>
+ # <% end %>
+ #
+ # <form...>
+ # <fieldset...>
+ # <ol>
+ # <li... class="iconish_segments">
+ # <label... for="bank_account_money"><Money/label>
+ # <div class="iconish-segments-controls input-prepend">
+ # <span class="add-on">
+ # <img src="/images/money.png" alt="Money" />
+ # </span>
+ # <input type="text" id="bank_account_money" name="bank_account[money]" />
+ # </div>
+ # </li>
+ # </ol>
+ # </fieldset>
+ # </form>
+ #
+ # @example Append with button
+ #
+ # <= semantic_form_for(@user) do |f| %>
+ # <%= f.inputs do %>
+ # <%= f.input :mobile, :as => :iconish_segments, :input_append => lambda { button_tag("Send", :disable_with => "Sending...") } %>
+ # <% end %>
+ # <% end %>
+ #
+ # <form...>
+ # <fieldset...>
+ # <ol>
+ # <li... class="iconish_segments">
+ # <label... for="user_mobile"><Money/label>
+ # <div class="iconish-segments-controls input-append">
+ # <input type="text" id="user_mobile" name="user[mobile]" />
+ # <button data-disable-with="Sending..." name="button" type="submit">Send</button>
+ # </div>
+ # </li>
+ # </ol>
+ # </fieldset>
+ # </form>
+ #
+ # @see Formtastic::Helpers::InputsHelper#input InputsHelper#input for full documentation of all possible options.
+ class IconishSegmentsInput
+ include Base
+ include Base::Stringish
+
+ def to_html
+ input_wrapping do
+ label_html <<
+ iconish_segments_controls
+ end
+ end
+
+ def iconish_segments_controls
+ iconish_segments_wrapping do
+ builder.text_field(method, input_html_options)
+ end
+ end
+
+ def iconish_segments_wrapping(&block)
+ template.content_tag(:div,
+ iconish_segments(&block),
+ iconish_segments_wrapping_html_options
+ )
+ end
+
+ def iconish_segments(&block)
+ [add_on_prepend, template.capture(&block), add_on_append].compact.join("\n").html_safe
+ end
+
+ def iconish_segments_wrapping_html_options
+ {:class => iconish_segments_wrapping_classes}
+ end
+
+ def iconish_segments_wrapping_classes
+ opt = options
+ classes = ['iconish-segments-controls']
+ classes << 'input-prepend' if opt[:input_prepend]
+ classes << 'input-append' if opt[:input_append]
+ classes.join(' ')
+ end
+
+ def add_on_prepend
+ add_on_from_options(:input_prepend)
+ end
+
+ def add_on_append
+ add_on_from_options(:input_append)
+ end
+
+ def add_on_from_options(key)
+ if opt = options[key]
+ content = if opt.is_a?(Proc)
+ opt.call
+ else
+ opt.to_s
+ end
+ add_on(content)
+ end
+ end
+
+ def add_on(content)
+ if content =~ /^<button.*>/
+ content
+ else
+ template.content_tag(:span, content, :class => 'add-on')
+ end
+ end
+ end
+
+ end
+end
View
@@ -187,6 +187,23 @@
</ol>
</fieldset>
</li>
+
+ <li id="gem_money_input" class="iconish_segments input optional stringish">
+ <label for="gem_money" class=" label">Money</label>
+ <div class="iconish-segments-controls input-prepend input-append">
+ <span class="add-on">$</span>
+ <input type="text" name="gem[money]" id="gem_money">
+ <span class="add-on">.00</span>
+ </div>
+ </li>
+
+ <li id="gem_text_message_input" class="iconish_segments input optional stringish">
+ <label for="gem_text_message" class=" label">Text Message</label>
+ <div class="iconish-segments-controls input-prepend input-append">
+ <input type="tel" name="gem[text_message]" id="gem_text_message">
+ <button>Send</button>
+ </div>
+ </li>
</ol>
</fieldset>
Oops, something went wrong.