Improve UI for Issue/MR

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

app/assets/stylesheets/generic/common.scss

@@ -88,11 +88,15 @@ pre.well-pre {
 /** Big Labels **/
 .state-label {
   font-size: 14px;
-  padding: 6px 25px;
+  padding: 9px 25px;
   text-align: center;
-  @include border-radius(4px);
   text-shadow: none;
-  margin-left: 10px;
+  margin-right: 20px;
+
+  &.state-label-blue {
+    background: #31708f;
+    color: #FFF;
+  }
 
   &.state-label-green {
     background: #4A4;

app/assets/stylesheets/generic/issue_box.scss

@@ -17,11 +17,10 @@
     margin-bottom: 0;
   }
 
-  .creator {
-    padding: 8px 25px;
-    background: #eee;
+  .state {
+    height: 34px;
     border-bottom: 1px solid #DDD;
-    color: #777;
+    line-height: 32px;
   }
 
   .title {

app/helpers/issues_helper.rb

@@ -84,4 +84,12 @@ module IssuesHelper
   def milestone_options object
     options_from_collection_for_select(@project.milestones.active, 'id', 'title', object.milestone_id)
   end
+
+  def issue_alert_class(issue)
+    if issue.closed?
+      'alert-danger'
+    else
+      'alert-success'
+    end
+  end
 end

app/helpers/merge_requests_helper.rb

@@ -41,4 +41,14 @@ module MergeRequestsHelper
       "Branches: #{@merge_request.source_branch} #{separator} #{@merge_request.target_branch}"
     end
   end
+
+  def merge_request_alert_class(merge_request)
+    if merge_request.merged?
+      'alert-info'
+    elsif merge_request.closed?
+      'alert-danger'
+    else
+      'alert-success'
+    end
+  end
 end

app/views/projects/issues/show.html.haml

@@ -1,11 +1,6 @@
 %h3.page-title
   Issue ##{@issue.iid}
 
-  - if @issue.closed?
-    %span.state-label.state-label-red Closed
-  - else
-    %span.state-label.state-label-green Open
-
   %span.pull-right
     - if can?(current_user, :write_issue, @project)
       = link_to new_project_issue_path(@project), class: "btn grouped", title: "New Issue", id: "new_issue_link" do
@@ -35,8 +30,14 @@
         = @issue.milestone.title
 
 .issue-box
-  .creator
-    Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}
+  .state{ class: issue_alert_class(@issue) }
+    - if @issue.closed?
+      %span.state-label.state-label-red Closed
+    - else
+      %span.state-label.state-label-green Open
+
+    %span.creator
+      Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}
 
   %h4.title
     = gfm escape_once(@issue.title)

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

@@ -1,6 +1,16 @@
 .issue-box
-  .creator
-    Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
+  .state{ class: merge_request_alert_class(@merge_request) }
+    - if @merge_request.merged?
+      %span.state-label.state-label-blue
+        Merged
+    - elsif @merge_request.closed?
+      %span.state-label.state-label-red
+        Closed
+    - else
+      %span.state-label.state-label-green
+        Open
+    %span.creator
+      Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
 
   %h4.title
     = gfm escape_once(@merge_request.title)
@@ -16,13 +26,13 @@
           = markdown @merge_request.description
 
   - if @merge_request.closed?
-    .description.alert-danger
+    .description
       %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?
-    .description.alert-success
+    .description
       %span
         %i.icon-ok
         Merged by #{link_to_member(@project, @merge_request.merge_event.author)}

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

@@ -1,19 +1,6 @@
 %h3.page-title
   = "Merge Request ##{@merge_request.iid}"
 
-  - if @merge_request.merged?
-    %span.state-label.state-label-green
-      %i.icon-ok
-      Merged
-  - elsif @merge_request.closed?
-    %span.state-label.state-label-red
-      Closed
-  - else
-    %span.state-label.state-label-green
-      Open
-
-
-
   %span.pull-right
     - if can?(current_user, :modify_merge_request, @merge_request)
       - if @merge_request.opened?