Merge branch 'feature/jschatz1/issuable-sidebar' into 'master'

Implement new design for issue and merge request right sidebar

Fixes #3981 



See merge request !2645

app/assets/javascripts/application.js.coffee

@@ -215,4 +215,76 @@ $ ->
     $this = $(this)
     $this.attr 'value', $this.val()
 
+  $(document).on 'breakpoint:change', (e, breakpoint) ->
+    if breakpoint is 'sm' or breakpoint is 'xs'
+      $gutterIcon = $('.gutter-toggle').find('i')
+      if $gutterIcon.hasClass('fa-angle-double-right')
+        $gutterIcon.closest('a').trigger('click')
+
+
+  $(document).on 'click', 'aside .gutter-toggle', (e) ->
+    e.preventDefault()
+    $this = $(this)
+    $thisIcon = $this.find 'i'
+    if $thisIcon.hasClass('fa-angle-double-right')
+      $thisIcon.removeClass('fa-angle-double-right')
+        .addClass('fa-angle-double-left')
+      $this
+        .closest('aside')
+        .removeClass('right-sidebar-expanded')
+        .addClass('right-sidebar-collapsed')
+      $('.page-with-sidebar')
+        .removeClass('right-sidebar-expanded')
+        .addClass('right-sidebar-collapsed')
+    else
+      $thisIcon.removeClass('fa-angle-double-left')
+        .addClass('fa-angle-double-right')
+      $this
+        .closest('aside')
+        .removeClass('right-sidebar-collapsed')
+        .addClass('right-sidebar-expanded')
+      $('.page-with-sidebar')
+        .removeClass('right-sidebar-collapsed')
+        .addClass('right-sidebar-expanded')
+    $.cookie("collapsed_gutter", 
+      $('.right-sidebar')
+        .hasClass('right-sidebar-collapsed'), { path: '/' })
+
+  bootstrapBreakpoint = undefined;
+  checkBootstrapBreakpoints = ->
+    if $('.device-xs').is(':visible')
+      bootstrapBreakpoint = "xs"
+    else if $('.device-sm').is(':visible')
+      bootstrapBreakpoint = "sm"
+    else if $('.device-md').is(':visible')
+      bootstrapBreakpoint = "md"
+    else if $('.device-lg').is(':visible')
+      bootstrapBreakpoint = "lg"
+
+  setBootstrapBreakpoints = ->
+    if $('.device-xs').length
+      return
+
+    $("body")
+      .append('<div class="device-xs visible-xs"></div>'+
+        '<div class="device-sm visible-sm"></div>'+
+        '<div class="device-md visible-md"></div>'+
+        '<div class="device-lg visible-lg"></div>')
+    checkBootstrapBreakpoints()
+
+  fitSidebarForSize = ->
+    oldBootstrapBreakpoint = bootstrapBreakpoint
+    checkBootstrapBreakpoints()
+    if bootstrapBreakpoint != oldBootstrapBreakpoint
+      $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
+
+  checkInitialSidebarSize = ->
+    if bootstrapBreakpoint is "xs" or "sm"
+      $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
+
+  $(window).on "resize", (e) ->
+    fitSidebarForSize()
+
+  setBootstrapBreakpoints()
+  checkInitialSidebarSize()
   new Aside()

app/assets/javascripts/issuable_context.js.coffee

@@ -10,19 +10,7 @@ class @IssuableContext
     $(".issuable-sidebar .inline-update").on "change", ".js-assignee", ->
       $(this).submit()
 
-    $('.issuable-details').waitForImages ->
-      $('.issuable-affix').on 'affix.bs.affix', ->
-        $(@).width($(@).outerWidth())
-      .on 'affixed-top.bs.affix affixed-bottom.bs.affix', ->
-        $(@).width('')
-
-      $('.issuable-affix').affix offset:
-        top: ->
-          @top = ($('.issuable-affix').offset().top - 70)
-        bottom: ->
-          @bottom = $('.footer').outerHeight(true)
-
-    $(".edit-link").click (e) ->
+    $(document).on "click",".edit-link", (e) ->
       block = $(@).parents('.block')
       block.find('.selectbox').show()
       block.find('.value').hide()

