Rails Devise I18n Flash-сообщения с Twitter Bootstrap

Привет, я новичок в ruby ​​on rails, и я изо всех сил пытаюсь понять флэш-сообщения I18n. Я использую devise, rails 4 и twitter bootstrap. Я понимаю, что devise использует только flash[:notice] и flash[:alert].

Я могу заставить флэш-сообщения работать для моей пользовательской модели с входом и выходом из системы. Однако я не могу получить ошибку флэш-памяти для регистрации или забыл пароль для правильного отображения. Похоже на сообщение об ошибке по умолчанию.

Я просмотрел кучу вопросов, связанных с этим, и я запутался в том, как отображать все флэш-сообщения (ошибки, успехи, уведомления) с красивым CSS.

Возможно, ответ уже есть в этой статье прямо у меня под носом? rails — Devise — Handling — devise_error_messages

В настоящее время мои флэш-сообщения основаны на Как определить флэш-уведомления с жемчужиной Twitter Bootstrap Rails

Вот мой пример:
внутри 'app/views/layouts/application.html.erb'

<%= render 'layouts/messages' %>

'app/views/layouts/_messages.html.erb'

<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? "success" : "error" %>">
      <a class="close" data-dismiss="alert">&#215;</a>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

Как отобразить все флэш-сообщения (ошибки, успехи, уведомления) с помощью моего пользовательского CSS?

Обновление: в этом сообщении отображается правильная версия того, что я пытаясь сделать. У меня проблема в том, что стиль не выглядит одинаково. Я считаю, что это из-за тега html.

html = <<-HTML
 <div class="alert alert-error alert-block"> <button type="button"
  class="close" data-dismiss="alert">x</button>
  <h4>#{sentence}</h4>
  #{messages}
 </div>
HTML

Любая идея, как я могу иметь такой же стиль для предупреждений? или какие теги использовать в css?

ошибка регистрации

Вы можете увидеть разницу между страницами регистрации^^ и входа (ниже).

ошибка входа

Обновление2

I've made a new post on what my problem is- which can be found here.


ruby-on-rails twitter-bootstrap rails-i18n devise
person Daniel    schedule 27.11.2013    source источник
comment
Вы пробовали этот вопрос? stackoverflow.com/questions/8705590/. Ваш вопрос касается использования вашего css или I18n?   -  person ksugiarto    schedule 27.11.2013
comment
Я на самом деле только что видел это, и только что попробовал это. Однако я не мог заставить его работать. У меня все еще те же результаты.   -  person Daniel    schedule 27.11.2013
comment
Я следовал этому примеру, и это почти сработало. stackoverflow.com/questions/20171539/ У меня есть цвета для всего, но я не знаю, как изменить цвета для каждого предупреждения   -  person Daniel    schedule 27.11.2013
comment
Мой вопрос касается I18n и css. Я не уверен, как заставить его отображаться правильно. Я хочу, чтобы все поля с ошибками были красными, а любые успехи + хорошие дела — зелеными.   -  person Daniel    schedule 27.11.2013

Ответы (6)


arrow_upward
12
arrow_downward

Я создал вики-страницу в вики-разработке на github для Как: интегрировать флэш-сообщения I18n с Devise и Bootstrap

Flash-сообщения для сайта

Сначала мы сделаем визуализированное представление, чтобы сделать код кратким. В "app/views/layouts/application.html.erb" я добавил <%= render 'layouts/messages' %>.

Мой файл выглядит так:

<body>
  <%= render 'layouts/header' %>
  <div class="container">
    <%= render 'layouts/messages' %>
    <%= yield %>
    <%= render 'layouts/footer' %>
  </div>
</body>

Далее нам нужно создать файл сообщений. Создайте новый файл в "app/views/layouts/_messages.html.erb" и добавьте:

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

Это даст нам флэш-сообщения для всего сайта.

Флэш-сообщения для Devise

Для разработки вам необходимо переопределить способ обработки флеш-сообщений. Создайте файл с именем devise_helper в "app/helpers/devise_helper.rb".

Внутри файла вы должны создать метод devise_error_messages!, который является именем файла, который сообщает devise, как обрабатывать флэш-сообщения.

module DeviseHelper
  def devise_error_messages!
    return '' if resource.errors.empty?

    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
    html = <<-HTML
    <div class="alert alert-error alert-block"> <button type="button"
    class="close" data-dismiss="alert">x</button>
      #{messages}
    </div>
    HTML

    html.html_safe
  end
end

Далее в представлениях разработки вам нужно будет определить, где вы хотите, чтобы сообщения об ошибках отображались. Вам нужно будет ввести <%= devise_error_messages! %> на страницах разработки. Например, введите это в "app/views/devise/registrations/.new.html.erb" (страница регистрации)

Он уже должен быть в файле, но вы можете перемещать код, чтобы настроить его отображение.

CSS для флеш-сообщений

