Improved issue sidebar

Updated the spacing throughout the sidebar so that it fits better on smaller screens
Added more participants button

Closes #13353

app/assets/javascripts/issue.js.coffee

@@ -7,6 +7,7 @@ class @Issue
     # Prevent duplicate event bindings
     @disableTaskList()
     @fixAffixScroll()
+    @initParticipants()
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
@@ -84,3 +85,26 @@ class @Issue
       type: 'PATCH'
       url: $('form.js-issuable-update').attr('action')
       data: patchData
+
+  initParticipants: ->
+    $(document).on "click", ".js-participants-more", @toggleHiddenParticipants
+
+    # hide any participants from number 6
+    $(".js-participants-author").each (i) ->
+      if i > 6
+        $(@)
+          .addClass "js-participants-hidden hidden"
+
+  toggleHiddenParticipants: (e) ->
+    e.preventDefault()
+
+    currentText = $(this).text().trim()
+    lessText = $(this).data("less-text")
+    originalText = $(this).data("original-text")
+    
+    if currentText is originalText
+      $(this).text(lessText)
+    else
+      $(this).text(originalText)
+
+    $(".js-participants-hidden").toggleClass "hidden"

app/assets/stylesheets/pages/issuable.scss

-@media (max-width: $screen-sm-max) {
-  .issuable-affix {
-    margin-top: 20px;
-  }
-}
-
-@media (max-width: $screen-md-max) {
-  .issuable-affix {
-    position: static;
-  }
-}
-
-@media (min-width: $screen-md-max) {
-  .issuable-affix {
-    &.affix-top {
-      position: static;
-    }
-
-    &.affix {
-      position: fixed;
-      top: 70px;
-      margin-right: 35px;
-
-      &.no-affix {
-        position: relative;
-        top: 0;
-      }
-    }
-  }
-}
-
 .issuable-details {
   section {
     .issuable-discussion {
@@ -54,6 +23,10 @@
       padding: 6px 10px;
     }
   }
+
+  &.has-labels {
+    margin-bottom: -5px;
+  }
 }
 
 .issuable-sidebar {
@@ -66,8 +39,9 @@
     width: $gutter_inner_width;
     // --
 
-    &:first-child {
-      padding-top: 5px;
+    &.issuable-sidebar-header {
+      padding-top: 0;
+      padding-bottom: 10px;
     }
 
     &:last-child {
@@ -75,7 +49,6 @@
     }
 
     span {
-      margin-top: 7px;
       display: inline-block;
     }
 
@@ -84,7 +57,7 @@
     }
 
     .issuable-count {
-
+      margin-top: 7px;
     }
 
     .gutter-toggle {
@@ -99,19 +72,19 @@
 
   .title {
     color: $gl-text-color;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
+    line-height: 1;
 
     .avatar {
       margin-left: 0;
     }
 
-    label {
-      font-weight: normal;
-      margin-right: 4px;
-    }
-
     .edit-link {
       color: $gl-gray;
+
+      &:hover {
+        color: $md-link-color;
+      }
     }
   }
 
@@ -144,11 +117,6 @@
   .btn-clipboard {
     color: $gl-gray;
   }
-
-  .participants .avatar {
-    margin-top: 6px;
-    margin-right: 2px;
-  }
 }
 
 .right-sidebar {
@@ -163,8 +131,12 @@
   &.right-sidebar-expanded {
     width: $gutter_width;
 
-    hr {
-      display: none;
+    .value {
+      line-height: 1;
+    }
+
+    .bold {
+      font-weight: 600;
     }
 
     .sidebar-collapsed-icon {
@@ -172,8 +144,23 @@
     }
 
     .gutter-toggle {
+      margin-top: 7px;
       border-left: 1px solid $border-gray-light;
     }
+
+    .avatar {
+      float: left;
+      margin-right: 10px;
+      margin-bottom: 0;
+      margin-left: 0;
+    }
+
+    .username {
+      display: block;
+      margin-top: 4px;
+      font-size: 13px;
+      font-weight: normal;
+    }
   }
 
   .subscribe-button {
@@ -193,14 +180,6 @@
     width: $sidebar_collapsed_width;
     padding-top: 0;
 
-    hr {
-      margin: 0;
-      color: $gray-normal;
-      border-color: $gray-normal;
-      width: 62px;
-      margin-left: -20px
-    }
-
     .block {
       width: $sidebar_collapsed_width - 1px;
       margin-left: -19px;
@@ -209,12 +188,18 @@
       overflow: hidden;
     }
 
+    .participants {
+      border-bottom: 1px solid $border-gray-light;
+    }
+
     .hide-collapsed {
       display: none;
     }
 
     .gutter-toggle {
-      margin-left: -36px;
+      width: 100%;
+      margin-left: 0;
+      padding-left: 25px;
     }
 
     .sidebar-collapsed-icon {
@@ -241,6 +226,11 @@
         }
       }
     }
+
+    .sidebar-collapsed-user {
+      padding-bottom: 0;
+      margin-bottom: 10px;
+    }
   }
 
   .btn {
@@ -251,6 +241,13 @@
       border: 1px solid $border-gray-dark;
     }
   }