app/assets/stylesheets/framework/buttons.scss

@@ -2,7 +2,7 @@
   @include border-radius(3px);
   font-size: $gl-font-size;
   font-weight: 500;
-  padding: $gl-vert-padding $gl-padding;
+  padding: $gl-vert-padding $gl-btn-padding;
 
   &:focus,
   &:active {

app/assets/stylesheets/framework/issue_box.scss

@@ -9,7 +9,7 @@
 
   display: block;
   float: left;
-  padding: 0 $gl-padding;
+  padding: 0 $gl-btn-padding;
   font-weight: normal;
   margin-right: 10px;
   font-size: $gl-font-size;

app/assets/stylesheets/framework/mobile.scss

@@ -116,7 +116,7 @@
     display: none;
   }
 
-  aside {
+  aside:not(.right-sidebar){
     display: none;
   }
 

app/assets/stylesheets/framework/sidebar.scss

@@ -200,6 +200,14 @@
   }
 }
 
+@mixin expanded-gutter {
+  padding-right: $gutter_width;
+}
+
+@mixin collapsed-gutter {
+  padding-right: $sidebar_collapsed_width;
+}
+
 @mixin collapsed-sidebar {
   padding-left: $sidebar_collapsed_width;
 
@@ -266,6 +274,7 @@
   background: #f2f6f7;
 }
 
+// page is small enough
 @media (max-width: $screen-md-max) {
   .page-sidebar-collapsed {
     @include collapsed-sidebar;
@@ -275,12 +284,32 @@
     @include collapsed-sidebar;
   }
 
+  .page-gutter {
+    &.right-sidebar-collapsed {
+      @include collapsed-gutter;
+    }
+    &.right-sidebar-expanded {
+      @include expanded-gutter;
+    }
+  }
+
   .collapse-nav {
     display: none;
   }
 }
 
