Browse Source

simple form bootstrap

pull/1/head
Nicolae Claudius 13 years ago
parent
commit
ed0e5e74e6
  1. 1
      Gemfile
  2. 4
      Gemfile.lock
  3. 16
      app/views/devise/confirmations/new.html.erb
  4. 22
      app/views/devise/passwords/edit.html.erb
  5. 16
      app/views/devise/passwords/new.html.erb
  6. 41
      app/views/devise/registrations/edit.html.erb
  7. 35
      app/views/devise/registrations/new.html.erb
  8. 21
      app/views/devise/sessions/new.html.erb
  9. 31
      app/views/devise/shared/_links.erb
  10. 16
      app/views/devise/unlocks/new.html.erb
  11. 173
      config/initializers/simple_form.rb
  12. 24
      config/locales/simple_form.en.yml
  13. 13
      lib/templates/erb/scaffold/_form.html.erb

1
Gemfile

@ -23,6 +23,7 @@ gem 'rails_config', '~> 0.2.4'
gem 'active-model-email-validator', '~> 1.0.2' gem 'active-model-email-validator', '~> 1.0.2'
gem 'mail_form', '~> 1.3.0' gem 'mail_form', '~> 1.3.0'
gem 'switch_user', '~> 0.6.0' gem 'switch_user', '~> 0.6.0'
gem 'simple_form', '~> 2.0.0'
# Gems used only for assets and not required # Gems used only for assets and not required
# in production environments by default. # in production environments by default.

4
Gemfile.lock

@ -205,6 +205,9 @@ GEM
json_pure json_pure
rubyzip rubyzip
sentient_user (0.3.2) sentient_user (0.3.2)
simple_form (2.0.0)
actionpack (~> 3.0)
activemodel (~> 3.0)
simplecov (0.6.0) simplecov (0.6.0)
multi_json (~> 1.0) multi_json (~> 1.0)
simplecov-html (~> 0.5.3) simplecov-html (~> 0.5.3)
@ -270,6 +273,7 @@ DEPENDENCIES
rspec-rails (~> 2.8.1) rspec-rails (~> 2.8.1)
sass-rails (~> 3.2.3) sass-rails (~> 3.2.3)
sentient_user (~> 0.3.2) sentient_user (~> 0.3.2)
simple_form (~> 2.0.0)
simplecov simplecov
spork (~> 1.0.0.rc0) spork (~> 1.0.0.rc0)
squeel (~> 0.9.3) squeel (~> 0.9.3)

16
app/views/devise/confirmations/new.html.erb

@ -2,13 +2,21 @@
<h1>Resend confirmation instructions</h1> <h1>Resend confirmation instructions</h1>
</div> </div>
<%= form_for(resource, :as => resource_name, :url => confirmation_path(resource_name), :html => { :method => :post }) do |f| %> <%= simple_form_for(resource,
as: resource_name,
url: confirmation_path(resource_name),
html: { method: :post, class: 'form-horizontal' }
) do |f| %>
<%= devise_error_messages! %> <%= devise_error_messages! %>
<div><%= f.label :email %> <div class="inputs">
<%= f.email_field :email %></div> <%= f.input :email %>
</div>
<div><%= f.submit "Resend confirmation instructions", class: 'btn-primary' %></div> <div class="form-actions">
<%= f.submit "Resend confirmation instructions", class: 'btn btn-primary' %>
</div>
<% end %> <% end %>
<%= render :partial => "devise/shared/links" %> <%= render :partial => "devise/shared/links" %>

22
app/views/devise/passwords/edit.html.erb

@ -2,17 +2,23 @@
<h1>Change your password</h1> <h1>Change your password</h1>
</div> </div>
<%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put }) do |f| %> <%= simple_form_for(resource,
<%= devise_error_messages! %> as: resource_name,
<%= f.hidden_field :reset_password_token %> url: password_path(resource_name),
html: { method: :put, class: 'form-horizontal' }
) do |f| %>
<div><%= f.label :password, "New password" %> <%= devise_error_messages! %>
<%= f.password_field :password %></div>
<div><%= f.label :password_confirmation, "Confirm new password" %> <div class="inputs">
<%= f.password_field :password_confirmation %></div> <%= f.hidden_field :reset_password_token %>
<%= f.input :password, label: "New password" %>
<%= f.password_field :password_confirmation, label: "Confirm new password" %></div>
</div>
<div><%= f.submit "Change my password", class: 'btn-primary' %></div> <div class="form-actions">
<%= f.submit "Change my password", class: 'btn btn-primary' %>
</div>
<% end %> <% end %>
<%= render :partial => "devise/shared/links" %> <%= render :partial => "devise/shared/links" %>

