Remove `pinTo` from `Flash` and make inline flash messages look nicer (!4854)

CHANGELOG

@@ -5,6 +5,7 @@ v 8.10.0 (unreleased)
   - Replace Haml with Hamlit to make view rendering faster. !3666
   - Refactor repository paths handling to allow multiple git mount points
   - Add Application Setting to configure default Repository Path for new projects
+  - Remove pinTo from Flash and make inline flash messages look nicer !4854 (winniehell)
   - Wrap code blocks on Activies and Todos page. !4783 (winniehell)
   - Align flash messages with left side of page content !4959 (winniehell)
   - Display last commit of deleted branch in push events !4699 (winniehell)

app/assets/javascripts/flash.js.coffee

 class @Flash
-  constructor: (message, type = 'alert')->
-    @flash = $(".flash-container")
-    @flash.html("")
+  hideFlash = -> $(@).fadeOut()
 
-    innerDiv = $('<div/>',
+  constructor: (message, type = 'alert', parent = null)->
+    if parent
+      @flashContainer = parent.find('.flash-container')
+    else
+      @flashContainer = $('.flash-container-page')
+
+    @flashContainer.html('')
+
+    flash = $('<div/>',
       class: "flash-#{type}"
     )
-    innerDiv.appendTo(".flash-container")
+    flash.on 'click', hideFlash
 
-    textDiv = $("<div/>",
-      class: "flash-text",
+    textDiv = $('<div/>',
+      class: 'flash-text',
       text: message
     )
-    textDiv.appendTo(innerDiv)
+    textDiv.appendTo(flash)
 
-    if @flash.parent().hasClass('content-wrapper')
+    if @flashContainer.parent().hasClass('content-wrapper')
       textDiv.addClass('container-fluid container-limited')
 
-    @flash.click -> $(@).fadeOut()
-    @flash.show()
+    flash.appendTo(@flashContainer)
+    @flashContainer.show()
 
-  pinTo: (selector) ->
-    @flash.detach().appendTo(selector)

app/assets/javascripts/notes.js.coffee

@@ -167,8 +167,7 @@ class @Notes
   renderNote: (note) ->
     unless note.valid
       if note.award
-        flash = new Flash('You have already awarded this emoji!', 'alert')
-        flash.pinTo('.header-content')
+        new Flash('You have already awarded this emoji!', 'alert')
       return
 
     if note.award
@@ -293,6 +292,8 @@ class @Notes
     form.find("#note_line_code").remove()
     form.find("#note_type").remove()
 
+    @parentTimeline = form.parents('.timeline')
+
   ###
   General note form setup.
 
@@ -323,8 +324,7 @@ class @Notes
     @renderNote(note)
 
   addNoteError: (xhr, note, status) =>
-    flash = new Flash('Your comment could not be submitted! Please check your network connection and try again.', 'alert')
-    flash.pinTo('.md-area')
+    new Flash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', @parentTimeline)
 
   ###
   Called in response to the new note form being submitted

app/assets/stylesheets/framework/flash.scss

 .flash-container {
   cursor: pointer;
   margin: 0;
+  margin-bottom: $gl-padding;
   font-size: 14px;
-  width: 100%;
   z-index: 100;
 
   .flash-notice {
@@ -18,9 +18,27 @@
   }
 
   .flash-notice, .flash-alert {
-    .container-fluid.flash-text {
+    border-radius: $border-radius-default;
+
+    .container-fluid.container-limited.flash-text {
       background: transparent;
     }
   }
+
+  &.flash-container-page {
+    margin-bottom: 0;
+
+    .flash-notice, .flash-alert {
+      border-radius: 0;
+    }
+  }
+}
+
+@media (max-width: $screen-md-min) {
+  ul.notes {
+    .flash-container.timeline-content {
+      margin-left: 0;
+    }
+  }
 }
 

app/views/layouts/_flash.html.haml

-.flash-container
+.flash-container.flash-container-page
   - if alert
     .flash-alert
       = alert

app/views/projects/notes/_notes_with_form.html.haml

@@ -2,6 +2,8 @@
   = render "projects/notes/notes"
 %ul.notes.notes-form.timeline
   %li.timeline-entry
+    .flash-container.timeline-content
+
     - if can? current_user, :create_note, @project
       .timeline-icon.hidden-xs.hidden-sm
         %a.author_link{ href: user_path(current_user) }

spec/javascripts/fixtures/issues_show.html.haml

 :css
   .hidden { display: none !important; }
 
-.flash-container
+.flash-container.flash-container-page
   .flash-alert
   .flash-notice