设计Flash方法导轨
Dan*_*iel 5 ruby-on-rails devise twitter-bootstrap ruby-on-rails-4 twitter-bootstrap-3
我正在使用Rails 4,Twitter Bootstrap 3.0和Devise 3.0.我正在尝试为设计和我的网站的其余部分获得完全相同的flash消息.到目前为止,我有这个:
在"app/views/layouts/application.html.erb"中:
<%= render 'layouts/messages' %>
"app/views/layouts/_messages.html.erb":
<% devise_flash %>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>">
<a href="#" data-dismiss="alert" class="close">×</a>
<%= value %>
</div>
<% end %>
我创建了一个"app/helpers/devise_helper.rb"来覆盖默认的设计错误消息:
module DeviseHelper
def devise_error_messages!
end
end
"app/helpers/application_helper.rb":
def devise_flash
if controller.devise_controller? && resource.errors.any?
flash.now[:error] = flash[:error].to_a.concat resource.errors.full_messages
flash.now[:error].uniq!
end
end
"app/assets/stylesheets/custom.css.scss":
.alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
text-align: center; }
.alert-alert {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
text-align: center; }
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
text-align: center; }
.alert-notice {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
text-align: center; }
它显示正常的闪存消息,但问题是我有一个设计错误.它看起来像这样:
我试图列出更多这样的错误:
我不希望错误被""包围.它不需要有子弹,但我想让它垂直列出.我想我需要在"app/helpers/application_helper.rb"文件中编辑我的devise_flash方法.
我怎样才能做到这一点？
我在github上的设计维基中创建了一个wiki页面,用于如何:使用设计和引导程序集成I18n Flash消息
网站的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 %>
这将为我们提供整个站点的Flash消息.
设计的Flash消息
对于设计,您需要覆盖设计处理Flash消息的方式.在"app/helpers/devise_helper.rb"中创建一个名为devise_helper的文件.
在文件内部,您必须创建一个名为devise_error_messages!的方法,该方法是告诉设计如何处理Flash消息的文件的名称.
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"中输入此内容(注册页面)
方法调用应该已经在文件中,但您可以移动代码以自定义它的显示位置.
用于Flash消息的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;
}
| 归档时间： |
|
| 查看次数： |
12256 次 |
| 最近记录： |