Merge branch 'ui/milestones' into 'master'

UI: Use new style for milestone detail page

Depends on !1953

See the commits for more details, the messages mostly speak for themselves.

Before:

![Screen_Shot_2015-12-02_at_17.47.03](/uploads/62441f50963e0c5d6d04b065573c05f0/Screen_Shot_2015-12-02_at_17.47.03.png)

After:

![Screen_Shot_2015-12-02_at_17.47.22](/uploads/ab29ac0c1819415cc647be173f8c92bd/Screen_Shot_2015-12-02_at_17.47.22.png)


See merge request !1966

5 files changed, 149 insertions, 91 deletions

diff --git a/app/views/dashboard/milestones/show.html.haml b/app/views/dashboard/milestones/show.html.haml
index 83077a398bd..3536bbeaf4b 100644
--- a/app/views/dashboard/milestones/show.html.haml
+++ b/app/views/dashboard/milestones/show.html.haml
@@ -1,19 +1,23 @@
 - page_title @milestone.title, "Milestones"
-%h4.page-title
-  .issue-box{ class: "issue-box-#{@milestone.closed? ? 'closed' : 'open'}" }
-    - if @milestone.closed?
-      Closed
-    - else
-      Open
-  Milestone #{@milestone.title}
+- header_title "Milestones", dashboard_milestones_path
+
+.issuable-details
+  .page-title
+    .issue-box{ class: "issue-box-#{@milestone.closed? ? 'closed' : 'open'}" }
+      - if @milestone.closed?
+        Closed
+      - else
+        Open
+    Milestone #{@milestone.title}
+
+  .gray-content-block.middle-block
+    %h2.issue-title
+      = gfm escape_once(@milestone.title)
 
-%hr
 - if @milestone.complete? && @milestone.active?
-  .alert.alert-success
+  .alert.alert-success.prepend-top-default
     %span All issues for this milestone are closed. You may close the milestone now.
 
-.description
-
 .table-holder
   %table.table
     %thead
@@ -44,7 +48,7 @@
     #{@milestone.open_items_count} open
   = milestone_progress_bar(@milestone)
 
-%ul.nav.nav-tabs
+%ul.center-top-menu.no-top.no-bottom
   %li.active
     = link_to '#tab-issues', 'data-toggle' => 'tab' do
       Issues
@@ -58,25 +62,39 @@
       Participants
       %span.badge= @milestone.participants.count
 
-  .pull-right
-    = link_to 'Browse Issues', issues_dashboard_path(milestone_title: @milestone.title), class: "btn  edit-milestone-link btn-grouped"
-
 .tab-content
   .tab-pane.active#tab-issues
-    .row
+    .gray-content-block.middle-block
+      .pull-right
+        = link_to 'Browse Issues', issues_dashboard_path(milestone_title: @milestone.title), class: "btn btn-grouped"
+
+      .oneline
+        All issues in this milestone
+
+    .row.prepend-top-default
       .col-md-6
         = render 'issues', title: "Open", issues: @milestone.opened_issues
       .col-md-6
         = render 'issues', title: "Closed", issues: @milestone.closed_issues
 
   .tab-pane#tab-merge-requests
-    .row
+    .gray-content-block.middle-block
+      .pull-right
+        = link_to 'Browse Merge Requests', merge_requests_dashboard_path(milestone_title: @milestone.title), class: "btn btn-grouped"
+
+      .oneline
+        All merge requests in this milestone
+
+    .row.prepend-top-default
       .col-md-6
         = render 'merge_requests', title: "Open", merge_requests: @milestone.opened_merge_requests
       .col-md-6
         = render 'merge_requests', title: "Closed", merge_requests: @milestone.closed_merge_requests
 
   .tab-pane#tab-participants
+    .gray-content-block.middle-block
+      .oneline
+        All participants to this milestone
     %ul.bordered-list
       - @milestone.participants.each do |user|
         %li
diff --git a/app/views/groups/milestones/show.html.haml b/app/views/groups/milestones/show.html.haml
index d161259e4aa..3c1d8815013 100644
--- a/app/views/groups/milestones/show.html.haml
+++ b/app/views/groups/milestones/show.html.haml
@@ -1,27 +1,29 @@
 - page_title @milestone.title, "Milestones"
 = render "header_title"
 
-%h4.page-title
-  .issue-box{ class: "issue-box-#{@milestone.closed? ? 'closed' : 'open'}" }
-    - if @milestone.closed?
-      Closed
-    - else
-      Open
-  Milestone #{@milestone.title}
-  .pull-right
-    - if can?(current_user, :admin_milestones, @group)
-      - if @milestone.active?
-        = link_to 'Close Milestone', group_milestone_path(@group, @milestone.safe_title, title: @milestone.title, milestone: {state_event: :close }), method: :put, class: "btn btn-sm btn-close"
+.issuable-details
+  .page-title
+    .issue-box{ class: "issue-box-#{@milestone.closed? ? 'closed' : 'open'}" }
+      - if @milestone.closed?
+        Closed
       - else
