1

我无法找到很多符合我需求的资源，所以我想把这个发布给其他黑客，让他们切碎并做得更好。该助手的目标是允许将消息列表或单个消息传递给它。这使我能够在保存到模型时添加所有活动记录失败，或者在我的应用程序中的任何位置添加一条通用消息。我还将rwz/nestive用于多种布局，并将slim-lang用于我的模板。

让我们从我的 flash 消息部分开始，它允许我将列数传递给它：

- if flash.present?
  div[class="row"]
    div[class="large-#{column_count} columns"]
      = display_flash_messages(flash)

可以这样调用：

= render partial: 'partials/flash_message', locals: { column_count: '12'}

帮助程序代码如下。请注意，我还在消息之前嵌入了一个 fontawesome 图标：

module FlashHelper

  DEFAULT_KEY_MATCHING = {
    alert: {
      type: 'alert',
      i_class: 'fa fa-exclamation-triangle'
    },
    notice: {
      type: 'success',
      i_class: 'fa fa-check'
    },
    info: {
      type: 'standard',
      i_class: 'fa fa-check'
    },
    secondary: {
      type: 'secondary',
      i_class: 'fa fa-check'
    },
    success: {
      type: 'success',
      i_class: 'fa fa-ban'
    },
    error: {
      type: 'alert',
      i_class: 'fa fa-exclamation-triangle'
    }
  }

  def display_flash_messages(flash)
    html_output = ''
    flash.each do |type, message|
      key = DEFAULT_KEY_MATCHING[type.to_sym]
      alert_wrapper_class = ('alert-box-multiple-wrapper' if message.is_a? Array) || 'alert-box-single-wrapper'
      html_output +=
      content_tag(:div, class: "alert-box #{key[:type]}", data: { alert: '' } ) do 
        if message.is_a? Array
          html_output_nested =
          content_tag(:ul, class: 'alert-box-list') do
            message.to_a.map do |list_message|
              content_tag(:li, list_message.humanize + '.', class: 'alert-box-li-item')
            end.reduce(:<<)
          end
        else
          html_output_nested = content_tag(:span, message.humanize + '.', class: 'alert-box-span-item')
        end
        html_output_nested = content_tag( :div, html_output_nested, class: "#{alert_wrapper_class}" )
        html_output_nested = content_tag(:i, nil, class: "#{key[:i_class]}") + html_output_nested
        html_output_nested += link_to('&times;'.html_safe, '#', class: 'close')
        html_output_nested
      end
    end
    raw(html_output)
  end
end

相关的 SASS：

div.alert-box {
  .close {
    color: $app-color-code-5;
    @include opacity();
  }
  i {
    font-size: 1.3em;
    padding: 9px 6px 4px;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 0.5rem;
    color: $app-color-code-5;
    margin-top: -0.6875rem;
  }
  div.alert-box-single-wrapper {
    margin-left: 25px;
    .alert-box-span-item {
      font-size: 1em;
    }
  }
  div.alert-box-multiple-wrapper {
    ul {
      margin-left: 3.7rem;
      list-style-type: disc;
      margin-bottom: 0;
    }
    .alert-box-li-item {
      font-size: 1em;
    }
  }
}

在我的设计设置中，我现在可以使用以下内容。是的，我覆盖了默认的设计配置：

if resource_saved
  ....
else
  # merge the ar errors together with devise
  if resource.errors.messages.values.flatten.length > 0
    flash[:error] = resource.errors.messages.values.flatten
  end
  # remove passwords from the view layer
  clean_up_passwords resource
  respond_with resource
end

归根结底，此设置构建了 2 组不同的 html：

<div class="alert-box alert data-alert">
  <i class="fa fa-exclamation-triangle"></i>
  <div class="alert-box-multiple-wrapper">
    <ul class="alert-box-list">
      <li class="alert-box-item">The error message.</li>
    </ul>
  </div>
  <a class="close" href="#">×</a>
</div>

<div class="alert-box alert data-alert">
  <i class="fa fa-exclamation-triangle"></i>
  <div class="alert-box-single-wrapper">
    <span class="alert-box-span-item">The error message.</span>
  </div>
  <a class="close" href="#">×</a>
</div>

现在，所有这些都有效，但我想知道其他人是如何解决这个问题的。

4

0 回答 0