Commit f7659638 authored by Jacob Schatz's avatar Jacob Schatz

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
parents edc27925 2886ebfb
Pipeline #3689046 passed with stages
in 1188 minutes and 14 seconds
......@@ -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)
......
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)
......@@ -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
......
.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;
}
}
}
.flash-container
.flash-container.flash-container-page
- if alert
.flash-alert
= alert
......
......@@ -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) }
......
:css
.hidden { display: none !important; }
.flash-container
.flash-container.flash-container-page
.flash-alert
.flash-notice
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment