Refactor merge request widget

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/javascripts/merge_request_widget.js.coffee

@@ -49,10 +49,8 @@ class @MergeRequestWidget
       @setMergeButtonClass('btn-danger')
 
   showCiCoverage: (coverage) ->
-    cov_html = $('<span>')
-    cov_html.addClass('ci-coverage')
-    cov_html.text('Coverage ' + coverage + '%')
-    $('.ci_widget:visible').append(cov_html)
+    text = 'Coverage ' + coverage + '%'
+    $('.ci_widget:visible .ci-coverage').text(text)
 
   setMergeButtonClass: (css_class) ->
     $('.accept_merge_request').removeClass("btn-create").addClass(css_class)

app/assets/stylesheets/pages/merge_requests.scss

-
-  /**
-   * MR -> show: Automerge widget
+/**
+ * MR -> show: Automerge widget
  *
  */
 .mr-state-widget {
+  background: #FAFAFA;
+  margin-bottom: 20px;
+  color: #666;
+  border: 1px solid #e5e5e5;
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
+  @include border-radius(3px);
+
   form {
     margin-bottom: 0;
     .clearfix {
@@ -20,16 +26,67 @@
       display: inline-block;
       margin: 0;
       margin-left: 20px;
-      padding: 10px 0;
+      padding: 5px;
       line-height: 20px;
-      font-weight: bold;
 
       .remove_source_checkbox {
         margin: 0;
-        font-weight: bold;
       }
     }
   }
+
+  .ci_widget {
+    border-bottom: 1px solid #EEE;
+
+    i {
+      margin-right: 4px;
+    }
+
+    &.ci-success {
+      color: $gl-success;
+    }
+
+    &.ci-skipped {
+      background-color: #eee;
+      color: #888;
+    }
+
+    &.ci-pending,
+    &.ci-running {
+      color: $gl-warning;
+    }
+
+    &.ci-failed,
+    &.ci-canceled,
+    &.ci-error {
+      color: $gl-danger;
+    }
+  }
+
+  .mr-widget-body,
+  .ci_widget,
+  .mr-widget-footer {
+    padding: 15px;
+  }
+
+  .mr-widget-body {
+    h4 {
+      font-weight: bold;
+      margin: 5px 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .mr-widget-footer {
+    border-top: 1px solid #EEE;
+  }
+
+  .ci-coverage {
+    float: right;
+  }
 }
 
 @media(min-width: $screen-sm-max) {
@@ -111,64 +168,6 @@
   display: none;
 }
 
-.mr-state-widget {
-  font-size: 13px;
-  background: #FAFAFA;
-  margin-bottom: 20px;
-  color: #666;
-  border: 1px solid #e5e5e5;
-  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
-  @include border-radius(3px);
-
-  .ci_widget {
-    padding: 10px 15px;
-    font-size: 15px;
-    border-bottom: 1px solid #EEE;
-
-    &.ci-success {
-      color: $gl-success;
-    }
-
-    &.ci-skipped {
-      background-color: #eee;
-      color: #888;
-    }
-
-    &.ci-pending,
-    &.ci-running {
-      color: $gl-warning;
-    }
-
-    &.ci-failed,
-    &.ci-canceled,
-    &.ci-error {
-      color: $gl-danger;
-    }
-  }
-
-  .mr-widget-body {
-    padding: 10px 15px;
-
-    h4 {
-      font-weight: bold;
-      margin: 5px 0;
-    }
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .mr-widget-footer {
-    padding: 10px 15px;
-    border-top: 1px solid #EEE;
-  }
-
-  .ci-coverage {
-    float: right;
-  }
-}
-
 .merge-request-show-labels {
   a {
     margin-right: 5px;

app/views/projects/merge_requests/_show.html.haml

@@ -26,16 +26,6 @@
             If you want to try or merge this request manually, you can use the
             = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
-    - if @merge_request.open? and @merge_request.source_branch_exists?
-      .append-bottom-20
-        .slead
-          %span
-            Fetch the branch with
-            %strong.label-branch<
-              git fetch
-              \ #{@merge_request.source_project.http_url_to_repo}
-              \ #{@merge_request.source_branch}
-
     = render "projects/merge_requests/show/how_to_merge"
     = render "projects/merge_requests/widget/show.html.haml"
 

app/views/projects/merge_requests/widget/_heading.html.haml

 - if @merge_request.has_ci?
   .mr-widget-heading
-    .ci_widget.ci-success{style: "display:none"}
-      = icon("check")
-      %span CI build passed
-      for #{@merge_request.last_commit_short_sha}.
-      = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
-
-    .ci_widget.ci-skipped{style: "display:none"}
-      = icon("check")
-      %span CI build skipped
-      for #{@merge_request.last_commit_short_sha}.
-      = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
-
-    .ci_widget.ci-failed{style: "display:none"}
-      = icon("times")
-      %span CI build failed
-      for #{@merge_request.last_commit_short_sha}.
-      = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
-
-    - [:running, :pending].each do |status|
+    - [:success, :skipped, :canceled, :failed, :running, :pending].each do |status|
       .ci_widget{class: "ci-#{status}", style: "display:none"}
-        = icon("clock-o")
+        - if status == :success
+          = icon("check-circle")
+        - else
+          = icon("circle")
         %span CI build #{status}
         for #{@merge_request.last_commit_short_sha}.
+        %span.ci-coverage
         = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
 
     .ci_widget
@@ -30,19 +16,12 @@
       Checking for CI status for #{@merge_request.last_commit_short_sha}
 
     .ci_widget.ci-not_found{style: "display:none"}
-      = icon("times")
+      = icon("times-circle")
       %span Can not find commit in the CI server
       for #{@merge_request.last_commit_short_sha}.
-      
-
-    .ci_widget.ci-canceled{style: "display:none"}
-      = icon("times")
-      %span CI build canceled
-      for #{@merge_request.last_commit_short_sha}.
-      = link_to "View build page", ci_build_details_path(@merge_request), :"data-no-turbolink" => "data-no-turbolink"
 
     .ci_widget.ci-error{style: "display:none"}
-      = icon("times")
+      = icon("times-circle")
       %span Cannot connect to the CI server. Please check your settings and try again.
 
   :coffeescript

app/views/projects/merge_requests/widget/_open.html.haml

@@ -20,6 +20,14 @@
     - elsif @merge_request.can_be_merged?
       = render 'projects/merge_requests/widget/open/accept'
 
+  - unless @merge_request.branch_missing?
+    .mr-widget-footer
+      = icon('info-circle')
+       
+      If you want to try or merge this request manually, you can use the
+      %strong
+        = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
+
   - if @closes_issues.present?
     .mr-widget-footer
       %span

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

@@ -18,12 +18,6 @@
           text: @merge_request.merge_commit_message,
           rows: 14, hint: true
 
-  %br
-  .light
-    If you want to merge this request manually, you can use the
-    %strong
-      = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
-
   :coffeescript
     $('.accept-mr-form').on 'ajax:before', ->
       btn = $('.accept_merge_request')

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

+%h4
+  This merge request contains merge conflicts that must be resolved.
+
 - if @merge_request.can_be_merged_by?(current_user)
-  %h4
-    This merge request contains merge conflicts that must be resolved.
   %p
     You can merge it manually using the
     %strong
       = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 - else
-  %strong This merge request contains merge conflicts that must be resolved.
-  Only those with write access to this repository can merge merge requests.
+  %p
+    Only those with write access to this repository can merge merge requests.