diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 1e51bf3d974e88610564a4004d3bd9ee1f6b021d..1caf02937d55d218e73f4bcfec0d420464303f85 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -439,6 +439,12 @@ .na { color: inherit; } + + // Rouge `Comment` token (quoted text in email body) + .c { + color: $gl-grayish-blue; + font-style: italic; + } } } } diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss index feb4ea77e588a5b65620eff863a58ac249e29fb9..c433d8298809e9c249cead1fdc0ca171e8d4f87e 100644 --- a/app/assets/stylesheets/notify.scss +++ b/app/assets/stylesheets/notify.scss @@ -1,24 +1,4 @@ -@import 'framework/mixins'; -@import 'framework/variables'; - -img { - max-width: 100%; - height: auto; -} - -p.details { - font-style: italic; - color: $gray-500; -} - -.footer > p { - font-size: small; - color: $gray-500; -} - -pre.commit-message { - white-space: pre-wrap; -} +@import 'notify_base'; .gl-label-scoped { border: 2px solid currentColor; @@ -47,6 +27,4 @@ pre.commit-message { border: 1px solid $gray-100; border-radius: $border-radius-small; } - - @include email-code-block; } diff --git a/app/assets/stylesheets/notify_base.scss b/app/assets/stylesheets/notify_base.scss new file mode 100644 index 0000000000000000000000000000000000000000..8c6f9a27077ab63eccb672d08f5e4e57ccde6fb8 --- /dev/null +++ b/app/assets/stylesheets/notify_base.scss @@ -0,0 +1,25 @@ +@import 'framework/mixins'; +@import 'framework/variables'; + +img { + max-width: 100%; + height: auto; +} + +p.details { + font-style: italic; + color: $gray-500; +} + +.footer > p { + font-size: small; + color: $gray-500; +} + +pre.commit-message { + white-space: pre-wrap; +} + +.content { + @include email-code-block; +} diff --git a/app/assets/stylesheets/notify_enhanced.scss b/app/assets/stylesheets/notify_enhanced.scss new file mode 100644 index 0000000000000000000000000000000000000000..5df5a8592bf18674239a0117f81ed7b8213a360d --- /dev/null +++ b/app/assets/stylesheets/notify_enhanced.scss @@ -0,0 +1,68 @@ +// Import a subset of the GitLab UI framework: +// keep parts that affect elements that can appear in emails; +// omit Bootstrap Reboot since it adds unnecessary styles to every element. +@import 'notify_base'; +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins'; +@import 'bootstrap/scss/code'; +@import '@gitlab/ui/src/scss/variables'; +@import '@gitlab/ui/src/scss/utility-mixins/index'; +@import '@gitlab/ui/src/scss/components'; +@import 'bootstrap_migration'; +@import 'framework/common'; +@import 'framework/gfm'; +@import 'framework/kbd'; +@import 'framework/tables'; +@import 'framework/typography'; +@import 'framework/emojis'; + +body { + font-family: $regular-font; + font-size: inherit; +} + +a { + text-decoration: none; +} + +.content { + .md { + padding: 1rem 0; + } + + hr { + border: 1px solid #e1e1e1; + } + + blockquote { + border-top-width: 0; + border-bottom-width: 0; + border-right-width: 0; + + &:dir(rtl) { + border-left-width: 0; + border-right-width: inherit; + } + } + + table { + border-collapse: collapse; + } + + .diff-table.code, + table.code { + width: auto; + + td { + padding: inherit; + + pre { + background-color: inherit; + margin: 0; + padding: 0; + border: inherit; + } + } + } +} diff --git a/app/views/layouts/notify.html.haml b/app/views/layouts/notify.html.haml index e922b505be86a9130ed86c2f437b19dd2feb4a0a..3b979f69cac7b6898ddfc6afa460051cc70a61a6 100644 --- a/app/views/layouts/notify.html.haml +++ b/app/views/layouts/notify.html.haml @@ -3,7 +3,10 @@ %meta{ content: "text/html; charset=utf-8", "http-equiv" => "Content-Type" } %title GitLab - = stylesheet_link_tag 'notify' + - if Feature.enabled?(:enhanced_notify_css) + = stylesheet_link_tag 'notify_enhanced' + - else + = stylesheet_link_tag 'notify' = yield :head %body .content diff --git a/app/views/layouts/service_desk.html.haml b/app/views/layouts/service_desk.html.haml index 26d15a74403218c40618f7611a22e6dedebc1b08..a838ba91d261a6294bc6b73cfa44816b35d665f9 100644 --- a/app/views/layouts/service_desk.html.haml +++ b/app/views/layouts/service_desk.html.haml @@ -5,7 +5,10 @@ %title GitLab -# haml-lint:enable NoPlainNodes - = stylesheet_link_tag 'notify' + - if Feature.enabled?(:enhanced_notify_css) + = stylesheet_link_tag 'notify_enhanced' + - else + = stylesheet_link_tag 'notify' = yield :head %body .content diff --git a/app/views/notify/_note_email.html.haml b/app/views/notify/_note_email.html.haml index ad0c873bf56c0e5c8f59c5e347f2ef9c8ffe808a..5598447204720be11411f132cb8d7f17097a24bd 100644 --- a/app/views/notify/_note_email.html.haml +++ b/app/views/notify/_note_email.html.haml @@ -25,11 +25,11 @@ = content_for :head do = stylesheet_link_tag 'mailers/highlighted_diff_email' - %table + %table.code = render partial: "projects/diffs/email_line", collection: discussion.truncated_diff_lines(diff_limit: diff_limit), as: :line, locals: { diff_file: discussion.diff_file } -%div{ style: note_style } +.md{ style: note_style } = markdown(note.note, pipeline: :email, author: note.author, current_user: @recipient, issuable_reference_expansion_enabled: true) diff --git a/app/views/notify/issue_due_email.html.haml b/app/views/notify/issue_due_email.html.haml index c9cd9c32b5474f12bd338e8031b985dfbac3649d..e512d7732e2c59a6984034dbc1aeedb48845feaa 100644 --- a/app/views/notify/issue_due_email.html.haml +++ b/app/views/notify/issue_due_email.html.haml @@ -8,5 +8,5 @@ This issue is due on: #{@issue.due_date.to_s(:medium)} - if @issue.description - %div - = markdown(@issue.description, pipeline: :email, author: @issue.author, current_user: @recipient, issuable_reference_expansion_enabled: true) + .md + = markdown(@issue.description, pipeline: :email, author: @issue.author, current_user: @recipient, issuable_reference_expansion_enabled: true) diff --git a/app/views/notify/new_issue_email.html.haml b/app/views/notify/new_issue_email.html.haml index 439604a950a7a3ef0e8886cd51b3d20d80f62789..592b3f453af5acd610b143995c4ac6f0700659f2 100644 --- a/app/views/notify/new_issue_email.html.haml +++ b/app/views/notify/new_issue_email.html.haml @@ -7,5 +7,5 @@ = assignees_label(@issue) - if @issue.description - %div - = markdown(@issue.description, pipeline: :email, author: @issue.author, current_user: @recipient, issuable_reference_expansion_enabled: true) + .md + = markdown(@issue.description, pipeline: :email, author: @issue.author, current_user: @recipient, issuable_reference_expansion_enabled: true) diff --git a/app/views/notify/new_merge_request_email.html.haml b/app/views/notify/new_merge_request_email.html.haml index 54fb6573c26fc2641c7f1fb4f901a215646421f5..f67ac5f8fb2a3ace3a0803d3dc78661e1ca62d9e 100644 --- a/app/views/notify/new_merge_request_email.html.haml +++ b/app/views/notify/new_merge_request_email.html.haml @@ -15,5 +15,5 @@ = render_if_exists 'notify/merge_request_approvers', presenter: @mr_presenter - if @merge_request.description - %div + .md = markdown(@merge_request.description, pipeline: :email, author: @merge_request.author, current_user: @recipient, issuable_reference_expansion_enabled: true) diff --git a/app/views/notify/new_release_email.html.haml b/app/views/notify/new_release_email.html.haml index 1cd3a2340c6d1fc5e66df9e4de814d955290b2cc..09c0e7a8abd4725169c9eb95e412ad82474990f0 100644 --- a/app/views/notify/new_release_email.html.haml +++ b/app/views/notify/new_release_email.html.haml @@ -1,7 +1,7 @@ - release_link_start = ''.html_safe % { url: @target_url } - description_details = { tag: @release.tag, name: @project.name, release_link_start: release_link_start, release_link_end: ''.html_safe } -%div{ style: "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;" } +.md{ style: "font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;" } %p = _("A new Release %{tag} for %{name} was published. Visit the %{release_link_start}Releases page%{release_link_end} to read more about it.").html_safe % description_details diff --git a/app/views/notify/service_desk_new_note_email.html.haml b/app/views/notify/service_desk_new_note_email.html.haml index 186bdf133e3d47a8d0d49e648110ee7ba94a6478..0c16cf3315fd5b4dc565cd6e16a9950a0a2e22a1 100644 --- a/app/views/notify/service_desk_new_note_email.html.haml +++ b/app/views/notify/service_desk_new_note_email.html.haml @@ -1,5 +1,5 @@ - if Gitlab::CurrentSettings.email_author_in_body %div = _("%{author_link} wrote:").html_safe % { author_link: link_to(@note.author_name, user_url(@note.author)) } -%div +.md = markdown(@note.note, pipeline: :email, author: @note.author, issuable_reference_expansion_enabled: true) diff --git a/config/application.rb b/config/application.rb index 8d795e6bc4e20d3595a2877cb622c49a630205ff..e66f64ce7910468be24a4dd0f03b453bce04c173 100644 --- a/config/application.rb +++ b/config/application.rb @@ -247,6 +247,7 @@ class Application < Rails::Application config.assets.precompile << "mailer.css" config.assets.precompile << "mailer_client_specific.css" config.assets.precompile << "notify.css" + config.assets.precompile << "notify_enhanced.css" config.assets.precompile << "mailers/*.css" config.assets.precompile << "page_bundles/_mixins_and_variables_and_functions.css" config.assets.precompile << "page_bundles/admin/application_settings_metrics_and_profiling.css" diff --git a/config/feature_flags/development/enhanced_notify_css.yml b/config/feature_flags/development/enhanced_notify_css.yml new file mode 100644 index 0000000000000000000000000000000000000000..e47db3ba4352b87fe9c5098cb7b2c74059c959fd --- /dev/null +++ b/config/feature_flags/development/enhanced_notify_css.yml @@ -0,0 +1,8 @@ +--- +name: enhanced_notify_css +introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78604 +rollout_issue_url: +milestone: '14.8' +type: development +group: group::project management +default_enabled: false diff --git a/ee/app/views/notify/add_merge_request_approver_email.html.haml b/ee/app/views/notify/add_merge_request_approver_email.html.haml index 3ac6633b4e4231d5e930081d9ba0620d2f312b70..be4bd316c4ec370b8728ff8198e6a872ae158b53 100644 --- a/ee/app/views/notify/add_merge_request_approver_email.html.haml +++ b/ee/app/views/notify/add_merge_request_approver_email.html.haml @@ -14,5 +14,5 @@ = render 'notify/merge_request_approvers', presenter: @mr_presenter - if @merge_request.description - %div + .md = markdown(@merge_request.description, pipeline: :email, author: @merge_request.author, current_user: @recipient, issuable_reference_expansion_enabled: true) diff --git a/ee/app/views/notify/new_epic_email.html.haml b/ee/app/views/notify/new_epic_email.html.haml index 718bd5233fd49ade3fbb18db4f888fda9daf6823..6a838754be32926db3d702c731d0b92390d3e1be 100644 --- a/ee/app/views/notify/new_epic_email.html.haml +++ b/ee/app/views/notify/new_epic_email.html.haml @@ -7,5 +7,5 @@ = assignees_label(@epic) - if @epic.description - %div - = markdown(@epic.description, pipeline: :email, author: @epic.author, current_user: @recipient, issuable_reference_expansion_enabled: true) + .md + = markdown(@epic.description, pipeline: :email, author: @epic.author, current_user: @recipient, issuable_reference_expansion_enabled: true)