-        = link_to 'Reopen Milestone', group_milestone_path(@group, @milestone.safe_title, title: @milestone.title, milestone: {state_event: :activate }), method: :put, class: "btn btn-sm btn-grouped btn-reopen"
+        Open
+    Milestone #{@milestone.title}
+    .pull-right
+      - if can?(current_user, :admin_milestones, @group)
+        - if @milestone.active?
+          = link_to 'Close Milestone', group_milestone_path(@group, @milestone.safe_title, title: @milestone.title, milestone: {state_event: :close }), method: :put, class: "btn btn-grouped btn-close"
+        - else
+          = link_to 'Reopen Milestone', group_milestone_path(@group, @milestone.safe_title, title: @milestone.title, milestone: {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen"
+
+  .gray-content-block.middle-block
+    %h2.issue-title
+      = gfm escape_once(@milestone.title)
 
-%hr
 - if @milestone.complete? && @milestone.active?
-  .alert.alert-success
+  .alert.alert-success.prepend-top-default
     %span All issues for this milestone are closed. You may close the milestone now.
 
-.description
-
 .table-holder
   %table.table
     %thead
@@ -52,7 +54,7 @@
     #{@milestone.open_items_count} open
   = milestone_progress_bar(@milestone)
 
-%ul.nav.nav-tabs
+%ul.center-top-menu.no-top.no-bottom
   %li.active
     = link_to '#tab-issues', 'data-toggle' => 'tab' do
       Issues
@@ -66,25 +68,40 @@
       Participants
       %span.badge= @milestone.participants.count
 
-  .pull-right
-    = link_to 'Browse Issues', issues_group_path(@group, milestone_title: @milestone.title), class: "btn  edit-milestone-link btn-grouped"
-
 .tab-content
   .tab-pane.active#tab-issues
-    .row
+    .gray-content-block.middle-block
+      .pull-right
+        = link_to 'Browse Issues', issues_group_path(@group, milestone_title: @milestone.title), class: "btn btn-grouped"
+
+      .oneline
+        All issues in this milestone
+
+    .row.prepend-top-default
       .col-md-6
         = render 'issues', title: "Open", issues: @milestone.opened_issues
       .col-md-6
         = render 'issues', title: "Closed", issues: @milestone.closed_issues
 
   .tab-pane#tab-merge-requests
-    .row
+    .gray-content-block.middle-block
+      .pull-right
+        = link_to 'Browse Merge Requests', merge_requests_group_path(@group, milestone_title: @milestone.title), class: "btn btn-grouped"
+
+      .oneline
+        All merge requests in this milestone
+
+    .row.prepend-top-default
       .col-md-6
         = render 'merge_requests', title: "Open", merge_requests: @milestone.opened_merge_requests
       .col-md-6
         = render 'merge_requests', title: "Closed", merge_requests: @milestone.closed_merge_requests
 
   .tab-pane#tab-participants
+    .gray-content-block.middle-block
+      .oneline
+        All participants to this milestone
+
     %ul.bordered-list
       - @milestone.participants.each do |user|
         %li
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index eab5333ca29..c3bda794c65 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -1,46 +1,50 @@
 - page_title @milestone.title, "Milestones"
 = render "header_title"
 
-%h4.page-title
-  .issue-box{ class: issue_box_class(@milestone) }
-    - if @milestone.closed?
-      Closed
-    - elsif @milestone.expired?
-      Expired
-    - else
-      Open
-  Milestone ##{@milestone.iid}
-  %small.creator
-    = @milestone.expires_at
-  .pull-right
-    - if can?(current_user, :admin_milestone, @project)
-      = link_to edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-grouped" do
-        %i.fa.fa-pencil-square-o
-        Edit
-      - if @milestone.active?
-        = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-grouped"
+.issuable-details
+  .page-title
+    .issue-box{ class: issue_box_class(@milestone) }
+      - if @milestone.closed?
+        Closed
+      - elsif @milestone.expired?
+        Expired
       - else
-        = link_to 'Reopen Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-grouped"
-      = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-remove" do
-        %i.fa.fa-trash-o
-        Delete
+        Open
+    Milestone ##{@milestone.iid}
+    - if @milestone.expires_at
+      %span.creator
+        ·
+        = @milestone.expires_at
+    .pull-right
+      - if can?(current_user, :admin_milestone, @project)
+        = link_to edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-grouped" do
+          %i.fa.fa-pencil-square-o
+          Edit
+
+        - if @milestone.active?
+          = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-grouped"
+        - else
+          = link_to 'Reopen Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-grouped"
+
+        = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-remove" do
+          %i.fa.fa-trash-o
+          Delete
+
+  .gray-content-block.middle-block
+    %h2.issue-title
+      = gfm escape_once(@milestone.title)
+    %div
+      - if @milestone.description.present?
+        .description
+          .wiki
+            = preserve do
+              = markdown @milestone.description
 
-%hr
 - if @milestone.issues.any? && @milestone.can_be_closed?
-  .alert.alert-success
+  .alert.alert-success.prepend-top-default
     %span All issues for this milestone are closed. You may close milestone now.
 
-%h3.issue-title
-  = gfm escape_once(@milestone.title)
-%div
-  - if @milestone.description.present?
-    .description
-      .wiki
-        = preserve do
-          = markdown @milestone.description
-
-%hr
-.context
+.context.prepend-top-default
   %p.lead
     Progress:
     #{@milestone.closed_items_count} closed
@@ -51,8 +55,7 @@
     %span.pull-right= @milestone.expires_at
   = milestone_progress_bar(@milestone)
 
-
-%ul.nav.nav-tabs
+%ul.center-top-menu.no-top.no-bottom
   %li.active
     = link_to '#tab-issues', 'data-toggle' => 'tab' do
       Issues
@@ -66,17 +69,21 @@
       Participants
       %span.badge= @users.count
 
-  .pull-right
-    - if can?(current_user, :create_issue, @project)
-      = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { milestone_id: @milestone.id }), class: "btn  btn-grouped", title: "New Issue" do
-        %i.fa.fa-plus
-        New Issue
-    - if can?(current_user, :read_issue, @project)
-      = link_to 'Browse Issues', namespace_project_issues_path(@milestone.project.namespace, @milestone.project, milestone_title: @milestone.title), class: "btn  edit-milestone-link btn-grouped"
-
 .tab-content
   .tab-pane.active#tab-issues
-    .row
+    .gray-content-block.middle-block
+      .pull-right
+        - if can?(current_user, :create_issue, @project)
+          = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { milestone_id: @milestone.id }), class: "btn  btn-grouped", title: "New Issue" do
+            %i.fa.fa-plus
+            New Issue
+        - if can?(current_user, :read_issue, @project)
+          = link_to 'Browse Issues', namespace_project_issues_path(@milestone.project.namespace, @milestone.project, milestone_title: @milestone.title), class: "btn btn-grouped"
+
+      .oneline
+        All issues in this milestone
+
+    .row.prepend-top-default
       .col-md-4
         = render('issues', title: 'Unstarted Issues (open and unassigned)', issues: @issues.opened.unassigned, id: 'unassigned')
       .col-md-4
