Merge branch 'multiple-assignees-fe-issues-list' into 'multiple_assignees_review'

Add multiple assignees to issues list

See merge request !1509

app/assets/stylesheets/framework/avatar.scss

@@ -93,3 +93,14 @@
     align-self: center;
   }
 }
+
+.avatar-counter {
+  background-color: $gray-darkest;
+  color: $white-light;
+  border: 1px solid $avatar-counter-border-color;
+  border-radius: 1em;
+  font-family: $regular_font;
+  font-size: 9px;
+  line-height: 16px;
+  text-align: center;
+}

app/assets/stylesheets/framework/lists.scss

@@ -261,6 +261,7 @@ ul.controls {
       .avatar-inline {
         margin-left: 0;
         margin-right: 0;
+        margin-bottom: 0;
       }
     }
   }

app/assets/stylesheets/framework/variables.scss

@@ -439,6 +439,7 @@ $help-shortcut-header-color: #333;
 $issues-today-bg: #f3fff2;
 $issues-today-border: #e1e8d5;
 $compare-display-color: #888;
+$avatar-counter-border-color: #e6e6e6;
 
 /*
 * jQuery UI

app/assets/stylesheets/pages/issuable.scss

@@ -481,6 +481,16 @@
         vertical-align: text-top;
       }
     }
+
+    .avatar-counter {
+      display: inline-block;
+      vertical-align: middle;
+      min-width: 16px;
+      line-height: 14px;
+      height: 16px;
+      padding-left: 2px;
+      padding-right: 2px;
+    }
   }
 }
 

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

@@ -15,8 +15,7 @@
 
           - if issue.assignees.any?
             %li
-              - issue.assignees.each do |assignee|
-                = link_to_member(@project, assignee, name: false, title: "Assigned to :name")
+              = render 'shared/issuable/assignees', project: @project, issue: issue
 
           = render 'shared/issuable_meta_data', issuable: issue
 

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

+- max_render = 3
+- max = [max_render, issue.assignees.length].min
+
+- issue.assignees.each_with_index do |assignee, index|
+  - if index < max
+    = link_to_member(@project, assignee, name: false, title: "Assigned to :name")
+
+- if issue.assignees.length > max_render
+  - counter = issue.assignees.length - max_render
+
+  %span{ class: 'avatar-counter has-tooltip', data: { container: 'body', placement: 'bottom', 'line-type' => 'old', 'original-title' => "+#{counter} more assignees" } }
+    - if counter < 99
+      = "+#{counter}"
+    - else
+      99+