Redesign issue page for new sidebar

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

app/assets/stylesheets/pages/issuable.scss

@@ -24,20 +24,6 @@
   }
 }
 
-.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,20 @@
       margin-bottom: 0;
     }
   }
+
+  section {
+    border-right: 1px solid #ECEEF1;
+
+    > .tab-content {
+      margin-right: 1px;
+    }
+
+    > .gray-content-block {
+      margin-top: 0;
+      border-top: none;
+      margin-right: -15px;
+    }
+  }
 }
 
 .issuable-filter-count {
@@ -101,84 +84,67 @@
   }
 }
 
-.cross-project-reference {
-  text-align: center;
-  width: 100%;
+.issuable-sidebar {
+  .block {
+    @include clearfix;
+    padding:  $gl-padding 0;
+    border-bottom: 1px solid #F0F0F0;
 
-  .slead {
-    padding: 5px;
+    &:last-child {
+      border: none;
     }
-
-  span, button {
-    background-color: $background-color;
   }
-}
 
-.awards {
-  @include clearfix;
-  line-height: 34px;
-  margin: 2px 0;
-
-  .award {
-    @include border-radius(5px);
+  .title {
+    color: $gl-text-color;
+    margin-bottom: 8px;
 
-    border: 1px solid;
-    padding: 0px 10px;
-    float: left;
-    margin: 0 5px;
-    border-color: $border-color;
-    cursor: pointer;
+    .avatar {
+      margin-left: 0;
+    }
 
-    &.active {
-      border-color: $border-gray-light;
-      background-color: $gray-light;
+    label {
+      font-weight: normal;
+      margin-right: 4px;
+    }
 
-      .counter {
-        font-weight: bold;
+    .edit-link {
+      color: $gl-gray;
     }
   }
 
-    .icon {
-      float: left;
-      margin-right: 10px;
-    }
+  .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;
+  .btn-clipboard {
     color: $gl-gray;
-      position: relative;
-      top: 2px;
-
-      &:hover,
-      &:link {
-        text-decoration: none;
-      }
   }
+}
 
-    .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;
   }
 }

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

@@ -5,24 +5,5 @@
     - 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')
-
-.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'

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
         ·
         opened by #{link_to_member(@project, @issue.author, size: 24)}
@@ -36,7 +36,9 @@
             = icon('pencil-square-o')
             Edit
 
-    .gray-content-block.middle-block
+    .row
+      %section.col-md-9
+        .gray-content-block
           %h2.issue-title
             = markdown escape_once(@issue.title), pipeline: :single_line
           %div
@@ -51,7 +53,14 @@
             .merge-requests
               = render 'merge_requests'
 
+            = render 'votes/votes_block', votable: @issue
+
         - 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'

app/views/projects/issues/update.js.haml

-$('.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();

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

-= 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();

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

-.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)