16
app/views/devise/passwords/new.html.erb

@ -2,13 +2,21 @@
<h1>Forgot your password?</h1> <h1>Forgot your password?</h1>
</div> </div>
<%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post }) do |f| %> <%= simple_form_for(resource,
as: resource_name,
url: password_path(resource_name),
html: { method: :post, class: 'form-horizontal' }
) do |f| %>
<%= devise_error_messages! %> <%= devise_error_messages! %>
<div><%= f.label :email %> <div class="inputs">
<%= f.email_field :email %></div> <%= f.input :email %>
</div>
<div><%= f.submit "Send me reset password instructions", class: 'btn-primary' %></div> <div class="form-actions">
<%= f.submit "Send me reset password instructions", class: 'btn btn-primary' %>
</div>
<% end %> <% end %>
<%= render :partial => "devise/shared/links" %> <%= render :partial => "devise/shared/links" %>

41
app/views/devise/registrations/edit.html.erb

@ -2,30 +2,27 @@
<h1>Edit <%= resource_name.to_s.humanize %></h1> <h1>Edit <%= resource_name.to_s.humanize %></h1>
</div> </div>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), <%= simple_form_for(resource,
:html => { :method => :put }) do |f| %> as: resource_name,
<%= devise_error_messages! %> url: registration_path(resource_name),
html: { method: :put, class: 'form-horizontal' }
<div><%= f.label :first_name %> ) do |f| %>
<%= f.text_field :first_name %></div>
<div><%= f.label :last_name %>
<%= f.text_field :last_name %></div>
<div><%= f.label :email %>
<%= f.email_field :email %></div>
<div><%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br /> <%= devise_error_messages! %>
<%= f.password_field :password %></div>
<div><%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %></div>
<div><%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password %></div>
<div><%= f.submit "Update", class: 'btn-primary' %> <div class="actions">
<%= link_to "Back", :back %></div> <%= f.input :first_name %>
<%= f.input :last_name %>
<%= f.input :email %>
<%= f.input :password, hint: "leave blank if you don't want to change it" %>
<%= f.input :password_confirmation %>
<%= f.input :current_password, hint: 'we need your current password to confirm your changes' %></div>
</div>
<div class="form-actions">
<%= f.submit "Update", class: 'btn btn-primary' %>
<%= link_to "Back", :back %>
</div>
<% end %> <% end %>
<hr /> <hr />

35
app/views/devise/registrations/new.html.erb

@ -2,27 +2,26 @@
<h1>Sign up</h1> <h1>Sign up</h1>
</div> </div>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %> <%= simple_form_for(resource,
as: resource_name,
url: registration_path(resource_name),
html: { class: 'form-horizontal' }
) do |f| %>
<%= devise_error_messages! %> <%= devise_error_messages! %>
<div class="inputs">
<%= honeypot %> <%= honeypot %>
<%= f.input :first_name %>
<div><%= f.label :first_name %> <%= f.input :last_name %>
<%= f.text_field :first_name %></div> <%= f.input :email, as: :email %>
<%= f.input :password %>
<div><%= f.label :last_name %> <%= f.input :password_confirmation %>
<%= f.text_field :last_name %></div> </div>
<div><%= f.label :email %> <div class="form-actions">
<%= f.email_field :email %></div> <%= f.submit "Sign up", class: 'btn btn-primary' %>
</div>
<div><%= f.label :password %>
<%= f.password_field :password %>
<div><%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %></div>
<div><%= f.submit "Sign up", class: 'btn-primary' %></div>
<% end %> <% end %>
<%= render :partial => "devise/shared/links" %> <%= render :partial => "devise/shared/links" %>

21
app/views/devise/sessions/new.html.erb