+// page is large enough
 @media(min-width: $screen-md-max) {
+
+  .page-gutter {
+    &.right-sidebar-collapsed {
+      @include collapsed-gutter;
+    }
+    &.right-sidebar-expanded {
+      @include expanded-gutter;
+    }
+  }
+
   .page-sidebar-collapsed {
     @include collapsed-sidebar;
   }

app/assets/stylesheets/framework/variables.scss

@@ -12,6 +12,9 @@ $gl-font-size: 15px;
 $list-font-size: 15px;
 $sidebar_collapsed_width: 62px;
 $sidebar_width: 230px;
+$gutter_collapsed_width: 62px;
+$gutter_width: 312px;
+$gutter_inner_width: 280px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
@@ -22,6 +25,7 @@ $header-height: 58px;
 $fixed-layout-width: 1280px;
 $gl-gray: #5a5a5a;
 $gl-padding: 16px;
+$gl-btn-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top:10px;
 $gl-avatar-size: 46px;
@@ -36,11 +40,12 @@ $white-light: #FFFFFF;
 $white-normal: #ededed;
 $white-dark: #ededed;
 
-$gray-light: #f7f7f7;
-$gray-normal: #ededed;
+$gray-light: #faf9f9;
+$gray-normal: #f5f5f5;
 $gray-dark: #ededed;
+$gray-darkest: #c9c9c9;
 
-$green-light: #31AF64;
+$green-light: #38ae67;
 $green-normal: #2FAA60;
 $green-dark: #2CA05B;
 
@@ -52,7 +57,7 @@ $blue-medium-light: #3498CB;
 $blue-medium: #2F8EBF;
 $blue-medium-dark: #2D86B4;
 
-$orange-light: #FC6443;
+$orange-light: rgba(252, 109, 38, 0.80);
 $orange-normal: #E75E40;
 $orange-dark: #CE5237;
 
@@ -64,8 +69,8 @@ $border-white-light: #F1F2F4;
 $border-white-normal: #D6DAE2;
 $border-white-dark: #C6CACF;
 
-$border-gray-light: #d1d1d1;
-$border-gray-normal: #D6DAE2;
+$border-gray-light: rgba(0, 0, 0, 0.06);
+$border-gray-normal: rgba(0, 0, 0, 0.10);;
 $border-gray-dark: #C6CACF;
 
 $border-green-light: #2FAA60;
@@ -76,7 +81,7 @@ $border-blue-light: #2D9FD8;
 $border-blue-normal: #2897CE;
 $border-blue-dark: #258DC1;
 
-$border-orange-light: #ED5C3D;
+$border-orange-light: #fc6d26;
 $border-orange-normal: #CE5237;
 $border-orange-dark: #C14E35;
 

app/assets/stylesheets/pages/issuable.scss

@@ -42,8 +42,6 @@
 
 .issuable-details {
   section {
-    border-right: 1px solid $border-white-light;
-
     .issuable-discussion {
       margin-right: 1px;
     }
@@ -73,11 +71,35 @@
   .block {
     @include clearfix;
     padding:  $gl-padding 0;
-    border-bottom: 1px solid #F0F0F0;
+    border-bottom: 1px solid $border-gray-light;
+    // This prevents the mess when resizing the sidebar 
+    // of elements repositioning themselves..
+    width: $gutter_inner_width;
+    overflow-x: hidden;
+    // --
+
+    &:first-child {
+      padding-top: 5px;
+    }
 
     &:last-child {
       border: none;
     }
+
+    span {
+      margin-top: 7px;
+      display: inline-block;
+    }
+
+    .issuable-count {
+
+    }
+
+    .gutter-toggle {
+      margin-left: 20px;
+      border-left: 1px solid $border-gray-light;
+      padding-left: 10px;
+    }
   }
 
   .title {
@@ -133,3 +155,92 @@
     margin-right: 2px;
   }
 }
+
+
+.right-sidebar {
+  position: fixed;
+  top: 58px;
+  right: 0;
+  height: 100%;
+  transition-duration: .3s;
+  background: $gray-light;
+  overflow: scroll;
+  padding: 10px 20px;
+
+  &.right-sidebar-expanded {
+    width: $gutter_width;
+
+    hr {
+      display: none;
+    }
+  }
+
+  .subscribe-button {
+    span {
+      margin-top: 0;
+    }
+  }
+
+  &.right-sidebar-collapsed {
+    width: $sidebar_collapsed_width;
+    padding-top: 0;
+    overflow-x: hidden;
+
+    hr {
+      margin: 0;
+      color: $gray-normal;
+      border-color: $gray-normal;
+      width: 62px;
+      margin-left: -20px
+    }
+
+    .block {
+      border-bottom: none;
+      padding: 15px 0 0 0;
+    }
+  }
+
+  .btn {
+    background: $gray-normal;
+    border: 1px solid $border-gray-normal;
+  }
+
+  &.right-sidebar-collapsed {
+    .issuable-count, 
+    .issuable-nav,
+    .assignee > *,
+    .milestone > *,
+    .labels > *,
+    .participants > *,
+    .light > *,
+    .project-reference > * {
+      display: none;
+    }
+
+    .gutter-toggle {
+      margin-left: -$gutter_inner_width + 4;
+    }
+
+    .sidebar-collapsed-icon {
+      display: block;
+      float: left;
+      width: 62px;
+      text-align: center;
+      margin-left: -19px;
+      padding-bottom: 10px;
+      color: #999999;
+
+      span {
+        display: block;
+        margin-top: 0;
+      }
+    }
+
+  }
+
+  &.right-sidebar-expanded {
+    .sidebar-collapsed-icon {
+      display: none;
+    }
+  }
+}

app/helpers/application_helper.rb

@@ -293,6 +293,76 @@ module ApplicationHelper
     end
   end
 
+  def issuable_link_next(project,issuable)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      namespace_project_issue_path(project.namespace, project, next_issuable_for(project, issuable.id).try(:iid))
+    elsif current_controller?(:merge_requests)
+      namespace_project_merge_request_path(project.namespace, project, next_issuable_for(project, issuable.id).try(:iid))
+    end
+  end
+
+  def issuable_link_prev(project,issuable)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      namespace_project_issue_path(project.namespace, project, prev_issuable_for(project, issuable.id).try(:iid))
+    elsif current_controller?(:merge_requests)
+      namespace_project_merge_request_path(project.namespace, project, prev_issuable_for(project, issuable.id).try(:iid))
+    end
+  end
+
+  def issuable_count(entity, project)
+    if project.nil?
+      0
+    elsif current_controller?(:issues)
+      project.issues.send(entity).count
+    elsif current_controller?(:merge_requests)
+      project.merge_requests.send(entity).count
+    end
+  end
+
+  def next_issuable_for(project, id)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      project.issues.where("id > ?", id).last
+    elsif current_controller?(:merge_requests)
+      project.merge_requests.where("id > ?", id).last
+    end
+  end
+
+  def has_next_issuable?(project, id)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      project.issues.where("id > ?", id).last
+    elsif current_controller?(:merge_requests)
+      project.merge_requests.where("id > ?", id).last
+    end
+  end
+
+  def prev_issuable_for(project, id)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      project.issues.where("id < ?", id).first
+    elsif current_controller?(:merge_requests)
+      project.merge_requests.where("id < ?", id).first
+    end
+  end
+
+  def has_prev_issuable?(project, id)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      project.issues.where("id < ?", id).first
+    elsif current_controller?(:merge_requests)
+      project.merge_requests.where("id < ?", id).first
+    end
+  end
+
   def state_filters_text_for(entity, project)
     titles = {
       opened: "Open"

app/helpers/nav_helper.rb

@@ -3,6 +3,18 @@ module NavHelper
     cookies[:collapsed_nav] == 'true'
   end
 
+  def sidebar_gutter_collapsed_class
+    if cookies[:collapsed_gutter] == 'true'
+      "right-sidebar-collapsed"
+    else
+      "right-sidebar-expanded"
+    end
+  end
+
+  def sidebar_gutter_collapsed?
+    cookies[:collapsed_gutter] == 'true'
+  end
+
   def nav_sidebar_class
     if nav_menu_collapsed?
       "sidebar-collapsed"
@@ -19,6 +31,17 @@ module NavHelper
     end
   end
 
+  def page_gutter_class
+
+    if current_path?('merge_requests#show') || current_path?('issues#show')
+      if cookies[:collapsed_gutter] == 'true'
+        "page-gutter right-sidebar-collapsed"
+      else
+        "page-gutter right-sidebar-expanded"
+      end
+    end
+  end
+
   def nav_header_class
     if nav_menu_collapsed?
       "header-collapsed"

app/helpers/projects_helper.rb

@@ -20,6 +20,12 @@ module ProjectsHelper
     end
   end
 
+  def link_to_member_avatar(author, opts = {})
+    default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name" }
+    opts = default_opts.merge(opts)
+    image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt:'') if opts[:avatar]
+  end
+
   def link_to_member(project, author, opts = {})
     default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name" }
     opts = default_opts.merge(opts)

app/views/layouts/_page.html.haml

@@ -1,4 +1,4 @@
-.page-with-sidebar{ class: page_sidebar_class }
+.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   = render "layouts/broadcast"
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo

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

@@ -54,11 +54,8 @@
       = render 'votes/votes_block', votable: @issue
 
     .row
-      %section.col-md-9
+      %section.col-md-12
         .issuable-discussion
           = render 'projects/issues/discussion'
 
-      %aside.col-md-3
-        = render 'shared/issuable/sidebar', issuable: @issue
-
-      = render 'shared/show_aside'
+= render 'shared/issuable/sidebar', issuable: @issue

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

@@ -1,3 +1,3 @@
-$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}");
-$('.issuable-sidebar').parent().effect('highlight')
+$('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}";
+$('aside.right-sidebar').effect('highlight');
 new Issue();

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

@@ -70,12 +70,9 @@
             = render 'votes/votes_block', votable: @merge_request
 
           .row
-            %section.col-md-9
+            %section.col-md-12
               .issuable-discussion
                 = render "projects/merge_requests/discussion"
-            %aside.col-md-3
-              = render 'shared/issuable/sidebar', issuable: @merge_request
-            = render 'shared/show_aside'
 
         #commits.commits.tab-pane
           - # This tab is always loaded via AJAX
@@ -87,6 +84,8 @@
       .mr-loading-status
         = spinner
 
+= render 'shared/issuable/sidebar', issuable: @merge_request
+
 :javascript
   var merge_request;
 

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

@@ -1,3 +1,3 @@
-$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @merge_request)}");
-$('.issuable-sidebar').parent().effect('highlight')
+$('aside.right-sidebar')[0].outerHTML= "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @merge_request)}";
+$('aside.right-sidebar').effect('highlight')
 merge_request = new MergeRequest();

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

