Пользовательские классы и форматирование во Flash-сообщениях для Twitter по умолчанию Bootstrap

Question

Я интегрирую Twitter-загрузчик CSS в свое приложение.Идет хорошо, но я не знаю, как настроить css и оболочки для моих флеш-сообщений.

Я бы хотел, чтобы мои флеш-сообщения форматировались с классами 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>

В настоящее время я выводлю свои флеш-сообщения с помощью:

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

Есть ли простой способ запустить небольшой переключатель, который сделал бы: флеш-сообщения уведомлений или других рельсов отображаются на классы в bootcamp, как информация?

Answer 1

Мой ответ для Bootstrap 2.0 начинается с полезного ответа @Railslerner, но в коде используется другой код.

app / helpers / application_helper.rb (аналогично ответу @ 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

Где-то в app / views / layouts / application.html.erb :

<%= render 'layouts/flash_messages' %>

приложение / просмотров / макеты / _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>

Отличия:

• Не перебирает различные уровни ошибок при каждом вызове.
• Вместо этого перебирает флэш-хэш, если хэш содержит сообщения (после подход в обучении Майкла Хартла по Rails ).
• Не использует тег <p>, больше не требуется в Bootstrap 2.0.

Не забудьте включить bootstrap-alert.js, чтобы работали функции исчезновения и закрытия. Если вы используете гем bootstap-sass, добавьте эту строку в app / assets / javascripts / application.js :

//= require bootstrap-alert

---

Обновление от 9.09.2012: Обновление папок. Я фактически помещаю все, кроме помощника, в app / views / layouts , так как flash_messages используется только в app / views / layouts / application.html.erb .

Обновление 5/5/2015: После обновления до Rails 4.2 я обнаружил, что level (по крайней мере, иногда) входит как строка и не соответствует оператору case в ApplicationHelper. Изменено это на level.to_sym.

Answer 2

Вот мой ответ с Bootstrap 2.0.0

приложение / хелперы / 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

приложение / просмотров / 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 %>

Это дает вам затухание при закрытии и кнопку закрытия. Если вы использовали HAML, ознакомьтесь с этим сообщением парней: http://ruby.zigzo.com/2011/10/02/flash-messages-twitters-bootstrap-css-framework/

Answer 3

Я добавляю новый ответ для Bootstrap 3.0 на основе ответа Марка Берри. Bootstrap CSS для оповещений: 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

приложение / просмотров / макеты / _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>

Отличия:

• Изменить классы Bootstrap для ошибок и предупреждений.
• Добавьте .alert-dismissable и измените код кнопки закрытия.

Answer 4

Имена классов Bootstrap 3 (отрегулировано из ответа Марка Берри):

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 5

Попробуйте это:

application_helper.rb

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

, а затем

<% [: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 6

Я бы предложил добавить классы для разных уровней уведомлений, используемых в рельсах:

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

и т.д.

и используйте их в соответствии с примерами из начальной загрузки Twitter:

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

Это делает ApplicationHelper # flash_class (level) устаревшим. Он жестко кодирует стиль в приложении, которое пахнет. Стиль относится к таблицам стилей.

Answer 7

Если вы хотите полностью изменить стиль флеш-сообщения - например, если вы не хотите, чтобы сообщение исчезло, вы можете даже сделать что-то вроде этого:

В вашем контроллере:

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

Затем сравните флэш-клавишу, чтобы показать соответствующий стиль (с 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 8

Это не идеальное решение, но при условии, что вы всегда используете флеш-сообщения «уведомление» или «ошибка», вы можете использовать это:

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