@ -2,18 +2,23 @@
<h1>Sign in</h1> <h1>Sign in</h1>
</div> </div>
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %> <%= simple_form_for(resource,
<div><%= f.label :email %> as: resource_name,
<%= f.email_field :email %></div> url: session_path(resource_name),
html: { class: 'form-horizontal' }
<div><%= f.label :password %> ) do |f| %>
<%= f.password_field :password %></div>
<div class="actions">
<%= f.input :email %>
<%= f.input :password %>
<% if devise_mapping.rememberable? -%> <% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div> <%= f.input :remember_me, as: :boolean %>
<% end -%> <% end -%>
</div>
<div><%= f.submit "Sign in", class: 'btn-primary' %></div> <div class="form-actions">
<%= f.submit "Sign in", class: 'btn btn-primary' %>
</div>
<% end %> <% end %>
<%= render :partial => "devise/shared/links" %> <%= render :partial => "devise/shared/links" %>

31
app/views/devise/shared/_links.erb

@ -1,25 +1,8 @@
<%- if controller_name != 'sessions' %> <ul class="nav nav-pills">
<%= link_to "Sign in", new_session_path(resource_name) %><br /> <li><%= link_to "Sign in", new_session_path(resource_name) %></li>
<% end -%> <li><%= link_to "Sign up", new_registration_path(resource_name) %><br /></li>
<li><%= link_to "Forgot your password?", new_password_path(resource_name) %></li>
<li><%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %></li>
<li><%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %></li>
</ul>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Sign up", new_registration_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in with #{provider.to_s.titleize}", omniauth_authorize_path(resource_name, provider) %><br />
<% end -%>
<% end -%>

16
app/views/devise/unlocks/new.html.erb

@ -2,13 +2,21 @@
<h1>Resend unlock instructions</h1> <h1>Resend unlock instructions</h1>
</div> </div>
<%= form_for(resource, :as => resource_name, :url => unlock_path(resource_name), :html => { :method => :post }) do |f| %> <%= simple_form_for(resource,
as: resource_name,
url: unlock_path(resource_name),
html: { :method => :post, class: 'form-horizontal' }
) do |f| %>
<%= devise_error_messages! %> <%= devise_error_messages! %>
<div><%= f.label :email %> <div class="actions">
<%= f.email_field :email %></div> <%= f.input :email %>
</div>
<div><%= f.submit "Resend unlock instructions", class: 'btn-primary' %></div> <div class="form-actions">
<%= f.submit "Resend unlock instructions", class: 'btn btn-primary' %>
</div>
<% end %> <% end %>
<%= render :partial => "devise/shared/links" %> <%= render :partial => "devise/shared/links" %>

173
config/initializers/simple_form.rb