@@ -85,7 +92,15 @@
         = render('issues', title: 'Completed Issues (closed)', issues: @issues.closed, id: 'closed')
 
   .tab-pane#tab-merge-requests
-    .row
+    .gray-content-block.middle-block
+      .pull-right
+        - if can?(current_user, :read_merge_request, @project)
+          = link_to 'Browse Merge Requests', namespace_project_merge_requests_path(@milestone.project.namespace, @milestone.project, milestone_title: @milestone.title), class: "btn btn-grouped"
+
+      .oneline
+        All merge requests in this milestone
+
+    .row.prepend-top-default
       .col-md-3
         = render('merge_requests', title: 'Work in progress (open and unassigned)', merge_requests: @merge_requests.opened.unassigned, id: 'unassigned')
       .col-md-3
@@ -100,6 +115,10 @@
               = render 'merge_request', merge_request: merge_request
 
   .tab-pane#tab-participants
+    .gray-content-block.middle-block
+      .oneline
+        All participants to this milestone
+
     %ul.bordered-list
       - @users.each do |user|
         %li
diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml
index 0dbb6a04393..4b4c9e9eabe 100644
--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
@@ -3,8 +3,10 @@
     .panel.panel-default.panel-small
       - project = group[0]
       .panel-heading
-        = link_to_project project
-        = link_to 'show all', namespace_project_issues_path(project.namespace, project), class: 'pull-right'
+        = link_to project.name_with_namespace, namespace_project_issues_path(project.namespace, project)
+        - if can?(current_user, :create_issue, project)
+          .pull-right
+            = link_to 'New issue', new_namespace_project_issue_path(project.namespace, project)
 
       %ul.well-list.issues-list
         - group[1].each do |issue|
@@ -12,4 +14,3 @@
   = paginate @issues, theme: "gitlab"
 - else
   .nothing-here-block No issues to show
-
diff --git a/app/views/shared/_merge_requests.html.haml b/app/views/shared/_merge_requests.html.haml
index c02c5af008a..be17a511b26 100644
--- a/app/views/shared/_merge_requests.html.haml
+++ b/app/views/shared/_merge_requests.html.haml
@@ -3,8 +3,11 @@
     .panel.panel-default.panel-small
       - project = group[0]
       .panel-heading
-        = link_to_project project
-        = link_to 'show all', namespace_project_merge_requests_path(project.namespace, project), class: 'pull-right'
+        = link_to project.name_with_namespace, namespace_project_merge_requests_path(project.namespace, project)
+        - if can?(current_user, :create_merge_request, project)
+          .pull-right
+            = link_to 'New merge request', new_namespace_project_merge_request_path(project.namespace, project)
+
       %ul.well-list.mr-list
         - group[1].each do |merge_request|
           = render 'projects/merge_requests/merge_request', merge_request: merge_request