Merge branch 'widget-widget-widget-fun' into 'master'

Merge request widget merged state styling

See merge request !9352

7 files changed, 133 insertions, 51 deletions

diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a629a5333d7..eb6b0cd7902 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -3,7 +3,6 @@
  *
  */
 .mr-state-widget {
-  background: $gray-light;
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 2px;
@@ -109,12 +108,17 @@
     @media (max-width: $screen-xs-max) {
       flex-wrap: wrap;
     }
+
+    .ci-status-icon > .icon-link > svg {
+      width: 22px;
+      height: 22px;
+    }
   }
 
   .mr-widget-body,
   .ci_widget,
   .mr-widget-footer {
-    padding: $gl-padding;
+    padding: 16px;
   }
 
   .mr-widget-pipeline-graph {
@@ -174,10 +178,6 @@
       }
     }
 
-    p:last-child {
-      margin-bottom: 0;
-    }
-
     .btn-grouped {
       margin-left: 0;
       margin-right: 7px;
@@ -340,8 +340,61 @@
   }
 }
 
+.remove-message-pipes {
+  ul {
+    margin: 10px 0 0 12px;
+    padding: 0;
+    list-style: none;
+    border-left: 2px solid $border-color;
+    display: inline-block;
+  }
+
+  li {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    display: block;
+
+    span {
+      margin-left: 15px;
+      max-height: 20px;
+    }
+  }
+
+  li::before {
+    content: '';
+    position: absolute;
+    border-top: 2px solid $border-color;
+    height: 1px;
+    top: 8px;
+    width: 8px;
+  }
+
+  li:last-child {
+    &::before {
+      top: 18px;
+    }
+
+    span {
+      display: block;
+      position: relative;
+      top: 5px;
+      margin-top: 5px;
+    }
+  }
+}
+
 .mr-source-target {
+  background-color: $gray-light;
   line-height: 31px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: $border-color;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+  border-bottom: none;
+  padding: 16px;
+  margin-bottom: -1px;
 }
 
 .panel-new-merge-request {
@@ -437,6 +490,8 @@
 }
 
 .merged-buttons {
+  margin-top: 20px;
+
   .btn {
     float: left;
 
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 03d618327d4..17be0490a86 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -29,9 +29,9 @@
               %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
               %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
       .normal
-        %span Request to merge
+        %span <b>Request to merge</b>
         %span.label-branch= source_branch_with_namespace(@merge_request)
-        %span into
+        %span <b>into</b>
         %span.label-branch
           = link_to_if @merge_request.target_branch_exists?, @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch)
         - if @merge_request.open? && @merge_request.diverged_from_target_branch?
diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml
index c676953f729..e8f17f000dc 100644
--- a/app/views/projects/merge_requests/widget/_heading.html.haml
+++ b/app/views/projects/merge_requests/widget/_heading.html.haml
@@ -2,7 +2,7 @@
   .mr-widget-heading
     - %w[success success_with_warnings skipped canceled failed running pending].each do |status|
       .ci_widget{ class: "ci-#{status}", style: ("display:none" unless @pipeline.status == status) }
-        %div{ class: "ci-status-icon-#{status}" }
+        %div{ class: "ci-status-icon ci-status-icon-#{status}" }
           = link_to namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'icon-link' do
             = ci_icon_for_status(status)
         %span
diff --git a/app/views/projects/merge_requests/widget/_merged.html.haml b/app/views/projects/merge_requests/widget/_merged.html.haml
index 7794d6d7df2..adc3bbc37f3 100644
--- a/app/views/projects/merge_requests/widget/_merged.html.haml
+++ b/app/views/projects/merge_requests/widget/_merged.html.haml
@@ -7,28 +7,46 @@
         by #{link_to_member(@project, @merge_request.merge_event.author, avatar: true)}
         #{time_ago_with_tooltip(@merge_request.merge_event.created_at)}
     - if !@merge_request.source_branch_exists? || params[:deleted_source_branch]
-      %p
-        The changes were merged into
-        #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-        The source branch has been removed.
+      .remove-message-pipes
+        %ul
+          %li
+            %span
+              The changes were merged into
+              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
+          %li
+            %span
+              The source branch has been removed.
       = render 'projects/merge_requests/widget/merged_buttons'
     - elsif @merge_request.can_remove_source_branch?(current_user)
-      .remove_source_branch_widget
-        %p
-          The changes were merged into
-          #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-          You can remove the source branch now.
+      .remove_source_branch_widget.remove-message-pipes
+        %ul
+          %li
+            %span
+              The changes were merged into
+              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
+          %li
+            %span
+              You can remove the source branch now.
         = render 'projects/merge_requests/widget/merged_buttons', source_branch_exists: true
-      .remove_source_branch_widget.failed.hide
-        %p
-          Failed to remove source branch '#{@merge_request.source_branch}'.
-
-      .remove_source_branch_in_progress.hide
-        %p
-          = icon('spinner spin')
-          Removing source branch '#{@merge_request.source_branch}'. Please wait, this page will be automatically reloaded.
+      .remove_source_branch_widget.failed.remove-message-pipes.hide
+        %ul
+          %li
+            %span
+              Failed to remove source branch '#{@merge_request.source_branch}'.
+      .remove_source_branch_in_progress.remove-message-pipes.hide
+        %ul
+          %li
+            %span
+              = icon('spinner spin')
+              Removing source branch '#{@merge_request.source_branch}'.
+          %li
+            %span
+              Please wait, this page will be automatically reloaded.
     - else
-      %p
-        The changes were merged into
-        #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-      = render 'projects/merge_requests/widget/merged_buttons'
+      .remove-message-pipes
+        %ul
+          %li
+            %span
+              The changes were merged into
+              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
+        = render 'projects/merge_requests/widget/merged_buttons'
diff --git a/app/views/projects/merge_requests/widget/_merged_buttons.haml b/app/views/projects/merge_requests/widget/_merged_buttons.haml
index 9eef011b591..caf3bf54eef 100644
--- a/app/views/projects/merge_requests/widget/_merged_buttons.haml
+++ b/app/views/projects/merge_requests/widget/_merged_buttons.haml
@@ -9,6 +9,6 @@
         = icon('trash-o')
         Remove Source Branch
     - if mr_can_be_reverted
-      = revert_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "warning")
+      = revert_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "close")
     - if mr_can_be_cherry_picked
       = cherry_pick_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "default")