@ -0,0 +1,173 @@
# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
# Wrappers are used by the form builder to generate a
# complete input. You can remove any component from the
# wrapper, change the order or even add your own to the
# stack. The options given below are used to wrap the
# whole input.
config.wrappers :default, :class => :input,
:hint_class => :field_with_hint, :error_class => :field_with_errors do |b|
## Extensions enabled by default
# Any of these extensions can be disabled for a
# given input by passing: `f.input EXTENSION_NAME => false`.
# You can make any of these extensions optional by
# renaming `b.use` to `b.optional`.
# Determines whether to use HTML5 (:email, :url, ...)
# and required attributes
b.use :html5
# Calculates placeholders automatically from I18n
# You can also pass a string as f.input :placeholder => "Placeholder"
b.use :placeholder
## Optional extensions
# They are disabled unless you pass `f.input EXTENSION_NAME => :lookup`
# to the input. If so, they will retrieve the values from the model
# if any exists. If you want to enable the lookup for any of those
# extensions by default, you can change `b.optional` to `b.use`.
# Calculates maxlength from length validations for string inputs
b.optional :maxlength
# Calculates pattern from format validations for string inputs
b.optional :pattern
# Calculates min and max from length validations for numeric inputs
b.optional :min_max
# Calculates readonly automatically from readonly attributes
b.optional :readonly
## Inputs
b.use :label_input
b.use :hint, :wrap_with => { :tag => :span, :class => :hint }
b.use :error, :wrap_with => { :tag => :span, :class => :error }
end
config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
b.use :placeholder
b.use :label
b.wrapper :tag => 'div', :class => 'controls' do |ba|
ba.use :input
ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' }
end
end
config.wrappers :prepend, :tag => 'div', :class => "control-group", :error_class => 'error' do |b|
b.use :placeholder
b.use :label
b.wrapper :tag => 'div', :class => 'controls' do |input|
input.wrapper :tag => 'div', :class => 'input-prepend' do |prepend|
prepend.use :input
end
input.use :hint, :wrap_with => { :tag => 'span', :class => 'help-block' }
input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
end
end
config.wrappers :append, :tag => 'div', :class => "control-group", :error_class => 'error' do |b|
b.use :placeholder
b.use :label
b.wrapper :tag => 'div', :class => 'controls' do |input|
input.wrapper :tag => 'div', :class => 'input-append' do |append|
append.use :input
end
input.use :hint, :wrap_with => { :tag => 'span', :class => 'help-block' }
input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
end
end
# Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
# Check the Bootstrap docs (http://twitter.github.com/bootstrap)
# to learn about the different styles for forms and inputs,
# buttons and other elements.
config.default_wrapper = :bootstrap
# Define the way to render check boxes / radio buttons with labels.
# Defaults to :nested for bootstrap config.
# :inline => input + label
# :nested => label > input
config.boolean_style = :nested
# Default class for buttons
config.button_class = 'btn'
# Method used to tidy up errors.
# config.error_method = :first
# Default tag used for error notification helper.
config.error_notification_tag = :div
# CSS class to add for error notification helper.
config.error_notification_class = 'alert alert-error'
# ID to add for error notification helper.
# config.error_notification_id = nil
# Series of attempts to detect a default label method for collection.
# config.collection_label_methods = [ :to_label, :name, :title, :to_s ]
# Series of attempts to detect a default value method for collection.
# config.collection_value_methods = [ :id, :to_s ]
# You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none.
# config.collection_wrapper_tag = nil
# You can define the class to use on all collection wrappers. Defaulting to none.
# config.collection_wrapper_class = nil
# You can wrap each item in a collection of radio/check boxes with a tag,
# defaulting to :span. Please note that when using :boolean_style = :nested,
# SimpleForm will force this option to be a label.
# config.item_wrapper_tag = :span
# You can define a class to use in all item wrappers. Defaulting to none.
# config.item_wrapper_class = nil
# How the label text should be generated altogether with the required text.
# config.label_text = lambda { |label, required| "#{required} #{label}" }
# You can define the class to use on all labels. Default is nil.
config.label_class = 'control-label'
# You can define the class to use on all forms. Default is simple_form.
# config.form_class = :simple_form
# You can define which elements should obtain additional classes
# config.generate_additional_classes_for = [:wrapper, :label, :input]
# Whether attributes are required by default (or not). Default is true.
# config.required_by_default = true
# Tell browsers whether to use default HTML5 validations (novalidate option).
# Default is enabled.
config.browser_validations = false
# Collection of methods to detect if a file type was given.
# config.file_methods = [ :mounted_as, :file?, :public_filename ]
# Custom mappings for input types. This should be a hash containing a regexp
# to match as key, and the input type that will be used when the field name
# matches the regexp as value.
# config.input_mappings = { /count/ => :integer }
# Default priority for time_zone inputs.
# config.time_zone_priority = nil
# Default priority for country inputs.
# config.country_priority = nil
# Default size for text inputs.
# config.default_input_size = 50
# When false, do not use translations for labels.
# config.translate_labels = true
# Automatically discover new inputs in Rails' autoload path.
# config.inputs_discovery = true
# Cache SimpleForm inputs discovery
# config.cache_discovery = !Rails.env.development?
end

24
config/locales/simple_form.en.yml

@ -0,0 +1,24 @@
en:
simple_form:
"yes": 'Yes'
"no": 'No'
required:
text: 'required'
mark: '*'
# You can uncomment the line below if you need to overwrite the whole required html.
# When using html, text and mark won't be used.
# html: '<abbr title="required">*</abbr>'
error_notification:
default_message: "Some errors were found, please take a look:"
# Labels and hints examples
# labels:
# password: 'Password'
# user:
# new:
# email: 'E-mail para efetuar o sign in.'
# edit:
# email: 'E-mail.'
# hints:
# username: 'User name to sign in.'
# password: 'No special characters, please.'

13
lib/templates/erb/scaffold/_form.html.erb

@ -0,0 +1,13 @@
<%%= simple_form_for(@<%= singular_table_name %>) do |f| %>
<%%= f.error_notification %>
<div class="form-inputs">
<%- attributes.each do |attribute| -%>
<%%= f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %> %>
<%- end -%>
</div>
<div class="form-actions">
<%%= f.button :submit %>
</div>
<%% end %>
Loading…
Cancel
Save