Added masonry layout

Possibly need to change masonry library but so far it is the only one I found that works well

6 files changed, 85 insertions, 17 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 09f5caee921..ef73d381fb4 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -5,6 +5,7 @@
 //= require vue
 //= require vue-resource
 //= require Sortable
+//= require masonry
 //= require_tree ./models
 //= require_tree ./stores
 //= require_tree ./services
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index d4b3bcc71d7..e06fa58b3b6 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -10,11 +10,39 @@
     data() {
       return Store.modal;
     },
+    watch: {
+      activeTab() {
+        this.$nextTick(() => {
+          this.destroyMasonry();
+          this.initMasonry();
+        });
+      },
+    },
     computed: {
       loading() {
         return this.issues.length === 0;
       },
     },
+    methods: {
+      toggleIssue(issue) {
+        issue.selected = !issue.selected;
+      },
+      showIssue(issue) {
+        if (this.activeTab === 'all') return true;
+
+        return issue.selected;
+      },
+      initMasonry() {
+        listMasonry = new Masonry(this.$refs.list, {
+          transitionDuration: 0,
+        });
+      },
+      destroyMasonry() {
+        if (listMasonry) {
+          listMasonry.destroy();
+        }
+      }
+    },
     mounted() {
       gl.boardService.getBacklog()
         .then((res) => {
@@ -23,8 +51,16 @@
           data.forEach((issueObj) => {
             this.issues.push(new ListIssue(issueObj));
           });
+
+          this.$nextTick(() => {
+            this.initMasonry();
+          });
         });
     },
+    destroyed() {
+      this.issues = [];
+      this.destroyMasonry();
+    },
     components: {
       'issue-card-inner': gl.issueBoards.IssueCardInner,
     },
@@ -33,18 +69,25 @@
         <i
           class="fa fa-spinner fa-spin"
           v-if="loading"></i>
-        <ul
+        <div
           class="add-issues-list-columns list-unstyled"
-          v-if="!loading">
-          <li
-            class="card"
-            v-for="issue in issues">
-            <issue-card-inner
-              :issue="issue"
-              :issue-link-base="'/'">
-            </issue-card-inner>
-          </li>
-        </ul>
+          ref="list"
+          v-show="!loading">
+          <div
+            v-for="issue in issues"
+            v-if="showIssue(issue)"
+            class="card-parent">
+            <div
+              class="card"
+              :class="{ 'is-active': issue.selected }"
+              @click="toggleIssue(issue)">
+              <issue-card-inner
+                :issue="issue"
+                :issue-link-base="'/'">
+              </issue-card-inner>
+            </div>
+          </div>
+        </div>
       </section>
     `,
   });
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index bfdfd7e2bf5..58fb75f839f 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -14,6 +14,19 @@
         this.activeTab = tab;
       },
     },
+    computed: {
+      selectedCount() {
+        let count = 0;
+
+        this.issues.forEach((issue) => {
+          if (issue.selected) {
+            count += 1;
+          }
+        });
+
+        return count;
+      },
+    },
     template: `
       <div class="top-area">
         <ul class="nav-links issues-state-filters">
@@ -35,7 +48,7 @@
               @click.prevent="changeTab('selected')">
               <span>Selected issues</span>
               <span class="badge">
-                0
+                {{ selectedCount }}
               </span>
             </a>
           </li>
diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6
index 31531c3ee34..a36a146b023 100644
--- a/app/assets/javascripts/boards/models/issue.js.es6
+++ b/app/assets/javascripts/boards/models/issue.js.es6
@@ -12,6 +12,7 @@ class ListIssue {
     this.dueDate = obj.due_date;
     this.subscribed = obj.subscribed;
     this.labels = [];
+    this.selected = false;
 
     if (obj.assignee) {
       this.assignee = new ListUser(obj.assignee);
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 57de80e448c..42216d429c6 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -14,7 +14,7 @@
     },
     modal: {
       issues: [],
-      showAddIssuesModal: false,
+      showAddIssuesModal: true,
       activeTab: 'all',
     },
     moving: {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 6b36fe8bac7..f41d4cdd45d 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -390,10 +390,16 @@
   .top-area {
     margin-bottom: 10px;
   }
+
+  .form-control {
+    margin-bottom: 10px;
+  }
 }
 
 .add-issues-list {
   flex: 1;
+  margin-left: -$gl-vert-padding;
+  margin-right: -$gl-vert-padding;
   overflow-y: scroll;
 }
 
@@ -406,8 +412,12 @@
 }
 
 .add-issues-list-columns {
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-left: -5px;
-  margin-right: -5px;
+  .card-parent {
+    width: (100% / 3);
+    padding: 0 $gl-vert-padding ($gl-vert-padding * 2);
+  }
+
+  .card {
+    cursor: pointer;
+  }
 }