diff --git a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
index c98b2c42597..621ee313026 100644
--- a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
@@ -3,20 +3,24 @@
 - can_merge = @merge_request.can_be_merged_via_command_line_by?(current_user)
 
 %h4.has-conflicts
-  = icon("exclamation-triangle")
-  This merge request contains merge conflicts
+  %p
+    = icon("exclamation-triangle")
+    This merge request contains merge conflicts
 
-%p
-  To merge this request, resolve these conflicts
-  - if can_resolve && !can_resolve_in_ui
-    locally
-  or
-  - unless can_merge
-    ask someone with write access to this repository to
-  merge it locally.
+.remove-message-pipes
+  %ul
+    %li
+      %span
+        To merge this request, resolve these conflicts
+        - if can_resolve && !can_resolve_in_ui
+          locally
+        or
+        - unless can_merge
+          ask someone with write access to this repository to
+        merge it locally.
 
 - if (can_resolve && can_resolve_in_ui) || can_merge
-  .btn-group
+  .merged-buttons.clearfix
     - if can_resolve && can_resolve_in_ui
       = link_to "Resolve conflicts", conflicts_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: "btn"
     - if can_merge
diff --git a/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml b/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml
index 40a683d3fbd..5f347acce4d 100644
--- a/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml
@@ -4,15 +4,20 @@
 %h4
   Set by #{link_to_member(@project, @merge_request.merge_user, avatar: true)}
   to be merged automatically when the pipeline succeeds.
-%div
-  %p
-    = succeed '.' do
-      The changes will be merged into
-      %span.label-branch= @merge_request.target_branch
-    - if @merge_request.remove_source_branch?
-      The source branch will be removed.
-    - else
-      The source branch will not be removed.
+.remove-message-pipes
+  %ul
+    %li
+      %span
+        = succeed '.' do
+          The changes will be merged into #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}
+        - if @merge_request.remove_source_branch?
+          %li
+            %span
+              The source branch will be removed.
+        - else
+          %li
+            %span
+              The source branch will not be removed.
 
   - remove_source_branch_button = !@merge_request.remove_source_branch? && @merge_request.can_remove_source_branch?(current_user) && @merge_request.merge_user == current_user
   - user_can_cancel_automatic_merge = @merge_request.can_cancel_merge_when_pipeline_succeeds?(current_user)