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

Merge request widget merged state styling

See merge request !9352

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;
 

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?

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

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
+      .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
+      .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
+      .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.hide
-        %p
+      .remove_source_branch_in_progress.remove-message-pipes.hide
+        %ul
+          %li
+            %span
               = icon('spinner spin')
-          Removing source branch '#{@merge_request.source_branch}'. Please wait, this page will be automatically reloaded.
+              Removing source branch '#{@merge_request.source_branch}'.
+          %li
+            %span
+              Please wait, this page will be automatically reloaded.
     - else
-      %p
+      .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'

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")

app/views/projects/merge_requests/widget/open/_conflicts.html.haml

@@ -3,10 +3,14 @@
 - can_merge = @merge_request.can_be_merged_via_command_line_by?(current_user)
 
 %h4.has-conflicts
+  %p
     = icon("exclamation-triangle")
     This merge request contains merge conflicts
 
-%p
+.remove-message-pipes
+  %ul
+    %li
+      %span
         To merge this request, resolve these conflicts
         - if can_resolve && !can_resolve_in_ui
           locally
@@ -16,7 +20,7 @@
         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

app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml

@@ -4,14 +4,19 @@
 %h4
   Set by #{link_to_member(@project, @merge_request.merge_user, avatar: true)}
   to be merged automatically when the pipeline succeeds.
-%div
-  %p
+.remove-message-pipes
+  %ul
+    %li
+      %span
         = succeed '.' do
-      The changes will be merged into
-      %span.label-branch= @merge_request.target_branch
+          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