Add multiple assignees to issue board card

app/assets/javascripts/boards/components/issue_card_inner.js

@@ -32,18 +32,36 @@ import eventHub from '../eventhub';
         default: false,
       },
     },
+    data() {
+      return {
+        limitBeforeCounter: 3,
+        maxRender: 4,
+        maxCounter: 99,
+      };
+    },
     computed: {
-      cardUrl() {
-        return `${this.issueLinkBase}/${this.issue.id}`;
+      numberOverLimit() {
+        return this.issue.assignees.length - this.limitBeforeCounter;
+      },
+      assigneeCounterTooltip() {
+        return `${this.assigneeCounterLabel} more`;
       },
-      assigneeUrl() {
-        return `${this.rootPath}${this.issue.assignee.username}`;
+      assigneeCounterLabel() {
+        if (this.numberOverLimit > this.maxCounter) {
+          return `${this.maxCounter}+`;
+        }
+
+        return `+${this.numberOverLimit}`;
       },
-      assigneeUrlTitle() {
-        return `Assigned to ${this.issue.assignee.name}`;
+      shouldRenderCounter() {
+        if (this.issue.assignees.length <= this.maxRender) {
+          return false;
+        }
+
+        return this.issue.assignees.length > this.numberOverLimit;
       },
-      avatarUrlTitle() {
-        return `Avatar for ${this.issue.assignee.name}`;
+      cardUrl() {
+        return `${this.issueLinkBase}/${this.issue.id}`;
       },
       issueId() {
         return `#${this.issue.id}`;
@@ -53,6 +71,28 @@ import eventHub from '../eventhub';
       },
     },
     methods: {
+      isIndexLessThanlimit(index) {
+        return index < this.limitBeforeCounter;
+      },
+      shouldRenderAssignee(index) {
+        // Eg. maxRender is 4,
+        // Render up to all 4 assignees if there are only 4 assigness
+        // Otherwise render up to the limitBeforeCounter
+        if (this.issue.assignees.length <= this.maxRender) {
+          return index < this.maxRender;
+        }
+
+        return index < this.limitBeforeCounter;
+      },
+      assigneeUrl(assignee) {
+        return `${this.rootPath}${assignee.username}`;
+      },
+      assigneeUrlTitle(assignee) {
+        return `Assigned to ${assignee.name}`;
+      },
+      avatarUrlTitle(assignee) {
+        return `Avatar for ${assignee.name}`;
+      },
       showLabel(label) {
         if (!this.list) return true;
 
@@ -106,23 +146,37 @@ import eventHub from '../eventhub';
               {{ issueId }}
             </span>
           </h4>
+          <div class="card-assignee">
             <a
-            class="card-assignee has-tooltip js-no-trigger"
-            :href="assigneeUrl"
-            :title="assigneeUrlTitle"
-            v-if="issue.assignee"
+              class="has-tooltip js-no-trigger"
+              :href="assigneeUrl(assignee)"
+              :title="assigneeUrlTitle(assignee)"
+              v-for="(assignee, index) in issue.assignees"
+              v-if="shouldRenderAssignee(index)"
               data-container="body"
+              data-placement="bottom"
             >
               <img
                 class="avatar avatar-inline s20"
-              :src="issue.assignee.avatar"
+                :src="assignee.avatar"
                 width="20"
                 height="20"
-              :alt="avatarUrlTitle"
+                :alt="avatarUrlTitle(assignee)"
               />
             </a>
+            <span
+              class="avatar-counter has-tooltip"
+              :title="assigneeCounterTooltip"
+              v-if="shouldRenderCounter"
+            >
+             {{ assigneeCounterLabel }}
+            </span>
           </div>
-        <div class="card-footer" v-if="showLabelFooter">
+        </div>
+        <div
+          class="card-footer"
+          v-if="showLabelFooter"
+        >
           <button
             class="label color-label has-tooltip"
             v-for="label in issue.labels"

app/assets/javascripts/boards/models/issue.js

@@ -15,14 +15,9 @@ class ListIssue {
     this.subscribed = obj.subscribed;
     this.labels = [];
     this.selected = false;
-    this.assignee = false;
     this.position = obj.relative_position || Infinity;
     this.milestone_id = obj.milestone_id;
 
-    if (obj.assignee) {
-      this.assignee = new ListUser(obj.assignee);
-    }
-
     if (obj.milestone) {
       this.milestone = new ListMilestone(obj.milestone);
     }
@@ -30,6 +25,8 @@ class ListIssue {
     obj.labels.forEach((label) => {
       this.labels.push(new ListLabel(label));
     });
+
+    this.assignees = obj.assignees.map(a => new ListUser(a));
   }
 
   addLabel (label) {

app/assets/stylesheets/pages/boards.scss

@@ -236,8 +236,13 @@
     margin-bottom: 5px;
   }
 
-  &.is-active {
+  &.is-active,
+  &.is-active .card-assignee:hover a {
     background-color: $row-hover;
+
+    &:first-child:not(:only-child) {
+      box-shadow: -10px 0 10px 1px $row-hover;
+    }
   }
 
   .label {
@@ -253,7 +258,7 @@
 }
 
 .card-title {
-  margin: 0;
+  margin: 0 30px 0 0;
   font-size: 1em;
   line-height: inherit;
 
@@ -269,10 +274,69 @@
   min-height: 20px;
 
   .card-assignee {
-    margin-left: auto;
-    margin-right: 5px;
-    padding-left: 10px;
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    right: 15px;
+    height: 20px;
+    width: 20px;
+
+    .avatar-counter {
+      display: none;
+      vertical-align: middle;
+      min-width: 20px;
+      line-height: 19px;
       height: 20px;
+      padding-left: 2px;
+      padding-right: 2px;
+      border-radius: 2em;
+    }
+
+    img {
+      vertical-align: top;
+    }
+
+    a {
+      position: relative;
+      margin-left: -15px;
+    }
+
+    a:nth-child(1) {
+      z-index: 3;
+    }
+
+    a:nth-child(2) {
+      z-index: 2;
+    }
+
+    a:nth-child(3) {
+      z-index: 1;
+    }
+
+    a:nth-child(4) {
+      display: none;
+    }
+
+    &:hover {
+      .avatar-counter {
+        display: inline-block;
+      }
+
+      a {
+        position: static;
+        background-color: $white-light;
+        transition: background-color 0s;
+        margin-left: auto;
+
+        &:nth-child(4) {
+          display: block;
+        }
+
+        &:first-child:not(:only-child) {
+          box-shadow: -10px 0 10px 1px $white-light;
+        }
+      }
+    }
   }
 
   .avatar {