+
+  a {
+    &:hover {
+      color: $md-link-color;
+      text-decoration: none;
+    }
+  }
 }
 
 .btn-default.gutter-toggle {
@@ -270,3 +267,38 @@
     color: $gray-darkest;
   }
 }
+
+.participants-list {
+  margin: -5px -5px;
+}
+
+.participants-author {
+  display: inline-block;
+  padding: 5px 5px;
+
+  .author_link {
+    display: block;
+  }
+
+  .avatar.avatar-inline {
+    margin: 0;
+  }
+}
+
+.participants-more {
+  margin-top: 5px;
+  margin-left: 5px;
+
+  a {
+    color: #8c8c8c;
+
+    &:hover {
+      color: $gl-text-color;
+      text-decoration: none;
+    }
+
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}

app/helpers/projects_helper.rb

@@ -26,7 +26,7 @@ module ProjectsHelper
     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 = {})
+  def link_to_member(project, author, opts = {}, &block)
     default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name" }
     opts = default_opts.merge(opts)
 
@@ -44,6 +44,8 @@ module ProjectsHelper
       author_html << content_tag(:span, sanitize(author.name), class: opts[:author_class]) if opts[:name]
     end
 
+    author_html << capture(&block) if block
+
     author_html = author_html.html_safe
 
     if opts[:name]

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

+- participants_size = participants.size
+- participants_extra = participants_size - 7
 .block.participants
   .sidebar-collapsed-icon
     = icon('users')
@@ -5,6 +7,11 @@
       = participants.count
   .title.hide-collapsed
     = pluralize participants.count, "participant"
+  .hide-collapsed.participants-list
     - participants.each do |participant|
-    %span.hide-collapsed
+      .participants-author.js-participants-author
         = link_to_member(@project, participant, name: false, size: 24)
+    - if participants_extra > 0
+      %div.participants-more
+        %a.js-participants-more{href: "#", data: {original_text: "+ #{participants_size - 7} more", less_text: "- show less"}}
+          + #{participants_size - 7} more

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

 %aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
   .issuable-sidebar
-    .block
+    .block.issuable-sidebar-header
       %span.issuable-count.hide-collapsed.pull-left
         = issuable.iid
         of
         = issuables_count(issuable)
-      %span.pull-right
-        %a.gutter-toggle.js-sidebar-toggle{href: '#'}
+      %a.gutter-toggle.pull-right.js-sidebar-toggle{href: '#'}
         = sidebar_gutter_toggle_icon
       .issuable-nav.hide-collapsed.pull-right.btn-group{role: 'group', "aria-label" => '...'}
         - if prev_issuable = prev_issuable_for(issuable)
@@ -22,20 +21,20 @@
 
     = 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
+        .sidebar-collapsed-icon.sidebar-collapsed-user{data: {toggle: "tooltip", placement: "left", container: "body"}, title: issuable.assignee.to_reference}
           - if issuable.assignee
             = link_to_member_avatar(issuable.assignee, size: 24)
           - else
             = icon('user')
         .title.hide-collapsed
-          %label
           Assignee
           - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-            .pull-right
-              = link_to 'Edit', '#', class: 'edit-link'
-        .value.hide-collapsed
+            = link_to 'Edit', '#', class: 'edit-link pull-right'
+        .value.bold.hide-collapsed
           - if issuable.assignee
-            %strong= link_to_member(@project, issuable.assignee, size: 24)
+            = link_to_member(@project, issuable.assignee, size: 32) do
+              %span.username
+                = issuable.assignee.to_reference
             - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
               %a.pull-right.cannot-be-merged{href: '#', data: {toggle: 'tooltip'}, title: 'Not allowed to merge'}
                 = icon('exclamation-triangle')
@@ -54,17 +53,12 @@
             - else
               No
         .title.hide-collapsed
-          %label
           Milestone
           - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-            .pull-right
-              = link_to 'Edit', '#', class: 'edit-link'
-        .value.hide-collapsed
+            = link_to 'Edit', '#', class: 'edit-link pull-right'
+        .value.bold.hide-collapsed
           - 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
@@ -80,11 +74,10 @@
             %span
               = issuable.labels.count
           .title.hide-collapsed
-            %label Labels
+            Labels
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-              .pull-right
-                = link_to 'Edit', '#', class: 'edit-link'
-          .value.issuable-show-labels.hide-collapsed
+              = link_to 'Edit', '#', class: 'edit-link pull-right'
+          .value.issuable-show-labels.hide-collapsed{class: ("has-labels" if issuable.labels.any?)}
             - if issuable.labels.any?
               - issuable.labels.each do |label|
                 = link_to_label(label, type: issuable.to_ability_name)
@@ -95,14 +88,13 @@
               { 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.subscription{data: {url: toggle_subscription_path(issuable)}}
           .sidebar-collapsed-icon
             = icon('rss')
           .title.hide-collapsed
-            %label.light Notifications
+            Notifications
           - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
           %button.btn.btn-block.btn-gray.subscribe-button.hide-collapsed{:type => 'button'}
             %span= subscribed ? 'Unsubscribe' : 'Subscribe'