Merge branch 'fix-milestone-snippet-header' into 'master'

Fix headers of milestone and snippet show pages

Fix layout, and move "Edit" button to very right just like issue/MR.

Before:

![Screen_Shot_2015-12-15_at_17.33.20](/uploads/dbbeb6868b80e21894159126a0feca6a/Screen_Shot_2015-12-15_at_17.33.20.png)

![Screen_Shot_2015-12-15_at_17.33.28](/uploads/53d10b42adc34e48b063889120e9a746/Screen_Shot_2015-12-15_at_17.33.28.png)

After:

![Screen_Shot_2015-12-15_at_17.34.25](/uploads/b0d0ea3f6a7b61d51b474419207f7a02/Screen_Shot_2015-12-15_at_17.34.25.png)

![Screen_Shot_2015-12-15_at_17.35.55](/uploads/65b922f5249655d3733740690577c9d7/Screen_Shot_2015-12-15_at_17.35.55.png)

cc @skyruler 

cc @rspeicher 8.3 please!

See merge request !2104

app/assets/javascripts/issue.js.coffee

@@ -10,12 +10,12 @@ class @Issue
       @initTaskList()
 
   initTaskList: ->
-    $('.issue-details .js-task-list-container').taskList('enable')
-    $(document).on 'tasklist:changed', '.issue-details .js-task-list-container', @updateTaskList
+    $('.detail-page-description .js-task-list-container').taskList('enable')
+    $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
 
   disableTaskList: ->
-    $('.issue-details .js-task-list-container').taskList('disable')
-    $(document).off 'tasklist:changed', '.issue-details .js-task-list-container'
+    $('.detail-page-description .js-task-list-container').taskList('disable')
+    $(document).off 'tasklist:changed', '.detail-page-description .js-task-list-container'
 
   # TODO (rspeicher): Make the issue description inline-editable like a note so
   # that we can re-use its form here

app/assets/javascripts/merge_request.js.coffee

@@ -40,12 +40,12 @@ class @MergeRequest
     this.$('.all-commits').removeClass 'hide'
 
   initTaskList: ->
-    $('.merge-request-details .js-task-list-container').taskList('enable')
-    $(document).on 'tasklist:changed', '.merge-request-details .js-task-list-container', @updateTaskList
+    $('.detail-page-description .js-task-list-container').taskList('enable')
+    $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
 
   disableTaskList: ->
-    $('.merge-request-details .js-task-list-container').taskList('disable')
-    $(document).off 'tasklist:changed', '.merge-request-details .js-task-list-container'
+    $('.detail-page-description .js-task-list-container').taskList('disable')
+    $(document).off 'tasklist:changed', '.detail-page-description .js-task-list-container'
 
   # TODO (rspeicher): Make the merge request description inline-editable like a
   # note so that we can re-use its form here

app/assets/stylesheets/framework/issue_box.scss

@@ -4,7 +4,7 @@
  *
  */
 
