Merge branch 'remove-pinto-from-flash' into 'master'

Remove pinTo from Flash

## What does this MR do?

- replace `pinTo` of `Flash` by `parent` parameter in constructor
- move positioning of layout containers from CoffeeScript to layout files
- adjust styling of inline flash messages

## Are there points in the code the reviewer needs to double check?

- display of flash messages in general

## Why was this MR needed?

- allow finding and positioning flash message containers within layout files
- allow adding different CSS classes to flash containers within layout files (necessary for fixing #18908)
- allow multiple flash messages to be displayed at different places at the same time
- make inline flash messages look nicer

## What are the relevant issue numbers?

closes #18908, closes part of #18897

## Screenshots

### Inline flash message (before)
![before](/uploads/c5b3cc05140eaeb9d14e481fa506ebbf/before.png)
![before-mobile](/uploads/004b1f2b9510bd97f4f8a7a6e56f17ef/before-mobile.png)

### Inline flash message (after)
![inline-flash-message](/uploads/fe2a23b63623612b696d529e81fa459e/inline-flash-message.png)
![inline-flash-mobile](/uploads/6207604acfebcf7402d77d5638c89ca8/inline-flash-mobile.png)

### Other flash messages (after)

![flash-message-issue](/uploads/d7e12bd0da68cfa333471ed102428cec/flash-message-issue.png)
---
![flash-new-project](/uploads/3465967dba83296068f154f149d26f64/flash-new-project.png)
---
![flash-sign-in](/uploads/4a5b317d5a369034f43343031607a0c2/flash-sign-in.png)
---
![flash-file-comment](/uploads/488a1119374be7e2173c0a590cfd8821/flash-file-comment.png)
---
![flash-fork](/uploads/f41964e8b910801e03eef3d7649e5009/flash-fork.png)
---
![flash-update-profile](/uploads/9fd972d6c6609fbbf86afcd99d343b5f/flash-update-profile.png)
---

### This is possible now

![flashs-everywhere](/uploads/07f425534511fb4ecaa1d7e2a9870787/flashs-everywhere.png)


See merge request !4854

7 files changed, 46 insertions, 21 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 4e385f5d515..99c23223124 100644
--- a/CHANGELOG
+++ b/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)
diff --git a/app/assets/javascripts/flash.js.coffee b/app/assets/javascripts/flash.js.coffee
index b76d214790a..5a493041538 100644
--- a/app/assets/javascripts/flash.js.coffee
+++ b/app/assets/javascripts/flash.js.coffee
@@ -1,24 +1,28 @@
 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)
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 0b7d8f64456..0ea54faae1a 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -194,8 +194,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
@@ -325,6 +324,8 @@ class @Notes
     form.find("#note_position").remove()
     form.find("#note_type").remove()
 
+    @parentTimeline = form.parents('.timeline')
+
   ###
   General note form setup.
 
@@ -357,8 +358,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
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index a951a2b97fe..0c21d0240b3 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -1,8 +1,8 @@
 .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;
+    }
+  }
 }
 
diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml
index cc8ea066cb9..3612f1ce5c6 100644
--- a/app/views/layouts/_flash.html.haml
+++ b/app/views/layouts/_flash.html.haml
@@ -1,4 +1,4 @@
-.flash-container
+.flash-container.flash-container-page
   - if alert
     .flash-alert
       = alert
diff --git a/app/views/projects/notes/_notes_with_form.html.haml b/app/views/projects/notes/_notes_with_form.html.haml
index 1c39ce897a3..56d302fab82 100644
--- a/app/views/projects/notes/_notes_with_form.html.haml
+++ b/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) }
diff --git a/spec/javascripts/fixtures/issues_show.html.haml b/spec/javascripts/fixtures/issues_show.html.haml
index 470cabeafbb..06c2ab1e823 100644
--- a/spec/javascripts/fixtures/issues_show.html.haml
+++ b/spec/javascripts/fixtures/issues_show.html.haml
@@ -1,7 +1,7 @@
 :css
   .hidden { display: none !important; }
 
-.flash-container
+.flash-container.flash-container-page
   .flash-alert
   .flash-notice