@@ -1,4 +1,8 @@
 .block.participants
+  .sidebar-collapsed-icon
+    = icon('users')
+    %span
+      = participants.count
   .title
     = pluralize participants.count, "participant"
   - participants.each do |participant|

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

@@ -1,6 +1,35 @@
-.issuable-sidebar.issuable-affix
+%aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
+  .issuable-sidebar
+    .block
+      %span.issuable-count.pull-left
+        = issuable.iid
+        of
+        = issuable_count(:all, @project)
+      %span.pull-right
+        %a.gutter-toggle{href: '#'}
+          - if sidebar_gutter_collapsed?
+            = icon('angle-double-left')
+          - else
+            = icon('angle-double-right')
+      .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'}
+        - if has_prev_issuable?(@project, issuable.id)
+          = link_to 'Prev', issuable_link_prev(@project, issuable), class: 'btn btn-default'
+        - else
+          %a.btn.btn-default.disabled{href: '#'}
+            Prev
+        - if has_next_issuable?(@project, issuable.id)
+          = link_to 'Next', issuable_link_next(@project, issuable), class: 'btn btn-default'
+        - else
+          %a.btn.btn-default.disabled{href: '#'}
+            Next
+
     = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
       .block.assignee
+        .sidebar-collapsed-icon
+          - if issuable.assignee
+            = link_to_member_avatar(issuable.assignee, size: 24)
+          - else
+            = icon('user')
         .title
           %label
             Assignee
@@ -20,6 +49,13 @@
           = 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
+        .sidebar-collapsed-icon
+          = icon('balance-scale')
+          %span
+            - if issuable.milestone
+              = issuable.milestone.title
+            - else
+              No
         .title
           %label
             Milestone
@@ -41,7 +77,11 @@
           = f.submit class: 'btn hide'
 
       - if issuable.project.labels.any?
-      .block
+        .block.labels
+          .sidebar-collapsed-icon
+            = icon('tags')
+            %span
+              = issuable.labels.count
           .title
             %label Labels
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
@@ -58,10 +98,12 @@
               { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
 
       = render "shared/issuable/participants", participants: issuable.participants(current_user)
-
+      %hr
       - if current_user
         - subscribed = issuable.subscribed?(current_user)
         .block.light
+          .sidebar-collapsed-icon
+            = icon('rss')
           .title
             %label.light Notifications
           - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
@@ -74,7 +116,9 @@
               You're receiving notifications because you're subscribed to this thread.
 
       - project_ref = cross_project_reference(@project, issuable)
-    .block
+      .block.project-reference
+        .sidebar-collapsed-icon
+          = icon('clipboard')
         .title
         .cross-project-reference
           %span