BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit f7659638 by Jacob Schatz
Options

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
Showing with 46 additions and 21 deletions
CHANGELOG
...@@ -5,6 +5,7 @@ v 8.10.0 (unreleased) ...@@ -5,6 +5,7 @@ v 8.10.0 (unreleased)
- Replace Haml with Hamlit to make view rendering faster. !3666 - Replace Haml with Hamlit to make view rendering faster. !3666
- Refactor repository paths handling to allow multiple git mount points - Refactor repository paths handling to allow multiple git mount points
- Add Application Setting to configure default Repository Path for new projects - 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) - Wrap code blocks on Activies and Todos page. !4783 (winniehell)
- Align flash messages with left side of page content !4959 (winniehell) - Align flash messages with left side of page content !4959 (winniehell)
- Display last commit of deleted branch in push events !4699 (winniehell) - Display last commit of deleted branch in push events !4699 (winniehell)
......
app/assets/javascripts/flash.js.coffee
class @Flash class @Flash
constructor: (message, type = 'alert')-> hideFlash = -> $(@).fadeOut()
@flash = $(".flash-container")
@flash.html("")
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}" class: "flash-#{type}"
) )
innerDiv.appendTo(".flash-container") flash.on 'click', hideFlash
textDiv = $("<div/>", textDiv = $('<div/>',
class: "flash-text", class: 'flash-text',
text: message 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') textDiv.addClass('container-fluid container-limited')
@flash.click -> $(@).fadeOut() flash.appendTo(@flashContainer)
@flash.show() @flashContainer.show()
pinTo: (selector) ->
@flash.detach().appendTo(selector)
app/assets/javascripts/notes.js.coffee
...@@ -194,8 +194,7 @@ class @Notes ...@@ -194,8 +194,7 @@ class @Notes
renderNote: (note) -> renderNote: (note) ->
unless note.valid unless note.valid
if note.award if note.award
flash = new Flash('You have already awarded this emoji!', 'alert') new Flash('You have already awarded this emoji!', 'alert')
flash.pinTo('.header-content')
return return
if note.award if note.award
...@@ -325,6 +324,8 @@ class @Notes ...@@ -325,6 +324,8 @@ class @Notes
form.find("#note_position").remove() form.find("#note_position").remove()
form.find("#note_type").remove() form.find("#note_type").remove()
@parentTimeline = form.parents('.timeline')
### ###
General note form setup. General note form setup.
...@@ -357,8 +358,7 @@ class @Notes ...@@ -357,8 +358,7 @@ class @Notes
@renderNote(note) @renderNote(note)
addNoteError: (xhr, note, status) => addNoteError: (xhr, note, status) =>
flash = new Flash('Your comment could not be submitted! Please check your network connection and try again.', 'alert') new Flash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', @parentTimeline)
flash.pinTo('.md-area')
### ###
Called in response to the new note form being submitted Called in response to the new note form being submitted
......
app/assets/stylesheets/framework/flash.scss
.flash-container { .flash-container {
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
margin-bottom: $gl-padding;
font-size: 14px; font-size: 14px;
width: 100%;
z-index: 100; z-index: 100;
.flash-notice { .flash-notice {
...@@ -18,9 +18,27 @@ ...@@ -18,9 +18,27 @@
} }
.flash-notice, .flash-alert { .flash-notice, .flash-alert {
.container-fluid.flash-text { border-radius: $border-radius-default;
.container-fluid.container-limited.flash-text {
background: transparent; 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 - if alert
.flash-alert .flash-alert
= alert = alert
......
app/views/projects/notes/_notes_with_form.html.haml
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
= render "projects/notes/notes" = render "projects/notes/notes"
%ul.notes.notes-form.timeline %ul.notes.notes-form.timeline
%li.timeline-entry %li.timeline-entry
.flash-container.timeline-content
- if can? current_user, :create_note, @project - if can? current_user, :create_note, @project
.timeline-icon.hidden-xs.hidden-sm .timeline-icon.hidden-xs.hidden-sm
%a.author_link{ href: user_path(current_user) } %a.author_link{ href: user_path(current_user) }
......
spec/javascripts/fixtures/issues_show.html.haml
:css :css
.hidden { display: none !important; } .hidden { display: none !important; }
.flash-container .flash-container.flash-container-page
.flash-alert .flash-alert
.flash-notice .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