diff --git a/CHANGELOG b/CHANGELOG index 1cf8730cda19656911f77f94231fba392801fd8e..3fdce5c2d421cef0d7dc63be17a7a4c64a849864 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -4,6 +4,7 @@ v 8.9.0 (unreleased) - Fix error when CI job variables key specified but not defined - Fix pipeline status when there are no builds in pipeline - Fix Error 500 when using closes_issues API with an external issue tracker + - Align text of flash messages to left side of page content !4755 (winniehell) - Add more information into RSS feed for issues (Alexander Matyushentsev) - Bulk assign/unassign labels to issues. - Ability to prioritize labels !4009 / !3205 (Thijs Wouters) diff --git a/app/assets/javascripts/flash.js.coffee b/app/assets/javascripts/flash.js.coffee index 4f73d215b8561a2a391a026bd177e99ca0fe8fd2..2a5f183da448ddad61b30beb3d6dd2b4eb5db420 100644 --- a/app/assets/javascripts/flash.js.coffee +++ b/app/assets/javascripts/flash.js.coffee @@ -1,16 +1,30 @@ class @Flash constructor: (message, type = 'alert')-> - @flash = $(".flash-container") - @flash.html("") + @flashContainer = $(".flash-container") + @flashContainer.html("") - innerDiv = $('<div/>', - class: "flash-#{type}", + @flashContainer.addClass('flash-container-stretched') + + flash = $('<div/>', + class: "flash-#{type}" + ) + + backgroundDiv = $('<div/>', + class: 'flash-background' + ) + backgroundDiv.appendTo(flash) + + textDiv = $('<div/>', + class: 'flash-text', text: message ) - innerDiv.appendTo(".flash-container") + textDiv.appendTo(flash) + + flash.click -> flash.fadeOut() - @flash.click -> $(@).fadeOut() - @flash.show() + flash.appendTo(@flashContainer) + @flashContainer.show() pinTo: (selector) -> - @flash.detach().appendTo(selector) + @flashContainer.removeClass('flash-container-stretched') + @flashContainer.detach().appendTo(selector) diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 1bfd0213995c45b4bdbd034803eb41b7dbc928bc..620199fbe271974787c0caf8575d4f489691e33b 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -5,15 +5,48 @@ width: 100%; z-index: 100; - .flash-notice { + .flash-background, .flash-text { @extend .alert; - @extend .alert-info; margin: 0; } .flash-alert { - @extend .alert; - @extend .alert-danger; - margin: 0; + .flash-background, .flash-text { + @extend .alert-danger; + } + } + + .flash-notice { + .flash-background, .flash-text { + @extend .alert-info; + } + } + + /* + * Only used for stretched container + */ + .flash-background { + display: none; } } + +.flash-container-stretched { + .flash-background { + display: block; + height: $flash-height; + left: 0; + position: fixed; + width: 100%; + z-index: 10; + } + + .flash-text { + background: none; + border: none; + padding-left: 0; + padding-right: 0; + position: relative; + z-index: 20; + } +} + diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 5c68f90e3439be59340100e9bf684ee6a5160d5e..59ecb4d4a54455a93b282f7f8597bc2f114f8982 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -426,7 +426,7 @@ margin-top: $header-height + 2; .right-sidebar { - top: ($header-height * 2) + 2; + top: ($header-height * 2 + $flash-height) + 2; } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index c37574ca7a1b9d9494b542c46dcb204b18915805..e5f46ca1c3c30c5293243607a6c9b73efbcb5aa5 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -85,6 +85,7 @@ $todo-alert-blue: #428bca; $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $btn-xs-side-margin: 5px; +$flash-height: $header-height; /* * Color schema diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 3784010348a0dcdbfa0876081f16283d08c7197d..269a2f69d5589e5a98c2df2052c266dde39e1b5d 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -37,6 +37,14 @@ img { max-width: 100%; } + + .flash-container { + margin-top: $gl-padding-top; + + .flash-text { + border-radius: $border-radius-base; + } + } } .note-textarea { diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml index cc8ea066cb9b98e7b014e625fc0d05fbd803365e..1f3cc3de3fb044269016f91dfa8593d81568e867 100644 --- a/app/views/layouts/_flash.html.haml +++ b/app/views/layouts/_flash.html.haml @@ -1,8 +1,14 @@ .flash-container - if alert - .flash-alert - = alert - + - flash_type = 'alert' + - flash_message = alert - elsif notice - .flash-notice - = notice + - flash_type = 'notice' + - flash_message = notice + + - if flash_type + %div{:class => "flash-#{flash_type}"} + .flash-background + .flash-text + = flash_message + diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 199ab3c38c3eecb81822554046ada54e667d40a8..60a358b5053353ea500858a295d0f48da205ac6a 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -22,9 +22,9 @@ = render "layouts/nav/#{nav}" .content-wrapper{ class: "#{layout_nav_class}" } = render "layouts/broadcast" - = render "layouts/flash" - = yield :flash_message %div{ class: (container_class unless @no_container) } .content .clearfix + = render "layouts/flash" + = yield :flash_message = yield diff --git a/app/views/layouts/ci/_page.html.haml b/app/views/layouts/ci/_page.html.haml index 2e56d0ac6a33fdfa1cfa8dc24a76920c36c54e82..d58bda4087c2e4caddbbef8f881906c49ae858c8 100644 --- a/app/views/layouts/ci/_page.html.haml +++ b/app/views/layouts/ci/_page.html.haml @@ -14,9 +14,9 @@ .username = current_user.username .content-wrapper - = render "layouts/flash" = render 'layouts/ci/info' %div{ class: container_class } .content .clearfix + = render "layouts/flash" = yield