Clases personalizadas y formato en mensajes Flash para valores predeterminados de Bootstrap en Twitter

Question

Estoy integrando twitter bootstrap css en mi aplicación. Voy bien, pero no sé cómo personalizar el CSS y los envoltorios para mis mensajes flash.

Me gustaría que mis mensajes flash a formatear con las clases por defecto Bootstrap:

<div class="alert-message error"> 
     <a class="close" href="#">×</a> 
     <p><strong>Oh snap!</strong> Change this and that and <a href="#">try again</a>.</p> 
    </div> 

salida mis mensajes flash actualmente con:

<% flash.each do |name, msg| %> 
    <%= content_tag :div, msg, :id => "flash_#{name}" %> 
<% end %> 

¿Hay una manera fácil de correr un poco cambiar eso: ¿los mensajes flash de notificaciones u otros raíles se asignan a las clases en bootcamp, como información?

Answer 1

Mi respuesta para Bootstrap 2.0 comienza con la respuesta útil de @Railslerner pero utiliza un código diferente en el parcial.

app/helpers/application_helper.rb (igual que la respuesta de @ Railslerner)

module ApplicationHelper 
    def flash_class(level) 
    case level.to_sym 
    when :notice then "alert alert-info" 
    when :success then "alert alert-success" 
    when :error then "alert alert-error" 
    when :alert then "alert alert-error" 
    end 
    end 
end 

En algún lugar de app/views/layouts/application.html.erb:

<%= render 'layouts/flash_messages' %> 

app/views/layouts/_flash_messages.html.erb

<div> 
    <% flash.each do |key, value| %> 
    <div class="<%= flash_class(key) %> fade in"> 
     <a href="#" data-dismiss="alert" class="close">×</a> 
     <%= value %> 
    </div> 
    <% end %> 
</div> 

Diferencias:

• no se bucle a través de diferentes niveles de error cada vez que se llama.
• En su lugar, realiza un bucle a través del hash flash si el hash contiene mensajes (siguiendo el approach in Michael Hartl's Rails Tutorial).
• No usa la etiqueta <p>, no longer required en Bootstrap 2.0.

Recuerde incluir bootstrap-alert.js para que la funcionalidad de fundido y cierre funcione. Si está utilizando la gema bootstap-Sass, añadir esta línea a app/activos/javascript/application.js:

//= require bootstrap-alert 

---

actualización 8/9/2012: carpetas actualizadas. De hecho pongo todo excepto el ayudante bajo app/views/layouts ya que flash_messages solo se usa en app/views/layouts/application.html.erb.

Actualización 05/06/2015: Después de la actualización a Rails 4.2, descubrí que era level (al menos a veces) que viene como una cadena y no para que coincida con la declaración en el caso ApplicationHelper. Cambió eso al level.to_sym.

Answer 2

No es la solución ideal, pero suponiendo que se utiliza de forma permanente 'aviso' o mensajes flash 'error', puede utilizar esto:

... 
<% content_tag :div, :id => "flash_#{name}", :class => "alert-message #{name == "notice" ? "success" : name}" do %> 
... 

Answer 3

Prueba esto:

application_helper.rb

def flash_class(level) 
    case level 
    when :notice then "info" 
    when :error then "error" 
    when :alert then "warning" 
    end 
end 

y luego

<% [:notice, :error, :alert].each do |level| %> 
    <% unless flash[level].blank? %> 
    <div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in"> 
     <a class="close" href="#">×</a> 
     <%= content_tag :p, flash[level] %> 
    </div> 
    <% end %> 
<% end %> 

Answer 4

aquí está mi respuesta con Bootstrap 2.0.0

app/helpers/application_helper.rb

module ApplicationHelper 
    def flash_class(level) 
    case level 
    when :notice then "alert alert-info" 
    when :success then "alert alert-success" 
    when :error then "alert alert-error" 
    when :alert then "alert alert-error" 
    end 
    end 
end 

app/views/shared/_flash_messages.html.erb

<% [:notice, :error, :alert].each do |level| %> 
    <% unless flash[level].blank? %> 
    <div class="<%= flash_class(level) %> fade in"> 
     <a href="#" data-dismiss="alert" class="close">×</a> 
     <%= content_tag :p, flash[level] %> 
    </div> 
    <% end %> 
<% end %> 

Esto le proporciona el fundido de salida cuando se cierra y cierra el botón. Si usaba HAML, preséntese en la siguiente publicación: http://ruby.zigzo.com/2011/10/02/flash-messages-twitters-bootstrap-css-framework/

Answer 5

Si desea alterar completamente el estilo del mensaje flash - por ejemplo, si no desea que el mensaje a desvanecerse, incluso se puede hacer algo como esto:

En su controlador:

flash[:order_error] = "This is an important error that shouldn't fade!" 

luego comparar la tecla flash para mostrar el estilo apropiado (con to_sym):

<% flash.each do |key, msg| %> 
    <% if key == 'order_error'.to_sym %> 
    <div class="error" id="newErrorStyle"><%= msg %></div> 
    <% else %> 
    <div class="<%= key %>" id="flash-<%= key %>"><%= msg %></div> 
    <% content_tag :script, :type => "text/javascript" do -%> 
     setTimeout("new Effect.Fade('flash-<%= key %>');", 8000); 
    <% end %> 
    <% end %> 
<% end %> 

Answer 6

que sugeriría la adición de clases para los diferentes niveles de notificación utilizados en rieles:

.alert-notice { 
    background-color: #f2dede; 
    border-color: #eed3d7; 
    color: #b94a48; } 

etc.

y usarlos de acuerdo con los ejemplos de bootstrap gorjeo:

<% flash.each do |key, value| %> 
    <div class="alert alert-<%= key %>"> 
     <a href="#" data-dismiss="alert" class="close">×</a> 
     <%= value %> 
    </div> 
<% end %> 

Esto hace un ApplicationHelper # flash_class (nivel) obsoleto. Codifica el estilo en la aplicación, que huele. El estilo pertenece a las hojas de estilo.

Answer 7

Bootstrap 3 nombres de las clases (ajustados de la respuesta de Mark Berry):

def flash_class(level) 
    case level 
    when :notice then "alert alert-info" 
    when :success then "alert alert-success" 
    when :error then "alert alert-danger" 
    when :alert then "alert alert-warning" 
    end 
end 

Answer 8

Estoy añadiendo una nueva respuesta para Bootstrap 3.0 basado en la respuesta de Marcos Berry. El CSS Bootstrap las alertas está en http://getbootstrap.com/components/#alerts

app/helpers/application_helper.rb

module ApplicationHelper 
    def flash_class(level) 
    case level 
    when :notice then "alert-info" 
    when :success then "alert-success" 
    when :error then "alert-danger" 
    when :alert then "alert-warning" 
    end 
    end 
end 

app/views/layouts/_flash_messages.html.erb

<div> 
    <% flash.each do |key, value| %> 
    <div class="alert alert-dismissable <%= flash_class(key) %> fade in"> 
     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
     <%= value %> 
    </div> 
    <% end %> 
</div> 

diferencias:

• Cambia las clases de Bootstrap por error y alerta.
• Agregue .alert-dismissable y cambie el código para el botón de cerrar.