Merge branch 'ui-right-sidebar' into 'master'

Implement new sidebar for issue and merge request pages

This is first step in implementing #3981. We don't have new dropdowns yet so I used some workarounds. 
Also I did it from linux machine without having access to design materials. So some colors/paddings might not match - but I will improve it with next iteration. 

cc @creamzy @JobV 

See merge request !2058

18 files changed, 342 insertions, 290 deletions

diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee
index c4d3e619f5e..01bd515cc02 100644
--- a/app/assets/javascripts/issuable_context.js.coffee
+++ b/app/assets/javascripts/issuable_context.js.coffee
@@ -5,9 +5,9 @@ class @IssuableContext
     new UsersSelect()
     $('select.select2').select2({width: 'resolve', dropdownAutoWidth: true})
 
-    $(".context .inline-update").on "change", "select", ->
+    $(".issuable-sidebar .inline-update").on "change", "select", ->
       $(this).submit()
-    $(".context .inline-update").on "change", ".js-assignee", ->
+    $(".issuable-sidebar .inline-update").on "change", ".js-assignee", ->
       $(this).submit()
 
     $('.issuable-details').waitForImages ->
@@ -18,6 +18,12 @@ class @IssuableContext
 
       $('.issuable-affix').affix offset:
         top: ->
-          @top = ($('.issuable-affix').offset().top - 70)
+          @top = ($('.issuable-affix').offset().top - 60)
         bottom: ->
           @bottom = $('.footer').outerHeight(true)
+
+    $(".edit-link").click (e) ->
+      block = $(@).parents('.block')
+      block.find('.selectbox').show()
+      block.find('.value').hide()
+      block.find('.js-select2').select2("open")
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 2e8515668f6..88da799ee2b 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -461,3 +461,9 @@ table {
     visibility: hidden;
   }
 }
