Commit 2886ebfb authored by 🕺 Winnie 🕺's avatar 🕺 Winnie 🕺

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

parent 3041c433
......@@ -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)
......@@ -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
......
.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