-.issue-box {
+.status-box {
   @include border-radius(2px);
 
   display: block;
@@ -14,22 +14,22 @@
   margin-right: 10px;
   font-size: $gl-font-size;
 
-  &.issue-box-closed {
+  &.status-box-closed {
     background-color: $gl-danger;
     color: #FFF;
   }
 
-  &.issue-box-merged {
+  &.status-box-merged {
     background-color: $gl-primary;
     color: #FFF;
   }
 
-  &.issue-box-open {
+  &.status-box-open {
     background-color: #019875;
     color: #FFF;
   }
 
-  &.issue-box-expired {
+  &.status-box-expired {
     background: #cea61b;
     color: #FFF;
   }

app/assets/stylesheets/framework/markdown_area.scss

@@ -87,7 +87,7 @@
 
 .new_note,
 .edit_note,
-.issuable-description,
+.detail-page-description,
 .milestone-description,
 .wiki-content,
 .merge-request-form {

app/assets/stylesheets/pages/detail_page.scss

+.detail-page-header {
+  margin: -$gl-padding;
+  padding: 7px $gl-padding;
+  margin-bottom: 0px;
+  border-bottom: 1px solid $border-color;
+  color: #5c5d5e;
+  font-size: 16px;
+  line-height: 42px;
+
+  .author {
+    color: #5c5d5e;
+  }
+
+  .identifier {
+    color: #5c5d5e;
+  }
+}
+
+.detail-page-description {
+  .title {
+    margin: 0;
+    font-size: 23px;
+    color: #313236;
+  }
+
+  .description {
+    margin-top: 6px;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

app/assets/stylesheets/pages/issuable.scss

@@ -36,20 +36,6 @@
 }
 
 .issuable-details {
-  .issue-title {
-    margin: 0;
-    font-size: 23px;
-    color: #313236;
-  }
-
-  .description {
-    margin-top: 6px;
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
   section {
     border-right: 1px solid $border-white-light;
 
@@ -136,21 +122,3 @@
     margin-right: 2px;
   }
 }
-
-.issuable-title {
-  margin: -$gl-padding;
-  padding: 7px $gl-padding;
-  margin-bottom: 0px;
-  border-bottom: 1px solid $border-color;
-  color: #5c5d5e;
-  font-size: 16px;
-  line-height: 42px;
-
-  .author {
-    color: #5c5d5e;
-  }
-
-  .issuable-id {
-    color: #5c5d5e;
-  }
-}

app/helpers/issues_helper.rb

@@ -57,15 +57,15 @@ module IssuesHelper
     options_from_collection_for_select(milestones, 'id', 'title', object.milestone_id)
   end
 
-  def issue_box_class(item)
+  def status_box_class(item)
     if item.respond_to?(:expired?) && item.expired?
-      'issue-box-expired'
+      'status-box-expired'
     elsif item.respond_to?(:merged?) && item.merged?
-      'issue-box-merged'
+      'status-box-merged'
     elsif item.closed?
-      'issue-box-closed'
+      'status-box-closed'
     else
-      'issue-box-open'
+      'status-box-open'
     end
   end
 

app/views/dashboard/milestones/show.html.haml

 - page_title @milestone.title, "Milestones"
 - 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
+.detail-page-header
+  .status-box{ class: "status-box-#{@milestone.closed? ? 'closed' : 'open'}" }
+    - if @milestone.closed?
+      Closed
+    - else
+      Open
+  %span.identifier
     Milestone #{@milestone.title}
 
-  .gray-content-block.middle-block
-    %h2.issue-title
-      = markdown escape_once(@milestone.title), pipeline: :single_line
+.detail-page-description.gray-content-block.second-block
+  %h2.title
+    = markdown escape_once(@milestone.title), pipeline: :single_line
 
 - if @milestone.complete? && @milestone.active?
   .alert.alert-success.prepend-top-default

app/views/groups/milestones/show.html.haml

 - page_title @milestone.title, "Milestones"
 = render "header_title"
 
-.issuable-details
-  .page-title
-    .issue-box{ class: "issue-box-#{@milestone.closed? ? 'closed' : 'open'}" }
-      - if @milestone.closed?
-        Closed
-      - else
-        Open
+.detail-page-header
+  .status-box{ class: "status-box-#{@milestone.closed? ? 'closed' : 'open'}" }
+    - if @milestone.closed?
+      Closed
+    - else
+      Open
+  %span.identifier
     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"
+  .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
-      = markdown escape_once(@milestone.title), pipeline: :single_line
+.detail-page-description.gray-content-block.second-block
+  %h2.title
+    = markdown escape_once(@milestone.title), pipeline: :single_line
 
 - if @milestone.complete? && @milestone.active?
   .alert.alert-success.prepend-top-default

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

@@ -2,44 +2,45 @@
 = render "header_title"
 
 .issue
-  .issue-details.issuable-details
-    .issuable-title
-      .issue-box{ class: issue_box_class(@issue) }
+  .detail-page-header
+    .status-box{ class: status_box_class(@issue) }
+      - if @issue.closed?
+        Closed
+      - else
+        Open
+    %span.identifier
+      Issue ##{@issue.iid}
+    %span.creator
+      ·
+      opened by #{link_to_member(@project, @issue.author, size: 24)}
+      ·
+      = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
+      - if @issue.updated_at != @issue.created_at
+        %span
+          ·
+          = icon('edit', title: 'edited')
+          = time_ago_with_tooltip(@issue.updated_at, placement: 'bottom', html_class: 'issue_edited_ago')
+
+    .pull-right
+      - if can?(current_user, :create_issue, @project)
+        = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'btn btn-grouped new-issue-link', title: 'New Issue', id: 'new_issue_link' do
+          = icon('plus')
+          New Issue
+      - if can?(current_user, :update_issue, @issue)
         - if @issue.closed?
-          Closed
+          = link_to 'Reopen', issue_path(@issue, issue: {state_event: :reopen}, status_only: true), method: :put, class: 'btn btn-grouped btn-reopen'
         - else
-          Open
-      %span.issuable-id Issue ##{@issue.iid}
-      %span.creator
-        ·
-        opened by #{link_to_member(@project, @issue.author, size: 24)}
-        ·
-        = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
-        - if @issue.updated_at != @issue.created_at
-          %span
-            ·
-            = icon('edit', title: 'edited')
-            = time_ago_with_tooltip(@issue.updated_at, placement: 'bottom', html_class: 'issue_edited_ago')
+          = link_to 'Close', issue_path(@issue, issue: {state_event: :close}, status_only: true), method: :put, class: 'btn btn-grouped btn-close', title: 'Close Issue'
 
-      .pull-right
-        - if can?(current_user, :create_issue, @project)
-          = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'btn btn-grouped new-issue-link', title: 'New Issue', id: 'new_issue_link' do
-            = icon('plus')
-            New Issue
-        - if can?(current_user, :update_issue, @issue)
-          - if @issue.closed?
-            = link_to 'Reopen', issue_path(@issue, issue: {state_event: :reopen}, status_only: true), method: :put, class: 'btn btn-grouped btn-reopen'
-          - else
-            = link_to 'Close', issue_path(@issue, issue: {state_event: :close}, status_only: true), method: :put, class: 'btn btn-grouped btn-close', title: 'Close Issue'
-
-          = link_to edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'btn btn-grouped issuable-edit' do
-            = icon('pencil-square-o')
-            Edit
+        = link_to edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'btn btn-grouped issuable-edit' do
+          = icon('pencil-square-o')
+          Edit
 
+  .issue-details.issuable-details
     .row
       %section.col-md-9
-        .gray-content-block
-          %h2.issue-title
+        .detail-page-description.gray-content-block
+          %h2.title
             = markdown escape_once(@issue.title), pipeline: :single_line
           %div
             - if @issue.description.present?

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

@@ -5,8 +5,9 @@
   - fluid_layout true
 
 .merge-request{'data-url' => merge_request_path(@merge_request)}
+  = render "projects/merge_requests/show/mr_title"
+  
   .merge-request-details.issuable-details
-    = render "projects/merge_requests/show/mr_title"
     .row
       %section.col-md-9
         = render "projects/merge_requests/show/mr_box"

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

-.gray-content-block.middle-block
-  %h2.issue-title
+.detail-page-description.gray-content-block.middle-block
+  %h2.title
     = markdown escape_once(@merge_request.title), pipeline: :single_line
 
   %div

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

-.issuable-title
-  .issue-box{ class: issue_box_class(@merge_request) }
+.detail-page-header
+  .status-box{ class: status_box_class(@merge_request) }
     = @merge_request.state_human_name
-  %span.issuable-id Merge Request ##{@merge_request.iid}
+  %span.identifier
+    Merge Request ##{@merge_request.iid}
   %span.creator
     ·
     opened by #{link_to_member(@project, @merge_request.author, size: 24)}

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

 - page_title @milestone.title, "Milestones"
 = render "header_title"
 
-.issuable-details
-  .page-title
-    .issue-box{ class: issue_box_class(@milestone) }
-      - if @milestone.closed?
-        Closed
-      - elsif @milestone.expired?
-        Expired
-      - else
-        Open
+.detail-page-header
+  .status-box{ class: status_box_class(@milestone) }
+    - if @milestone.closed?
+      Closed
+    - elsif @milestone.expired?
+      Expired
+    - else
+      Open
+  %span.identifier
     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.expires_at
+    %span.creator
+      ·
+      = @milestone.expires_at
+  .pull-right
+    - if can?(current_user, :admin_milestone, @project)
+      - 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"
 
-        - 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
 
-        = 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
+      = link_to edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-grouped" do
+        %i.fa.fa-pencil-square-o
+        Edit
 
-  .gray-content-block.middle-block
-    %h2.issue-title
-      = markdown escape_once(@milestone.title), pipeline: :single_line
-    %div
-      - if @milestone.description.present?
-        .description
-          .wiki
-            = preserve do
-              = markdown @milestone.description
+.detail-page-description.gray-content-block.second-block
+  %h2.title
+    = markdown escape_once(@milestone.title), pipeline: :single_line
+  %div
+    - if @milestone.description.present?
+      .description
+        .wiki
+          = preserve do
+            = markdown @milestone.description
 
 - if @milestone.issues.any? && @milestone.can_be_closed?
   .alert.alert-success.prepend-top-default

app/views/shared/issuable/_form.html.haml

@@ -19,7 +19,7 @@
         - else
           Start the title with <code>[WIP]</code> or <code>WIP:</code> to prevent a
           <strong>Work In Progress</strong> merge request from being merged before it's ready.
-.form-group.issuable-description
+.form-group.detail-page-description
   = f.label :description, 'Description', class: 'control-label'
   .col-sm-10
 

app/views/shared/snippets/_header.html.haml

-.issuable-details
-  .page-title
-    .snippet-box.has_tooltip{class: visibility_level_color(@snippet.visibility_level), title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: 'body' }}
-      = visibility_level_icon(@snippet.visibility_level, fw: false)
-      = visibility_level_label(@snippet.visibility_level)
+.detail-page-header
+  .snippet-box.has_tooltip{class: visibility_level_color(@snippet.visibility_level), title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: 'body' }}
+    = visibility_level_icon(@snippet.visibility_level, fw: false)
+    = visibility_level_label(@snippet.visibility_level)
+  %span.identifier
     Snippet ##{@snippet.id}
-    %span.creator
-      · created by #{link_to_member(@project, @snippet.author, size: 24)}
-      ·
-      = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
-      - if @snippet.updated_at != @snippet.created_at
-        %span
-          ·
-          = icon('edit', title: 'edited')
-          = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
+  %span.creator
+    · created by #{link_to_member(@project, @snippet.author, size: 24)}
+    ·
+    = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
+    - if @snippet.updated_at != @snippet.created_at
+      %span
+        ·
+        = icon('edit', title: 'edited')
+        = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
 
-    .pull-right
-      - if @snippet.project_id?
-        = render "projects/snippets/actions"
-      - else
-        = render "snippets/actions"
+  .pull-right
+    - if @snippet.project_id?
+      = render "projects/snippets/actions"
+    - else
+      = render "snippets/actions"
 
-  .gray-content-block.middle-block
-    %h2.issue-title
-      = markdown escape_once(@snippet.title), pipeline: :single_line
+.detail-page-description.gray-content-block.second-block
+  %h2.title
+    = markdown escape_once(@snippet.title), pipeline: :single_line

features/steps/project/merge_requests.rb

@@ -273,7 +273,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I should see merged request' do
-    page.within '.issue-box' do
+    page.within '.status-box' do
       expect(page).to have_content "Merged"
     end
   end
@@ -283,7 +283,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I should see reopened merge request "Bug NS-04"' do
-    page.within '.issue-box' do
+    page.within '.status-box' do
       expect(page).to have_content "Open"
     end
   end

features/steps/project/snippets.rb

@@ -42,7 +42,7 @@ class Spinach::Features::ProjectSnippets < Spinach::FeatureSteps
   end
 
   step 'I click link "Edit"' do
-    page.within ".page-title" do
+    page.within ".detail-page-header" do
       click_link "Edit"
     end
   end

features/steps/snippets/snippets.rb

@@ -13,7 +13,7 @@ class Spinach::Features::Snippets < Spinach::FeatureSteps
   end
 
   step 'I click link "Edit"' do
-    page.within ".page-title" do
+    page.within ".detail-page-header" do
       click_link "Edit"
     end
   end

spec/features/issues/filter_by_milestone_spec.rb

@@ -13,7 +13,7 @@ feature 'Issue filtering by Milestone', feature: true do
     visit_issues(project)
     filter_by_milestone(Milestone::None.title)
 
-    expect(page).to have_css('.issue-title', count: 1)
+    expect(page).to have_css('.title', count: 1)
   end
 
   scenario 'filters by a specific Milestone', js: true do
@@ -23,7 +23,7 @@ feature 'Issue filtering by Milestone', feature: true do
     visit_issues(project)
     filter_by_milestone(milestone.title)
 
-    expect(page).to have_css('.issue-title', count: 1)
+    expect(page).to have_css('.title', count: 1)
   end
 
   def visit_issues(project)

spec/features/task_lists_spec.rb

@@ -47,7 +47,7 @@ feature 'Task Lists', feature: true do
     it 'contains the required selectors' do
       visit_issue(project, issue)
 
-      container = '.issue-details .description.js-task-list-container'
+      container = '.detail-page-description .description.js-task-list-container'
 
       expect(page).to have_selector(container)
       expect(page).to have_selector("#{container} .wiki .task-list .task-list-item .task-list-item-checkbox")
@@ -123,7 +123,7 @@ feature 'Task Lists', feature: true do
     it 'contains the required selectors' do
       visit_merge_request(project, merge)
 
-      container = '.merge-request-details .description.js-task-list-container'
+      container = '.detail-page-description .description.js-task-list-container'
 
       expect(page).to have_selector(container)
       expect(page).to have_selector("#{container} .wiki .task-list .task-list-item .task-list-item-checkbox")

spec/javascripts/fixtures/issues_show.html.haml

 %a.btn-close
 
-.issue-details
+.detail-page-description
   .description.js-task-list-container
     .wiki
       %ul.task-list

spec/javascripts/fixtures/merge_requests_show.html.haml

 %a.btn-close
 
-.merge-request-details
+.detail-page-description
   .description.js-task-list-container
     .wiki
       %ul.task-list