+
+.content-separator {
+  margin-left: -$gl-padding;
+  margin-right: -$gl-padding;
+  border-top: 1px solid $border-color;
+}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index c01e1e32e41..af145191bc8 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -181,4 +181,4 @@
 
 .ajax-users-dropdown {
   min-width: 250px !important;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss
new file mode 100644
index 00000000000..f6d85221484
--- /dev/null
+++ b/app/assets/stylesheets/pages/awards.scss
@@ -0,0 +1,67 @@
+.awards {
+  @include clearfix;
+  line-height: 34px;
+
+  .award {
+    @include border-radius(5px);
+
+    border: 1px solid;
+    padding: 0px 10px;
+    float: left;
+    margin-right: 5px;
+    border-color: $border-color;
+    cursor: pointer;
+
+    &.active {
+      border-color: $border-gray-light;
+      background-color: $gray-light;
+
+      .counter {
+        font-weight: bold;
+      }
+    }
+
+    .icon {
+      float: left;
+      margin-right: 10px;
+    }
+
+    .counter {
+      float: left;
+    }
+  }
+
+  .awards-controls {
+    margin-left: 10px;
+    float: left;
+
+    .add-award {
+      font-size: 24px;
+      color: $gl-gray;
+      position: relative;
+      top: 2px;
+
+      &:hover,
+      &:link {
+        text-decoration: none;
+      }
+    }
+
+    .awards-menu {
+      padding: $gl-padding;
+      min-width: 214px;
+
+      > li {
+        cursor: pointer;
+        margin: 5px;
+      }
+    }
+  }
+
+  .awards-menu{
+    li {
+      float: left;
+      margin: 3px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 957da5c182e..797a0af3720 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -18,26 +18,12 @@
 
     &.affix {
       position: fixed;
-      top: 70px;
+      top: 60px;
       margin-right: 35px;
     }
   }
 }
 
-.issuable-context-title {
-  margin-bottom: 5px;
-
-  .avatar {
-    margin-left: 0;
-  }
-
-  label {
-    color: $gl-gray;
-    font-weight: normal;
-    margin-right: 4px;
-  }
-}
-
 .project-issuable-filter {
   .controls {
     float: right;
@@ -50,23 +36,6 @@
 }
 
 .issuable-details {
-  .page-title {
-    margin-top: -$gl-padding;
-    padding: 7px 0;
-    margin-bottom: 0;
-    color: #5c5d5e;
-    font-size: 16px;
-    line-height: 42px;
-
-    .author {
-      color: #5c5d5e;
-    }
-
-    .issue-id {
-      color: #5c5d5e;
-    }
-  }
-
   .issue-title {
     margin: 0;
     font-size: 23px;
@@ -80,6 +49,21 @@
       margin-bottom: 0;
     }
   }
+
+  section {
+    border-right: 1px solid #ECEEF1;
+
+    > .tab-content {
+      margin-right: 1px;
+    }
+
+    .issue-discussion > .gray-content-block,
+    > .gray-content-block {
+      margin-top: 0;
+      border-top: none;
+      margin-right: -15px;
+    }
+  }
 }
 
 .issuable-filter-count {
@@ -101,84 +85,72 @@
   }
 }
 
-.cross-project-reference {
-  text-align: center;
-  width: 100%;
-
-  .slead {
-    padding: 5px;
-  }
+.issuable-sidebar {
+  .block {
+    @include clearfix;
+    padding:  $gl-padding 0;
+    border-bottom: 1px solid #F0F0F0;
 
-  span, button {
-    background-color: $background-color;
+    &:last-child {
+      border: none;
+    }
   }
-}
 
-.awards {
-  @include clearfix;
-  line-height: 34px;
-  margin: 2px 0;
+  .title {
+    color: $gl-text-color;
+    margin-bottom: 8px;
 
-  .award {
-    @include border-radius(5px);
-
-    border: 1px solid;
-    padding: 0px 10px;
-    float: left;
-    margin: 0 5px;
-    border-color: $border-color;
-    cursor: pointer;
-
-    &.active {
-      border-color: $border-gray-light;
-      background-color: $gray-light;
+    .avatar {
+      margin-left: 0;
+    }
 
-      .counter {
-        font-weight: bold;
-      }
+    label {
+      font-weight: normal;
+      margin-right: 4px;
     }
 
-    .icon {
-      float: left;
-      margin-right: 10px;
+    .edit-link {
+      color: $gl-gray;
     }
+  }
+
+  .cross-project-reference {
+    font-weight: bold;
+    color: $gl-link-color;
 
-    .counter {
-      float: left;
+    button {
+      float: right;
     }
   }
 
-  .awards-controls {
-    margin-left: 10px;
-    float: left;
+  .selectbox {
+    display: none
+  }
 
-    .add-award {
-      font-size: 24px;
-      color: $gl-gray;
-      position: relative;
-      top: 2px;
+  .btn-clipboard {
+    color: $gl-gray;
+  }
 
-      &:hover,
-      &:link {
-        text-decoration: none;
-      }
-    }
+  .participants .avatar {
+    margin-top: 6px;
+    margin-right: 2px;
+  }
+}
 
-    .awards-menu {
-      padding: $gl-padding;
-      min-width: 214px;
+.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;
 
-      > li {
-        cursor: pointer;
-        margin: 5px;
-      }
-    }
+  .author {
+    color: #5c5d5e;
   }
 
-  .awards-menu{
-    li {
-      float: left;
-      margin: 3px;
-    }
+  .issuable-id {
+    color: #5c5d5e;
   }
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index fc8c7161991..502e9552acd 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -121,10 +121,6 @@
   }
 }
 
-.merge-request-details {
-  margin-bottom: $gl-padding;
-}
-
 .mr_source_commit,
 .mr_target_commit {
   .commit {
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index cf617d53ed6..b59b52291fb 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -58,7 +58,6 @@ class Projects::IssuesController < Projects::ApplicationController
   end
 
   def show
-    @participants = @issue.participants(current_user)
     @note = @project.notes.new(noteable: @issue)
     @notes = @issue.notes.nonawards.with_associations.fresh
     @noteable = @issue
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 530f3d3dcb8..e8fa10fafb1 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -279,8 +279,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   end
 
   def define_show_vars
-    @participants = @merge_request.participants(current_user)
-
     # Build a note object for comment form
     @note = @project.notes.new(noteable: @merge_request)
     @notes = @merge_request.mr_and_commit_notes.nonawards.inc_author.fresh
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index f2011542ca7..405bae1bbb9 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -5,24 +5,8 @@
     - else
       = link_to 'Close Issue', issue_path(@issue, issue: {state_event: :close}, status_only: true), method: :put, class: 'btn btn-grouped btn-close js-note-target-close', title: 'Close Issue'
 
-= render 'shared/show_aside'
-
 .gray-content-block.second-block.oneline-block
-  .row
-    .col-md-9
-      .votes-holder.pull-right
-        #votes= render 'votes/votes_block', votable: @issue
-      = render "shared/issuable/participants"
-    .col-md-3
-      .input-group.cross-project-reference
-        %span#cross-project-reference.slead.has_tooltip{title: 'Cross-project reference'}
-          = cross_project_reference(@project, @issue)
-        = clipboard_button(clipboard_target: 'span#cross-project-reference')
+  = render 'votes/votes_block', votable: @issue
 
-.row
-  %section.col-md-9
-    .voting_notes#notes= render 'projects/notes/notes_with_form'
-  %aside.col-md-3
-    .issuable-affix
-      .context
-        = render 'shared/issuable/context', issuable: @issue
+#notes
+  = render 'projects/notes/notes_with_form'
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 38254403fa6..cc2cf8c8716 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -3,13 +3,13 @@
 
 .issue
   .issue-details.issuable-details
-    .page-title
+    .issuable-title
       .issue-box{ class: issue_box_class(@issue) }
         - if @issue.closed?
           Closed
         - else
           Open
-      %span.issue-id Issue ##{@issue.iid}
+      %span.issuable-id Issue ##{@issue.iid}
       %span.creator
         &middot;
         opened by #{link_to_member(@project, @issue.author, size: 24)}
@@ -36,22 +36,29 @@
             = icon('pencil-square-o')
             Edit
 
-    .gray-content-block.middle-block
-      %h2.issue-title
-        = markdown escape_once(@issue.title), pipeline: :single_line
-      %div
-        - if @issue.description.present?
-          .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
-            .wiki
-              = preserve do
-                = markdown(@issue.description, cache_key: [@issue, "description"])
-            %textarea.hidden.js-task-list-field
-              = @issue.description
-
-    .merge-requests
-      = render 'merge_requests'
-
-  - if @closed_by_merge_requests.present?
-    = render 'projects/issues/closed_by_box'
-  .issue-discussion
-    = render 'projects/issues/discussion'
+    .row
+      %section.col-md-9
+        .gray-content-block
+          %h2.issue-title
+            = markdown escape_once(@issue.title), pipeline: :single_line
+          %div
+            - if @issue.description.present?
+              .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
+                .wiki
+                  = preserve do
+                    = markdown(@issue.description, cache_key: [@issue, "description"])
+                %textarea.hidden.js-task-list-field
+                  = @issue.description
+
+            .merge-requests
+              = render 'merge_requests'
+
+        - if @closed_by_merge_requests.present?
+          = render 'projects/issues/closed_by_box'
+        .issue-discussion
+          = render 'projects/issues/discussion'
+
+      %aside.col-md-3
+        = render 'shared/issuable/sidebar', issuable: @issue
+
+      = render 'shared/show_aside'
diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml
index b7735aaf3c1..2f0f3fcfb06 100644
--- a/app/views/projects/issues/update.js.haml
+++ b/app/views/projects/issues/update.js.haml
@@ -1,3 +1,3 @@
-$('.context').html("#{escape_javascript(render 'shared/issuable/context', issuable: @issue)}");
-$('.context').effect('highlight')
+$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}");
+$('.issuable-sidebar').parent().effect('highlight')
 new Issue();
diff --git a/app/views/projects/merge_requests/_discussion.html.haml b/app/views/projects/merge_requests/_discussion.html.haml
index d64b19ae91a..7a7428d35cc 100644
--- a/app/views/projects/merge_requests/_discussion.html.haml
+++ b/app/views/projects/merge_requests/_discussion.html.haml
@@ -5,24 +5,7 @@
     - if @merge_request.closed?
       = link_to 'Reopen', merge_request_path(@merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-grouped btn-reopen reopen-mr-link js-note-target-reopen", title: "Reopen merge request"
 
-= render 'shared/show_aside'
+.gray-content-block.second-block.oneline-block
+  = render 'votes/votes_block', votable: @merge_request
 
-.gray-content-block.middle-block.oneline-block
-  .row
-    .col-md-9
-      .votes-holder.pull-right
-        #votes= render 'votes/votes_block', votable: @merge_request
-      = render "shared/issuable/participants"
-    .col-md-3
-      .input-group.cross-project-reference
-        %span#cross-project-reference.slead.has_tooltip{title: 'Cross-project reference'}
-          = cross_project_reference(@project, @merge_request)
-        = clipboard_button(clipboard_target: 'span#cross-project-reference')
-
-.row
-  %section.col-md-9
-    .voting_notes#notes= render "projects/notes/notes_with_form"
-  %aside.col-md-3
-    .issuable-affix
-      .context
-        = render 'shared/issuable/context', issuable: @merge_request
+#notes= render "projects/notes/notes_with_form"
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 960d1561e73..04f8fd74422 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -7,71 +7,79 @@
 .merge-request{'data-url' => merge_request_path(@merge_request)}
   .merge-request-details.issuable-details
     = render "projects/merge_requests/show/mr_title"
-    = render "projects/merge_requests/show/mr_box"
-    .append-bottom-default.mr-source-target.prepend-top-default
-      - if @merge_request.open?
-        .pull-right
-          - if @merge_request.source_branch_exists?
-            = link_to "#modal_merge_info", class: "btn btn-sm", "data-toggle" => "modal" do
-              = icon('cloud-download fw')
-              Check out branch
+    .row
+      %section.col-md-9
+        = render "projects/merge_requests/show/mr_box"
+        .append-bottom-default.mr-source-target.prepend-top-default
+          - if @merge_request.open?
+            .pull-right
+              - if @merge_request.source_branch_exists?
+                = link_to "#modal_merge_info", class: "btn btn-sm", "data-toggle" => "modal" do
+                  = icon('cloud-download fw')
+                  Check out branch
 
-          %span.dropdown
-            %a.btn.btn-sm.dropdown-toggle{ data: {toggle: :dropdown} }
-              = icon('download')
-              Download as
-              %span.caret
-            %ul.dropdown-menu
-              %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
-              %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
-      .normal
-        %span Request to merge
-        %span.label-branch= source_branch_with_namespace(@merge_request)
-        %span into
-        = link_to namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch" do
-          = @merge_request.target_branch
+              %span.dropdown
+                %a.btn.btn-sm.dropdown-toggle{ data: {toggle: :dropdown} }
+                  = icon('download')
+                  Download as
+                  %span.caret
+                %ul.dropdown-menu
+                  %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
+                  %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
+          .normal
+            %span Request to merge
+            %span.label-branch= source_branch_with_namespace(@merge_request)
+            %span into
+            = link_to namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch" do
+              = @merge_request.target_branch
 
-    = render "projects/merge_requests/show/how_to_merge"
-    = render "projects/merge_requests/widget/show.html.haml"
+        = render "projects/merge_requests/show/how_to_merge"
+        = render "projects/merge_requests/widget/show.html.haml"
 
-    - if @merge_request.open? && @merge_request.source_branch_exists? && @merge_request.can_be_merged? && @merge_request.can_be_merged_by?(current_user)
-      .light.prepend-top-default
-        You can also accept this merge request manually using the
-        = succeed '.' do
-          = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
+        - if @merge_request.open? && @merge_request.source_branch_exists? && @merge_request.can_be_merged? && @merge_request.can_be_merged_by?(current_user)
+          .light.prepend-top-default
+            You can also accept this merge request manually using the
+            = succeed '.' do
+              = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
-  - if @commits.present?
-    %ul.merge-request-tabs.center-top-menu.no-top.no-bottom
-      %li.notes-tab
-        = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#notes', action: 'notes', toggle: 'tab'} do
-          Discussion
-          %span.badge= @merge_request.mr_and_commit_notes.user.count
-      %li.commits-tab
-        = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#commits', action: 'commits', toggle: 'tab'} do
-          Commits
-          %span.badge= @commits.size
-      %li.diffs-tab
-        = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#diffs', action: 'diffs', toggle: 'tab'} do
-          Changes
-          %span.badge= @merge_request.diffs.size
-      - if @ci_commit
-        %li.builds-tab
-          = link_to builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: '#builds', action: 'builds', toggle: 'tab'} do
-            Builds
-            %span.badge= @statuses.size
+        - if @commits.present?
+          %ul.merge-request-tabs.center-top-menu.no-top.no-bottom
+            %li.notes-tab
+              = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#notes', action: 'notes', toggle: 'tab'} do
+                Discussion
+                %span.badge= @merge_request.mr_and_commit_notes.user.count
+            %li.commits-tab
+              = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#commits', action: 'commits', toggle: 'tab'} do
+                Commits
+                %span.badge= @commits.size
+            %li.diffs-tab
+              = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#diffs', action: 'diffs', toggle: 'tab'} do
+                Changes
+                %span.badge= @merge_request.diffs.size
+            - if @ci_commit
+              %li.builds-tab
+                = link_to builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: '#builds', action: 'builds', toggle: 'tab'} do
+                  Builds
+                  %span.badge= @statuses.size
 
-  .tab-content
-    #notes.notes.tab-pane.voting_notes
-      = render "projects/merge_requests/discussion"
-    #commits.commits.tab-pane
-      - # This tab is always loaded via AJAX
-    #diffs.diffs.tab-pane
-      - # This tab is always loaded via AJAX
-    #builds.builds.tab-pane
-      - # This tab is always loaded via AJAX
+        .tab-content
+          #notes.notes.tab-pane.voting_notes
+            = render "projects/merge_requests/discussion"
+          #commits.commits.tab-pane
+            - # This tab is always loaded via AJAX
+          #diffs.diffs.tab-pane
+            - # This tab is always loaded via AJAX
+          #builds.builds.tab-pane
+            - # This tab is always loaded via AJAX
+
+        .mr-loading-status
+          = spinner
+
+      %aside.col-md-3
+        = render 'shared/issuable/sidebar', issuable: @merge_request
+
+      = render 'shared/show_aside'
 
-  .mr-loading-status
-    = spinner
 
 :javascript
   var merge_request;
diff --git a/app/views/projects/merge_requests/show/_mr_title.html.haml b/app/views/projects/merge_requests/show/_mr_title.html.haml
index 4dfe46e2b86..d65c3b16618 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -1,7 +1,7 @@
-.page-title
+.issuable-title
   .issue-box{ class: issue_box_class(@merge_request) }
     = @merge_request.state_human_name
-  %span.issue-id Merge Request ##{@merge_request.iid}
+  %span.issuable-id Merge Request ##{@merge_request.iid}
   %span.creator
     &middot;
     opened by #{link_to_member(@project, @merge_request.author, size: 24)}
diff --git a/app/views/projects/merge_requests/update.js.haml b/app/views/projects/merge_requests/update.js.haml
index 25583b2cc6f..93db65ddf79 100644
--- a/app/views/projects/merge_requests/update.js.haml
+++ b/app/views/projects/merge_requests/update.js.haml
@@ -1,3 +1,3 @@
-$('.context').html("#{escape_javascript(render 'shared/issuable/context', issuable: @merge_request)}");
-$('.context').effect('highlight')
+$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @merge_request)}");
+$('.issuable-sidebar').parent().effect('highlight')
 merge_request = new MergeRequest();
diff --git a/app/views/shared/issuable/_context.html.haml b/app/views/shared/issuable/_context.html.haml
deleted file mode 100644
index 2aa46662613..00000000000
--- a/app/views/shared/issuable/_context.html.haml
+++ /dev/null
@@ -1,57 +0,0 @@
-= form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
-  %div.prepend-top-default
-    .issuable-context-title
-      %label
-        Assignee:
-      - if issuable.assignee
-        %strong= link_to_member(@project, issuable.assignee, size: 24)
-      - else
-        none
-    .issuable-context-selectbox
-      - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-        = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true)
-
-  %div.prepend-top-default.clearfix
-    .issuable-context-title
-      %label
-        Milestone:
-      - if issuable.milestone
-        %span.back-to-milestone
-          = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do
-            %strong
-              = icon('clock-o')
-              = issuable.milestone.title
-      - else
-        none
-    .issuable-context-selectbox
-      - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-        = f.select(:milestone_id, milestone_options(issuable), { include_blank: true }, { class: 'select2 select2-compact js-select2 js-milestone', data: { placeholder: 'Select milestone' }})
-        = hidden_field_tag :issuable_context
-        = f.submit class: 'btn hide'
-
-  - if issuable.labels.any?
-    %div.prepend-top-default.clearfix
-      .issuable-context-title
-        %label Labels
-      .issuable-show-labels
-        - issuable.labels.each do |label|
-          = link_to_label(label)
-
-  - if current_user
-    - subscribed = issuable.subscribed?(current_user)
-    %div.prepend-top-default.clearfix
-      .issuable-context-title
-        %label Subscription
-      - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
-      .subscription-status{data: {status: subscribtion_status}}
-        .description-block.unsubscribed{class: ( 'hidden' if subscribed )}
-          You're not receiving notifications from this thread.
-        .description-block.subscribed{class: ( 'hidden' unless subscribed )}
-          You're receiving notifications because you're subscribed to this thread.
-      %button.btn.btn-block.subscribe-button{:type => 'button'}
-        = icon('eye')
-        %span= subscribed ? 'Unsubscribe' : 'Subscribe'
-
-:javascript
-  new Subscription("#{toggle_subscription_path(issuable)}");
-  new IssuableContext();
diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml
index b4e0def48b6..da6bacbb74a 100644
--- a/app/views/shared/issuable/_participants.html.haml
+++ b/app/views/shared/issuable/_participants.html.haml
@@ -1,5 +1,5 @@
-.participants
-  %span
-    = pluralize @participants.count, "participant"
-  - @participants.each do |participant|
+.block.participants
+  .title
+    = pluralize participants.count, "participant"
+  - participants.each do |participant|
     = link_to_member(@project, participant, name: false, size: 24)
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
new file mode 100644
index 00000000000..0019f739b89
--- /dev/null
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -0,0 +1,83 @@
+.issuable-sidebar.issuable-affix
+  = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
+    .block
+      .title
+        Cross-project reference
+      .cross-project-reference
+        %span#cross-project-reference
+          = cross_project_reference(@project, issuable)
+        = clipboard_button(clipboard_target: 'span#cross-project-reference')
+
+    .block.assignee
+      .title
+        %label
+          Assignee
+        - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
+          .pull-right
+            = link_to 'Edit', '#', class: 'edit-link'
+      .value
+        - if issuable.assignee
+          %strong= link_to_member(@project, issuable.assignee, size: 24)
+        - else
+          .light None
+
+      .selectbox
+        = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true)
+
+    .block.milestone
+      .title
+        %label
+          Milestone
+        - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
+          .pull-right
+            = link_to 'Edit', '#', class: 'edit-link'
+      .value
+        - if issuable.milestone
+          %span.back-to-milestone
+            = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do
+              %strong
+                = icon('clock-o')
+                = issuable.milestone.title
+        - else
+          .light None
+      .selectbox
+        = f.select(:milestone_id, milestone_options(issuable), { include_blank: true }, { class: 'select2 select2-compact js-select2 js-milestone', data: { placeholder: 'Select milestone' }})
+        = hidden_field_tag :issuable_context
+        = f.submit class: 'btn hide'
+
+    - if issuable.project.labels.any?
+      .block
+        .title
+          %label Labels
+          - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
+            .pull-right
+              = link_to 'Edit', '#', class: 'edit-link'
+        .value.issuable-show-labels
+          - if issuable.labels.any?
+            - issuable.labels.each do |label|
+              = link_to_label(label)
+          - else
+            .light None
+        .selectbox
+          = f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
+            { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
+
+    = render "shared/issuable/participants", participants: issuable.participants(current_user)
+
+    - if current_user
+      - subscribed = issuable.subscribed?(current_user)
+      .block.light
+        .title
+          %label.light Notifications
+        - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
+        %button.btn.btn-block.btn-gray.subscribe-button{:type => 'button'}
+          %span= subscribed ? 'Unsubscribe' : 'Subscribe'
+        .subscription-status{data: {status: subscribtion_status}}
+          .unsubscribed{class: ( 'hidden' if subscribed )}
+            You're not receiving notifications from this thread.
+          .subscribed{class: ( 'hidden' unless subscribed )}
+            You're receiving notifications because you're subscribed to this thread.
+
+  :javascript
+    new Subscription("#{toggle_subscription_path(issuable)}");
+    new IssuableContext();