Use flash message for notification across app

app/assets/javascripts/flash.js.coffee

+class Flash
+  constructor: (message, type)->
+    flash = $(".flash-container")
+    flash.html("")
+
+    $('<div/>',
+      class: "flash-#{type}",
+      text: message
+    ).appendTo(".flash-container")
+
+    flash.click -> $(@).fadeOut()
+    flash.show()
+    setTimeout (-> flash.fadeOut()), 5000
+
+@Flash = Flash

app/assets/javascripts/profile.js.coffee

 $ ->
   $('.edit_user .application-theme input, .edit_user .code-preview-theme input').click ->
-    # Hide any previous submission feedback
-    $('.edit_user .update-feedback').hide()
-
     # Submit the form
     $('.edit_user').submit()
-    # Go up the hierarchy and show the corresponding submission feedback element
-    $(@).closest('fieldset').find('.update-feedback').show('highlight', {color: '#DFF0D8'}, 500)
+    new Flash("Appearance settings saved", "notice")
   $('.update-username form').on 'ajax:before', ->
     $('.loading-gif').show()
@@ -17,6 +13,6 @@ $ ->
   $('.update-username form').on 'ajax:complete', ->
     $(this).find('.btn-save').enableButton()
     $(this).find('.loading-gif').hide()
-  
+
   $('.update-notifications').on 'ajax:complete', ->
     $(this).find('.btn-save').enableButton()

app/assets/stylesheets/sections/profile.scss

-.save-status-fixed {
-  position: fixed;
-  left: 20px;
-  bottom: 50px;
-}
-
 .update-notifications {
   margin-bottom: 0;
   label {

app/assets/stylesheets/sections/themes.scss

-.application-theme, .code-preview-theme {
-  .update-feedback {
-    color: #468847;
-    float: right;
-  }
-}
-
 .themes_opts {
   padding-left: 20px;

app/views/profiles/design.html.haml

@@ -8,9 +8,6 @@
   %fieldset.application-theme
     %legend
       Application theme
-      .update-feedback.hide
-        %i.icon-ok
-        Saved
     .themes_opts
       = label_tag do
         .prev.default
@@ -42,9 +39,6 @@
   %fieldset.code-preview-theme
     %legend
       Code preview theme
-      .update-feedback.hide
-        %i.icon-ok
-        Saved
     .code_highlight_opts
       - color_schemes.each do |color_scheme_id, color_scheme|
         = label_tag do

app/views/profiles/notifications/show.html.haml

@@ -56,12 +56,3 @@
     - @users_projects.each do |users_project|
       - notification = Notification.new(users_project)
       = render 'settings', type: 'project', membership: users_project, notification: notification
-
-
-.save-status-fixed
-  %span.update-success.cgreen.hide
-    %i.icon-ok
-    Saved
-  %span.update-failed.cred.hide
-    %i.icon-remove
-    Failed

app/views/profiles/notifications/update.js.haml

 - if @saved
   :plain
-    $('.save-status-fixed .update-success').showAndHide();
+    new Flash("Notification settings saved", "notice")
 - else
   :plain
-    $('.save-status-fixed .update-failed').showAndHide();
+    new Flash("Failed to save new settings", "alert")