Messages affichés façon gritter

Gemfile

@@ -43,6 +43,7 @@ end
 gem 'haml-rails'
 gem 'compass-rails', '1.1.3'
 gem 'modernizr-rails'
+gem 'gritter'
 gem 'activeadmin', github: 'gregbell/active_admin'
 gem 'rails-i18n'
 gem 'devise-i18n'

Gemfile.lock

@@ -101,6 +101,7 @@ GEM
     formtastic (2.3.0.rc2)
       actionpack (>= 3.0)
     fssm (0.2.10)
+    gritter (1.1.0)
     guard (2.5.1)
       formatador (>= 0.2.4)
       listen (~> 2.6)
@@ -251,6 +252,7 @@ DEPENDENCIES
   compass-rails (= 1.1.3)
   devise-i18n
   font-awesome-rails
+  gritter
   guard-bundler
   guard-livereload
   guard-minitest

app/assets/javascripts/application.js

@@ -15,4 +15,5 @@
 //= require jquery.turbolinks
 //= require turbolinks
 //= require modernizr
+//= require gritter
 //= require_tree .

app/assets/javascripts/events.js.coffee

@@ -1,11 +1,8 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/
-#
 $(document).ready ->
   $('form.region_selector select').change ->
     this.form.submit()
 
-  selector = $('main form.region_selector + h2')
-  year = selector.html().substr selector.html().search(/\d{4}</), 4
-  selector.html selector.html().replace(/\d{4}</, '<a class="year_selector" href="?year='+year+'">'+year+'</a><')
+  $('main form.region_selector + h2').each ->
+    selector = $(this)
+    year = selector.html().substr selector.html().search(/\d{4}</), 4
+    selector.html selector.html().replace(/\d{4}</, '<a class="year_selector" href="?year='+year+'">'+year+'</a><')

app/assets/javascripts/flash.js.coffee

@@ -0,0 +1,6 @@
+$(document).ready ->
+  $('#flash_messages .flash').removeClass('flash').each ->
+    jQuery.gritter.add
+      image: "/assets/#{$(this).attr('class')}.png",
+      title: $(this).children('h2').text(),
+      text: $(this).children('p').text()

app/assets/stylesheets/all.css.sass

@@ -35,6 +35,9 @@ a:link, a:visited
 a:hover, a:active, a:focus
   color: #2E97FF
 
+.js #flash_messages
+  display: none
+
 header.top
   position: relative
   h1

app/assets/stylesheets/application.css

@@ -8,6 +8,7 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
+ *= require gritter
  *= require_self
  *= require_tree .
  */

app/assets/stylesheets/scaffolds.css.scss

@@ -1,69 +0,0 @@
-body {
-  background-color: #fff;
-  color: #333;
-  font-family: verdana, arial, helvetica, sans-serif;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-p, ol, ul, td {
-  font-family: verdana, arial, helvetica, sans-serif;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-pre {
-  background-color: #eee;
-  padding: 10px;
-  font-size: 11px;
-}
-
-a {
-  color: #000;
-  &:visited {
-    color: #666;
-  }
-  &:hover {
-    color: #fff;
-    background-color: #000;
-  }
-}
-
-div {
-  &.field, &.actions {
-    margin-bottom: 10px;
-  }
-}
-
-#notice {
-  color: green;
-}
-
-.field_with_errors {
-  padding: 2px;
-  background-color: red;
-  display: table;
-}
-
-#error_explanation {
-  width: 450px;
-  border: 2px solid red;
-  padding: 7px;
-  padding-bottom: 0;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
-  h2 {
-    text-align: left;
-    font-weight: bold;
-    padding: 5px 5px 5px 15px;
-    font-size: 12px;
-    margin: -7px;
-    margin-bottom: 0px;
-    background-color: #c00;
-    color: #fff;
-  }
-  ul li {
-    font-size: 12px;
-    list-style: square;
-  }
-}

app/controllers/notes_controller.rb

@@ -5,7 +5,7 @@ class NotesController < InheritedResources::Base
     create! do |format|
       format.html {
         @note.author = current_user
-        create!(notice: 'Dude! Nice job creating that note.') { moderations_url }
+        create!(notice: t(:added, scope: [:notes, :actions])) { moderations_url }
       }
     end
   end

app/views/layouts/_flash.html.haml

@@ -1,3 +1,5 @@
 #flash_messages
   - flash.each do |key, value|
-    .flash(class="#{key}")= value
+    .flash(class="#{key}")
+      %h2=t key, scope: [:gflash, :titles]
+      %p= value

config/locales/fr.yml

@@ -155,6 +155,8 @@ fr:
     new:
       back: Modération
       title: Ajout d'une note de modération
+    actions:
+      added: La note a bien été ajoutée, merci!
   users:
     sign_in:
       title: Identification

config/locales/gflash.en.yml

@@ -0,0 +1,12 @@
+en:
+  gflash:
+    #
+    # These are the translations for the different titles.
+    #
+    titles:
+      alert: "Your attention"
+      notice: "Notice"
+      success: "Success"
+      warning: "Warning"
+      error: "Error"
+      progress: "Progress"

config/locales/gflash.fr.yml

@@ -0,0 +1,12 @@
+fr:
+  gflash:
+    #
+    # These are the translations for the different titles.
+    #
+    titles:
+      alert: "Votre attention"
+      notice: "Information"
+      success: "Succès"
+      warning: "Attention"
+      error: "Erreur"
+      progress: "Progrès"