Если вы не хотите использовать нечетные синие и желтые предупреждения, которые приходят по умолчанию, я установил ошибки и предупреждения, чтобы они имели одинаковый цвет, а успех и уведомление имели одинаковый цвет. Я использую красный цвет для ошибок и предупреждений и зеленый для успеха и уведомления.

В моем "app/assets/stylesheets/custom.css.scss" у меня есть:

/*flash*/
.alert-error {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
    text-align: left;
 }

.alert-alert {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
    text-align: left;
 }

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
    text-align: left;
 }

.alert-notice {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
    text-align: left;
 }
person Daniel    schedule 22.12.2013
comment
Хотя теоретически это может ответить на вопрос, было бы предпочтительнее включить сюда основные части ответа и предоставить ссылку для справки. - person Bill the Lizard; 22.12.2013

arrow_upward
9
arrow_downward

Вот мои 2 цента. Использование оператора case, чтобы проверить, являются ли имена флэш-памяти более старым синтаксисом alertили notice, и изменить их на success или danger, если они есть, и оставить все остальное в покое.

<div class="container">
  <% flash.each do |name, msg| %>
    <% if msg.is_a?(String) %>
      <div class="alert alert-<%= flash_class_name(name) %>" role="alert">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
        </button>
        <%= content_tag :div, msg, :id => "flash_#{name}" %>
      </div>
    <% end %>
  <% end %>
</div>

и вспомогательный метод

def flash_class_name(name)
    case name
    when 'notice' then 'success'
    when 'alert'  then 'danger'
    else name
    end
end
person loubotics    schedule 12.10.2014
comment
Это самое простое решение. +1 - person Michael; 17.11.2015

arrow_upward
5
arrow_downward

Если вы используете Sass в своем приложении, вы можете расширить классы BS alert-info и alert-danger с помощью Devise alert-notice и alert-alert соответственно следующим образом:

.alert-notice {
  @extend .alert-info
}

.alert-alert {
  @extend .alert-danger
}

Добавив это в ваш *.scss, флэш-сообщения Devise наследуют стили предупреждений BS info и danger.

http://sass-lang.com/guide (раздел "Расширение/Наследование")

person chaimann    schedule 20.10.2015

arrow_upward
2
arrow_downward

Самое простое решение, которое я нашел, — это использовать общий партиал для всех флэш-сообщений, проверяя :notice и :alert, чтобы заменить их необходимым классом начальной загрузки.

Так что сделайте /views/shared/_alerts.html.erb вот так -

<% flash.each do |message_type, message| %>
<div class="alert alert-<%= flash_class_name(message_type) %> alert-dismissable">
    <span><%= message %></span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
  </div>
<% end %>

Добавьте вспомогательный метод (я добавил его в помощник приложения) следующим образом:

def flash_class_name(name)
    case name
    when "notice" then "success"
    when "alert"  then "danger"
    else name
    end
end

Включите _alerts.html.erb в макет приложения (или родительский макет вашего приложения).

Вот и все!

person nphadke    schedule 16.07.2017

arrow_upward
1
arrow_downward

С Boostrap 3.1 у меня работает так:

 html = <<-HTML
    <div class="alert alert-danger alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      <strong>#{sentence}</strong>
      <ul>
        #{messages}
      </ul>
    </div>

HTML

person matiasmasca    schedule 20.08.2014

arrow_upward
0
arrow_downward

На самом деле bootstrap предоставляет некоторый класс предупреждений, попробуйте класс с alert alert-warning для желтого предупреждения, alert alert-success для зеленого предупреждения, alert alert-danger для красного предупреждения.

А для I18n вы можете просто использовать это напрямую, как в представлении.

Также, если вы хотите принудительно использовать свой класс, а не класс начальной загрузки, вы можете использовать !important в своем классе, например:

.alert
{
  background: #f3f3f3 !important;
  color: black !important;
}

Пожалуйста, поправьте меня, если я ошибаюсь.

person ksugiarto    schedule 28.11.2013
comment
Спасибо, я понимаю, что вы имеете в виду, говоря о принудительном использовании класса начальной загрузки. Я хочу сохранить предупреждение об опасности и предупреждении об успехе, которые обеспечивает I18n. Однако, если вы посмотрите на мои изображения, вы увидите, что оповещение об опасности предоставило мне два разных стиля предупреждений. Я хочу, чтобы обе коробки выглядели одинаково. (одна красная линия проходит через всю страницу, другая не до конца) - person Daniel; 28.11.2013
comment
Хм. Я думаю, что оба окна имеют одинаковый стиль, разница в том, что отправитель прав, верхний исходил от проверки Rails, а нижний - от сообщения Devise. Извините, я не могу дать вам больше решения. Но для I18n для устройства вы можете изменить его самостоятельно на config/locales/devise.en.yml. Извините, если еще не так понял дело. - person ksugiarto; 28.11.2013
comment
Спасибо, ваш ответ помог мне понять, как css работает с I18n, но вот еще один пост, который я сделал, в котором моя проблема более ясна. Моя проблема связана с разработкой, я считаю. - person Daniel; 28.11.2013