Restyle merge request accept and ci widget

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

app/assets/javascripts/merge_request.js.coffee

@@ -88,7 +88,21 @@ class MergeRequest
 
   showCiState: (state) ->
     $('.ci_widget').hide()
+    allowed_states = ["failed", "running", "pending", "success"]
+    if state in allowed_states
       $('.ci_widget.ci-' + state).show()
+    else
+      $('.ci_widget.ci-error').show()
+
+    switch state
+      when "success"
+        $('.mr-state-widget').addClass("panel-success")
+      when "failed"
+        $('.mr-state-widget').addClass("panel-danger")
+      when "running", "pending"
+        $('.mr-state-widget').addClass("panel-warning")
+
+
 
   loadDiff: (event) ->
     $.ajax

app/assets/stylesheets/gl_bootstrap.scss

@@ -45,6 +45,7 @@ $pagination-active-bg: $bg_style_color;
 @import "bootstrap/list-group";
 @import "bootstrap/wells";
 @import "bootstrap/close";
+@import "bootstrap/panels";
 
 // Components w/ JavaScript
 @import "bootstrap/modals";

app/assets/stylesheets/sections/merge_requests.scss

@@ -44,10 +44,9 @@
 
 .label-branch {
   @include border-radius(4px);
-  padding: 3px 4px;
+  padding: 2px 4px;
   border: none;
-  font-size: 14px;
-  background: #474D57;
+  background: #555;
   color: #fff;
   font-family: $monospace_font;
   font-weight: normal;
@@ -95,3 +94,21 @@
 .diff-file .reopen-mr-link {
   display: none;
 }
+
+.mr-state-widget {
+  @include border-radius(0px);
+
+  .panel-heading {
+    @include border-radius(0px);
+  }
+
+  .panel-body {
+    h4 {
+      margin-top: 0px;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

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

@@ -2,14 +2,7 @@
   = render "projects/merge_requests/show/mr_title"
   = render "projects/merge_requests/show/how_to_merge"
   = render "projects/merge_requests/show/mr_box"
-  - if @merge_request.open?
-    - if @merge_request.source_branch_exists? && @merge_request.target_branch_exists?
-      = render "projects/merge_requests/show/mr_accept"
-    - else
-      = render "projects/merge_requests/show/no_accept"
-  = render "projects/merge_requests/show/remove_source_branch"
-  - if @merge_request.source_project.gitlab_ci?
-    = render "projects/merge_requests/show/mr_ci"
+  = render "projects/merge_requests/show/state_widget"
   = render "projects/merge_requests/show/commits"
 
   - if @commits.present?

app/views/projects/merge_requests/show/_commits.html.haml

@@ -28,10 +28,3 @@
           - @commits.each do |commit|
             = render "projects/commits/commit", commit: commit, project: @merge_request.source_project
 
-- else
-  .nothing-here-block
-    Nothing to merge from
-    %span.label-branch #{@merge_request.source_branch}
-    to
-    %span.label-branch #{@merge_request.target_branch}
-  %br

app/views/projects/merge_requests/show/_mr_accept.html.haml

 - unless @allowed_to_merge
   - if @project.archived?
-    .bs-callout.bs-callout-warning
+    %p
       %strong Archived projects cannot be committed to!
   - else
-    .bs-callout
     .automerge_widget.cannot_be_merged.hide
       %strong This can't be merged automatically, even if it could be merged you don't have the permission to do so.
     .automerge_widget.can_be_merged.hide
@@ -12,11 +11,11 @@
 
 - if @show_merge_controls
   .automerge_widget.can_be_merged.hide
-    .bs-callout.bs-callout-success.clearfix
+    .clearfix
       = form_for [:automerge, @project, @merge_request], remote: true, method: :get do |f|
         %h4
           You can accept this request automatically.
-        %p
+        %div
           If you still want to do it manually -
           %strong
             = link_to "click here", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
@@ -47,31 +46,30 @@
 
 
   .automerge_widget.no_satellite.hide
-    .bs-callout.bs-callout-danger
+    %p
       %span
         %strong This repository does not have satellite. Ask an administrator to fix this issue
 
   .automerge_widget.cannot_be_merged.hide
-    .bs-callout.bs-callout-disabled
     %h4
       This request can't be merged with GitLab.
-      %span
+    %p
       You should do it manually with
       %strong
         = link_to "command line", "#modal_merge_info", class: "how_to_merge_link", title: "How To Merge", "data-toggle" => "modal"
 
   .automerge_widget.unchecked
-    .bs-callout.bs-callout-warning
+    %p
       %strong
         %i.icon-spinner.icon-spin
         Checking for ability to automatically merge…
 
   .automerge_widget.already_cannot_be_merged.hide
-    .bs-callout.bs-callout-info
+    %p
       %strong This merge request can not be merged. Try to reload the page.
 
   .merge-in-progress.hide
-    .bs-callout.bs-callout-success
+    %p
       %i.icon-spinner.icon-spin
        
       Merge is in progress. Please wait. Page will be automatically reloaded.  

app/views/projects/merge_requests/show/_mr_box.html.haml

@@ -23,23 +23,3 @@
   .context
     %cite.cgray
       = render partial: 'projects/merge_requests/show/context', locals: { merge_request: @merge_request }
-
-- if @merge_request.closed?
-  .alert.alert-info
-    %span
-      %i.icon-remove
-      Closed by #{link_to_member(@project, @merge_request.closed_event.author)}
-      #{time_ago_with_tooltip(@merge_request.closed_event.created_at)}
-- if @merge_request.merged?
-  .alert.alert-info
-    %span
-      %i.icon-ok
-      Merged by #{link_to_member(@project, @merge_request.merge_event.author)}
-      #{time_ago_with_tooltip(@merge_request.merge_event.created_at)}
-- if !@closes_issues.empty? && @merge_request.open?
-  .alert.alert-info.alert-info
-    %span
-      %i.icon-ok
-      Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}
-      = succeed '.' do
-        != gfm(@closes_issues.map { |i| "##{i.iid}" }.to_sentence)

app/views/projects/merge_requests/show/_mr_ci.html.haml

 - if @commits.any?
   .ci_widget.ci-success{style: "display:none"}
-    .alert.alert-success
     %i.icon-ok
     %strong CI build passed
     for #{@merge_request.last_commit_short_sha}.
@@ -8,7 +7,6 @@
 
 
   .ci_widget.ci-failed{style: "display:none"}
-    .alert.alert-danger
     %i.icon-remove
     %strong CI build failed
     for #{@merge_request.last_commit_short_sha}.
@@ -16,20 +14,16 @@
 
   - [:running, :pending].each do |status|
     .ci_widget{class: "ci-#{status}", style: "display:none"}
-      .alert.alert-warning
       %i.icon-time
       %strong CI build #{status}
       for #{@merge_request.last_commit_short_sha}.
       = link_to "Build page", ci_build_details_path(@merge_request)
 
   .ci_widget
-    .alert.alert-warning
     %strong
       %i.icon-spinner
       Checking for CI status for #{@merge_request.last_commit_short_sha}
 
   .ci_widget.ci-error{style: "display:none"}
-    .alert.alert-danger
     %i.icon-remove
     %strong Cannot connect to CI server. Please check your setting
-

app/views/projects/merge_requests/show/_no_accept.html.haml

-.alert.alert-danger
-  %p
+%h4
+  Can't be merged
+%p
   This merge request can not be accepted because branch
   - unless @merge_request.source_branch_exists?
     %span.label.label-inverse= @merge_request.source_branch
@@ -9,4 +10,5 @@
     %span.label.label-inverse= @merge_request.target_branch
     does not exist in
     %span.label.label-info= @merge_request.target_project_path
+  %br
   %strong Please close this merge request or change branches with existing one

app/views/projects/merge_requests/show/_remove_source_branch.html.haml

 - if @source_branch.blank?
-  .bs-callout.bs-callout-info
   Source branch has been removed
 
 - elsif @allowed_to_remove_source_branch && @merge_request.merged?
   .remove_source_branch_widget
-    .alert.alert-info
-      = link_to project_branch_path(@merge_request.source_project, @source_branch), remote: true, method: :delete, class: "btn btn-primary remove_source_branch" do
+    %p Changes merged into #{@merge_request.target_branch}. You can remove source branch now
+    = link_to project_branch_path(@merge_request.source_project, @source_branch), remote: true, method: :delete, class: "btn btn-primary btn-small remove_source_branch" do
       %i.icon-remove
       Remove Source Branch
 
   .remove_source_branch_widget.failed.hide
-    .alert.alert-error Failed to remove source branch '#{@merge_request.source_branch}'
+    Failed to remove source branch '#{@merge_request.source_branch}'
 
   .remove_source_branch_in_progress.hide
-    .bs-callout.bs-callout-info
     %i.icon-refresh.icon-spin
      
     Removing source branch '#{@merge_request.source_branch}'. Please wait. Page will be automatically reloaded.  

app/views/projects/merge_requests/show/_state_widget.html.haml

+.panel.mr-state-widget.panel-default
+  - if @merge_request.source_project.gitlab_ci? && @commits.any?
+    .panel-heading
+      = render "projects/merge_requests/show/mr_ci"
+  .panel-body
+    - if @merge_request.open?
+      - if @merge_request.source_branch_exists? && @merge_request.target_branch_exists?
+        = render "projects/merge_requests/show/mr_accept"
+      - else
+        = render "projects/merge_requests/show/no_accept"
+
+    - if @merge_request.closed?
+      %h4
+        Closed by #{link_to_member(@project, @merge_request.closed_event.author, avatar: false)}
+        #{time_ago_with_tooltip(@merge_request.closed_event.created_at)}
+      %p Changes was not merged into target branch
+
+    - if @merge_request.merged?
+      %h4
+        Merged by #{link_to_member(@project, @merge_request.merge_event.author, avatar: false)}
+        #{time_ago_with_tooltip(@merge_request.merge_event.created_at)}
+      = render "projects/merge_requests/show/remove_source_branch"
+
+    - if !@closes_issues.empty? && @merge_request.open?
+      .alert.alert-info.alert-info
+        %span
+          %i.icon-ok
+          Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}
+          = succeed '.' do
+            != gfm(@closes_issues.map { |i| "##{i.iid}" }.to_sentence)
+
+    - unless @commits.any?
+      %h4 Nothing to merge
+      %p
+        Nothing to merge from
+        %span.label-branch #{@merge_request.source_branch}
+        to
+        %span.label-branch #{@merge_request.target_branch}
+        %br
+        Try to use different branches or push new code.