From a132b7d8ce0d962272de5932568a46b64b6dfc5e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 24 Jan 2017 10:27:41 +0000
Subject: [PATCH 01/53] Add issues to boards list

This removes the backlog list & instead creates a modal window that will
list all issues that are not part of a list for easy adding onto the
board

Closes #26205
---
 .../javascripts/boards/boards_bundle.js.es6   | 17 +++-
 .../boards/components/board_card.js.es6       | 29 +-----
 .../boards/components/issue_card_inner.js.es6 | 89 +++++++++++++++++++
 .../boards/components/modal/dismiss.js.es6    | 28 ++++++
 .../boards/components/modal/footer.js.es6     | 33 +++++++
 .../boards/components/modal/header.js.es6     | 31 +++++++
 .../boards/components/modal/index.es6         | 32 +++++++
 .../boards/components/modal/list.js.es6       | 51 +++++++++++
 .../boards/components/modal/search.js.es6     | 14 +++
 .../boards/components/modal/tabs.js.es6       | 46 ++++++++++
 .../boards/services/board_service.js.es6      | 10 +++
 .../boards/stores/boards_store.js.es6         |  5 ++
 app/assets/stylesheets/pages/boards.scss      | 52 ++++++++++-
 app/controllers/projects/boards_controller.rb | 23 ++++-
 app/views/projects/boards/_show.html.haml     |  1 +
 .../boards/components/_card.html.haml         | 25 +-----
 app/views/shared/issuable/_filter.html.haml   |  2 +
 config/routes/project.rb                      |  2 +
 18 files changed, 438 insertions(+), 52 deletions(-)
 create mode 100644 app/assets/javascripts/boards/components/issue_card_inner.js.es6
 create mode 100644 app/assets/javascripts/boards/components/modal/dismiss.js.es6
 create mode 100644 app/assets/javascripts/boards/components/modal/footer.js.es6
 create mode 100644 app/assets/javascripts/boards/components/modal/header.js.es6
 create mode 100644 app/assets/javascripts/boards/components/modal/index.es6
 create mode 100644 app/assets/javascripts/boards/components/modal/list.js.es6
 create mode 100644 app/assets/javascripts/boards/components/modal/search.js.es6
 create mode 100644 app/assets/javascripts/boards/components/modal/tabs.js.es6

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index f9766471780..d87a1de7eee 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -13,6 +13,7 @@
 //= require ./components/board
 //= require ./components/board_sidebar
 //= require ./components/new_list_dropdown
+//= require ./components/modal
 //= require ./vue_resource_interceptor
 
 $(() => {
@@ -31,7 +32,8 @@ $(() => {
     el: $boardApp,
     components: {
       'board': gl.issueBoards.Board,
-      'board-sidebar': gl.issueBoards.BoardSidebar
+      'board-sidebar': gl.issueBoards.BoardSidebar,
+      'board-add-issues-modal': gl.issueBoards.IssuesModal,
     },
     data: {
       state: Store.state,
@@ -55,12 +57,12 @@ $(() => {
       gl.boardService.all()
         .then((resp) => {
           resp.json().forEach((board) => {
+            if (board.list_type === 'backlog') return;
+
             const list = Store.addList(board);
 
             if (list.type === 'done') {
               list.position = Infinity;
-            } else if (list.type === 'backlog') {
-              list.position = -1;
             }
           });
 
@@ -81,4 +83,13 @@ $(() => {
       gl.issueBoards.newListDropdownInit();
     }
   });
+
+  // This element is outside the Vue app
+  $(document)
+    .off('click', '.js-show-add-issues')
+    .on('click', '.js-show-add-issues', (e) => {
+      e.preventDefault();
+
+      Store.modal.showAddIssuesModal = true;
+    });
 });
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 5fc50280811..ab4226ded1d 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -1,4 +1,5 @@
 /* eslint-disable comma-dangle, space-before-function-paren, dot-notation */
+//= require ./issue_card_inner
 /* global Vue */
 
 (() => {
@@ -9,6 +10,9 @@
 
   gl.issueBoards.BoardCard = Vue.extend({
     template: '#js-board-list-card',
+    components: {
+      'issue-card-inner': gl.issueBoards.IssueCardInner,
+    },
     props: {
       list: Object,
       issue: Object,
@@ -28,31 +32,6 @@
       }
     },
     methods: {
-      filterByLabel (label, e) {
-        let labelToggleText = label.title;
-        const labelIndex = Store.state.filters['label_name'].indexOf(label.title);
-        $(e.target).tooltip('hide');
-
-        if (labelIndex === -1) {
-          Store.state.filters['label_name'].push(label.title);
-          $('.labels-filter').prepend(`<input type="hidden" name="label_name[]" value="${label.title}" />`);
-        } else {
-          Store.state.filters['label_name'].splice(labelIndex, 1);
-          labelToggleText = Store.state.filters['label_name'][0];
-          $(`.labels-filter input[name="label_name[]"][value="${label.title}"]`).remove();
-        }
-
-        const selectedLabels = Store.state.filters['label_name'];
-        if (selectedLabels.length === 0) {
-          labelToggleText = 'Label';
-        } else if (selectedLabels.length > 1) {
-          labelToggleText = `${selectedLabels[0]} + ${selectedLabels.length - 1} more`;
-        }
-
-        $('.labels-filter .dropdown-toggle-text').text(labelToggleText);
-
-        Store.updateFiltersUrl();
-      },
       mouseDown () {
         this.showDetail = true;
       },
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js.es6 b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
new file mode 100644
index 00000000000..6a7e9419503
--- /dev/null
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
@@ -0,0 +1,89 @@
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.IssueCardInner = Vue.extend({
+    props: [
+      'issue', 'issueLinkBase', 'list',
+    ],
+    methods: {
+      showLabel(label) {
+        if (!this.list) return true;
+
+        return !this.list.label || label.id !== this.list.label.id;
+      },
+      filterByLabel(label, e) {
+        let labelToggleText = label.title;
+        const labelIndex = Store.state.filters.label_name.indexOf(label.title);
+        $(e.target).tooltip('hide');
+
+        if (labelIndex === -1) {
+          Store.state.filters.label_name.push(label.title);
+          $('.labels-filter').prepend(`<input type="hidden" name="label_name[]" value="${label.title}" />`);
+        } else {
+          Store.state.filters.label_name.splice(labelIndex, 1);
+          labelToggleText = Store.state.filters.label_name[0];
+          $(`.labels-filter input[name="label_name[]"][value="${label.title}"]`).remove();
+        }
+
+        const selectedLabels = Store.state.filters.label_name;
+        if (selectedLabels.length === 0) {
+          labelToggleText = 'Label';
+        } else if (selectedLabels.length > 1) {
+          labelToggleText = `${selectedLabels[0]} + ${selectedLabels.length - 1} more`;
+        }
+
+        $('.labels-filter .dropdown-toggle-text').text(labelToggleText);
+
+        Store.updateFiltersUrl();
+      },
+    },
+    template: `
+      <div>
+        <h4 class="card-title">
+          <i
+            class="fa fa-eye-flash"
+            v-if="issue.confidential"></i>
+          <a
+            :href="issueLinkBase + '/' + issue.id"
+            :title="issue.title">
+            {{ issue.title }}
+          </a>
+        </h4>
+        <div class="card-footer">
+          <span
+            class="card-number"
+            v-if="issue.id">
+            #{{issue.id}}
+          </span>
+          <a
+            class="has-tooltip"
+            :href="issue.assignee.username"
+            :title="'Assigned to ' + issue.assignee.name"
+            v-if="issue.assignee"
+            data-container="body">
+            <img
+              class="avatar avatar-inline s20"
+              :src="issue.assignee.avatar"
+              width="20"
+              height="20" />
+          </a>
+          <button
+            class="label color-label has-tooltip"
+            v-for="label in issue.labels"
+            type="button"
+            v-if="showLabel(label)"
+            @click="filterByLabel(label, $event)"
+            :style="{ backgroundColor: label.color, color: label.textColor }"
+            :title="label.description"
+            data-container="body">
+            {{ label.title }}
+          </button>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/dismiss.js.es6 b/app/assets/javascripts/boards/components/modal/dismiss.js.es6
new file mode 100644
index 00000000000..b5027f004c6
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/dismiss.js.es6
@@ -0,0 +1,28 @@
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.DismissModal = Vue.extend({
+    data() {
+      return Store.modal;
+    },
+    methods: {
+      toggleModal(toggle) {
+        this.showAddIssuesModal = toggle;
+      },
+    },
+    template: `
+      <button
+        type="button"
+        class="close"
+        data-dismiss="modal"
+        aria-label="Close"
+        @click="toggleModal(false)">
+        <span aria-hidden="true">×</span>
+      </button>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
new file mode 100644
index 00000000000..9cb48448a87
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -0,0 +1,33 @@
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.ModalFooter = Vue.extend({
+    data() {
+      return Store.modal;
+    },
+    methods: {
+      hideModal() {
+        this.showAddIssuesModal = false;
+      },
+    },
+    template: `
+      <footer class="form-actions add-issues-footer">
+        <button
+          class="btn btn-success pull-left"
+          type="button">
+          Add issues
+        </button>
+        <button
+          class="btn btn-default pull-right"
+          type="button"
+          @click="hideModal">
+          Cancel
+        </button>
+      </footer>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
new file mode 100644
index 00000000000..74681fa4bcf
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -0,0 +1,31 @@
+//= require ./dismiss
+//= require ./tabs
+//= require ./search
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.IssuesModalHeader = Vue.extend({
+    data() {
+      return Store.modal;
+    },
+    components: {
+      'modal-dismiss': gl.issueBoards.DismissModal,
+      'modal-tabs': gl.issueBoards.ModalTabs,
+      'modal-search': gl.issueBoards.ModalSearch,
+    },
+    template: `
+      <header class="add-issues-header">
+        <h2>
+          Add issues to board
+          <modal-dismiss></modal-dismiss>
+        </h2>
+        <modal-tabs></modal-tabs>
+        <modal-search></modal-search>
+      </header>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/index.es6 b/app/assets/javascripts/boards/components/modal/index.es6
new file mode 100644
index 00000000000..bedd7c9735a
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/index.es6
@@ -0,0 +1,32 @@
+//= require ./header
+//= require ./list
+//= require ./footer
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.IssuesModal = Vue.extend({
+    data() {
+      return Store.modal;
+    },
+    components: {
+      'modal-header': gl.issueBoards.IssuesModalHeader,
+      'modal-list': gl.issueBoards.ModalList,
+      'modal-footer': gl.issueBoards.ModalFooter,
+    },
+    template: `
+      <div
+        class="add-issues-modal"
+        v-if="showAddIssuesModal">
+        <div class="add-issues-container">
+          <modal-header></modal-header>
+          <modal-list></modal-list>
+          <modal-footer></modal-footer>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
new file mode 100644
index 00000000000..4e060895c5d
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -0,0 +1,51 @@
+/* global Vue */
+/* global ListIssue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.ModalList = Vue.extend({
+    data() {
+      return Store.modal;
+    },
+    computed: {
+      loading() {
+        return this.issues.length === 0;
+      },
+    },
+    mounted() {
+      gl.boardService.getBacklog()
+        .then((res) => {
+          const data = res.json();
+
+          data.forEach((issueObj) => {
+            this.issues.push(new ListIssue(issueObj));
+          });
+        });
+    },
+    components: {
+      'issue-card-inner': gl.issueBoards.IssueCardInner,
+    },
+    template: `
+      <section class="add-issues-list">
+        <i
+          class="fa fa-spinner fa-spin"
+          v-if="loading"></i>
+        <ul
+          class="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>
+      </section>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/search.js.es6 b/app/assets/javascripts/boards/components/modal/search.js.es6
new file mode 100644
index 00000000000..714c9240d4d
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/search.js.es6
@@ -0,0 +1,14 @@
+/* global Vue */
+(() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.ModalSearch = Vue.extend({
+    template: `
+      <input
+        placeholder="Search issues..."
+        class="form-control"
+        type="search" />
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
new file mode 100644
index 00000000000..bfdfd7e2bf5
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -0,0 +1,46 @@
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.ModalTabs = Vue.extend({
+    data() {
+      return Store.modal;
+    },
+    methods: {
+      changeTab(tab) {
+        this.activeTab = tab;
+      },
+    },
+    template: `
+      <div class="top-area">
+        <ul class="nav-links issues-state-filters">
+          <li :class="{ 'active': activeTab == 'all' }">
+            <a
+              href="#"
+              role="button"
+              @click.prevent="changeTab('all')">
+              <span>All issues</span>
+              <span class="badge">
+                {{ issues.length }}
+              </span>
+            </a>
+          </li>
+          <li :class="{ 'active': activeTab == 'selected' }">
+            <a
+              href="#"
+              role="button"
+              @click.prevent="changeTab('selected')">
+              <span>Selected issues</span>
+              <span class="badge">
+                0
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index ea55158306b..4625b13d5f3 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -3,6 +3,12 @@
 
 class BoardService {
   constructor (root, boardId) {
+    this.boards = Vue.resource(`${root}{/id}.json`, {}, {
+      backlog: {
+        method: 'GET',
+        url: `${root}/${boardId}/backlog.json`
+      }
+    });
     this.lists = Vue.resource(`${root}/${boardId}/lists{/id}`, {}, {
       generate: {
         method: 'POST',
@@ -65,6 +71,10 @@ class BoardService {
       issue
     });
   }
+
+  getBacklog() {
+    return this.boards.backlog();
+  }
 }
 
 window.BoardService = BoardService;
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index cdf1b09c0a4..57de80e448c 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -12,6 +12,11 @@
     detail: {
       issue: {}
     },
+    modal: {
+      issues: [],
+      showAddIssuesModal: false,
+      activeTab: 'all',
+    },
     moving: {
       issue: {},
       list: {}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index f2d60bff2b5..5390bad1b33 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -250,11 +250,12 @@
 }
 
 .issue-boards-search {
-  width: 290px;
+  width: 395px;
 
   .form-control {
     display: inline-block;
     width: 210px;
+    margin-right: 10px
   }
 }
 
@@ -354,3 +355,52 @@
     padding-right: 0;
   }
 }
+
+.add-issues-modal {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba($black, .3);
+  z-index: 9999;
+}
+
+.add-issues-container {
+  display: flex;
+  flex-direction: column;
+  width: 90vw;
+  height: 85vh;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 25px 15px 0;
+  background-color: $white-light;
+  border-radius: $border-radius-default;
+  box-shadow: 0 2px 12px rgba($black, .5);
+}
+
+.add-issues-header {
+  > h2 {
+    margin: 0;
+    font-size: 18px;
+  }
+
+  .top-area {
+    margin-bottom: 10px;
+  }
+}
+
+.add-issues-list {
+  flex: 1;
+  overflow-y: scroll;
+}
+
+.add-issues-footer {
+  margin-top: auto;
+  margin-left: -15px;
+  margin-right: -15px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
diff --git a/app/controllers/projects/boards_controller.rb b/app/controllers/projects/boards_controller.rb
index 808affa4f98..7a2e2324323 100644
--- a/app/controllers/projects/boards_controller.rb
+++ b/app/controllers/projects/boards_controller.rb
@@ -1,7 +1,7 @@
 class Projects::BoardsController < Projects::ApplicationController
   include IssuableCollections
 
-  before_action :authorize_read_board!, only: [:index, :show]
+  # before_action :authorize_read_board!, only: [:index, :show, :backlog]
 
   def index
     @boards = ::Boards::ListService.new(project, current_user).execute
@@ -25,6 +25,27 @@ class Projects::BoardsController < Projects::ApplicationController
     end
   end
 
+  def backlog
+    board = project.boards.find(params[:id])
+
+    @issues = issues_collection
+    @issues = @issues.where.not(
+      LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
+               .where(label_id: board.lists.movable.pluck(:label_id)).limit(1).arel.exists
+    )
+    @issues = @issues.page(params[:page])
+
+    render json: @issues.as_json(
+      labels: true,
+      only: [:iid, :title, :confidential, :due_date],
+      include: {
+        assignee: { only: [:id, :name, :username], methods: [:avatar_url] },
+        milestone: { only: [:id, :title] }
+      },
+      user: current_user
+    )
+  end
+
   private
 
   def authorize_read_board!
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index 356bd50f7f3..798eace7a82 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -26,3 +26,4 @@
       ":issue-link-base" => "issueLinkBase",
       ":key" => "_uid" }
   = render "projects/boards/components/sidebar"
+  %board-add-issues-modal
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index e4c2aff46ec..51e5d739537 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -4,25 +4,6 @@
   "@mousedown" => "mouseDown",
   "@mousemove" => "mouseMove",
   "@mouseup" => "showIssue($event)" }
-  %h4.card-title
-    = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
-    %a{ ":href" => 'issueLinkBase + "/" + issue.id',
-      ":title" => "issue.title" }
-      {{ issue.title }}
-  .card-footer
-    %span.card-number{ "v-if" => "issue.id" }
-      = precede '#' do
-        {{ issue.id }}
-    %a.has-tooltip{ ":href" => "\"#{root_path}\" + issue.assignee.username",
-      ":title" => '"Assigned to " + issue.assignee.name',
-      "v-if" => "issue.assignee",
-      data: { container: 'body' } }
-      %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20, alt: "Avatar" }
-    %button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
-      type: "button",
-      "v-if" => "(!list.label || label.id !== list.label.id)",
-      "@click" => "filterByLabel(label, $event)",
-      ":style" => "{ backgroundColor: label.color, color: label.textColor }",
-      ":title" => "label.description",
-      data: { container: 'body' } }
-      {{ label.title }}
+  %issue-card-inner{ ":list" => "list",
+    ":issue" => "issue",
+    ":issue-link-base" => "issueLinkBase" }
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index b42eaabb111..b94bdf14d5e 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -38,6 +38,8 @@
             #js-boards-search.issue-boards-search
               %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
               - if can?(current_user, :admin_list, @project)
+                %button.btn.btn-create.btn-inverted.js-show-add-issues{ type: "button" }
+                  Add issues
                 .dropdown.pull-right
                   %button.btn.btn-create.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
                     Add list
diff --git a/config/routes/project.rb b/config/routes/project.rb
index efe2fbc521d..5c33bb4a6ca 100644
--- a/config/routes/project.rb
+++ b/config/routes/project.rb
@@ -266,6 +266,8 @@ constraints(ProjectUrlConstrainer.new) do
       end
 
       resources :boards, only: [:index, :show] do
+        get :backlog, on: :member
+        
         scope module: :boards do
           resources :issues, only: [:update]
 

From 94c07c21ae5cc505a5b34a71975198efe400f5a7 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 24 Jan 2017 10:49:39 +0000
Subject: [PATCH 02/53] Styling fix for list

---
 app/assets/javascripts/boards/boards_bundle.js.es6         | 2 +-
 app/assets/javascripts/boards/components/modal/list.js.es6 | 2 +-
 .../boards/components/modal/{index.es6 => modal.es6}       | 0
 app/assets/stylesheets/pages/boards.scss                   | 7 +++++++
 4 files changed, 9 insertions(+), 2 deletions(-)
 rename app/assets/javascripts/boards/components/modal/{index.es6 => modal.es6} (100%)

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index d87a1de7eee..09f5caee921 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -13,7 +13,7 @@
 //= require ./components/board
 //= require ./components/board_sidebar
 //= require ./components/new_list_dropdown
-//= require ./components/modal
+//= require ./components/modal/modal
 //= require ./vue_resource_interceptor
 
 $(() => {
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 4e060895c5d..d4b3bcc71d7 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -34,7 +34,7 @@
           class="fa fa-spinner fa-spin"
           v-if="loading"></i>
         <ul
-          class="list-unstyled"
+          class="add-issues-list-columns list-unstyled"
           v-if="!loading">
           <li
             class="card"
diff --git a/app/assets/javascripts/boards/components/modal/index.es6 b/app/assets/javascripts/boards/components/modal/modal.es6
similarity index 100%
rename from app/assets/javascripts/boards/components/modal/index.es6
rename to app/assets/javascripts/boards/components/modal/modal.es6
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 5390bad1b33..6b36fe8bac7 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -404,3 +404,10 @@
   padding-left: 15px;
   padding-right: 15px;
 }
+
+.add-issues-list-columns {
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-left: -5px;
+  margin-right: -5px;
+}

From 1fae4d8184e200f8e6a4ccafafd77b031240f04d Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 24 Jan 2017 12:20:49 +0000
Subject: [PATCH 03/53] Added masonry layout

Possibly need to change masonry library but so far it is the only one I found that works well
---
 .../javascripts/boards/boards_bundle.js.es6   |    1 +
 .../boards/components/modal/list.js.es6       |   65 +-
 .../boards/components/modal/tabs.js.es6       |   15 +-
 .../javascripts/boards/models/issue.js.es6    |    1 +
 .../boards/stores/boards_store.js.es6         |    2 +-
 app/assets/stylesheets/pages/boards.scss      |   18 +-
 vendor/assets/javascripts/masonry.js          | 2463 +++++++++++++++++
 7 files changed, 2548 insertions(+), 17 deletions(-)
 create mode 100644 vendor/assets/javascripts/masonry.js

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;
+  }
 }
diff --git a/vendor/assets/javascripts/masonry.js b/vendor/assets/javascripts/masonry.js
new file mode 100644
index 00000000000..adf62864671
--- /dev/null
+++ b/vendor/assets/javascripts/masonry.js
@@ -0,0 +1,2463 @@
+/*!
+ * Masonry PACKAGED v4.1.1
+ * Cascading grid layout library
+ * http://masonry.desandro.com
+ * MIT License
+ * by David DeSandro
+ */
+
+/**
+ * Bridget makes jQuery widgets
+ * v2.0.1
+ * MIT license
+ */
+
+/* jshint browser: true, strict: true, undef: true, unused: true */
+
+( function( window, factory ) {
+  // universal module definition
+  /*jshint strict: false */ /* globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
+      return factory( window, jQuery );
+    });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      window,
+      require('jquery')
+    );
+  } else {
+    // browser global
+    window.jQueryBridget = factory(
+      window,
+      window.jQuery
+    );
+  }
+
+}( window, function factory( window, jQuery ) {
+'use strict';
+
+// ----- utils ----- //
+
+var arraySlice = Array.prototype.slice;
+
+// helper function for logging errors
+// $.error breaks jQuery chaining
+var console = window.console;
+var logError = typeof console == 'undefined' ? function() {} :
+  function( message ) {
+    console.error( message );
+  };
+
+// ----- jQueryBridget ----- //
+
+function jQueryBridget( namespace, PluginClass, $ ) {
+  $ = $ || jQuery || window.jQuery;
+  if ( !$ ) {
+    return;
+  }
+
+  // add option method -> $().plugin('option', {...})
+  if ( !PluginClass.prototype.option ) {
+    // option setter
+    PluginClass.prototype.option = function( opts ) {
+      // bail out if not an object
+      if ( !$.isPlainObject( opts ) ){
+        return;
+      }
+      this.options = $.extend( true, this.options, opts );
+    };
+  }
+
+  // make jQuery plugin
+  $.fn[ namespace ] = function( arg0 /*, arg1 */ ) {
+    if ( typeof arg0 == 'string' ) {
+      // method call $().plugin( 'methodName', { options } )
+      // shift arguments by 1
+      var args = arraySlice.call( arguments, 1 );
+      return methodCall( this, arg0, args );
+    }
+    // just $().plugin({ options })
+    plainCall( this, arg0 );
+    return this;
+  };
+
+  // $().plugin('methodName')
+  function methodCall( $elems, methodName, args ) {
+    var returnValue;
+    var pluginMethodStr = '$().' + namespace + '("' + methodName + '")';
+
+    $elems.each( function( i, elem ) {
+      // get instance
+      var instance = $.data( elem, namespace );
+      if ( !instance ) {
+        logError( namespace + ' not initialized. Cannot call methods, i.e. ' +
+          pluginMethodStr );
+        return;
+      }
+
+      var method = instance[ methodName ];
+      if ( !method || methodName.charAt(0) == '_' ) {
+        logError( pluginMethodStr + ' is not a valid method' );
+        return;
+      }
+
+      // apply method, get return value
+      var value = method.apply( instance, args );
+      // set return value if value is returned, use only first value
+      returnValue = returnValue === undefined ? value : returnValue;
+    });
+
+    return returnValue !== undefined ? returnValue : $elems;
+  }
+
+  function plainCall( $elems, options ) {
+    $elems.each( function( i, elem ) {
+      var instance = $.data( elem, namespace );
+      if ( instance ) {
+        // set options & init
+        instance.option( options );
+        instance._init();
+      } else {
+        // initialize new instance
+        instance = new PluginClass( elem, options );
+        $.data( elem, namespace, instance );
+      }
+    });
+  }
+
+  updateJQuery( $ );
+
+}
+
+// ----- updateJQuery ----- //
+
+// set $.bridget for v1 backwards compatibility
+function updateJQuery( $ ) {
+  if ( !$ || ( $ && $.bridget ) ) {
+    return;
+  }
+  $.bridget = jQueryBridget;
+}
+
+updateJQuery( jQuery || window.jQuery );
+
+// -----  ----- //
+
+return jQueryBridget;
+
+}));
+
+/**
+ * EvEmitter v1.0.3
+ * Lil' event emitter
+ * MIT License
+ */
+
+/* jshint unused: true, undef: true, strict: true */
+
+( function( global, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, window */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD - RequireJS
+    define( 'ev-emitter/ev-emitter',factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
+    module.exports = factory();
+  } else {
+    // Browser globals
+    global.EvEmitter = factory();
+  }
+
+}( typeof window != 'undefined' ? window : this, function() {
+
+
+
+function EvEmitter() {}
+
+var proto = EvEmitter.prototype;
+
+proto.on = function( eventName, listener ) {
+  if ( !eventName || !listener ) {
+    return;
+  }
+  // set events hash
+  var events = this._events = this._events || {};
+  // set listeners array
+  var listeners = events[ eventName ] = events[ eventName ] || [];
+  // only add once
+  if ( listeners.indexOf( listener ) == -1 ) {
+    listeners.push( listener );
+  }
+
+  return this;
+};
+
+proto.once = function( eventName, listener ) {
+  if ( !eventName || !listener ) {
+    return;
+  }
+  // add event
+  this.on( eventName, listener );
+  // set once flag
+  // set onceEvents hash
+  var onceEvents = this._onceEvents = this._onceEvents || {};
+  // set onceListeners object
+  var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
+  // set flag
+  onceListeners[ listener ] = true;
+
+  return this;
+};
+
+proto.off = function( eventName, listener ) {
+  var listeners = this._events && this._events[ eventName ];
+  if ( !listeners || !listeners.length ) {
+    return;
+  }
+  var index = listeners.indexOf( listener );
+  if ( index != -1 ) {
+    listeners.splice( index, 1 );
+  }
+
+  return this;
+};
+
+proto.emitEvent = function( eventName, args ) {
+  var listeners = this._events && this._events[ eventName ];
+  if ( !listeners || !listeners.length ) {
+    return;
+  }
+  var i = 0;
+  var listener = listeners[i];
+  args = args || [];
+  // once stuff
+  var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
+
+  while ( listener ) {
+    var isOnce = onceListeners && onceListeners[ listener ];
+    if ( isOnce ) {
+      // remove listener
+      // remove before trigger to prevent recursion
+      this.off( eventName, listener );
+      // unset once flag
+      delete onceListeners[ listener ];
+    }
+    // trigger listener
+    listener.apply( this, args );
+    // get next listener
+    i += isOnce ? 0 : 1;
+    listener = listeners[i];
+  }
+
+  return this;
+};
+
+return EvEmitter;
+
+}));
+
+/*!
+ * getSize v2.0.2
+ * measure size of elements
+ * MIT license
+ */
+
+/*jshint browser: true, strict: true, undef: true, unused: true */
+/*global define: false, module: false, console: false */
+
+( function( window, factory ) {
+  'use strict';
+
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'get-size/get-size',[],function() {
+      return factory();
+    });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory();
+  } else {
+    // browser global
+    window.getSize = factory();
+  }
+
+})( window, function factory() {
+'use strict';
+
+// -------------------------- helpers -------------------------- //
+
+// get a number from a string, not a percentage
+function getStyleSize( value ) {
+  var num = parseFloat( value );
+  // not a percent like '100%', and a number
+  var isValid = value.indexOf('%') == -1 && !isNaN( num );
+  return isValid && num;
+}
+
+function noop() {}
+
+var logError = typeof console == 'undefined' ? noop :
+  function( message ) {
+    console.error( message );
+  };
+
+// -------------------------- measurements -------------------------- //
+
+var measurements = [
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'paddingBottom',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'marginBottom',
+  'borderLeftWidth',
+  'borderRightWidth',
+  'borderTopWidth',
+  'borderBottomWidth'
+];
+
+var measurementsLength = measurements.length;
+
+function getZeroSize() {
+  var size = {
+    width: 0,
+    height: 0,
+    innerWidth: 0,
+    innerHeight: 0,
+    outerWidth: 0,
+    outerHeight: 0
+  };
+  for ( var i=0; i < measurementsLength; i++ ) {
+    var measurement = measurements[i];
+    size[ measurement ] = 0;
+  }
+  return size;
+}
+
+// -------------------------- getStyle -------------------------- //
+
+/**
+ * getStyle, get style of element, check for Firefox bug
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ */
+function getStyle( elem ) {
+  var style = getComputedStyle( elem );
+  if ( !style ) {
+    logError( 'Style returned ' + style +
+      '. Are you running this code in a hidden iframe on Firefox? ' +
+      'See http://bit.ly/getsizebug1' );
+  }
+  return style;
+}
+
+// -------------------------- setup -------------------------- //
+
+var isSetup = false;
+
+var isBoxSizeOuter;
+
+/**
+ * setup
+ * check isBoxSizerOuter
+ * do on first getSize() rather than on page load for Firefox bug
+ */
+function setup() {
+  // setup once
+  if ( isSetup ) {
+    return;
+  }
+  isSetup = true;
+
+  // -------------------------- box sizing -------------------------- //
+
+  /**
+   * WebKit measures the outer-width on style.width on border-box elems
+   * IE & Firefox<29 measures the inner-width
+   */
+  var div = document.createElement('div');
+  div.style.width = '200px';
+  div.style.padding = '1px 2px 3px 4px';
+  div.style.borderStyle = 'solid';
+  div.style.borderWidth = '1px 2px 3px 4px';
+  div.style.boxSizing = 'border-box';
+
+  var body = document.body || document.documentElement;
+  body.appendChild( div );
+  var style = getStyle( div );
+
+  getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;
+  body.removeChild( div );
+
+}
+
+// -------------------------- getSize -------------------------- //
+
+function getSize( elem ) {
+  setup();
+
+  // use querySeletor if elem is string
+  if ( typeof elem == 'string' ) {
+    elem = document.querySelector( elem );
+  }
+
+  // do not proceed on non-objects
+  if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
+    return;
+  }
+
+  var style = getStyle( elem );
+
+  // if hidden, everything is 0
+  if ( style.display == 'none' ) {
+    return getZeroSize();
+  }
+
+  var size = {};
+  size.width = elem.offsetWidth;
+  size.height = elem.offsetHeight;
+
+  var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
+
+  // get all measurements
+  for ( var i=0; i < measurementsLength; i++ ) {
+    var measurement = measurements[i];
+    var value = style[ measurement ];
+    var num = parseFloat( value );
+    // any 'auto', 'medium' value will be 0
+    size[ measurement ] = !isNaN( num ) ? num : 0;
+  }
+
+  var paddingWidth = size.paddingLeft + size.paddingRight;
+  var paddingHeight = size.paddingTop + size.paddingBottom;
+  var marginWidth = size.marginLeft + size.marginRight;
+  var marginHeight = size.marginTop + size.marginBottom;
+  var borderWidth = size.borderLeftWidth + size.borderRightWidth;
+  var borderHeight = size.borderTopWidth + size.borderBottomWidth;
+
+  var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
+
+  // overwrite width and height if we can get it from style
+  var styleWidth = getStyleSize( style.width );
+  if ( styleWidth !== false ) {
+    size.width = styleWidth +
+      // add padding and border unless it's already including it
+      ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
+  }
+
+  var styleHeight = getStyleSize( style.height );
+  if ( styleHeight !== false ) {
+    size.height = styleHeight +
+      // add padding and border unless it's already including it
+      ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
+  }
+
+  size.innerWidth = size.width - ( paddingWidth + borderWidth );
+  size.innerHeight = size.height - ( paddingHeight + borderHeight );
+
+  size.outerWidth = size.width + marginWidth;
+  size.outerHeight = size.height + marginHeight;
+
+  return size;
+}
+
+return getSize;
+
+});
+
+/**
+ * matchesSelector v2.0.1
+ * matchesSelector( element, '.selector' )
+ * MIT license
+ */
+
+/*jshint browser: true, strict: true, undef: true, unused: true */
+
+( function( window, factory ) {
+  /*global define: false, module: false */
+  'use strict';
+  // universal module definition
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'desandro-matches-selector/matches-selector',factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory();
+  } else {
+    // browser global
+    window.matchesSelector = factory();
+  }
+
+}( window, function factory() {
+  'use strict';
+
+  var matchesMethod = ( function() {
+    var ElemProto = Element.prototype;
+    // check for the standard method name first
+    if ( ElemProto.matches ) {
+      return 'matches';
+    }
+    // check un-prefixed
+    if ( ElemProto.matchesSelector ) {
+      return 'matchesSelector';
+    }
+    // check vendor prefixes
+    var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
+
+    for ( var i=0; i < prefixes.length; i++ ) {
+      var prefix = prefixes[i];
+      var method = prefix + 'MatchesSelector';
+      if ( ElemProto[ method ] ) {
+        return method;
+      }
+    }
+  })();
+
+  return function matchesSelector( elem, selector ) {
+    return elem[ matchesMethod ]( selector );
+  };
+
+}));
+
+/**
+ * Fizzy UI utils v2.0.2
+ * MIT license
+ */
+
+/*jshint browser: true, undef: true, unused: true, strict: true */
+
+( function( window, factory ) {
+  // universal module definition
+  /*jshint strict: false */ /*globals define, module, require */
+
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'fizzy-ui-utils/utils',[
+      'desandro-matches-selector/matches-selector'
+    ], function( matchesSelector ) {
+      return factory( window, matchesSelector );
+    });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      window,
+      require('desandro-matches-selector')
+    );
+  } else {
+    // browser global
+    window.fizzyUIUtils = factory(
+      window,
+      window.matchesSelector
+    );
+  }
+
+}( window, function factory( window, matchesSelector ) {
+
+
+
+var utils = {};
+
+// ----- extend ----- //
+
+// extends objects
+utils.extend = function( a, b ) {
+  for ( var prop in b ) {
+    a[ prop ] = b[ prop ];
+  }
+  return a;
+};
+
+// ----- modulo ----- //
+
+utils.modulo = function( num, div ) {
+  return ( ( num % div ) + div ) % div;
+};
+
+// ----- makeArray ----- //
+
+// turn element or nodeList into an array
+utils.makeArray = function( obj ) {
+  var ary = [];
+  if ( Array.isArray( obj ) ) {
+    // use object if already an array
+    ary = obj;
+  } else if ( obj && typeof obj.length == 'number' ) {
+    // convert nodeList to array
+    for ( var i=0; i < obj.length; i++ ) {
+      ary.push( obj[i] );
+    }
+  } else {
+    // array of single index
+    ary.push( obj );
+  }
+  return ary;
+};
+
+// ----- removeFrom ----- //
+
+utils.removeFrom = function( ary, obj ) {
+  var index = ary.indexOf( obj );
+  if ( index != -1 ) {
+    ary.splice( index, 1 );
+  }
+};
+
+// ----- getParent ----- //
+
+utils.getParent = function( elem, selector ) {
+  while ( elem != document.body ) {
+    elem = elem.parentNode;
+    if ( matchesSelector( elem, selector ) ) {
+      return elem;
+    }
+  }
+};
+
+// ----- getQueryElement ----- //
+
+// use element as selector string
+utils.getQueryElement = function( elem ) {
+  if ( typeof elem == 'string' ) {
+    return document.querySelector( elem );
+  }
+  return elem;
+};
+
+// ----- handleEvent ----- //
+
+// enable .ontype to trigger from .addEventListener( elem, 'type' )
+utils.handleEvent = function( event ) {
+  var method = 'on' + event.type;
+  if ( this[ method ] ) {
+    this[ method ]( event );
+  }
+};
+
+// ----- filterFindElements ----- //
+
+utils.filterFindElements = function( elems, selector ) {
+  // make array of elems
+  elems = utils.makeArray( elems );
+  var ffElems = [];
+
+  elems.forEach( function( elem ) {
+    // check that elem is an actual element
+    if ( !( elem instanceof HTMLElement ) ) {
+      return;
+    }
+    // add elem if no selector
+    if ( !selector ) {
+      ffElems.push( elem );
+      return;
+    }
+    // filter & find items if we have a selector
+    // filter
+    if ( matchesSelector( elem, selector ) ) {
+      ffElems.push( elem );
+    }
+    // find children
+    var childElems = elem.querySelectorAll( selector );
+    // concat childElems to filterFound array
+    for ( var i=0; i < childElems.length; i++ ) {
+      ffElems.push( childElems[i] );
+    }
+  });
+
+  return ffElems;
+};
+
+// ----- debounceMethod ----- //
+
+utils.debounceMethod = function( _class, methodName, threshold ) {
+  // original method
+  var method = _class.prototype[ methodName ];
+  var timeoutName = methodName + 'Timeout';
+
+  _class.prototype[ methodName ] = function() {
+    var timeout = this[ timeoutName ];
+    if ( timeout ) {
+      clearTimeout( timeout );
+    }
+    var args = arguments;
+
+    var _this = this;
+    this[ timeoutName ] = setTimeout( function() {
+      method.apply( _this, args );
+      delete _this[ timeoutName ];
+    }, threshold || 100 );
+  };
+};
+
+// ----- docReady ----- //
+
+utils.docReady = function( callback ) {
+  var readyState = document.readyState;
+  if ( readyState == 'complete' || readyState == 'interactive' ) {
+    callback();
+  } else {
+    document.addEventListener( 'DOMContentLoaded', callback );
+  }
+};
+
+// ----- htmlInit ----- //
+
+// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
+utils.toDashed = function( str ) {
+  return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {
+    return $1 + '-' + $2;
+  }).toLowerCase();
+};
+
+var console = window.console;
+/**
+ * allow user to initialize classes via [data-namespace] or .js-namespace class
+ * htmlInit( Widget, 'widgetName' )
+ * options are parsed from data-namespace-options
+ */
+utils.htmlInit = function( WidgetClass, namespace ) {
+  utils.docReady( function() {
+    var dashedNamespace = utils.toDashed( namespace );
+    var dataAttr = 'data-' + dashedNamespace;
+    var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );
+    var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );
+    var elems = utils.makeArray( dataAttrElems )
+      .concat( utils.makeArray( jsDashElems ) );
+    var dataOptionsAttr = dataAttr + '-options';
+    var jQuery = window.jQuery;
+
+    elems.forEach( function( elem ) {
+      var attr = elem.getAttribute( dataAttr ) ||
+        elem.getAttribute( dataOptionsAttr );
+      var options;
+      try {
+        options = attr && JSON.parse( attr );
+      } catch ( error ) {
+        // log error, do not initialize
+        if ( console ) {
+          console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +
+          ': ' + error );
+        }
+        return;
+      }
+      // initialize
+      var instance = new WidgetClass( elem, options );
+      // make available via $().data('layoutname')
+      if ( jQuery ) {
+        jQuery.data( elem, namespace, instance );
+      }
+    });
+
+  });
+};
+
+// -----  ----- //
+
+return utils;
+
+}));
+
+/**
+ * Outlayer Item
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD - RequireJS
+    define( 'outlayer/item',[
+        'ev-emitter/ev-emitter',
+        'get-size/get-size'
+      ],
+      factory
+    );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
+    module.exports = factory(
+      require('ev-emitter'),
+      require('get-size')
+    );
+  } else {
+    // browser global
+    window.Outlayer = {};
+    window.Outlayer.Item = factory(
+      window.EvEmitter,
+      window.getSize
+    );
+  }
+
+}( window, function factory( EvEmitter, getSize ) {
+'use strict';
+
+// ----- helpers ----- //
+
+function isEmptyObj( obj ) {
+  for ( var prop in obj ) {
+    return false;
+  }
+  prop = null;
+  return true;
+}
+
+// -------------------------- CSS3 support -------------------------- //
+
+
+var docElemStyle = document.documentElement.style;
+
+var transitionProperty = typeof docElemStyle.transition == 'string' ?
+  'transition' : 'WebkitTransition';
+var transformProperty = typeof docElemStyle.transform == 'string' ?
+  'transform' : 'WebkitTransform';
+
+var transitionEndEvent = {
+  WebkitTransition: 'webkitTransitionEnd',
+  transition: 'transitionend'
+}[ transitionProperty ];
+
+// cache all vendor properties that could have vendor prefix
+var vendorProperties = {
+  transform: transformProperty,
+  transition: transitionProperty,
+  transitionDuration: transitionProperty + 'Duration',
+  transitionProperty: transitionProperty + 'Property',
+  transitionDelay: transitionProperty + 'Delay'
+};
+
+// -------------------------- Item -------------------------- //
+
+function Item( element, layout ) {
+  if ( !element ) {
+    return;
+  }
+
+  this.element = element;
+  // parent layout class, i.e. Masonry, Isotope, or Packery
+  this.layout = layout;
+  this.position = {
+    x: 0,
+    y: 0
+  };
+
+  this._create();
+}
+
+// inherit EvEmitter
+var proto = Item.prototype = Object.create( EvEmitter.prototype );
+proto.constructor = Item;
+
+proto._create = function() {
+  // transition objects
+  this._transn = {
+    ingProperties: {},
+    clean: {},
+    onEnd: {}
+  };
+
+  this.css({
+    position: 'absolute'
+  });
+};
+
+// trigger specified handler for event type
+proto.handleEvent = function( event ) {
+  var method = 'on' + event.type;
+  if ( this[ method ] ) {
+    this[ method ]( event );
+  }
+};
+
+proto.getSize = function() {
+  this.size = getSize( this.element );
+};
+
+/**
+ * apply CSS styles to element
+ * @param {Object} style
+ */
+proto.css = function( style ) {
+  var elemStyle = this.element.style;
+
+  for ( var prop in style ) {
+    // use vendor property if available
+    var supportedProp = vendorProperties[ prop ] || prop;
+    elemStyle[ supportedProp ] = style[ prop ];
+  }
+};
+
+ // measure position, and sets it
+proto.getPosition = function() {
+  var style = getComputedStyle( this.element );
+  var isOriginLeft = this.layout._getOption('originLeft');
+  var isOriginTop = this.layout._getOption('originTop');
+  var xValue = style[ isOriginLeft ? 'left' : 'right' ];
+  var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
+  // convert percent to pixels
+  var layoutSize = this.layout.size;
+  var x = xValue.indexOf('%') != -1 ?
+    ( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 );
+  var y = yValue.indexOf('%') != -1 ?
+    ( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 );
+
+  // clean up 'auto' or other non-integer values
+  x = isNaN( x ) ? 0 : x;
+  y = isNaN( y ) ? 0 : y;
+  // remove padding from measurement
+  x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
+  y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
+
+  this.position.x = x;
+  this.position.y = y;
+};
+
+// set settled position, apply padding
+proto.layoutPosition = function() {
+  var layoutSize = this.layout.size;
+  var style = {};
+  var isOriginLeft = this.layout._getOption('originLeft');
+  var isOriginTop = this.layout._getOption('originTop');
+
+  // x
+  var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';
+  var xProperty = isOriginLeft ? 'left' : 'right';
+  var xResetProperty = isOriginLeft ? 'right' : 'left';
+
+  var x = this.position.x + layoutSize[ xPadding ];
+  // set in percentage or pixels
+  style[ xProperty ] = this.getXValue( x );
+  // reset other property
+  style[ xResetProperty ] = '';
+
+  // y
+  var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';
+  var yProperty = isOriginTop ? 'top' : 'bottom';
+  var yResetProperty = isOriginTop ? 'bottom' : 'top';
+
+  var y = this.position.y + layoutSize[ yPadding ];
+  // set in percentage or pixels
+  style[ yProperty ] = this.getYValue( y );
+  // reset other property
+  style[ yResetProperty ] = '';
+
+  this.css( style );
+  this.emitEvent( 'layout', [ this ] );
+};
+
+proto.getXValue = function( x ) {
+  var isHorizontal = this.layout._getOption('horizontal');
+  return this.layout.options.percentPosition && !isHorizontal ?
+    ( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px';
+};
+
+proto.getYValue = function( y ) {
+  var isHorizontal = this.layout._getOption('horizontal');
+  return this.layout.options.percentPosition && isHorizontal ?
+    ( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px';
+};
+
+proto._transitionTo = function( x, y ) {
+  this.getPosition();
+  // get current x & y from top/left
+  var curX = this.position.x;
+  var curY = this.position.y;
+
+  var compareX = parseInt( x, 10 );
+  var compareY = parseInt( y, 10 );
+  var didNotMove = compareX === this.position.x && compareY === this.position.y;
+
+  // save end position
+  this.setPosition( x, y );
+
+  // if did not move and not transitioning, just go to layout
+  if ( didNotMove && !this.isTransitioning ) {
+    this.layoutPosition();
+    return;
+  }
+
+  var transX = x - curX;
+  var transY = y - curY;
+  var transitionStyle = {};
+  transitionStyle.transform = this.getTranslate( transX, transY );
+
+  this.transition({
+    to: transitionStyle,
+    onTransitionEnd: {
+      transform: this.layoutPosition
+    },
+    isCleaning: true
+  });
+};
+
+proto.getTranslate = function( x, y ) {
+  // flip cooridinates if origin on right or bottom
+  var isOriginLeft = this.layout._getOption('originLeft');
+  var isOriginTop = this.layout._getOption('originTop');
+  x = isOriginLeft ? x : -x;
+  y = isOriginTop ? y : -y;
+  return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
+};
+
+// non transition + transform support
+proto.goTo = function( x, y ) {
+  this.setPosition( x, y );
+  this.layoutPosition();
+};
+
+proto.moveTo = proto._transitionTo;
+
+proto.setPosition = function( x, y ) {
+  this.position.x = parseInt( x, 10 );
+  this.position.y = parseInt( y, 10 );
+};
+
+// ----- transition ----- //
+
+/**
+ * @param {Object} style - CSS
+ * @param {Function} onTransitionEnd
+ */
+
+// non transition, just trigger callback
+proto._nonTransition = function( args ) {
+  this.css( args.to );
+  if ( args.isCleaning ) {
+    this._removeStyles( args.to );
+  }
+  for ( var prop in args.onTransitionEnd ) {
+    args.onTransitionEnd[ prop ].call( this );
+  }
+};
+
+/**
+ * proper transition
+ * @param {Object} args - arguments
+ *   @param {Object} to - style to transition to
+ *   @param {Object} from - style to start transition from
+ *   @param {Boolean} isCleaning - removes transition styles after transition
+ *   @param {Function} onTransitionEnd - callback
+ */
+proto.transition = function( args ) {
+  // redirect to nonTransition if no transition duration
+  if ( !parseFloat( this.layout.options.transitionDuration ) ) {
+    this._nonTransition( args );
+    return;
+  }
+
+  var _transition = this._transn;
+  // keep track of onTransitionEnd callback by css property
+  for ( var prop in args.onTransitionEnd ) {
+    _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ];
+  }
+  // keep track of properties that are transitioning
+  for ( prop in args.to ) {
+    _transition.ingProperties[ prop ] = true;
+    // keep track of properties to clean up when transition is done
+    if ( args.isCleaning ) {
+      _transition.clean[ prop ] = true;
+    }
+  }
+
+  // set from styles
+  if ( args.from ) {
+    this.css( args.from );
+    // force redraw. http://blog.alexmaccaw.com/css-transitions
+    var h = this.element.offsetHeight;
+    // hack for JSHint to hush about unused var
+    h = null;
+  }
+  // enable transition
+  this.enableTransition( args.to );
+  // set styles that are transitioning
+  this.css( args.to );
+
+  this.isTransitioning = true;
+
+};
+
+// dash before all cap letters, including first for
+// WebkitTransform => -webkit-transform
+function toDashedAll( str ) {
+  return str.replace( /([A-Z])/g, function( $1 ) {
+    return '-' + $1.toLowerCase();
+  });
+}
+
+var transitionProps = 'opacity,' + toDashedAll( transformProperty );
+
+proto.enableTransition = function(/* style */) {
+  // HACK changing transitionProperty during a transition
+  // will cause transition to jump
+  if ( this.isTransitioning ) {
+    return;
+  }
+
+  // make `transition: foo, bar, baz` from style object
+  // HACK un-comment this when enableTransition can work
+  // while a transition is happening
+  // var transitionValues = [];
+  // for ( var prop in style ) {
+  //   // dash-ify camelCased properties like WebkitTransition
+  //   prop = vendorProperties[ prop ] || prop;
+  //   transitionValues.push( toDashedAll( prop ) );
+  // }
+  // munge number to millisecond, to match stagger
+  var duration = this.layout.options.transitionDuration;
+  duration = typeof duration == 'number' ? duration + 'ms' : duration;
+  // enable transition styles
+  this.css({
+    transitionProperty: transitionProps,
+    transitionDuration: duration,
+    transitionDelay: this.staggerDelay || 0
+  });
+  // listen for transition end event
+  this.element.addEventListener( transitionEndEvent, this, false );
+};
+
+// ----- events ----- //
+
+proto.onwebkitTransitionEnd = function( event ) {
+  this.ontransitionend( event );
+};
+
+proto.onotransitionend = function( event ) {
+  this.ontransitionend( event );
+};
+
+// properties that I munge to make my life easier
+var dashedVendorProperties = {
+  '-webkit-transform': 'transform'
+};
+
+proto.ontransitionend = function( event ) {
+  // disregard bubbled events from children
+  if ( event.target !== this.element ) {
+    return;
+  }
+  var _transition = this._transn;
+  // get property name of transitioned property, convert to prefix-free
+  var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName;
+
+  // remove property that has completed transitioning
+  delete _transition.ingProperties[ propertyName ];
+  // check if any properties are still transitioning
+  if ( isEmptyObj( _transition.ingProperties ) ) {
+    // all properties have completed transitioning
+    this.disableTransition();
+  }
+  // clean style
+  if ( propertyName in _transition.clean ) {
+    // clean up style
+    this.element.style[ event.propertyName ] = '';
+    delete _transition.clean[ propertyName ];
+  }
+  // trigger onTransitionEnd callback
+  if ( propertyName in _transition.onEnd ) {
+    var onTransitionEnd = _transition.onEnd[ propertyName ];
+    onTransitionEnd.call( this );
+    delete _transition.onEnd[ propertyName ];
+  }
+
+  this.emitEvent( 'transitionEnd', [ this ] );
+};
+
+proto.disableTransition = function() {
+  this.removeTransitionStyles();
+  this.element.removeEventListener( transitionEndEvent, this, false );
+  this.isTransitioning = false;
+};
+
+/**
+ * removes style property from element
+ * @param {Object} style
+**/
+proto._removeStyles = function( style ) {
+  // clean up transition styles
+  var cleanStyle = {};
+  for ( var prop in style ) {
+    cleanStyle[ prop ] = '';
+  }
+  this.css( cleanStyle );
+};
+
+var cleanTransitionStyle = {
+  transitionProperty: '',
+  transitionDuration: '',
+  transitionDelay: ''
+};
+
+proto.removeTransitionStyles = function() {
+  // remove transition
+  this.css( cleanTransitionStyle );
+};
+
+// ----- stagger ----- //
+
+proto.stagger = function( delay ) {
+  delay = isNaN( delay ) ? 0 : delay;
+  this.staggerDelay = delay + 'ms';
+};
+
+// ----- show/hide/remove ----- //
+
+// remove element from DOM
+proto.removeElem = function() {
+  this.element.parentNode.removeChild( this.element );
+  // remove display: none
+  this.css({ display: '' });
+  this.emitEvent( 'remove', [ this ] );
+};
+
+proto.remove = function() {
+  // just remove element if no transition support or no transition
+  if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {
+    this.removeElem();
+    return;
+  }
+
+  // start transition
+  this.once( 'transitionEnd', function() {
+    this.removeElem();
+  });
+  this.hide();
+};
+
+proto.reveal = function() {
+  delete this.isHidden;
+  // remove display: none
+  this.css({ display: '' });
+
+  var options = this.layout.options;
+
+  var onTransitionEnd = {};
+  var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');
+  onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd;
+
+  this.transition({
+    from: options.hiddenStyle,
+    to: options.visibleStyle,
+    isCleaning: true,
+    onTransitionEnd: onTransitionEnd
+  });
+};
+
+proto.onRevealTransitionEnd = function() {
+  // check if still visible
+  // during transition, item may have been hidden
+  if ( !this.isHidden ) {
+    this.emitEvent('reveal');
+  }
+};
+
+/**
+ * get style property use for hide/reveal transition end
+ * @param {String} styleProperty - hiddenStyle/visibleStyle
+ * @returns {String}
+ */
+proto.getHideRevealTransitionEndProperty = function( styleProperty ) {
+  var optionStyle = this.layout.options[ styleProperty ];
+  // use opacity
+  if ( optionStyle.opacity ) {
+    return 'opacity';
+  }
+  // get first property
+  for ( var prop in optionStyle ) {
+    return prop;
+  }
+};
+
+proto.hide = function() {
+  // set flag
+  this.isHidden = true;
+  // remove display: none
+  this.css({ display: '' });
+
+  var options = this.layout.options;
+
+  var onTransitionEnd = {};
+  var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');
+  onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd;
+
+  this.transition({
+    from: options.visibleStyle,
+    to: options.hiddenStyle,
+    // keep hidden stuff hidden
+    isCleaning: true,
+    onTransitionEnd: onTransitionEnd
+  });
+};
+
+proto.onHideTransitionEnd = function() {
+  // check if still hidden
+  // during transition, item may have been un-hidden
+  if ( this.isHidden ) {
+    this.css({ display: 'none' });
+    this.emitEvent('hide');
+  }
+};
+
+proto.destroy = function() {
+  this.css({
+    position: '',
+    left: '',
+    right: '',
+    top: '',
+    bottom: '',
+    transition: '',
+    transform: ''
+  });
+};
+
+return Item;
+
+}));
+
+/*!
+ * Outlayer v2.1.0
+ * the brains and guts of a layout library
+ * MIT license
+ */
+
+( function( window, factory ) {
+  'use strict';
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD - RequireJS
+    define( 'outlayer/outlayer',[
+        'ev-emitter/ev-emitter',
+        'get-size/get-size',
+        'fizzy-ui-utils/utils',
+        './item'
+      ],
+      function( EvEmitter, getSize, utils, Item ) {
+        return factory( window, EvEmitter, getSize, utils, Item);
+      }
+    );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
+    module.exports = factory(
+      window,
+      require('ev-emitter'),
+      require('get-size'),
+      require('fizzy-ui-utils'),
+      require('./item')
+    );
+  } else {
+    // browser global
+    window.Outlayer = factory(
+      window,
+      window.EvEmitter,
+      window.getSize,
+      window.fizzyUIUtils,
+      window.Outlayer.Item
+    );
+  }
+
+}( window, function factory( window, EvEmitter, getSize, utils, Item ) {
+'use strict';
+
+// ----- vars ----- //
+
+var console = window.console;
+var jQuery = window.jQuery;
+var noop = function() {};
+
+// -------------------------- Outlayer -------------------------- //
+
+// globally unique identifiers
+var GUID = 0;
+// internal store of all Outlayer intances
+var instances = {};
+
+
+/**
+ * @param {Element, String} element
+ * @param {Object} options
+ * @constructor
+ */
+function Outlayer( element, options ) {
+  var queryElement = utils.getQueryElement( element );
+  if ( !queryElement ) {
+    if ( console ) {
+      console.error( 'Bad element for ' + this.constructor.namespace +
+        ': ' + ( queryElement || element ) );
+    }
+    return;
+  }
+  this.element = queryElement;
+  // add jQuery
+  if ( jQuery ) {
+    this.$element = jQuery( this.element );
+  }
+
+  // options
+  this.options = utils.extend( {}, this.constructor.defaults );
+  this.option( options );
+
+  // add id for Outlayer.getFromElement
+  var id = ++GUID;
+  this.element.outlayerGUID = id; // expando
+  instances[ id ] = this; // associate via id
+
+  // kick it off
+  this._create();
+
+  var isInitLayout = this._getOption('initLayout');
+  if ( isInitLayout ) {
+    this.layout();
+  }
+}
+
+// settings are for internal use only
+Outlayer.namespace = 'outlayer';
+Outlayer.Item = Item;
+
+// default options
+Outlayer.defaults = {
+  containerStyle: {
+    position: 'relative'
+  },
+  initLayout: true,
+  originLeft: true,
+  originTop: true,
+  resize: true,
+  resizeContainer: true,
+  // item options
+  transitionDuration: '0.4s',
+  hiddenStyle: {
+    opacity: 0,
+    transform: 'scale(0.001)'
+  },
+  visibleStyle: {
+    opacity: 1,
+    transform: 'scale(1)'
+  }
+};
+
+var proto = Outlayer.prototype;
+// inherit EvEmitter
+utils.extend( proto, EvEmitter.prototype );
+
+/**
+ * set options
+ * @param {Object} opts
+ */
+proto.option = function( opts ) {
+  utils.extend( this.options, opts );
+};
+
+/**
+ * get backwards compatible option value, check old name
+ */
+proto._getOption = function( option ) {
+  var oldOption = this.constructor.compatOptions[ option ];
+  return oldOption && this.options[ oldOption ] !== undefined ?
+    this.options[ oldOption ] : this.options[ option ];
+};
+
+Outlayer.compatOptions = {
+  // currentName: oldName
+  initLayout: 'isInitLayout',
+  horizontal: 'isHorizontal',
+  layoutInstant: 'isLayoutInstant',
+  originLeft: 'isOriginLeft',
+  originTop: 'isOriginTop',
+  resize: 'isResizeBound',
+  resizeContainer: 'isResizingContainer'
+};
+
+proto._create = function() {
+  // get items from children
+  this.reloadItems();
+  // elements that affect layout, but are not laid out
+  this.stamps = [];
+  this.stamp( this.options.stamp );
+  // set container style
+  utils.extend( this.element.style, this.options.containerStyle );
+
+  // bind resize method
+  var canBindResize = this._getOption('resize');
+  if ( canBindResize ) {
+    this.bindResize();
+  }
+};
+
+// goes through all children again and gets bricks in proper order
+proto.reloadItems = function() {
+  // collection of item elements
+  this.items = this._itemize( this.element.children );
+};
+
+
+/**
+ * turn elements into Outlayer.Items to be used in layout
+ * @param {Array or NodeList or HTMLElement} elems
+ * @returns {Array} items - collection of new Outlayer Items
+ */
+proto._itemize = function( elems ) {
+
+  var itemElems = this._filterFindItemElements( elems );
+  var Item = this.constructor.Item;
+
+  // create new Outlayer Items for collection
+  var items = [];
+  for ( var i=0; i < itemElems.length; i++ ) {
+    var elem = itemElems[i];
+    var item = new Item( elem, this );
+    items.push( item );
+  }
+
+  return items;
+};
+
+/**
+ * get item elements to be used in layout
+ * @param {Array or NodeList or HTMLElement} elems
+ * @returns {Array} items - item elements
+ */
+proto._filterFindItemElements = function( elems ) {
+  return utils.filterFindElements( elems, this.options.itemSelector );
+};
+
+/**
+ * getter method for getting item elements
+ * @returns {Array} elems - collection of item elements
+ */
+proto.getItemElements = function() {
+  return this.items.map( function( item ) {
+    return item.element;
+  });
+};
+
+// ----- init & layout ----- //
+
+/**
+ * lays out all items
+ */
+proto.layout = function() {
+  this._resetLayout();
+  this._manageStamps();
+
+  // don't animate first layout
+  var layoutInstant = this._getOption('layoutInstant');
+  var isInstant = layoutInstant !== undefined ?
+    layoutInstant : !this._isLayoutInited;
+  this.layoutItems( this.items, isInstant );
+
+  // flag for initalized
+  this._isLayoutInited = true;
+};
+
+// _init is alias for layout
+proto._init = proto.layout;
+
+/**
+ * logic before any new layout
+ */
+proto._resetLayout = function() {
+  this.getSize();
+};
+
+
+proto.getSize = function() {
+  this.size = getSize( this.element );
+};
+
+/**
+ * get measurement from option, for columnWidth, rowHeight, gutter
+ * if option is String -> get element from selector string, & get size of element
+ * if option is Element -> get size of element
+ * else use option as a number
+ *
+ * @param {String} measurement
+ * @param {String} size - width or height
+ * @private
+ */
+proto._getMeasurement = function( measurement, size ) {
+  var option = this.options[ measurement ];
+  var elem;
+  if ( !option ) {
+    // default to 0
+    this[ measurement ] = 0;
+  } else {
+    // use option as an element
+    if ( typeof option == 'string' ) {
+      elem = this.element.querySelector( option );
+    } else if ( option instanceof HTMLElement ) {
+      elem = option;
+    }
+    // use size of element, if element
+    this[ measurement ] = elem ? getSize( elem )[ size ] : option;
+  }
+};
+
+/**
+ * layout a collection of item elements
+ * @api public
+ */
+proto.layoutItems = function( items, isInstant ) {
+  items = this._getItemsForLayout( items );
+
+  this._layoutItems( items, isInstant );
+
+  this._postLayout();
+};
+
+/**
+ * get the items to be laid out
+ * you may want to skip over some items
+ * @param {Array} items
+ * @returns {Array} items
+ */
+proto._getItemsForLayout = function( items ) {
+  return items.filter( function( item ) {
+    return !item.isIgnored;
+  });
+};
+
+/**
+ * layout items
+ * @param {Array} items
+ * @param {Boolean} isInstant
+ */
+proto._layoutItems = function( items, isInstant ) {
+  this._emitCompleteOnItems( 'layout', items );
+
+  if ( !items || !items.length ) {
+    // no items, emit event with empty array
+    return;
+  }
+
+  var queue = [];
+
+  items.forEach( function( item ) {
+    // get x/y object from method
+    var position = this._getItemLayoutPosition( item );
+    // enqueue
+    position.item = item;
+    position.isInstant = isInstant || item.isLayoutInstant;
+    queue.push( position );
+  }, this );
+
+  this._processLayoutQueue( queue );
+};
+
+/**
+ * get item layout position
+ * @param {Outlayer.Item} item
+ * @returns {Object} x and y position
+ */
+proto._getItemLayoutPosition = function( /* item */ ) {
+  return {
+    x: 0,
+    y: 0
+  };
+};
+
+/**
+ * iterate over array and position each item
+ * Reason being - separating this logic prevents 'layout invalidation'
+ * thx @paul_irish
+ * @param {Array} queue
+ */
+proto._processLayoutQueue = function( queue ) {
+  this.updateStagger();
+  queue.forEach( function( obj, i ) {
+    this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i );
+  }, this );
+};
+
+// set stagger from option in milliseconds number
+proto.updateStagger = function() {
+  var stagger = this.options.stagger;
+  if ( stagger === null || stagger === undefined ) {
+    this.stagger = 0;
+    return;
+  }
+  this.stagger = getMilliseconds( stagger );
+  return this.stagger;
+};
+
+/**
+ * Sets position of item in DOM
+ * @param {Outlayer.Item} item
+ * @param {Number} x - horizontal position
+ * @param {Number} y - vertical position
+ * @param {Boolean} isInstant - disables transitions
+ */
+proto._positionItem = function( item, x, y, isInstant, i ) {
+  if ( isInstant ) {
+    // if not transition, just set CSS
+    item.goTo( x, y );
+  } else {
+    item.stagger( i * this.stagger );
+    item.moveTo( x, y );
+  }
+};
+
+/**
+ * Any logic you want to do after each layout,
+ * i.e. size the container
+ */
+proto._postLayout = function() {
+  this.resizeContainer();
+};
+
+proto.resizeContainer = function() {
+  var isResizingContainer = this._getOption('resizeContainer');
+  if ( !isResizingContainer ) {
+    return;
+  }
+  var size = this._getContainerSize();
+  if ( size ) {
+    this._setContainerMeasure( size.width, true );
+    this._setContainerMeasure( size.height, false );
+  }
+};
+
+/**
+ * Sets width or height of container if returned
+ * @returns {Object} size
+ *   @param {Number} width
+ *   @param {Number} height
+ */
+proto._getContainerSize = noop;
+
+/**
+ * @param {Number} measure - size of width or height
+ * @param {Boolean} isWidth
+ */
+proto._setContainerMeasure = function( measure, isWidth ) {
+  if ( measure === undefined ) {
+    return;
+  }
+
+  var elemSize = this.size;
+  // add padding and border width if border box
+  if ( elemSize.isBorderBox ) {
+    measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight +
+      elemSize.borderLeftWidth + elemSize.borderRightWidth :
+      elemSize.paddingBottom + elemSize.paddingTop +
+      elemSize.borderTopWidth + elemSize.borderBottomWidth;
+  }
+
+  measure = Math.max( measure, 0 );
+  this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px';
+};
+
+/**
+ * emit eventComplete on a collection of items events
+ * @param {String} eventName
+ * @param {Array} items - Outlayer.Items
+ */
+proto._emitCompleteOnItems = function( eventName, items ) {
+  var _this = this;
+  function onComplete() {
+    _this.dispatchEvent( eventName + 'Complete', null, [ items ] );
+  }
+
+  var count = items.length;
+  if ( !items || !count ) {
+    onComplete();
+    return;
+  }
+
+  var doneCount = 0;
+  function tick() {
+    doneCount++;
+    if ( doneCount == count ) {
+      onComplete();
+    }
+  }
+
+  // bind callback
+  items.forEach( function( item ) {
+    item.once( eventName, tick );
+  });
+};
+
+/**
+ * emits events via EvEmitter and jQuery events
+ * @param {String} type - name of event
+ * @param {Event} event - original event
+ * @param {Array} args - extra arguments
+ */
+proto.dispatchEvent = function( type, event, args ) {
+  // add original event to arguments
+  var emitArgs = event ? [ event ].concat( args ) : args;
+  this.emitEvent( type, emitArgs );
+
+  if ( jQuery ) {
+    // set this.$element
+    this.$element = this.$element || jQuery( this.element );
+    if ( event ) {
+      // create jQuery event
+      var $event = jQuery.Event( event );
+      $event.type = type;
+      this.$element.trigger( $event, args );
+    } else {
+      // just trigger with type if no event available
+      this.$element.trigger( type, args );
+    }
+  }
+};
+
+// -------------------------- ignore & stamps -------------------------- //
+
+
+/**
+ * keep item in collection, but do not lay it out
+ * ignored items do not get skipped in layout
+ * @param {Element} elem
+ */
+proto.ignore = function( elem ) {
+  var item = this.getItem( elem );
+  if ( item ) {
+    item.isIgnored = true;
+  }
+};
+
+/**
+ * return item to layout collection
+ * @param {Element} elem
+ */
+proto.unignore = function( elem ) {
+  var item = this.getItem( elem );
+  if ( item ) {
+    delete item.isIgnored;
+  }
+};
+
+/**
+ * adds elements to stamps
+ * @param {NodeList, Array, Element, or String} elems
+ */
+proto.stamp = function( elems ) {
+  elems = this._find( elems );
+  if ( !elems ) {
+    return;
+  }
+
+  this.stamps = this.stamps.concat( elems );
+  // ignore
+  elems.forEach( this.ignore, this );
+};
+
+/**
+ * removes elements to stamps
+ * @param {NodeList, Array, or Element} elems
+ */
+proto.unstamp = function( elems ) {
+  elems = this._find( elems );
+  if ( !elems ){
+    return;
+  }
+
+  elems.forEach( function( elem ) {
+    // filter out removed stamp elements
+    utils.removeFrom( this.stamps, elem );
+    this.unignore( elem );
+  }, this );
+};
+
+/**
+ * finds child elements
+ * @param {NodeList, Array, Element, or String} elems
+ * @returns {Array} elems
+ */
+proto._find = function( elems ) {
+  if ( !elems ) {
+    return;
+  }
+  // if string, use argument as selector string
+  if ( typeof elems == 'string' ) {
+    elems = this.element.querySelectorAll( elems );
+  }
+  elems = utils.makeArray( elems );
+  return elems;
+};
+
+proto._manageStamps = function() {
+  if ( !this.stamps || !this.stamps.length ) {
+    return;
+  }
+
+  this._getBoundingRect();
+
+  this.stamps.forEach( this._manageStamp, this );
+};
+
+// update boundingLeft / Top
+proto._getBoundingRect = function() {
+  // get bounding rect for container element
+  var boundingRect = this.element.getBoundingClientRect();
+  var size = this.size;
+  this._boundingRect = {
+    left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
+    top: boundingRect.top + size.paddingTop + size.borderTopWidth,
+    right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ),
+    bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth )
+  };
+};
+
+/**
+ * @param {Element} stamp
+**/
+proto._manageStamp = noop;
+
+/**
+ * get x/y position of element relative to container element
+ * @param {Element} elem
+ * @returns {Object} offset - has left, top, right, bottom
+ */
+proto._getElementOffset = function( elem ) {
+  var boundingRect = elem.getBoundingClientRect();
+  var thisRect = this._boundingRect;
+  var size = getSize( elem );
+  var offset = {
+    left: boundingRect.left - thisRect.left - size.marginLeft,
+    top: boundingRect.top - thisRect.top - size.marginTop,
+    right: thisRect.right - boundingRect.right - size.marginRight,
+    bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom
+  };
+  return offset;
+};
+
+// -------------------------- resize -------------------------- //
+
+// enable event handlers for listeners
+// i.e. resize -> onresize
+proto.handleEvent = utils.handleEvent;
+
+/**
+ * Bind layout to window resizing
+ */
+proto.bindResize = function() {
+  window.addEventListener( 'resize', this );
+  this.isResizeBound = true;
+};
+
+/**
+ * Unbind layout to window resizing
+ */
+proto.unbindResize = function() {
+  window.removeEventListener( 'resize', this );
+  this.isResizeBound = false;
+};
+
+proto.onresize = function() {
+  this.resize();
+};
+
+utils.debounceMethod( Outlayer, 'onresize', 100 );
+
+proto.resize = function() {
+  // don't trigger if size did not change
+  // or if resize was unbound. See #9
+  if ( !this.isResizeBound || !this.needsResizeLayout() ) {
+    return;
+  }
+
+  this.layout();
+};
+
+/**
+ * check if layout is needed post layout
+ * @returns Boolean
+ */
+proto.needsResizeLayout = function() {
+  var size = getSize( this.element );
+  // check that this.size and size are there
+  // IE8 triggers resize on body size change, so they might not be
+  var hasSizes = this.size && size;
+  return hasSizes && size.innerWidth !== this.size.innerWidth;
+};
+
+// -------------------------- methods -------------------------- //
+
+/**
+ * add items to Outlayer instance
+ * @param {Array or NodeList or Element} elems
+ * @returns {Array} items - Outlayer.Items
+**/
+proto.addItems = function( elems ) {
+  var items = this._itemize( elems );
+  // add items to collection
+  if ( items.length ) {
+    this.items = this.items.concat( items );
+  }
+  return items;
+};
+
+/**
+ * Layout newly-appended item elements
+ * @param {Array or NodeList or Element} elems
+ */
+proto.appended = function( elems ) {
+  var items = this.addItems( elems );
+  if ( !items.length ) {
+    return;
+  }
+  // layout and reveal just the new items
+  this.layoutItems( items, true );
+  this.reveal( items );
+};
+
+/**
+ * Layout prepended elements
+ * @param {Array or NodeList or Element} elems
+ */
+proto.prepended = function( elems ) {
+  var items = this._itemize( elems );
+  if ( !items.length ) {
+    return;
+  }
+  // add items to beginning of collection
+  var previousItems = this.items.slice(0);
+  this.items = items.concat( previousItems );
+  // start new layout
+  this._resetLayout();
+  this._manageStamps();
+  // layout new stuff without transition
+  this.layoutItems( items, true );
+  this.reveal( items );
+  // layout previous items
+  this.layoutItems( previousItems );
+};
+
+/**
+ * reveal a collection of items
+ * @param {Array of Outlayer.Items} items
+ */
+proto.reveal = function( items ) {
+  this._emitCompleteOnItems( 'reveal', items );
+  if ( !items || !items.length ) {
+    return;
+  }
+  var stagger = this.updateStagger();
+  items.forEach( function( item, i ) {
+    item.stagger( i * stagger );
+    item.reveal();
+  });
+};
+
+/**
+ * hide a collection of items
+ * @param {Array of Outlayer.Items} items
+ */
+proto.hide = function( items ) {
+  this._emitCompleteOnItems( 'hide', items );
+  if ( !items || !items.length ) {
+    return;
+  }
+  var stagger = this.updateStagger();
+  items.forEach( function( item, i ) {
+    item.stagger( i * stagger );
+    item.hide();
+  });
+};
+
+/**
+ * reveal item elements
+ * @param {Array}, {Element}, {NodeList} items
+ */
+proto.revealItemElements = function( elems ) {
+  var items = this.getItems( elems );
+  this.reveal( items );
+};
+
+/**
+ * hide item elements
+ * @param {Array}, {Element}, {NodeList} items
+ */
+proto.hideItemElements = function( elems ) {
+  var items = this.getItems( elems );
+  this.hide( items );
+};
+
+/**
+ * get Outlayer.Item, given an Element
+ * @param {Element} elem
+ * @param {Function} callback
+ * @returns {Outlayer.Item} item
+ */
+proto.getItem = function( elem ) {
+  // loop through items to get the one that matches
+  for ( var i=0; i < this.items.length; i++ ) {
+    var item = this.items[i];
+    if ( item.element == elem ) {
+      // return item
+      return item;
+    }
+  }
+};
+
+/**
+ * get collection of Outlayer.Items, given Elements
+ * @param {Array} elems
+ * @returns {Array} items - Outlayer.Items
+ */
+proto.getItems = function( elems ) {
+  elems = utils.makeArray( elems );
+  var items = [];
+  elems.forEach( function( elem ) {
+    var item = this.getItem( elem );
+    if ( item ) {
+      items.push( item );
+    }
+  }, this );
+
+  return items;
+};
+
+/**
+ * remove element(s) from instance and DOM
+ * @param {Array or NodeList or Element} elems
+ */
+proto.remove = function( elems ) {
+  var removeItems = this.getItems( elems );
+
+  this._emitCompleteOnItems( 'remove', removeItems );
+
+  // bail if no items to remove
+  if ( !removeItems || !removeItems.length ) {
+    return;
+  }
+
+  removeItems.forEach( function( item ) {
+    item.remove();
+    // remove item from collection
+    utils.removeFrom( this.items, item );
+  }, this );
+};
+
+// ----- destroy ----- //
+
+// remove and disable Outlayer instance
+proto.destroy = function() {
+  // clean up dynamic styles
+  var style = this.element.style;
+  style.height = '';
+  style.position = '';
+  style.width = '';
+  // destroy items
+  this.items.forEach( function( item ) {
+    item.destroy();
+  });
+
+  this.unbindResize();
+
+  var id = this.element.outlayerGUID;
+  delete instances[ id ]; // remove reference to instance by id
+  delete this.element.outlayerGUID;
+  // remove data for jQuery
+  if ( jQuery ) {
+    jQuery.removeData( this.element, this.constructor.namespace );
+  }
+
+};
+
+// -------------------------- data -------------------------- //
+
+/**
+ * get Outlayer instance from element
+ * @param {Element} elem
+ * @returns {Outlayer}
+ */
+Outlayer.data = function( elem ) {
+  elem = utils.getQueryElement( elem );
+  var id = elem && elem.outlayerGUID;
+  return id && instances[ id ];
+};
+
+
+// -------------------------- create Outlayer class -------------------------- //
+
+/**
+ * create a layout class
+ * @param {String} namespace
+ */
+Outlayer.create = function( namespace, options ) {
+  // sub-class Outlayer
+  var Layout = subclass( Outlayer );
+  // apply new options and compatOptions
+  Layout.defaults = utils.extend( {}, Outlayer.defaults );
+  utils.extend( Layout.defaults, options );
+  Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions  );
+
+  Layout.namespace = namespace;
+
+  Layout.data = Outlayer.data;
+
+  // sub-class Item
+  Layout.Item = subclass( Item );
+
+  // -------------------------- declarative -------------------------- //
+
+  utils.htmlInit( Layout, namespace );
+
+  // -------------------------- jQuery bridge -------------------------- //
+
+  // make into jQuery plugin
+  if ( jQuery && jQuery.bridget ) {
+    jQuery.bridget( namespace, Layout );
+  }
+
+  return Layout;
+};
+
+function subclass( Parent ) {
+  function SubClass() {
+    Parent.apply( this, arguments );
+  }
+
+  SubClass.prototype = Object.create( Parent.prototype );
+  SubClass.prototype.constructor = SubClass;
+
+  return SubClass;
+}
+
+// ----- helpers ----- //
+
+// how many milliseconds are in each unit
+var msUnits = {
+  ms: 1,
+  s: 1000
+};
+
+// munge time-like parameter into millisecond number
+// '0.4s' -> 40
+function getMilliseconds( time ) {
+  if ( typeof time == 'number' ) {
+    return time;
+  }
+  var matches = time.match( /(^\d*\.?\d*)(\w*)/ );
+  var num = matches && matches[1];
+  var unit = matches && matches[2];
+  if ( !num.length ) {
+    return 0;
+  }
+  num = parseFloat( num );
+  var mult = msUnits[ unit ] || 1;
+  return num * mult;
+}
+
+// ----- fin ----- //
+
+// back in global
+Outlayer.Item = Item;
+
+return Outlayer;
+
+}));
+
+/*!
+ * Masonry v4.1.1
+ * Cascading grid layout library
+ * http://masonry.desandro.com
+ * MIT License
+ * by David DeSandro
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( [
+        'outlayer/outlayer',
+        'get-size/get-size'
+      ],
+      factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('outlayer'),
+      require('get-size')
+    );
+  } else {
+    // browser global
+    window.Masonry = factory(
+      window.Outlayer,
+      window.getSize
+    );
+  }
+
+}( window, function factory( Outlayer, getSize ) {
+
+
+
+// -------------------------- masonryDefinition -------------------------- //
+
+  // create an Outlayer layout class
+  var Masonry = Outlayer.create('masonry');
+  // isFitWidth -> fitWidth
+  Masonry.compatOptions.fitWidth = 'isFitWidth';
+
+  Masonry.prototype._resetLayout = function() {
+    this.getSize();
+    this._getMeasurement( 'columnWidth', 'outerWidth' );
+    this._getMeasurement( 'gutter', 'outerWidth' );
+    this.measureColumns();
+
+    // reset column Y
+    this.colYs = [];
+    for ( var i=0; i < this.cols; i++ ) {
+      this.colYs.push( 0 );
+    }
+
+    this.maxY = 0;
+  };
+
+  Masonry.prototype.measureColumns = function() {
+    this.getContainerWidth();
+    // if columnWidth is 0, default to outerWidth of first item
+    if ( !this.columnWidth ) {
+      var firstItem = this.items[0];
+      var firstItemElem = firstItem && firstItem.element;
+      // columnWidth fall back to item of first element
+      this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
+        // if first elem has no width, default to size of container
+        this.containerWidth;
+    }
+
+    var columnWidth = this.columnWidth += this.gutter;
+
+    // calculate columns
+    var containerWidth = this.containerWidth + this.gutter;
+    var cols = containerWidth / columnWidth;
+    // fix rounding errors, typically with gutters
+    var excess = columnWidth - containerWidth % columnWidth;
+    // if overshoot is less than a pixel, round up, otherwise floor it
+    var mathMethod = excess && excess < 1 ? 'round' : 'floor';
+    cols = Math[ mathMethod ]( cols );
+    this.cols = Math.max( cols, 1 );
+  };
+
+  Masonry.prototype.getContainerWidth = function() {
+    // container is parent if fit width
+    var isFitWidth = this._getOption('fitWidth');
+    var container = isFitWidth ? this.element.parentNode : this.element;
+    // check that this.size and size are there
+    // IE8 triggers resize on body size change, so they might not be
+    var size = getSize( container );
+    this.containerWidth = size && size.innerWidth;
+  };
+
+  Masonry.prototype._getItemLayoutPosition = function( item ) {
+    item.getSize();
+    // how many columns does this brick span
+    var remainder = item.size.outerWidth % this.columnWidth;
+    var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
+    // round if off by 1 pixel, otherwise use ceil
+    var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
+    colSpan = Math.min( colSpan, this.cols );
+
+    var colGroup = this._getColGroup( colSpan );
+    // get the minimum Y value from the columns
+    var minimumY = Math.min.apply( Math, colGroup );
+    var shortColIndex = colGroup.indexOf( minimumY );
+
+    // position the brick
+    var position = {
+      x: this.columnWidth * shortColIndex,
+      y: minimumY
+    };
+
+    // apply setHeight to necessary columns
+    var setHeight = minimumY + item.size.outerHeight;
+    var setSpan = this.cols + 1 - colGroup.length;
+    for ( var i = 0; i < setSpan; i++ ) {
+      this.colYs[ shortColIndex + i ] = setHeight;
+    }
+
+    return position;
+  };
+
+  /**
+   * @param {Number} colSpan - number of columns the element spans
+   * @returns {Array} colGroup
+   */
+  Masonry.prototype._getColGroup = function( colSpan ) {
+    if ( colSpan < 2 ) {
+      // if brick spans only one column, use all the column Ys
+      return this.colYs;
+    }
+
+    var colGroup = [];
+    // how many different places could this brick fit horizontally
+    var groupCount = this.cols + 1 - colSpan;
+    // for each group potential horizontal position
+    for ( var i = 0; i < groupCount; i++ ) {
+      // make an array of colY values for that one group
+      var groupColYs = this.colYs.slice( i, i + colSpan );
+      // and get the max value of the array
+      colGroup[i] = Math.max.apply( Math, groupColYs );
+    }
+    return colGroup;
+  };
+
+  Masonry.prototype._manageStamp = function( stamp ) {
+    var stampSize = getSize( stamp );
+    var offset = this._getElementOffset( stamp );
+    // get the columns that this stamp affects
+    var isOriginLeft = this._getOption('originLeft');
+    var firstX = isOriginLeft ? offset.left : offset.right;
+    var lastX = firstX + stampSize.outerWidth;
+    var firstCol = Math.floor( firstX / this.columnWidth );
+    firstCol = Math.max( 0, firstCol );
+    var lastCol = Math.floor( lastX / this.columnWidth );
+    // lastCol should not go over if multiple of columnWidth #425
+    lastCol -= lastX % this.columnWidth ? 0 : 1;
+    lastCol = Math.min( this.cols - 1, lastCol );
+    // set colYs to bottom of the stamp
+
+    var isOriginTop = this._getOption('originTop');
+    var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
+      stampSize.outerHeight;
+    for ( var i = firstCol; i <= lastCol; i++ ) {
+      this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
+    }
+  };
+
+  Masonry.prototype._getContainerSize = function() {
+    this.maxY = Math.max.apply( Math, this.colYs );
+    var size = {
+      height: this.maxY
+    };
+
+    if ( this._getOption('fitWidth') ) {
+      size.width = this._getContainerFitWidth();
+    }
+
+    return size;
+  };
+
+  Masonry.prototype._getContainerFitWidth = function() {
+    var unusedCols = 0;
+    // count unused columns
+    var i = this.cols;
+    while ( --i ) {
+      if ( this.colYs[i] !== 0 ) {
+        break;
+      }
+      unusedCols++;
+    }
+    // fit container to columns that have been used
+    return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
+  };
+
+  Masonry.prototype.needsResizeLayout = function() {
+    var previousWidth = this.containerWidth;
+    this.getContainerWidth();
+    return previousWidth != this.containerWidth;
+  };
+
+  return Masonry;
+
+}));
+

From 48b3623fb5688bb5dfc3f1a5e2436c29afc968a2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 24 Jan 2017 15:41:53 +0000
Subject: [PATCH 04/53] Selected issues show with checkmark Submit button
 disables/enables Submit button selects ids - but does not push it yet

---
 .../boards/components/modal/footer.js.es6     | 27 ++++++++++--
 .../boards/components/modal/list.js.es6       | 29 ++++++++++---
 .../boards/components/modal/search.js.es6     | 42 +++++++++++++++++--
 .../boards/components/modal/tabs.js.es6       | 13 ++----
 .../boards/stores/boards_store.js.es6         | 13 +++++-
 app/assets/stylesheets/pages/boards.scss      | 41 +++++++++++++++++-
 6 files changed, 141 insertions(+), 24 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 9cb48448a87..dec0196a32c 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -7,19 +7,40 @@
 
   gl.issueBoards.ModalFooter = Vue.extend({
     data() {
-      return Store.modal;
+      return Object.assign({}, Store.modal, {
+        disabled: false,
+      });
+    },
+    computed: {
+      submitDisabled() {
+        if (this.disabled) return true;
+
+        return !Store.modalSelectedCount();
+      },
+      submitText() {
+        const count = Store.modalSelectedCount();
+
+        return `Add ${count} issue${count > 1 || !count ? 's' : ''}`;
+      },
     },
     methods: {
       hideModal() {
         this.showAddIssuesModal = false;
       },
+      addIssues() {
+        const issueIds = this.issues.filter(issue => issue.selected).map(issue => issue.id);
+
+        this.disabled = true;
+      },
     },
     template: `
       <footer class="form-actions add-issues-footer">
         <button
           class="btn btn-success pull-left"
-          type="button">
-          Add issues
+          type="button"
+          :disabled="submitDisabled"
+          @click="addIssues">
+          {{ submitText }}
         </button>
         <button
           class="btn btn-default pull-right"
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index e06fa58b3b6..e700161f642 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -1,6 +1,8 @@
 /* global Vue */
 /* global ListIssue */
+/* global Masonry */
 (() => {
+  let listMasonry;
   const Store = gl.issueBoards.BoardsStore;
 
   window.gl = window.gl || {};
@@ -22,9 +24,14 @@
       loading() {
         return this.issues.length === 0;
       },
+      selectedCount() {
+        return Store.modalSelectedCount();
+      },
     },
     methods: {
-      toggleIssue(issue) {
+      toggleIssue(issueObj) {
+        const issue = issueObj;
+
         issue.selected = !issue.selected;
       },
       showIssue(issue) {
@@ -41,7 +48,7 @@
         if (listMasonry) {
           listMasonry.destroy();
         }
-      }
+      },
     },
     mounted() {
       gl.boardService.getBacklog()
@@ -66,9 +73,11 @@
     },
     template: `
       <section class="add-issues-list">
-        <i
-          class="fa fa-spinner fa-spin"
-          v-if="loading"></i>
+        <div
+          class="add-issues-list-loading"
+          v-if="loading">
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
         <div
           class="add-issues-list-columns list-unstyled"
           ref="list"
@@ -85,9 +94,19 @@
                 :issue="issue"
                 :issue-link-base="'/'">
               </issue-card-inner>
+              <span
+                v-if="issue.selected"
+                class="issue-card-selected">
+                <i class="fa fa-check"></i>
+              </span>
             </div>
           </div>
         </div>
+        <p
+          class="all-issues-selected-empty"
+          v-if="activeTab == 'selected' && selectedCount == 0">
+          You don't have any issues selected, <a href="#" @click="activeTab = 'all'">select some</a>.
+        </p>
       </section>
     `,
   });
diff --git a/app/assets/javascripts/boards/components/modal/search.js.es6 b/app/assets/javascripts/boards/components/modal/search.js.es6
index 714c9240d4d..59aeb17baa5 100644
--- a/app/assets/javascripts/boards/components/modal/search.js.es6
+++ b/app/assets/javascripts/boards/components/modal/search.js.es6
@@ -1,14 +1,48 @@
 /* global Vue */
 (() => {
+  const Store = gl.issueBoards.BoardsStore;
+
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalSearch = Vue.extend({
+    data() {
+      return Store.modal;
+    },
+    computed: {
+      selectAllText() {
+        if (Store.modalSelectedCount() !== this.issues.length || this.issues.length === 0) {
+          return 'Select all';
+        }
+
+        return 'Un-select all';
+      },
+    },
+    methods: {
+      toggleAll() {
+        const select = Store.modalSelectedCount() !== this.issues.length;
+
+        this.issues.forEach((issue) => {
+          const issueUpdate = issue;
+          issueUpdate.selected = select;
+        });
+      },
+    },
     template: `
-      <input
-        placeholder="Search issues..."
-        class="form-control"
-        type="search" />
+      <div
+        class="add-issues-search"
+        v-if="activeTab == 'all'">
+        <input
+          placeholder="Search issues..."
+          class="form-control"
+          type="search" />
+        <button
+          type="button"
+          class="btn btn-success btn-inverted"
+          @click="toggleAll">
+          {{ selectAllText }}
+        </button>
+      </div>
     `,
   });
 })();
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index 58fb75f839f..a1da7840036 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -16,17 +16,12 @@
     },
     computed: {
       selectedCount() {
-        let count = 0;
-
-        this.issues.forEach((issue) => {
-          if (issue.selected) {
-            count += 1;
-          }
-        });
-
-        return count;
+        return Store.modalSelectedCount();
       },
     },
+    destroyed() {
+      this.activeTab = 'all';
+    },
     template: `
       <div class="top-area">
         <ul class="nav-links issues-state-filters">
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 42216d429c6..4c5eb57f5c9 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -125,6 +125,17 @@
     },
     updateFiltersUrl () {
       history.pushState(null, null, `?${$.param(this.state.filters)}`);
-    }
+    },
+    modalSelectedCount() {
+      let count = 0;
+
+      this.modal.issues.forEach((issue) => {
+        if (issue.selected) {
+          count += 1;
+        }
+      });
+
+      return count;
+    },
   };
 })();
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index f41d4cdd45d..73ed8dd8ab1 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -390,19 +390,34 @@
   .top-area {
     margin-bottom: 10px;
   }
+}
 
-  .form-control {
-    margin-bottom: 10px;
+.add-issues-search {
+  display: flex;
+  margin-bottom: 10px;
+
+  .btn {
+    margin-left: 10px;
   }
 }
 
 .add-issues-list {
+  display: flex;
   flex: 1;
   margin-left: -$gl-vert-padding;
   margin-right: -$gl-vert-padding;
   overflow-y: scroll;
 }
 
+.add-issues-list-loading {
+  align-self: center;
+  width: 100%;
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  font-size: 35px;
+  text-align: center;
+}
+
 .add-issues-footer {
   margin-top: auto;
   margin-left: -15px;
@@ -412,6 +427,9 @@
 }
 
 .add-issues-list-columns {
+  width: 100%;
+  padding-top: 3px;
+
   .card-parent {
     width: (100% / 3);
     padding: 0 $gl-vert-padding ($gl-vert-padding * 2);
@@ -421,3 +439,22 @@
     cursor: pointer;
   }
 }
+
+.all-issues-selected-empty {
+  align-self: center;
+  margin-bottom: 0;
+}
+
+.issue-card-selected {
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 20px;
+  height: 20px;
+  background-color: $blue-dark;
+  color: $white-light;
+  font-size: 12px;
+  text-align: center;
+  line-height: 20px;
+  border-radius: 50%;
+}

From 7d0feab3abd1fa6459b9be81b340a9f9121d84b7 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 24 Jan 2017 15:51:15 +0000
Subject: [PATCH 05/53] Fixes layout issue on selected tab Fixed modal not
 closing on cancel clicked

---
 .../javascripts/boards/components/modal/footer.js.es6  |  9 +++++----
 .../javascripts/boards/components/modal/list.js.es6    | 10 ++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index dec0196a32c..aadb754fd9e 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -7,9 +7,10 @@
 
   gl.issueBoards.ModalFooter = Vue.extend({
     data() {
-      return Object.assign({}, Store.modal, {
+      return {
+        store: Store.modal,
         disabled: false,
-      });
+      };
     },
     computed: {
       submitDisabled() {
@@ -25,10 +26,10 @@
     },
     methods: {
       hideModal() {
-        this.showAddIssuesModal = false;
+        this.store.showAddIssuesModal = false;
       },
       addIssues() {
-        const issueIds = this.issues.filter(issue => issue.selected).map(issue => issue.id);
+        const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id);
 
         this.disabled = true;
       },
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index e700161f642..067a6322bca 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -19,6 +19,16 @@
           this.initMasonry();
         });
       },
+      issues: {
+        handler() {
+          if (this.activeTab === 'selected') {
+            this.$nextTick(() => {
+              listMasonry.layout();
+            });
+          }
+        },
+        deep: true,
+      }
     },
     computed: {
       loading() {

From e786ba98904eeb7ce252b28aa631ef959e7af8c2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 25 Jan 2017 08:48:29 +0000
Subject: [PATCH 06/53] Mobile sizes

---
 app/assets/stylesheets/pages/boards.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 73ed8dd8ab1..cd70a14bec5 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -373,6 +373,7 @@
   flex-direction: column;
   width: 90vw;
   height: 85vh;
+  min-height: 500px;
   margin-left: auto;
   margin-right: auto;
   padding: 25px 15px 0;
@@ -431,11 +432,20 @@
   padding-top: 3px;
 
   .card-parent {
-    width: (100% / 3);
+    width: 100%;
     padding: 0 $gl-vert-padding ($gl-vert-padding * 2);
+
+    @media (min-width: $screen-sm-min) {
+      width: 50%;
+    }
+
+    @media (min-width: $screen-md-min) {
+      width: (100% / 3);
+    }
   }
 
   .card {
+    border: 1px solid $border-gray-dark;
     cursor: pointer;
   }
 }

From 97fbb3d1ff1d22aa8597ff0bad0520634d9e351e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 25 Jan 2017 11:33:45 +0000
Subject: [PATCH 07/53] Added selectable list before adding issues Adds issues
 to list on frontend - need to push to backend

---
 .../javascripts/boards/boards_bundle.js.es6   |  6 ++
 .../boards/components/modal/footer.js.es6     | 31 +++++++---
 .../components/modal/lists_dropdown.js.es6    | 61 +++++++++++++++++++
 .../boards/stores/boards_store.js.es6         |  3 +-
 app/assets/stylesheets/pages/boards.scss      |  7 +++
 5 files changed, 100 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index ef73d381fb4..67d9f023866 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -71,6 +71,12 @@ $(() => {
 
           Store.addBlankState();
           this.loading = false;
+
+          if (this.state.lists.length > 0) {
+            Store.modal.selectedList = this.state.lists[0];
+          }
+
+          Store.modal.showAddIssuesModal = true;
         });
     }
   });
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index aadb754fd9e..e9f400952b7 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -1,3 +1,4 @@
+//= require ./lists_dropdown
 /* global Vue */
 (() => {
   const Store = gl.issueBoards.BoardsStore;
@@ -31,18 +32,34 @@
       addIssues() {
         const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id);
 
+        issueIds.forEach((id) => {
+          const issue = this.store.issues.filter(issue => issue.id == id)[0];
+          this.store.selectedList.addIssue(issue);
+          this.store.selectedList.issuesSize += 1;
+        });
+
         this.disabled = true;
+        this.hideModal();
       },
     },
+    components: {
+      'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
+    },
     template: `
       <footer class="form-actions add-issues-footer">
-        <button
-          class="btn btn-success pull-left"
-          type="button"
-          :disabled="submitDisabled"
-          @click="addIssues">
-          {{ submitText }}
-        </button>
+        <div class="pull-left">
+          <button
+            class="btn btn-success"
+            type="button"
+            :disabled="submitDisabled"
+            @click="addIssues">
+            {{ submitText }}
+          </button>
+          <span class="add-issues-footer-to-list">
+            to list
+          </span>
+          <lists-dropdown></lists-dropdown>
+        </div>
         <button
           class="btn btn-default pull-right"
           type="button"
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
new file mode 100644
index 00000000000..27da5057083
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -0,0 +1,61 @@
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
+    data() {
+      return {
+        modal: Store.modal,
+        state: Store.state,
+      }
+    },
+    computed: {
+      selected() {
+        return this.modal.selectedList;
+      },
+    },
+    methods: {
+      selectList(list) {
+        this.modal.selectedList = list;
+      },
+    },
+    template: `
+      <div class="dropdown inline">
+        <button
+          class="dropdown-menu-toggle"
+          type="button"
+          data-toggle="dropdown"
+          aria-expanded="false">
+          {{ selected.title }}
+          <span
+            class="dropdown-label-box pull-right"
+            :style="{ backgroundColor: selected.label.color }">
+          </span>
+          <i class="fa fa-chevron-down"></i>
+        </button>
+        <div class="dropdown-menu dropdown-menu-selectable">
+          <ul>
+            <li
+              v-for="list in state.lists"
+              v-if="list.type == 'label'">
+              <a
+                href="#"
+                role="button"
+                :class="{ 'is-active': list.id == selected.id }"
+                @click="selectList(list)">
+                <span
+                  class="dropdown-label-box"
+                  :style="{ backgroundColor: list.label.color }">
+                </span>
+                {{ list.title }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 4c5eb57f5c9..fa0224beee5 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -14,8 +14,9 @@
     },
     modal: {
       issues: [],
-      showAddIssuesModal: true,
+      showAddIssuesModal: false,
       activeTab: 'all',
+      selectedList: {}
     },
     moving: {
       issue: {},
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index cd70a14bec5..bf1c0d1842b 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -427,6 +427,13 @@
   padding-right: 15px;
 }
 
+.add-issues-footer-to-list {
+  display: inline-block;
+  padding-left: 6px;
+  padding-right: 6px;
+  line-height: 34px;
+}
+
 .add-issues-list-columns {
   width: 100%;
   padding-top: 3px;

From 38d84c1396b5264ba171df109c873469d371be73 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 25 Jan 2017 13:07:44 +0000
Subject: [PATCH 08/53] Changed where data gets loaded Changed what is hidden
 when data is loading

---
 .../boards/components/modal/footer.js.es6     | 13 ++++----
 .../boards/components/modal/header.js.es6     | 18 ++++++-----
 .../boards/components/modal/list.js.es6       | 31 +++----------------
 .../boards/components/modal/modal.es6         | 19 +++++++++++-
 .../boards/services/board_service.js.es6      | 12 ++++++-
 app/assets/stylesheets/pages/boards.scss      |  5 +++
 .../projects/boards/lists_controller.rb       |  4 +++
 app/controllers/projects/boards_controller.rb |  2 +-
 config/routes/project.rb                      |  3 +-
 9 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index e9f400952b7..978900c866a 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -10,13 +10,10 @@
     data() {
       return {
         store: Store.modal,
-        disabled: false,
       };
     },
     computed: {
       submitDisabled() {
-        if (this.disabled) return true;
-
         return !Store.modalSelectedCount();
       },
       submitText() {
@@ -30,15 +27,19 @@
         this.store.showAddIssuesModal = false;
       },
       addIssues() {
+        const list = this.store.selectedList;
         const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id);
 
+        // Post the data to the backend
+        gl.boardService.addMultipleIssues(list, issueIds);
+
+        // Add the issues on the frontend
         issueIds.forEach((id) => {
           const issue = this.store.issues.filter(issue => issue.id == id)[0];
-          this.store.selectedList.addIssue(issue);
-          this.store.selectedList.issuesSize += 1;
+          list.addIssue(issue);
+          list.issuesSize += 1;
         });
 
-        this.disabled = true;
         this.hideModal();
       },
     },
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 74681fa4bcf..f4c722c0974 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -18,14 +18,16 @@
       'modal-search': gl.issueBoards.ModalSearch,
     },
     template: `
-      <header class="add-issues-header">
-        <h2>
-          Add issues to board
-          <modal-dismiss></modal-dismiss>
-        </h2>
-        <modal-tabs></modal-tabs>
-        <modal-search></modal-search>
-      </header>
+      <div>
+        <header class="add-issues-header form-actions">
+          <h2>
+            Add issues
+            <modal-dismiss></modal-dismiss>
+          </h2>
+        </header>
+        <modal-tabs v-if="issues.length"></modal-tabs>
+        <modal-search v-if="issues.length"></modal-search>
+      </div>
     `,
   });
 })();
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 067a6322bca..e2056f1ada3 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -21,11 +21,11 @@
       },
       issues: {
         handler() {
-          if (this.activeTab === 'selected') {
-            this.$nextTick(() => {
+          this.$nextTick(() => {
+            if (this.activeTab === 'selected') {
               listMasonry.layout();
-            });
-          }
+            }
+          });
         },
         deep: true,
       }
@@ -61,18 +61,7 @@
       },
     },
     mounted() {
-      gl.boardService.getBacklog()
-        .then((res) => {
-          const data = res.json();
-
-          data.forEach((issueObj) => {
-            this.issues.push(new ListIssue(issueObj));
-          });
-
-          this.$nextTick(() => {
-            this.initMasonry();
-          });
-        });
+      this.initMasonry();
     },
     destroyed() {
       this.issues = [];
@@ -83,11 +72,6 @@
     },
     template: `
       <section class="add-issues-list">
-        <div
-          class="add-issues-list-loading"
-          v-if="loading">
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
         <div
           class="add-issues-list-columns list-unstyled"
           ref="list"
@@ -112,11 +96,6 @@
             </div>
           </div>
         </div>
-        <p
-          class="all-issues-selected-empty"
-          v-if="activeTab == 'selected' && selectedCount == 0">
-          You don't have any issues selected, <a href="#" @click="activeTab = 'all'">select some</a>.
-        </p>
       </section>
     `,
   });
diff --git a/app/assets/javascripts/boards/components/modal/modal.es6 b/app/assets/javascripts/boards/components/modal/modal.es6
index bedd7c9735a..7a15beb10f0 100644
--- a/app/assets/javascripts/boards/components/modal/modal.es6
+++ b/app/assets/javascripts/boards/components/modal/modal.es6
@@ -12,6 +12,16 @@
     data() {
       return Store.modal;
     },
+    mounted() {
+      gl.boardService.getBacklog()
+        .then((res) => {
+          const data = res.json();
+
+          data.forEach((issueObj) => {
+            this.issues.push(new ListIssue(issueObj));
+          });
+        });
+    },
     components: {
       'modal-header': gl.issueBoards.IssuesModalHeader,
       'modal-list': gl.issueBoards.ModalList,
@@ -23,7 +33,14 @@
         v-if="showAddIssuesModal">
         <div class="add-issues-container">
           <modal-header></modal-header>
-          <modal-list></modal-list>
+          <modal-list v-if="issues.length"></modal-list>
+          <section
+            class="add-issues-list"
+            v-if="issues.length == 0">
+            <div class="add-issues-list-loading">
+              <i class="fa fa-spinner fa-spin"></i>
+            </div>
+          </section>
           <modal-footer></modal-footer>
         </div>
       </div>
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index 4625b13d5f3..335950caf10 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -13,7 +13,11 @@ class BoardService {
       generate: {
         method: 'POST',
         url: `${root}/${boardId}/lists/generate.json`
-      }
+      },
+      multiple: {
+        method: 'POST',
+        url: `${root}/${boardId}/lists{/id}/multiple`
+      },
     });
     this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
     this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
@@ -75,6 +79,12 @@ class BoardService {
   getBacklog() {
     return this.boards.backlog();
   }
+
+  addMultipleIssues(list, issue_ids) {
+    return this.lists.multiple(list.id, {
+      issue_ids,
+    });
+  }
 }
 
 window.BoardService = BoardService;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index bf1c0d1842b..683ef9f2388 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -383,6 +383,10 @@
 }
 
 .add-issues-header {
+  margin: -25px -15px -5px;
+  border-top: 0;
+  border-bottom: 1px solid $border-color;
+
   > h2 {
     margin: 0;
     font-size: 18px;
@@ -396,6 +400,7 @@
 .add-issues-search {
   display: flex;
   margin-bottom: 10px;
+  margin-top: 10px;
 
   .btn {
     margin-left: 10px;
diff --git a/app/controllers/projects/boards/lists_controller.rb b/app/controllers/projects/boards/lists_controller.rb
index 67e3c9add81..ed65cae82dc 100644
--- a/app/controllers/projects/boards/lists_controller.rb
+++ b/app/controllers/projects/boards/lists_controller.rb
@@ -50,6 +50,10 @@ module Projects
         end
       end
 
+      def multiple
+        head :ok
+      end
+
       private
 
       def authorize_admin_list!
diff --git a/app/controllers/projects/boards_controller.rb b/app/controllers/projects/boards_controller.rb
index 7a2e2324323..9e699fb9b3b 100644
--- a/app/controllers/projects/boards_controller.rb
+++ b/app/controllers/projects/boards_controller.rb
@@ -33,7 +33,7 @@ class Projects::BoardsController < Projects::ApplicationController
       LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
                .where(label_id: board.lists.movable.pluck(:label_id)).limit(1).arel.exists
     )
-    @issues = @issues.page(params[:page])
+    @issues = @issues.page(params[:page]).per(50)
 
     render json: @issues.as_json(
       labels: true,
diff --git a/config/routes/project.rb b/config/routes/project.rb
index 5c33bb4a6ca..afd895a5a1e 100644
--- a/config/routes/project.rb
+++ b/config/routes/project.rb
@@ -267,13 +267,14 @@ constraints(ProjectUrlConstrainer.new) do
 
       resources :boards, only: [:index, :show] do
         get :backlog, on: :member
-        
+
         scope module: :boards do
           resources :issues, only: [:update]
 
           resources :lists, only: [:index, :create, :update, :destroy] do
             collection do
               post :generate
+              post :multiple
             end
 
             resources :issues, only: [:index, :create]

From acd86c120f012b38108971ec466c6c141405f1d1 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 25 Jan 2017 13:54:45 +0000
Subject: [PATCH 09/53] Search bar now returns data Selected data is added into
 a different array

---
 .../boards/components/modal/footer.js.es6     |  2 +-
 .../boards/components/modal/header.js.es6     |  4 +--
 .../boards/components/modal/list.js.es6       | 23 ++++++++----
 .../boards/components/modal/modal.es6         | 35 ++++++++++++++++---
 .../boards/components/modal/search.js.es6     | 15 ++++++--
 .../boards/services/board_service.js.es6      |  4 +--
 .../boards/stores/boards_store.js.es6         | 24 ++++---------
 7 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 978900c866a..cacc8d69a3c 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -28,7 +28,7 @@
       },
       addIssues() {
         const list = this.store.selectedList;
-        const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id);
+        const issueIds = this.store.selectedIssues.map(issue => issue.id);
 
         // Post the data to the backend
         gl.boardService.addMultipleIssues(list, issueIds);
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index f4c722c0974..a89b2bbc515 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -25,8 +25,8 @@
             <modal-dismiss></modal-dismiss>
           </h2>
         </header>
-        <modal-tabs v-if="issues.length"></modal-tabs>
-        <modal-search v-if="issues.length"></modal-search>
+        <modal-tabs v-if="!loading"></modal-tabs>
+        <modal-search v-if="!loading"></modal-search>
       </div>
     `,
   });
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index e2056f1ada3..3520c49699a 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -22,9 +22,7 @@
       issues: {
         handler() {
           this.$nextTick(() => {
-            if (this.activeTab === 'selected') {
-              listMasonry.layout();
-            }
+            listMasonry.layout();
           });
         },
         deep: true,
@@ -37,12 +35,26 @@
       selectedCount() {
         return Store.modalSelectedCount();
       },
+      loopIssues() {
+        if (this.activeTab === 'all') {
+          return this.issues;
+        }
+
+        return this.selectedIssues;
+      },
     },
     methods: {
       toggleIssue(issueObj) {
         const issue = issueObj;
-
         issue.selected = !issue.selected;
+
+        if (issue.selected) {
+          this.selectedIssues.push(issue);
+        } else {
+          // Remove this issue
+          const index = this.selectedIssues.indexOf(issue);
+          this.selectedIssues.splice(index, 1);
+        }
       },
       showIssue(issue) {
         if (this.activeTab === 'all') return true;
@@ -64,7 +76,6 @@
       this.initMasonry();
     },
     destroyed() {
-      this.issues = [];
       this.destroyMasonry();
     },
     components: {
@@ -77,7 +88,7 @@
           ref="list"
           v-show="!loading">
           <div
-            v-for="issue in issues"
+            v-for="issue in loopIssues"
             v-if="showIssue(issue)"
             class="card-parent">
             <div
diff --git a/app/assets/javascripts/boards/components/modal/modal.es6 b/app/assets/javascripts/boards/components/modal/modal.es6
index 7a15beb10f0..8d593459935 100644
--- a/app/assets/javascripts/boards/components/modal/modal.es6
+++ b/app/assets/javascripts/boards/components/modal/modal.es6
@@ -12,15 +12,40 @@
     data() {
       return Store.modal;
     },
+    watch: {
+      searchTerm() {
+        this.searchOperation();
+      },
+    },
     mounted() {
-      gl.boardService.getBacklog()
-        .then((res) => {
+      this.loading = true;
+
+      this.loadIssues()
+        .then(() => {
+          this.loading = false;
+        });
+    },
+    methods: {
+      searchOperation: _.debounce(function() {
+        this.loadIssues();
+      }, 500),
+      loadIssues() {
+        return gl.boardService.getBacklog({
+          search: this.searchTerm,
+        }).then((res) => {
           const data = res.json();
 
+          this.issues = [];
           data.forEach((issueObj) => {
-            this.issues.push(new ListIssue(issueObj));
+            const issue = new ListIssue(issueObj);
+            const foundSelectedIssue = this.selectedIssues
+              .filter(filteredIssue => filteredIssue.id === issue.id)[0];
+            issue.selected = foundSelectedIssue !== undefined;
+
+            this.issues.push(issue);
           });
         });
+      },
     },
     components: {
       'modal-header': gl.issueBoards.IssuesModalHeader,
@@ -33,10 +58,10 @@
         v-if="showAddIssuesModal">
         <div class="add-issues-container">
           <modal-header></modal-header>
-          <modal-list v-if="issues.length"></modal-list>
+          <modal-list v-if="!loading"></modal-list>
           <section
             class="add-issues-list"
-            v-if="issues.length == 0">
+            v-if="loading">
             <div class="add-issues-list-loading">
               <i class="fa fa-spinner fa-spin"></i>
             </div>
diff --git a/app/assets/javascripts/boards/components/modal/search.js.es6 b/app/assets/javascripts/boards/components/modal/search.js.es6
index 59aeb17baa5..8c3814740f1 100644
--- a/app/assets/javascripts/boards/components/modal/search.js.es6
+++ b/app/assets/javascripts/boards/components/modal/search.js.es6
@@ -24,7 +24,17 @@
 
         this.issues.forEach((issue) => {
           const issueUpdate = issue;
-          issueUpdate.selected = select;
+
+          if (issueUpdate.selected !== select) {
+            issueUpdate.selected = select;
+
+            if (select) {
+              this.selectedIssues.push(issueUpdate);
+            } else {
+              const index = this.selectedIssues.indexOf(issue);
+              this.selectedIssues.splice(index, 1);
+            }
+          }
         });
       },
     },
@@ -35,7 +45,8 @@
         <input
           placeholder="Search issues..."
           class="form-control"
-          type="search" />
+          type="search"
+          v-model="searchTerm" />
         <button
           type="button"
           class="btn btn-success btn-inverted"
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index 335950caf10..c8db107d890 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -76,8 +76,8 @@ class BoardService {
     });
   }
 
-  getBacklog() {
-    return this.boards.backlog();
+  getBacklog(data) {
+    return this.boards.backlog(data);
   }
 
   addMultipleIssues(list, issue_ids) {
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index fa0224beee5..d29731ad0aa 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -14,9 +14,12 @@
     },
     modal: {
       issues: [],
+      selectedIssues: [],
       showAddIssuesModal: false,
       activeTab: 'all',
-      selectedList: {}
+      selectedList: {},
+      searchTerm: '',
+      loading: false,
     },
     moving: {
       issue: {},
@@ -40,15 +43,10 @@
     },
     new (listObj) {
       const list = this.addList(listObj);
-      const backlogList = this.findList('type', 'backlog', 'backlog');
 
       list
         .save()
         .then(() => {
-          // Remove any new issues from the backlog
-          // as they will be visible in the new list
-          list.issues.forEach(backlogList.removeIssue.bind(backlogList));
-
           this.state.lists = _.sortBy(this.state.lists, 'position');
         });
       this.removeBlankState();
@@ -58,7 +56,7 @@
     },
     shouldAddBlankState () {
       // Decide whether to add the blank state
-      return !(this.state.lists.filter(list => list.type !== 'backlog' && list.type !== 'done')[0]);
+      return !(this.state.lists.filter(list => list.type !== 'done')[0]);
     },
     addBlankState () {
       if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
@@ -108,7 +106,7 @@
         listTo.addIssue(issue, listFrom, newIndex);
       }
 
-      if (listTo.type === 'done' && listFrom.type !== 'backlog') {
+      if (listTo.type === 'done') {
         issueLists.forEach((list) => {
           list.removeIssue(issue);
         });
@@ -128,15 +126,7 @@
       history.pushState(null, null, `?${$.param(this.state.filters)}`);
     },
     modalSelectedCount() {
-      let count = 0;
-
-      this.modal.issues.forEach((issue) => {
-        if (issue.selected) {
-          count += 1;
-        }
-      });
-
-      return count;
+      return this.modal.selectedIssues.length;
     },
   };
 })();

From 240d8c8d307e4675e72d854f4d70d722075c02c4 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 25 Jan 2017 14:15:48 +0000
Subject: [PATCH 10/53] Created a modal store

---
 .../boards/components/modal/dismiss.js.es6    |  4 +-
 .../boards/components/modal/footer.js.es6     | 18 +++---
 .../boards/components/modal/header.js.es6     |  4 +-
 .../boards/components/modal/list.js.es6       | 42 ++++---------
 .../components/modal/lists_dropdown.js.es6    |  2 +-
 .../boards/components/modal/modal.es6         |  7 +--
 .../boards/components/modal/search.js.es6     | 25 ++------
 .../boards/components/modal/tabs.js.es6       |  6 +-
 .../boards/stores/modal_store.js.es6          | 63 +++++++++++++++++++
 9 files changed, 98 insertions(+), 73 deletions(-)
 create mode 100644 app/assets/javascripts/boards/stores/modal_store.js.es6

diff --git a/app/assets/javascripts/boards/components/modal/dismiss.js.es6 b/app/assets/javascripts/boards/components/modal/dismiss.js.es6
index b5027f004c6..0483b4b412d 100644
--- a/app/assets/javascripts/boards/components/modal/dismiss.js.es6
+++ b/app/assets/javascripts/boards/components/modal/dismiss.js.es6
@@ -1,13 +1,13 @@
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.DismissModal = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     methods: {
       toggleModal(toggle) {
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index cacc8d69a3c..66414d96100 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -1,41 +1,39 @@
 //= require ./lists_dropdown
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalFooter = Vue.extend({
     data() {
-      return {
-        store: Store.modal,
-      };
+      return ModalStore.globalStore;
     },
     computed: {
       submitDisabled() {
-        return !Store.modalSelectedCount();
+        return !ModalStore.selectedCount();
       },
       submitText() {
-        const count = Store.modalSelectedCount();
+        const count = ModalStore.selectedCount();
 
         return `Add ${count} issue${count > 1 || !count ? 's' : ''}`;
       },
     },
     methods: {
       hideModal() {
-        this.store.showAddIssuesModal = false;
+        this.showAddIssuesModal = false;
       },
       addIssues() {
-        const list = this.store.selectedList;
-        const issueIds = this.store.selectedIssues.map(issue => issue.id);
+        const list = this.selectedList;
+        const issueIds = this.selectedIssues.map(issue => issue.id);
 
         // Post the data to the backend
         gl.boardService.addMultipleIssues(list, issueIds);
 
         // Add the issues on the frontend
         issueIds.forEach((id) => {
-          const issue = this.store.issues.filter(issue => issue.id == id)[0];
+          const issue = this.issues.filter(fIssue => fIssue.id === id)[0];
           list.addIssue(issue);
           list.issuesSize += 1;
         });
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index a89b2bbc515..cab08076b15 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -3,14 +3,14 @@
 //= require ./search
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssuesModalHeader = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     components: {
       'modal-dismiss': gl.issueBoards.DismissModal,
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 3520c49699a..0a9da849ef9 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -3,38 +3,27 @@
 /* global Masonry */
 (() => {
   let listMasonry;
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalList = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     watch: {
       activeTab() {
-        this.$nextTick(() => {
-          this.destroyMasonry();
-          this.initMasonry();
-        });
+        this.initMasonry();
       },
       issues: {
         handler() {
-          this.$nextTick(() => {
-            listMasonry.layout();
-          });
+          this.initMasonry();
         },
         deep: true,
-      }
+      },
     },
     computed: {
-      loading() {
-        return this.issues.length === 0;
-      },
-      selectedCount() {
-        return Store.modalSelectedCount();
-      },
       loopIssues() {
         if (this.activeTab === 'all') {
           return this.issues;
@@ -44,31 +33,24 @@
       },
     },
     methods: {
-      toggleIssue(issueObj) {
-        const issue = issueObj;
-        issue.selected = !issue.selected;
-
-        if (issue.selected) {
-          this.selectedIssues.push(issue);
-        } else {
-          // Remove this issue
-          const index = this.selectedIssues.indexOf(issue);
-          this.selectedIssues.splice(index, 1);
-        }
-      },
+      toggleIssue: ModalStore.toggleIssue.bind(ModalStore),
       showIssue(issue) {
         if (this.activeTab === 'all') return true;
 
         return issue.selected;
       },
       initMasonry() {
-        listMasonry = new Masonry(this.$refs.list, {
-          transitionDuration: 0,
+        this.$nextTick(() => {
+          this.destroyMasonry();
+          listMasonry = new Masonry(this.$refs.list, {
+            transitionDuration: 0,
+          });
         });
       },
       destroyMasonry() {
         if (listMasonry) {
           listMasonry.destroy();
+          listMasonry = undefined;
         }
       },
     },
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index 27da5057083..a147bd0d2aa 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -10,7 +10,7 @@
       return {
         modal: Store.modal,
         state: Store.state,
-      }
+      };
     },
     computed: {
       selected() {
diff --git a/app/assets/javascripts/boards/components/modal/modal.es6 b/app/assets/javascripts/boards/components/modal/modal.es6
index 8d593459935..501f493a1d8 100644
--- a/app/assets/javascripts/boards/components/modal/modal.es6
+++ b/app/assets/javascripts/boards/components/modal/modal.es6
@@ -3,14 +3,14 @@
 //= require ./footer
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssuesModal = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     watch: {
       searchTerm() {
@@ -38,8 +38,7 @@
           this.issues = [];
           data.forEach((issueObj) => {
             const issue = new ListIssue(issueObj);
-            const foundSelectedIssue = this.selectedIssues
-              .filter(filteredIssue => filteredIssue.id === issue.id)[0];
+            const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
             issue.selected = foundSelectedIssue !== undefined;
 
             this.issues.push(issue);
diff --git a/app/assets/javascripts/boards/components/modal/search.js.es6 b/app/assets/javascripts/boards/components/modal/search.js.es6
index 8c3814740f1..6753656ec4a 100644
--- a/app/assets/javascripts/boards/components/modal/search.js.es6
+++ b/app/assets/javascripts/boards/components/modal/search.js.es6
@@ -1,17 +1,17 @@
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalSearch = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     computed: {
       selectAllText() {
-        if (Store.modalSelectedCount() !== this.issues.length || this.issues.length === 0) {
+        if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
           return 'Select all';
         }
 
@@ -19,24 +19,7 @@
       },
     },
     methods: {
-      toggleAll() {
-        const select = Store.modalSelectedCount() !== this.issues.length;
-
-        this.issues.forEach((issue) => {
-          const issueUpdate = issue;
-
-          if (issueUpdate.selected !== select) {
-            issueUpdate.selected = select;
-
-            if (select) {
-              this.selectedIssues.push(issueUpdate);
-            } else {
-              const index = this.selectedIssues.indexOf(issue);
-              this.selectedIssues.splice(index, 1);
-            }
-          }
-        });
-      },
+      toggleAll: ModalStore.toggleAll.bind(ModalStore),
     },
     template: `
       <div
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index a1da7840036..2730893df76 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -1,13 +1,13 @@
 /* global Vue */
 (() => {
-  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalTabs = Vue.extend({
     data() {
-      return Store.modal;
+      return ModalStore.globalStore;
     },
     methods: {
       changeTab(tab) {
@@ -16,7 +16,7 @@
     },
     computed: {
       selectedCount() {
-        return Store.modalSelectedCount();
+        return ModalStore.selectedCount();
       },
     },
     destroyed() {
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
new file mode 100644
index 00000000000..68f5e57a154
--- /dev/null
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -0,0 +1,63 @@
+(() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  class ModalStore {
+    constructor() {
+      this.globalStore = gl.issueBoards.BoardsStore.modal;
+    }
+
+    selectedCount() {
+      return this.globalStore.selectedIssues.length;
+    }
+
+    toggleIssue(issueObj) {
+      const issue = issueObj;
+      issue.selected = !issue.selected;
+
+      if (issue.selected) {
+        this.addSelectedIssue(issue);
+      } else {
+        this.removeSelectedIssue(issue);
+      }
+    }
+
+    toggleAll() {
+      const select = this.selectedCount() !== this.globalStore.issues.length;
+
+      this.globalStore.issues.forEach((issue) => {
+        const issueUpdate = issue;
+
+        if (issueUpdate.selected !== select) {
+          issueUpdate.selected = select;
+
+          if (select) {
+            this.addSelectedIssue(issue);
+          } else {
+            this.removeSelectedIssue(issue);
+          }
+        }
+      });
+    }
+
+    addSelectedIssue(issue) {
+      this.globalStore.selectedIssues.push(issue);
+    }
+
+    removeSelectedIssue(issue) {
+      const index = this.selectedIssueIndex(issue);
+      this.globalStore.selectedIssues.splice(index, 1);
+    }
+
+    selectedIssueIndex(issue) {
+      return this.globalStore.selectedIssues.indexOf(issue);
+    }
+
+    findSelectedIssue(issue) {
+      return this.globalStore.selectedIssues
+        .filter(filteredIssue => filteredIssue.id === issue.id)[0];
+    }
+  }
+
+  gl.issueBoards.ModalStore = new ModalStore();
+})();

From 6adb6caed9c6a25aa68ee9ceb37419543bb49e23 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 25 Jan 2017 16:53:09 +0000
Subject: [PATCH 11/53] Started tests

---
 .../javascripts/boards/boards_bundle.js.es6   |   9 +-
 .../boards/components/modal/dismiss.js.es6    |   2 +-
 .../boards/components/modal/footer.js.es6     |   2 +-
 .../boards/components/modal/header.js.es6     |   8 +-
 .../modal/{modal.es6 => index.js.es6}         |   4 +-
 .../boards/components/modal/list.js.es6       |   2 +-
 .../components/modal/lists_dropdown.js.es6    |   3 +-
 .../boards/components/modal/search.js.es6     |   2 +-
 .../boards/components/modal/tabs.js.es6       |   2 +-
 .../boards/stores/boards_store.js.es6         |   9 -
 .../boards/stores/modal_store.js.es6          |  24 +-
 spec/features/boards/add_issues_modal_spec.rb | 210 ++++++++++++++++++
 12 files changed, 243 insertions(+), 34 deletions(-)
 rename app/assets/javascripts/boards/components/modal/{modal.es6 => index.js.es6} (98%)
 create mode 100644 spec/features/boards/add_issues_modal_spec.rb

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 67d9f023866..e2b3d2c7df6 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -14,12 +14,13 @@
 //= require ./components/board
 //= require ./components/board_sidebar
 //= require ./components/new_list_dropdown
-//= require ./components/modal/modal
+//= require ./components/modal/index
 //= require ./vue_resource_interceptor
 
 $(() => {
   const $boardApp = document.getElementById('board-app');
   const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
 
   window.gl = window.gl || {};
 
@@ -73,10 +74,8 @@ $(() => {
           this.loading = false;
 
           if (this.state.lists.length > 0) {
-            Store.modal.selectedList = this.state.lists[0];
+            ModalStore.store.selectedList = this.state.lists[0];
           }
-
-          Store.modal.showAddIssuesModal = true;
         });
     }
   });
@@ -97,6 +96,6 @@ $(() => {
     .on('click', '.js-show-add-issues', (e) => {
       e.preventDefault();
 
-      Store.modal.showAddIssuesModal = true;
+      ModalStore.store.showAddIssuesModal = true;
     });
 });
diff --git a/app/assets/javascripts/boards/components/modal/dismiss.js.es6 b/app/assets/javascripts/boards/components/modal/dismiss.js.es6
index 0483b4b412d..cf952837d39 100644
--- a/app/assets/javascripts/boards/components/modal/dismiss.js.es6
+++ b/app/assets/javascripts/boards/components/modal/dismiss.js.es6
@@ -7,7 +7,7 @@
 
   gl.issueBoards.DismissModal = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     methods: {
       toggleModal(toggle) {
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 66414d96100..e4d49b914bd 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -8,7 +8,7 @@
 
   gl.issueBoards.ModalFooter = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     computed: {
       submitDisabled() {
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index cab08076b15..6896a0fcf45 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -1,7 +1,7 @@
-//= require ./dismiss
-//= require ./tabs
-//= require ./search
 /* global Vue */
+//= require ./tabs
+//= require ./dismiss
+//= require ./search
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -10,7 +10,7 @@
 
   gl.issueBoards.IssuesModalHeader = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     components: {
       'modal-dismiss': gl.issueBoards.DismissModal,
diff --git a/app/assets/javascripts/boards/components/modal/modal.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
similarity index 98%
rename from app/assets/javascripts/boards/components/modal/modal.es6
rename to app/assets/javascripts/boards/components/modal/index.js.es6
index 501f493a1d8..693182fe37e 100644
--- a/app/assets/javascripts/boards/components/modal/modal.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -1,7 +1,7 @@
+/* global Vue */
 //= require ./header
 //= require ./list
 //= require ./footer
-/* global Vue */
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -10,7 +10,7 @@
 
   gl.issueBoards.IssuesModal = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     watch: {
       searchTerm() {
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 0a9da849ef9..55e3ff3c7f4 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -10,7 +10,7 @@
 
   gl.issueBoards.ModalList = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     watch: {
       activeTab() {
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index a147bd0d2aa..e68ad30500c 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -1,5 +1,6 @@
 /* global Vue */
 (() => {
+  const ModalStore = gl.issueBoards.ModalStore;
   const Store = gl.issueBoards.BoardsStore;
 
   window.gl = window.gl || {};
@@ -8,7 +9,7 @@
   gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
     data() {
       return {
-        modal: Store.modal,
+        modal: ModalStore.store,
         state: Store.state,
       };
     },
diff --git a/app/assets/javascripts/boards/components/modal/search.js.es6 b/app/assets/javascripts/boards/components/modal/search.js.es6
index 6753656ec4a..764340bc5f3 100644
--- a/app/assets/javascripts/boards/components/modal/search.js.es6
+++ b/app/assets/javascripts/boards/components/modal/search.js.es6
@@ -7,7 +7,7 @@
 
   gl.issueBoards.ModalSearch = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     computed: {
       selectAllText() {
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index 2730893df76..f9026cea90b 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -7,7 +7,7 @@
 
   gl.issueBoards.ModalTabs = Vue.extend({
     data() {
-      return ModalStore.globalStore;
+      return ModalStore.store;
     },
     methods: {
       changeTab(tab) {
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index d29731ad0aa..66ecae1c01d 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -12,15 +12,6 @@
     detail: {
       issue: {}
     },
-    modal: {
-      issues: [],
-      selectedIssues: [],
-      showAddIssuesModal: false,
-      activeTab: 'all',
-      selectedList: {},
-      searchTerm: '',
-      loading: false,
-    },
     moving: {
       issue: {},
       list: {}
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 68f5e57a154..54419751433 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -4,11 +4,19 @@
 
   class ModalStore {
     constructor() {
-      this.globalStore = gl.issueBoards.BoardsStore.modal;
+      this.store = {
+        issues: [],
+        selectedIssues: [],
+        showAddIssuesModal: false,
+        activeTab: 'all',
+        selectedList: {},
+        searchTerm: '',
+        loading: false,
+      };
     }
 
     selectedCount() {
-      return this.globalStore.selectedIssues.length;
+      return this.store.selectedIssues.length;
     }
 
     toggleIssue(issueObj) {
@@ -23,9 +31,9 @@
     }
 
     toggleAll() {
-      const select = this.selectedCount() !== this.globalStore.issues.length;
+      const select = this.selectedCount() !== this.store.issues.length;
 
-      this.globalStore.issues.forEach((issue) => {
+      this.store.issues.forEach((issue) => {
         const issueUpdate = issue;
 
         if (issueUpdate.selected !== select) {
@@ -41,20 +49,20 @@
     }
 
     addSelectedIssue(issue) {
-      this.globalStore.selectedIssues.push(issue);
+      this.store.selectedIssues.push(issue);
     }
 
     removeSelectedIssue(issue) {
       const index = this.selectedIssueIndex(issue);
-      this.globalStore.selectedIssues.splice(index, 1);
+      this.store.selectedIssues.splice(index, 1);
     }
 
     selectedIssueIndex(issue) {
-      return this.globalStore.selectedIssues.indexOf(issue);
+      return this.store.selectedIssues.indexOf(issue);
     }
 
     findSelectedIssue(issue) {
-      return this.globalStore.selectedIssues
+      return this.store.selectedIssues
         .filter(filteredIssue => filteredIssue.id === issue.id)[0];
     }
   }
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
new file mode 100644
index 00000000000..e6065c0740d
--- /dev/null
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -0,0 +1,210 @@
+require 'rails_helper'
+
+describe 'Issue Boards add issue modal', :feature, :js do
+  include WaitForAjax
+  include WaitForVueResource
+
+  let(:project) { create(:empty_project, :public) }
+  let(:board) { create(:board, project: project) }
+  let(:user) { create(:user) }
+  let!(:planning) { create(:label, project: project, name: 'Planning') }
+  let!(:label) { create(:label, project: project) }
+  let!(:list1) { create(:list, board: board, label: planning, position: 0) }
+  let!(:issue) { create(:issue, project: project) }
+  let!(:issue2) { create(:issue, project: project) }
+
+  before do
+    project.team << [user, :master]
+
+    login_as(user)
+
+    visit namespace_project_board_path(project.namespace, project, board)
+    wait_for_vue_resource
+  end
+
+  context 'modal interaction' do
+    it 'opens modal' do
+      click_button('Add issues')
+
+      expect(page).to have_selector('.add-issues-modal')
+    end
+
+    it 'closes modal' do
+      click_button('Add issues')
+
+      page.within('.add-issues-modal') do
+        find('.close').click
+      end
+
+      expect(page).not_to have_selector('.add-issues-modal')
+    end
+
+    it 'closes modal if cancel button clicked' do
+      click_button('Add issues')
+
+      page.within('.add-issues-modal') do
+        click_button 'Cancel'
+      end
+
+      expect(page).not_to have_selector('.add-issues-modal')
+    end
+  end
+
+  context 'issues list' do
+    before do
+      click_button('Add issues')
+
+      wait_for_vue_resource
+    end
+
+    it 'loads issues' do
+      page.within('.add-issues-modal') do
+        page.within('.nav-links') do
+          expect(page).to have_content('2')
+        end
+
+        expect(page).to have_selector('.card', count: 2)
+      end
+    end
+
+    it 'shows selected issues' do
+      page.within('.add-issues-modal') do
+        click_link 'Selected issues'
+
+        expect(page).not_to have_selector('.card')
+      end
+    end
+
+    context 'search' do
+      it 'returns issues' do
+        page.within('.add-issues-modal') do
+          find('.form-control').native.send_keys(issue.title)
+
+          expect(page).to have_selector('.card', count: 1)
+        end
+      end
+
+      it 'returns no issues' do
+        page.within('.add-issues-modal') do
+          find('.form-control').native.send_keys('testing search')
+
+          expect(page).not_to have_selector('.card')
+        end
+      end
+    end
+
+    context 'selecing issues' do
+      it 'selects single issue' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          page.within('.nav-links') do
+            expect(page).to have_content('Selected issues 1')
+          end
+        end
+      end
+
+      it 'changes button text' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          expect(first('.add-issues-footer .btn')).to have_content('Add 1 issue')
+        end
+      end
+
+      it 'changes button text with plural' do
+        page.within('.add-issues-modal') do
+          all('.card').each do |el|
+            el.click
+          end
+
+          expect(first('.add-issues-footer .btn')).to have_content('Add 2 issues')
+        end
+      end
+
+      it 'shows only selected issues on selected tab' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          click_link 'Selected issues'
+
+          expect(page).to have_selector('.card', count: 1)
+        end
+      end
+
+      it 'selects all issues' do
+        page.within('.add-issues-modal') do
+          click_button 'Select all'
+
+          expect(page).to have_selector('.is-active', count: 2)
+        end
+      end
+
+      it 'un-selects all issues' do
+        page.within('.add-issues-modal') do
+          click_button 'Select all'
+
+          expect(page).to have_selector('.is-active', count: 2)
+
+          click_button 'Un-select all'
+
+          expect(page).not_to have_selector('.is-active')
+        end
+      end
+
+      it 'selects all that arent already selected' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          expect(page).to have_selector('.is-active', count: 1)
+
+          click_button 'Select all'
+
+          expect(page).to have_selector('.is-active', count: 2)
+        end
+      end
+
+      it 'unselects from selected tab' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          click_link 'Selected issues'
+
+          first('.card').click
+
+          expect(page).not_to have_selector('.card')
+        end
+      end
+    end
+
+    context 'adding issues' do
+      it 'adds to board' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          click_button 'Add 1 issue'
+        end
+
+        page.within(first('.board')) do
+          expect(page).to have_selector('.card')
+        end
+      end
+
+      it 'adds to second list' do
+        page.within('.add-issues-modal') do
+          first('.card').click
+
+          click_button planning.title
+
+          click_link label.title
+
+          click_button 'Add 1 issue'
+        end
+
+        page.within(find('.board:nth-child(2)')) do
+          expect(page).to have_selector('.card')
+        end
+      end
+    end
+  end
+end

From d9894a2fddb70f37432a3605eac85c7b9e5d0fee Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 26 Jan 2017 10:55:40 +0000
Subject: [PATCH 12/53] Cleaned up some code

---
 .../boards/components/modal/dismiss.js.es6    | 28 --------
 .../boards/components/modal/footer.js.es6     |  5 +-
 .../boards/components/modal/header.js.es6     | 41 ++++++++++--
 .../boards/components/modal/index.js.es6      | 18 ++---
 .../boards/components/modal/list.js.es6       | 42 ++++++------
 .../boards/components/modal/search.js.es6     | 42 ------------
 .../boards/components/modal/tabs.js.es6       | 11 +--
 app/assets/stylesheets/pages/boards.scss      | 67 ++++++-------------
 8 files changed, 91 insertions(+), 163 deletions(-)
 delete mode 100644 app/assets/javascripts/boards/components/modal/dismiss.js.es6
 delete mode 100644 app/assets/javascripts/boards/components/modal/search.js.es6

diff --git a/app/assets/javascripts/boards/components/modal/dismiss.js.es6 b/app/assets/javascripts/boards/components/modal/dismiss.js.es6
deleted file mode 100644
index cf952837d39..00000000000
--- a/app/assets/javascripts/boards/components/modal/dismiss.js.es6
+++ /dev/null
@@ -1,28 +0,0 @@
-/* global Vue */
-(() => {
-  const ModalStore = gl.issueBoards.ModalStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.DismissModal = Vue.extend({
-    data() {
-      return ModalStore.store;
-    },
-    methods: {
-      toggleModal(toggle) {
-        this.showAddIssuesModal = toggle;
-      },
-    },
-    template: `
-      <button
-        type="button"
-        class="close"
-        data-dismiss="modal"
-        aria-label="Close"
-        @click="toggleModal(false)">
-        <span aria-hidden="true">×</span>
-      </button>
-    `,
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index e4d49b914bd..d2156759785 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -32,8 +32,7 @@
         gl.boardService.addMultipleIssues(list, issueIds);
 
         // Add the issues on the frontend
-        issueIds.forEach((id) => {
-          const issue = this.issues.filter(fIssue => fIssue.id === id)[0];
+        this.selectedIssues.forEach((issue) => {
           list.addIssue(issue);
           list.issuesSize += 1;
         });
@@ -54,7 +53,7 @@
             @click="addIssues">
             {{ submitText }}
           </button>
-          <span class="add-issues-footer-to-list">
+          <span class="inline add-issues-footer-to-list">
             to list
           </span>
           <lists-dropdown></lists-dropdown>
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 6896a0fcf45..a91e3da2060 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -1,7 +1,5 @@
 /* global Vue */
 //= require ./tabs
-//= require ./dismiss
-//= require ./search
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -12,21 +10,52 @@
     data() {
       return ModalStore.store;
     },
+    computed: {
+      selectAllText() {
+        if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
+          return 'Select all';
+        }
+
+        return 'Un-select all';
+      },
+    },
+    methods: {
+      toggleAll: ModalStore.toggleAll.bind(ModalStore),
+    },
     components: {
-      'modal-dismiss': gl.issueBoards.DismissModal,
       'modal-tabs': gl.issueBoards.ModalTabs,
-      'modal-search': gl.issueBoards.ModalSearch,
     },
     template: `
       <div>
         <header class="add-issues-header form-actions">
           <h2>
             Add issues
-            <modal-dismiss></modal-dismiss>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+              @click="showAddIssuesModal = false">
+              <span aria-hidden="true">×</span>
+            </button>
           </h2>
         </header>
         <modal-tabs v-if="!loading"></modal-tabs>
-        <modal-search v-if="!loading"></modal-search>
+        <div
+          class="add-issues-search prepend-top-10 append-bottom-10"
+          v-if="activeTab == 'all' && !loading">
+          <input
+            placeholder="Search issues..."
+            class="form-control"
+            type="search"
+            v-model="searchTerm" />
+          <button
+            type="button"
+            class="btn btn-success btn-inverted prepend-left-10"
+            @click="toggleAll">
+            {{ selectAllText }}
+          </button>
+        </div>
       </div>
     `,
   });
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 693182fe37e..2dfc7f16c21 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -16,14 +16,16 @@
       searchTerm() {
         this.searchOperation();
       },
-    },
-    mounted() {
-      this.loading = true;
+      showAddIssuesModal() {
+        if (this.showAddIssuesModal && !this.issues.length) {
+          this.loading = true;
 
-      this.loadIssues()
-        .then(() => {
-          this.loading = false;
-        });
+          this.loadIssues()
+            .then(() => {
+              this.loading = false;
+            });
+        }
+      },
     },
     methods: {
       searchOperation: _.debounce(function() {
@@ -59,7 +61,7 @@
           <modal-header></modal-header>
           <modal-list v-if="!loading"></modal-list>
           <section
-            class="add-issues-list"
+            class="add-issues-list text-center"
             v-if="loading">
             <div class="add-issues-list-loading">
               <i class="fa fa-spinner fa-spin"></i>
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 55e3ff3c7f4..4f6da0b493c 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -64,32 +64,30 @@
       'issue-card-inner': gl.issueBoards.IssueCardInner,
     },
     template: `
-      <section class="add-issues-list">
+      <div
+        class="add-issues-list add-issues-list-columns"
+        ref="list"
+        v-show="!loading">
         <div
-          class="add-issues-list-columns list-unstyled"
-          ref="list"
-          v-show="!loading">
+          v-for="issue in loopIssues"
+          v-if="showIssue(issue)"
+          class="card-parent">
           <div
-            v-for="issue in loopIssues"
-            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>
-              <span
-                v-if="issue.selected"
-                class="issue-card-selected">
-                <i class="fa fa-check"></i>
-              </span>
-            </div>
+            class="card"
+            :class="{ 'is-active': issue.selected }"
+            @click="toggleIssue(issue)">
+            <issue-card-inner
+              :issue="issue"
+              :issue-link-base="'/'">
+            </issue-card-inner>
+            <span
+              v-if="issue.selected"
+              class="issue-card-selected text-center">
+              <i class="fa fa-check"></i>
+            </span>
           </div>
         </div>
-      </section>
+      </div>
     `,
   });
 })();
diff --git a/app/assets/javascripts/boards/components/modal/search.js.es6 b/app/assets/javascripts/boards/components/modal/search.js.es6
deleted file mode 100644
index 764340bc5f3..00000000000
--- a/app/assets/javascripts/boards/components/modal/search.js.es6
+++ /dev/null
@@ -1,42 +0,0 @@
-/* global Vue */
-(() => {
-  const ModalStore = gl.issueBoards.ModalStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.ModalSearch = Vue.extend({
-    data() {
-      return ModalStore.store;
-    },
-    computed: {
-      selectAllText() {
-        if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
-          return 'Select all';
-        }
-
-        return 'Un-select all';
-      },
-    },
-    methods: {
-      toggleAll: ModalStore.toggleAll.bind(ModalStore),
-    },
-    template: `
-      <div
-        class="add-issues-search"
-        v-if="activeTab == 'all'">
-        <input
-          placeholder="Search issues..."
-          class="form-control"
-          type="search"
-          v-model="searchTerm" />
-        <button
-          type="button"
-          class="btn btn-success btn-inverted"
-          @click="toggleAll">
-          {{ selectAllText }}
-        </button>
-      </div>
-    `,
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index f9026cea90b..c165b81a774 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -9,11 +9,6 @@
     data() {
       return ModalStore.store;
     },
-    methods: {
-      changeTab(tab) {
-        this.activeTab = tab;
-      },
-    },
     computed: {
       selectedCount() {
         return ModalStore.selectedCount();
@@ -23,13 +18,13 @@
       this.activeTab = 'all';
     },
     template: `
-      <div class="top-area">
+      <div class="top-area prepend-top-10">
         <ul class="nav-links issues-state-filters">
           <li :class="{ 'active': activeTab == 'all' }">
             <a
               href="#"
               role="button"
-              @click.prevent="changeTab('all')">
+              @click.prevent="activeTab = 'all'">
               <span>All issues</span>
               <span class="badge">
                 {{ issues.length }}
@@ -40,7 +35,7 @@
             <a
               href="#"
               role="button"
-              @click.prevent="changeTab('selected')">
+              @click.prevent="activeTab = 'selected'">
               <span>Selected issues</span>
               <span class="badge">
                 {{ selectedCount }}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 683ef9f2388..842ae0c083f 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -358,7 +358,6 @@
 
 .add-issues-modal {
   display: flex;
-  align-items: center;
   position: fixed;
   top: 0;
   right: 0;
@@ -374,8 +373,7 @@
   width: 90vw;
   height: 85vh;
   min-height: 500px;
-  margin-left: auto;
-  margin-right: auto;
+  margin: auto;
   padding: 25px 15px 0;
   background-color: $white-light;
   border-radius: $border-radius-default;
@@ -391,57 +389,19 @@
     margin: 0;
     font-size: 18px;
   }
-
-  .top-area {
-    margin-bottom: 10px;
-  }
 }
 
 .add-issues-search {
   display: flex;
-  margin-bottom: 10px;
-  margin-top: 10px;
-
-  .btn {
-    margin-left: 10px;
-  }
 }
 
 .add-issues-list {
   display: flex;
   flex: 1;
+  padding-top: 3px;
   margin-left: -$gl-vert-padding;
   margin-right: -$gl-vert-padding;
   overflow-y: scroll;
-}
-
-.add-issues-list-loading {
-  align-self: center;
-  width: 100%;
-  padding-left: $gl-vert-padding;
-  padding-right: $gl-vert-padding;
-  font-size: 35px;
-  text-align: center;
-}
-
-.add-issues-footer {
-  margin-top: auto;
-  margin-left: -15px;
-  margin-right: -15px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.add-issues-footer-to-list {
-  display: inline-block;
-  padding-left: 6px;
-  padding-right: 6px;
-  line-height: 34px;
-}
-
-.add-issues-list-columns {
-  width: 100%;
-  padding-top: 3px;
 
   .card-parent {
     width: 100%;
@@ -462,9 +422,26 @@
   }
 }
 
-.all-issues-selected-empty {
+.add-issues-list-loading {
   align-self: center;
-  margin-bottom: 0;
+  width: 100%;
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  font-size: 35px;
+}
+
+.add-issues-footer {
+  margin-top: auto;
+  margin-left: -15px;
+  margin-right: -15px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.add-issues-footer-to-list {
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  line-height: 34px;
 }
 
 .issue-card-selected {
@@ -472,11 +449,9 @@
   right: -3px;
   top: -3px;
   width: 20px;
-  height: 20px;
   background-color: $blue-dark;
   color: $white-light;
   font-size: 12px;
-  text-align: center;
   line-height: 20px;
   border-radius: 50%;
 }

From ff98a7434ffe848738228cd51d9deee3b8373d91 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 26 Jan 2017 11:29:04 +0000
Subject: [PATCH 13/53] Added empty state

---
 .../components/modal/empty_state.js.es6       | 65 +++++++++++++++++++
 .../boards/components/modal/footer.js.es6     |  3 +-
 .../boards/components/modal/header.js.es6     |  6 +-
 .../boards/components/modal/index.js.es6      | 20 +++++-
 .../boards/components/modal/list.js.es6       |  3 +-
 .../boards/components/modal/tabs.js.es6       |  2 +-
 app/assets/stylesheets/pages/boards.scss      | 12 ++++
 app/views/projects/boards/_show.html.haml     |  3 +-
 8 files changed, 105 insertions(+), 9 deletions(-)
 create mode 100644 app/assets/javascripts/boards/components/modal/empty_state.js.es6

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
new file mode 100644
index 00000000000..efea12ef7d8
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -0,0 +1,65 @@
+/* global Vue */
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.ModalEmptyState = Vue.extend({
+    data() {
+      return ModalStore.store;
+    },
+    props: [
+      'image', 'newIssuePath',
+    ],
+    computed: {
+      contents() {
+        const obj = {
+          title: 'You haven\'t added any issues to your project yet',
+          content: `
+            An issue can be a bug, a todo or a feature request that needs to be
+            discussed in a project. Besides, issues are searchable and filterable.
+          `,
+        };
+
+        if (this.activeTab === 'selected') {
+          obj.title = 'You haven\'t selected any issues yet';
+          obj.content = `
+            Go back to <strong>All issues</strong> and select some issues
+            to add to your board.
+          `;
+        }
+
+        return obj;
+      }
+    },
+    template: `
+      <div class="empty-state">
+        <div class="row">
+          <div class="col-xs-12 col-sm-6 col-sm-push-6">
+            <div class="svg-content" v-html="image"></div>
+          </div>
+          <div class="col-xs-12 col-sm-6 col-sm-pull-6">
+            <div class="text-content">
+              <h4>{{ contents.title }}</h4>
+              <p v-html="contents.content"></p>
+              <a
+                :href="newIssuePath"
+                class="btn btn-success btn-inverted"
+                v-if="activeTab === 'all'">
+                Create issue
+              </a>
+              <button
+                type="button"
+                class="btn btn-default"
+                @click="activeTab = 'all'"
+                v-if="activeTab === 'selected'">
+                All issues
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index d2156759785..9d60d59bcb1 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -44,7 +44,8 @@
       'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
     },
     template: `
-      <footer class="form-actions add-issues-footer">
+      <footer
+        class="form-actions add-issues-footer">
         <div class="pull-left">
           <button
             class="btn btn-success"
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index a91e3da2060..f6acfed9270 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -40,10 +40,10 @@
             </button>
           </h2>
         </header>
-        <modal-tabs v-if="!loading"></modal-tabs>
+        <modal-tabs v-if="!loading && issues.length > 0"></modal-tabs>
         <div
-          class="add-issues-search prepend-top-10 append-bottom-10"
-          v-if="activeTab == 'all' && !loading">
+          class="add-issues-search append-bottom-10"
+          v-if="activeTab == 'all' && !loading && issues.length > 0">
           <input
             placeholder="Search issues..."
             class="form-control"
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 2dfc7f16c21..30fe66703b7 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -2,6 +2,7 @@
 //= require ./header
 //= require ./list
 //= require ./footer
+//= require ./empty_state
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -9,6 +10,9 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssuesModal = Vue.extend({
+    props: [
+      'blankStateImage', 'newIssuePath',
+    ],
     data() {
       return ModalStore.store;
     },
@@ -48,10 +52,20 @@
         });
       },
     },
+    computed: {
+      showList() {
+        if (this.activeTab === 'selected') {
+          return this.selectedIssues.length > 0;
+        }
+
+        return this.issues.length > 0;
+      },
+    },
     components: {
       'modal-header': gl.issueBoards.IssuesModalHeader,
       'modal-list': gl.issueBoards.ModalList,
       'modal-footer': gl.issueBoards.ModalFooter,
+      'empty-state': gl.issueBoards.ModalEmptyState,
     },
     template: `
       <div
@@ -59,7 +73,11 @@
         v-if="showAddIssuesModal">
         <div class="add-issues-container">
           <modal-header></modal-header>
-          <modal-list v-if="!loading"></modal-list>
+          <modal-list v-if="!loading && showList"></modal-list>
+          <empty-state
+            v-if="(!loading && issues.length === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
+            :image="blankStateImage"
+            :new-issue-path="newIssuePath"></empty-state>
           <section
             class="add-issues-list text-center"
             v-if="loading">
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 4f6da0b493c..8180f200649 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -66,8 +66,7 @@
     template: `
       <div
         class="add-issues-list add-issues-list-columns"
-        ref="list"
-        v-show="!loading">
+        ref="list">
         <div
           v-for="issue in loopIssues"
           v-if="showIssue(issue)"
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index c165b81a774..fecd92f70ba 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -18,7 +18,7 @@
       this.activeTab = 'all';
     },
     template: `
-      <div class="top-area prepend-top-10">
+      <div class="top-area prepend-top-10 append-bottom-10">
         <ul class="nav-links issues-state-filters">
           <li :class="{ 'active': activeTab == 'all' }">
             <a
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 842ae0c083f..04e7aea63fd 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -378,6 +378,18 @@
   background-color: $white-light;
   border-radius: $border-radius-default;
   box-shadow: 0 2px 12px rgba($black, .5);
+
+  .empty-state {
+    display: flex;
+    flex: 1;
+    margin-top: 0;
+
+    > .row {
+      width: 100%;
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
 }
 
 .add-issues-header {
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index 798eace7a82..a64f66b5b64 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -26,4 +26,5 @@
       ":issue-link-base" => "issueLinkBase",
       ":key" => "_uid" }
   = render "projects/boards/components/sidebar"
-  %board-add-issues-modal
+  %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
+    "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project) }

From 76264cc01c112590454a19690bd5abb1ed4db7dc Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 26 Jan 2017 11:41:43 +0000
Subject: [PATCH 14/53] Reloads issues when re-opening modal

---
 .../boards/components/issue_card_inner.js.es6       |  3 ---
 .../boards/components/modal/empty_state.js.es6      |  3 ---
 .../boards/components/modal/footer.js.es6           |  3 ---
 .../boards/components/modal/header.js.es6           |  3 ---
 .../boards/components/modal/index.js.es6            |  6 +++---
 .../javascripts/boards/components/modal/list.js.es6 |  3 ---
 .../boards/components/modal/lists_dropdown.js.es6   | 13 ++-----------
 .../javascripts/boards/components/modal/tabs.js.es6 |  3 ---
 .../javascripts/boards/stores/modal_store.js.es6    |  3 ---
 9 files changed, 5 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js.es6 b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
index 6a7e9419503..b7eeb5e04c9 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js.es6
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
@@ -2,9 +2,6 @@
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
   gl.issueBoards.IssueCardInner = Vue.extend({
     props: [
       'issue', 'issueLinkBase', 'list',
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index efea12ef7d8..689504f397c 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -2,9 +2,6 @@
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
   gl.issueBoards.ModalEmptyState = Vue.extend({
     data() {
       return ModalStore.store;
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 9d60d59bcb1..51a9444ee61 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -3,9 +3,6 @@
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
   gl.issueBoards.ModalFooter = Vue.extend({
     data() {
       return ModalStore.store;
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index f6acfed9270..d7d896e3be1 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -3,9 +3,6 @@
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
   gl.issueBoards.IssuesModalHeader = Vue.extend({
     data() {
       return ModalStore.store;
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 30fe66703b7..a6718e899f7 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -6,9 +6,6 @@
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
   gl.issueBoards.IssuesModal = Vue.extend({
     props: [
       'blankStateImage', 'newIssuePath',
@@ -28,6 +25,9 @@
             .then(() => {
               this.loading = false;
             });
+        } else if (!this.showAddIssuesModal) {
+          this.issues = [];
+          this.selectedIssues = [];
         }
       },
     },
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 8180f200649..6a681d9278f 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -5,9 +5,6 @@
   let listMasonry;
   const ModalStore = gl.issueBoards.ModalStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
   gl.issueBoards.ModalList = Vue.extend({
     data() {
       return ModalStore.store;
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index e68ad30500c..b205c019a31 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -1,16 +1,12 @@
 /* global Vue */
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
     data() {
       return {
         modal: ModalStore.store,
-        state: Store.state,
+        state: gl.issueBoards.BoardsStore.state,
       };
     },
     computed: {
@@ -18,11 +14,6 @@
         return this.modal.selectedList;
       },
     },
-    methods: {
-      selectList(list) {
-        this.modal.selectedList = list;
-      },
-    },
     template: `
       <div class="dropdown inline">
         <button
@@ -46,7 +37,7 @@
                 href="#"
                 role="button"
                 :class="{ 'is-active': list.id == selected.id }"
-                @click="selectList(list)">
+                @click="modal.selectedList = list">
                 <span
                   class="dropdown-label-box"
                   :style="{ backgroundColor: list.label.color }">
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index fecd92f70ba..94ff8ec999a 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -2,9 +2,6 @@
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
   gl.issueBoards.ModalTabs = Vue.extend({
     data() {
       return ModalStore.store;
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 54419751433..b5d183b1bf4 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -1,7 +1,4 @@
 (() => {
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
   class ModalStore {
     constructor() {
       this.store = {

From 54461ce2a3a35071e82fac11f70d39373de424a6 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 26 Jan 2017 12:55:08 +0000
Subject: [PATCH 15/53] Added more tests

---
 .../boards/components/issue_card_inner.js.es6 |   5 +-
 .../components/modal/empty_state.js.es6       |   2 +-
 .../boards/components/modal/index.js.es6      |   3 +-
 .../javascripts/boards/models/issue.js.es6    |   1 +
 .../boards/stores/modal_store.js.es6          |   3 +
 .../javascripts/boards/issue_card_spec.js.es6 | 191 ++++++++++++++++++
 .../boards/modal_store_spec.js.es6            | 115 +++++++++++
 7 files changed, 317 insertions(+), 3 deletions(-)
 create mode 100644 spec/javascripts/boards/issue_card_spec.js.es6
 create mode 100644 spec/javascripts/boards/modal_store_spec.js.es6

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js.es6 b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
index b7eeb5e04c9..383b329edc3 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js.es6
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
@@ -2,6 +2,9 @@
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
   gl.issueBoards.IssueCardInner = Vue.extend({
     props: [
       'issue', 'issueLinkBase', 'list',
@@ -57,7 +60,7 @@
             #{{issue.id}}
           </span>
           <a
-            class="has-tooltip"
+            class="card-assignee has-tooltip"
             :href="issue.assignee.username"
             :title="'Assigned to ' + issue.assignee.name"
             v-if="issue.assignee"
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index 689504f397c..70f2ea51620 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -28,7 +28,7 @@
         }
 
         return obj;
-      }
+      },
     },
     template: `
       <div class="empty-state">
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index a6718e899f7..52f652ccfe1 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -1,4 +1,5 @@
 /* global Vue */
+/* global ListIssue */
 //= require ./header
 //= require ./list
 //= require ./footer
@@ -32,7 +33,7 @@
       },
     },
     methods: {
-      searchOperation: _.debounce(function() {
+      searchOperation: _.debounce(function searchOperationDebounce() {
         this.loadIssues();
       }, 500),
       loadIssues() {
diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6
index a36a146b023..8d93ac637f9 100644
--- a/app/assets/javascripts/boards/models/issue.js.es6
+++ b/app/assets/javascripts/boards/models/issue.js.es6
@@ -13,6 +13,7 @@ class ListIssue {
     this.subscribed = obj.subscribed;
     this.labels = [];
     this.selected = false;
+    this.assignee = false;
 
     if (obj.assignee) {
       this.assignee = new ListUser(obj.assignee);
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index b5d183b1bf4..54419751433 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -1,4 +1,7 @@
 (() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
   class ModalStore {
     constructor() {
       this.store = {
diff --git a/spec/javascripts/boards/issue_card_spec.js.es6 b/spec/javascripts/boards/issue_card_spec.js.es6
new file mode 100644
index 00000000000..181fb684c23
--- /dev/null
+++ b/spec/javascripts/boards/issue_card_spec.js.es6
@@ -0,0 +1,191 @@
+/* global Vue */
+/* global ListUser */
+/* global ListLabel */
+/* global listObj */
+/* global ListIssue */
+
+//= require jquery
+//= require vue
+//= require boards/models/issue
+//= require boards/models/label
+//= require boards/models/list
+//= require boards/models/user
+//= require boards/stores/boards_store
+//= require boards/components/issue_card_inner
+//= require ./mock_data
+
+describe('Issue card component', () => {
+  const user = new ListUser({
+    id: 1,
+    name: 'testing 123',
+    username: 'test',
+    avatar: 'test_image',
+  });
+  const label1 = new ListLabel({
+    id: 3,
+    title: 'testing 123',
+    color: 'blue',
+    text_color: 'white',
+    description: 'test',
+  });
+  let component;
+  let issue;
+  let list;
+
+  beforeEach(() => {
+    setFixtures('<div class="test-container"></div>');
+
+    list = listObj;
+    issue = new ListIssue({
+      title: 'Testing',
+      iid: 1,
+      confidential: false,
+      labels: [list.label],
+    });
+
+    component = new Vue({
+      el: document.querySelector('.test-container'),
+      data() {
+        return {
+          list,
+          issue,
+          issueLinkBase: '/test',
+        };
+      },
+      components: {
+        'issue-card': gl.issueBoards.IssueCardInner,
+      },
+      template: `
+        <issue-card
+          :issue="issue"
+          :list="list"
+          :issue-link-base="issueLinkBase"></issue-card>
+      `,
+    });
+  });
+
+  it('renders issue title', () => {
+    expect(
+      component.$el.querySelector('.card-title').textContent,
+    ).toContain(issue.title);
+  });
+
+  it('includes issue base in link', () => {
+    expect(
+      component.$el.querySelector('.card-title a').getAttribute('href'),
+    ).toContain('/test');
+  });
+
+  it('includes issue title on link', () => {
+    expect(
+      component.$el.querySelector('.card-title a').getAttribute('title'),
+    ).toBe(issue.title);
+  });
+
+  it('does not render confidential icon', () => {
+    expect(
+      component.$el.querySelector('.fa-eye-flash'),
+    ).toBeNull();
+  });
+
+  it('renders confidential icon', (done) => {
+    component.issue.confidential = true;
+
+    setTimeout(() => {
+      expect(
+        component.$el.querySelector('.fa-eye-flash'),
+      ).not.toBeNull();
+      done();
+    }, 0);
+  });
+
+  it('renders issue ID with #', () => {
+    expect(
+      component.$el.querySelector('.card-number').textContent,
+    ).toContain(`#${issue.id}`);
+  });
+
+  describe('assignee', () => {
+    it('does not render assignee', () => {
+      expect(
+        component.$el.querySelector('.card-assignee'),
+      ).toBeNull();
+    });
+
+    describe('exists', () => {
+      beforeEach((done) => {
+        component.issue.assignee = user;
+
+        setTimeout(() => {
+          done();
+        }, 0);
+      });
+
+      it('renders assignee', () => {
+        expect(
+          component.$el.querySelector('.card-assignee'),
+        ).not.toBeNull();
+      });
+
+      it('sets title', () => {
+        expect(
+          component.$el.querySelector('.card-assignee').getAttribute('title'),
+        ).toContain(`Assigned to ${user.name}`);
+      });
+
+      it('sets users path', () => {
+        expect(
+          component.$el.querySelector('.card-assignee').getAttribute('href'),
+        ).toBe('test');
+      });
+
+      it('renders avatar', () => {
+        expect(
+          component.$el.querySelector('.card-assignee img'),
+        ).not.toBeNull();
+      });
+    });
+  });
+
+  describe('labels', () => {
+    it('does not render any', () => {
+      expect(
+        component.$el.querySelector('.label'),
+      ).toBeNull();
+    });
+
+    describe('exists', () => {
+      beforeEach((done) => {
+        component.issue.addLabel(label1);
+
+        setTimeout(() => {
+          done();
+        }, 0);
+      });
+
+      it('does not render list label', () => {
+        expect(
+          component.$el.querySelectorAll('.label').length,
+        ).toBe(1);
+      });
+
+      it('renders label', () => {
+        expect(
+          component.$el.querySelector('.label').textContent,
+        ).toContain(label1.title);
+      });
+
+      it('sets label description as title', () => {
+        expect(
+          component.$el.querySelector('.label').getAttribute('title'),
+        ).toContain(label1.description);
+      });
+
+      it('sets background color of button', () => {
+        expect(
+          component.$el.querySelector('.label').style.backgroundColor,
+        ).toContain(label1.color);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/boards/modal_store_spec.js.es6 b/spec/javascripts/boards/modal_store_spec.js.es6
new file mode 100644
index 00000000000..9c0625357bd
--- /dev/null
+++ b/spec/javascripts/boards/modal_store_spec.js.es6
@@ -0,0 +1,115 @@
+/* global Vue */
+/* global ListIssue */
+
+//= require jquery
+//= require vue
+//= require boards/models/issue
+//= require boards/models/label
+//= require boards/models/list
+//= require boards/models/user
+//= require boards/stores/modal_store
+
+describe('Modal store', () => {
+  let issue;
+  let issue2;
+  const Store = gl.issueBoards.ModalStore;
+
+  beforeEach(() => {
+    // Setup default state
+    Store.store.issues = [];
+    Store.store.selectedIssues = [];
+
+    issue = new ListIssue({
+      title: 'Testing',
+      iid: 1,
+      confidential: false,
+      labels: [],
+    });
+    issue2 = new ListIssue({
+      title: 'Testing',
+      iid: 2,
+      confidential: false,
+      labels: [],
+    });
+    Store.store.issues.push(issue);
+    Store.store.issues.push(issue2);
+  });
+
+  it('returns selected count', () => {
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('toggles the issue as selected', () => {
+    Store.toggleIssue(issue);
+
+    expect(issue.selected).toBe(true);
+    expect(Store.selectedCount()).toBe(1);
+  });
+
+  it('toggles the issue as un-selected', () => {
+    Store.toggleIssue(issue);
+    Store.toggleIssue(issue);
+
+    expect(issue.selected).toBe(false);
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('toggles all issues as selected', () => {
+    Store.toggleAll();
+
+    expect(issue.selected).toBe(true);
+    expect(issue2.selected).toBe(true);
+    expect(Store.selectedCount()).toBe(2);
+  });
+
+  it('toggles all issues as un-selected', () => {
+    Store.toggleAll();
+    Store.toggleAll();
+
+    expect(issue.selected).toBe(false);
+    expect(issue2.selected).toBe(false);
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('toggles all if a single issue is selected', () => {
+    Store.toggleIssue(issue);
+    Store.toggleAll();
+
+    expect(issue.selected).toBe(true);
+    expect(issue2.selected).toBe(true);
+    expect(Store.selectedCount()).toBe(2);
+  });
+
+  it('adds issue to selected array', () => {
+    Store.addSelectedIssue(issue);
+
+    expect(Store.selectedCount()).toBe(1);
+  });
+
+  it('removes issue from selected array', () => {
+    Store.addSelectedIssue(issue);
+    Store.removeSelectedIssue(issue);
+
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('returns selected issue index if present', () => {
+    Store.toggleIssue(issue);
+
+    expect(Store.selectedIssueIndex(issue)).toBe(0);
+  });
+
+  it('returns -1 if issue is not selected', () => {
+    expect(Store.selectedIssueIndex(issue)).toBe(-1);
+  });
+
+  it('finds the selected issue', () => {
+    Store.toggleIssue(issue);
+
+    expect(Store.findSelectedIssue(issue)).toBe(issue);
+  });
+
+  it('does not find a selected issue', () => {
+    expect(Store.findSelectedIssue(issue)).toBe(undefined);
+  });
+});

From 3aabf0c6aa2b76ef4458250ca98876e3f268fe14 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 26 Jan 2017 16:03:07 +0000
Subject: [PATCH 16/53] Used issue bulk update instead of different endpoint

---
 .../boards/components/modal/footer.js.es6            | 12 ++++++++++--
 .../javascripts/boards/components/modal/index.js.es6 |  4 ++--
 app/assets/javascripts/boards/models/issue.js.es6    |  1 +
 .../javascripts/boards/services/board_service.js.es6 | 10 ----------
 app/controllers/projects/boards/lists_controller.rb  |  4 ----
 app/controllers/projects/boards_controller.rb        |  2 +-
 app/views/projects/boards/_show.html.haml            |  3 ++-
 config/routes/project.rb                             |  1 -
 8 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 51a9444ee61..1be58b017ef 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -4,6 +4,9 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalFooter = Vue.extend({
+    props: [
+      'bulkUpdatePath',
+    ],
     data() {
       return ModalStore.store;
     },
@@ -23,10 +26,15 @@
       },
       addIssues() {
         const list = this.selectedList;
-        const issueIds = this.selectedIssues.map(issue => issue.id);
+        const issueIds = this.selectedIssues.map(issue => issue._id);
 
         // Post the data to the backend
-        gl.boardService.addMultipleIssues(list, issueIds);
+        this.$http.post(this.bulkUpdatePath, {
+          update: {
+            issuable_ids: issueIds.join(','),
+            add_label_ids: [list.label.id],
+          },
+        });
 
         // Add the issues on the frontend
         this.selectedIssues.forEach((issue) => {
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 52f652ccfe1..9cab701bb5d 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -9,7 +9,7 @@
 
   gl.issueBoards.IssuesModal = Vue.extend({
     props: [
-      'blankStateImage', 'newIssuePath',
+      'blankStateImage', 'newIssuePath', 'bulkUpdatePath',
     ],
     data() {
       return ModalStore.store;
@@ -86,7 +86,7 @@
               <i class="fa fa-spinner fa-spin"></i>
             </div>
           </section>
-          <modal-footer></modal-footer>
+          <modal-footer :bulk-update-path="bulkUpdatePath"></modal-footer>
         </div>
       </div>
     `,
diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6
index 8d93ac637f9..5b435a76467 100644
--- a/app/assets/javascripts/boards/models/issue.js.es6
+++ b/app/assets/javascripts/boards/models/issue.js.es6
@@ -6,6 +6,7 @@
 
 class ListIssue {
   constructor (obj) {
+    this._id = obj.id;
     this.id = obj.iid;
     this.title = obj.title;
     this.confidential = obj.confidential;
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index c8db107d890..20df8f2b373 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -14,10 +14,6 @@ class BoardService {
         method: 'POST',
         url: `${root}/${boardId}/lists/generate.json`
       },
-      multiple: {
-        method: 'POST',
-        url: `${root}/${boardId}/lists{/id}/multiple`
-      },
     });
     this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
     this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
@@ -79,12 +75,6 @@ class BoardService {
   getBacklog(data) {
     return this.boards.backlog(data);
   }
-
-  addMultipleIssues(list, issue_ids) {
-    return this.lists.multiple(list.id, {
-      issue_ids,
-    });
-  }
 }
 
 window.BoardService = BoardService;
diff --git a/app/controllers/projects/boards/lists_controller.rb b/app/controllers/projects/boards/lists_controller.rb
index ed65cae82dc..67e3c9add81 100644
--- a/app/controllers/projects/boards/lists_controller.rb
+++ b/app/controllers/projects/boards/lists_controller.rb
@@ -50,10 +50,6 @@ module Projects
         end
       end
 
-      def multiple
-        head :ok
-      end
-
       private
 
       def authorize_admin_list!
diff --git a/app/controllers/projects/boards_controller.rb b/app/controllers/projects/boards_controller.rb
index 9e699fb9b3b..ba9d0eaa265 100644
--- a/app/controllers/projects/boards_controller.rb
+++ b/app/controllers/projects/boards_controller.rb
@@ -37,7 +37,7 @@ class Projects::BoardsController < Projects::ApplicationController
 
     render json: @issues.as_json(
       labels: true,
-      only: [:iid, :title, :confidential, :due_date],
+      only: [:id, :iid, :title, :confidential, :due_date],
       include: {
         assignee: { only: [:id, :name, :username], methods: [:avatar_url] },
         milestone: { only: [:id, :title] }
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index a64f66b5b64..068e69bada6 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -27,4 +27,5 @@
       ":key" => "_uid" }
   = render "projects/boards/components/sidebar"
   %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
-    "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project) }
+    "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project),
+    "bulk-update-path" => bulk_update_namespace_project_issues_path(@project.namespace, @project) }
diff --git a/config/routes/project.rb b/config/routes/project.rb
index afd895a5a1e..46d6530333d 100644
--- a/config/routes/project.rb
+++ b/config/routes/project.rb
@@ -274,7 +274,6 @@ constraints(ProjectUrlConstrainer.new) do
           resources :lists, only: [:index, :create, :update, :destroy] do
             collection do
               post :generate
-              post :multiple
             end
 
             resources :issues, only: [:index, :create]

From 682d213f431ea83f277fc2a362c994ee17c2f44b Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Fri, 27 Jan 2017 03:23:07 -0200
Subject: [PATCH 17/53] Remove backlog lists from boards

---
 app/models/board.rb                           |  4 --
 app/models/list.rb                            |  2 +-
 ...032550_remove_backlog_lists_from_boards.rb | 19 +++++++++
 db/schema.rb                                  | 41 ++++++++++++-------
 spec/models/list_spec.rb                      | 39 ++----------------
 5 files changed, 50 insertions(+), 55 deletions(-)
 create mode 100644 db/migrate/20170127032550_remove_backlog_lists_from_boards.rb

diff --git a/app/models/board.rb b/app/models/board.rb
index c56422914a9..2780acc67c0 100644
--- a/app/models/board.rb
+++ b/app/models/board.rb
@@ -5,10 +5,6 @@ class Board < ActiveRecord::Base
 
   validates :project, presence: true
 
-  def backlog_list
-    lists.merge(List.backlog).take
-  end
-
   def done_list
     lists.merge(List.done).take
   end
diff --git a/app/models/list.rb b/app/models/list.rb
index 065d75bd1dc..1e5da7f4dd4 100644
--- a/app/models/list.rb
+++ b/app/models/list.rb
@@ -2,7 +2,7 @@ class List < ActiveRecord::Base
   belongs_to :board
   belongs_to :label
 
-  enum list_type: { backlog: 0, label: 1, done: 2 }
+  enum list_type: { label: 1, done: 2 }
 
   validates :board, :list_type, presence: true
   validates :label, :position, presence: true, if: :label?
diff --git a/db/migrate/20170127032550_remove_backlog_lists_from_boards.rb b/db/migrate/20170127032550_remove_backlog_lists_from_boards.rb
new file mode 100644
index 00000000000..3369bd4d123
--- /dev/null
+++ b/db/migrate/20170127032550_remove_backlog_lists_from_boards.rb
@@ -0,0 +1,19 @@
+class RemoveBacklogListsFromBoards < ActiveRecord::Migration
+  include Gitlab::Database::MigrationHelpers
+
+  DOWNTIME = false
+
+  def up
+    execute <<-SQL
+      DELETE FROM lists WHERE list_type = 0;
+    SQL
+  end
+
+  def down
+    execute <<-SQL
+      INSERT INTO lists (board_id, list_type, created_at, updated_at)
+      SELECT boards.id, 0, NOW(), NOW()
+      FROM boards;
+    SQL
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index c73c311ccb2..d887b441189 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -87,9 +87,9 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.boolean "send_user_confirmation_email", default: false
     t.integer "container_registry_token_expire_delay", default: 5
     t.text "after_sign_up_text"
-    t.boolean "user_default_external", default: false, null: false
     t.string "repository_storages", default: "default"
     t.string "enabled_git_access_protocol"
+    t.boolean "user_default_external", default: false, null: false
     t.boolean "domain_blacklist_enabled", default: false
     t.text "domain_blacklist"
     t.boolean "koding_enabled"
@@ -98,14 +98,14 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.text "help_page_text_html"
     t.text "shared_runners_text_html"
     t.text "after_sign_up_text_html"
-    t.boolean "sidekiq_throttling_enabled", default: false
-    t.string "sidekiq_throttling_queues"
-    t.decimal "sidekiq_throttling_factor"
     t.boolean "housekeeping_enabled", default: true, null: false
     t.boolean "housekeeping_bitmaps_enabled", default: true, null: false
     t.integer "housekeeping_incremental_repack_period", default: 10, null: false
     t.integer "housekeeping_full_repack_period", default: 50, null: false
     t.integer "housekeeping_gc_period", default: 200, null: false
+    t.boolean "sidekiq_throttling_enabled", default: false
+    t.string "sidekiq_throttling_queues"
+    t.decimal "sidekiq_throttling_factor"
     t.boolean "html_emails_enabled", default: true
     t.string "plantuml_url"
     t.boolean "plantuml_enabled"
@@ -398,22 +398,22 @@ ActiveRecord::Schema.define(version: 20170130204620) do
   add_index "deploy_keys_projects", ["project_id"], name: "index_deploy_keys_projects_on_project_id", using: :btree
 
   create_table "deployments", force: :cascade do |t|
-    t.integer "iid", null: false
-    t.integer "project_id", null: false
-    t.integer "environment_id", null: false
-    t.string "ref", null: false
-    t.boolean "tag", null: false
-    t.string "sha", null: false
+    t.integer "iid"
+    t.integer "project_id"
+    t.integer "environment_id"
+    t.string "ref"
+    t.boolean "tag"
+    t.string "sha"
     t.integer "user_id"
-    t.integer "deployable_id"
-    t.string "deployable_type"
+    t.integer "deployable_id", null: false
+    t.string "deployable_type", null: false
     t.datetime "created_at"
     t.datetime "updated_at"
     t.string "on_stop"
   end
 
   add_index "deployments", ["project_id", "environment_id", "iid"], name: "index_deployments_on_project_id_and_environment_id_and_iid", using: :btree
-  add_index "deployments", ["project_id", "iid"], name: "index_deployments_on_project_id_and_iid", unique: true, using: :btree
+  add_index "deployments", ["project_id", "iid"], name: "index_deployments_on_project_id_and_iid", using: :btree
 
   create_table "emails", force: :cascade do |t|
     t.integer "user_id", null: false
@@ -685,8 +685,8 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.integer "merge_user_id"
     t.string "merge_commit_sha"
     t.datetime "deleted_at"
-    t.string "in_progress_merge_commit_sha"
     t.integer "lock_version"
+    t.string "in_progress_merge_commit_sha"
     t.text "title_html"
     t.text "description_html"
     t.integer "time_estimate"
@@ -763,6 +763,16 @@ ActiveRecord::Schema.define(version: 20170130204620) do
   add_index "namespaces", ["path"], name: "index_namespaces_on_path_trigram", using: :gin, opclasses: {"path"=>"gin_trgm_ops"}
   add_index "namespaces", ["type"], name: "index_namespaces_on_type", using: :btree
 
+  create_table "note_templates", force: :cascade do |t|
+    t.integer "user_id"
+    t.string "title"
+    t.text "note"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+  end
+
+  add_index "note_templates", ["user_id"], name: "index_note_templates_on_user_id", using: :btree
+
   create_table "notes", force: :cascade do |t|
     t.text "note"
     t.string "noteable_type"
@@ -778,6 +788,7 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.text "st_diff"
     t.integer "updated_by_id"
     t.string "type"
+    t.string "system_type"
     t.text "position"
     t.text "original_position"
     t.datetime "resolved_at"
@@ -960,7 +971,7 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.boolean "has_external_wiki"
     t.boolean "lfs_enabled"
     t.text "description_html"
-    t.boolean "only_allow_merge_if_all_discussions_are_resolved"
+    t.boolean "only_allow_merge_if_all_discussions_are_resolved", default: false, null: false
   end
 
   add_index "projects", ["ci_id"], name: "index_projects_on_ci_id", using: :btree
diff --git a/spec/models/list_spec.rb b/spec/models/list_spec.rb
index 9e1a52011c3..e6ca4853873 100644
--- a/spec/models/list_spec.rb
+++ b/spec/models/list_spec.rb
@@ -19,13 +19,6 @@ describe List do
       expect(subject).to validate_uniqueness_of(:label_id).scoped_to(:board_id)
     end
 
-    context 'when list_type is set to backlog' do
-      subject { described_class.new(list_type: :backlog) }
-
-      it { is_expected.not_to validate_presence_of(:label) }
-      it { is_expected.not_to validate_presence_of(:position) }
-    end
-
     context 'when list_type is set to done' do
       subject { described_class.new(list_type: :done) }
 
@@ -41,12 +34,6 @@ describe List do
       expect(subject.destroy).to be_truthy
     end
 
-    it 'can not be destroyed when list_type is set to backlog' do
-      subject = create(:backlog_list)
-
-      expect(subject.destroy).to be_falsey
-    end
-
     it 'can not be destroyed when when list_type is set to done' do
       subject = create(:done_list)
 
@@ -55,19 +42,13 @@ describe List do
   end
 
   describe '#destroyable?' do
-    it 'retruns true when list_type is set to label' do
+    it 'returns true when list_type is set to label' do
       subject.list_type = :label
 
       expect(subject).to be_destroyable
     end
 
-    it 'retruns false when list_type is set to backlog' do
-      subject.list_type = :backlog
-
-      expect(subject).not_to be_destroyable
-    end
-
-    it 'retruns false when list_type is set to done' do
+    it 'returns false when list_type is set to done' do
       subject.list_type = :done
 
       expect(subject).not_to be_destroyable
@@ -75,19 +56,13 @@ describe List do
   end
 
   describe '#movable?' do
-    it 'retruns true when list_type is set to label' do
+    it 'returns true when list_type is set to label' do
       subject.list_type = :label
 
       expect(subject).to be_movable
     end
 
-    it 'retruns false when list_type is set to backlog' do
-      subject.list_type = :backlog
-
-      expect(subject).not_to be_movable
-    end
-
-    it 'retruns false when list_type is set to done' do
+    it 'returns false when list_type is set to done' do
       subject.list_type = :done
 
       expect(subject).not_to be_movable
@@ -102,12 +77,6 @@ describe List do
       expect(subject.title).to eq 'Development'
     end
 
-    it 'returns Backlog when list_type is set to backlog' do
-      subject.list_type = :backlog
-
-      expect(subject.title).to eq 'Backlog'
-    end
-
     it 'returns Done when list_type is set to done' do
       subject.list_type = :done
 

From 860fafee137507c465e5a7be19ebedff540d7a08 Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Fri, 27 Jan 2017 03:23:55 -0200
Subject: [PATCH 18/53] Remove backlog lists from board services

---
 app/services/boards/create_service.rb         |  1 -
 spec/services/boards/create_service_spec.rb   |  7 ++-
 .../boards/issues/list_service_spec.rb        | 13 -----
 .../boards/issues/move_service_spec.rb        | 49 -------------------
 .../boards/lists/create_service_spec.rb       |  4 +-
 .../boards/lists/destroy_service_spec.rb      |  9 ----
 .../boards/lists/list_service_spec.rb         |  2 +-
 .../boards/lists/move_service_spec.rb         |  9 ----
 8 files changed, 6 insertions(+), 88 deletions(-)

diff --git a/app/services/boards/create_service.rb b/app/services/boards/create_service.rb
index 9bdd7b6f0cf..f6275a63109 100644
--- a/app/services/boards/create_service.rb
+++ b/app/services/boards/create_service.rb
@@ -12,7 +12,6 @@ module Boards
 
     def create_board!
       board = project.boards.create
-      board.lists.create(list_type: :backlog)
       board.lists.create(list_type: :done)
 
       board
diff --git a/spec/services/boards/create_service_spec.rb b/spec/services/boards/create_service_spec.rb
index fde807cc410..7b29b043296 100644
--- a/spec/services/boards/create_service_spec.rb
+++ b/spec/services/boards/create_service_spec.rb
@@ -11,12 +11,11 @@ describe Boards::CreateService, services: true do
         expect { service.execute }.to change(Board, :count).by(1)
       end
 
-      it 'creates default lists' do
+      it 'creates the default lists' do
         board = service.execute
 
-        expect(board.lists.size).to eq 2
-        expect(board.lists.first).to be_backlog
-        expect(board.lists.last).to be_done
+        expect(board.lists.size).to eq 1
+        expect(board.lists.first).to be_done
       end
     end
 
diff --git a/spec/services/boards/issues/list_service_spec.rb b/spec/services/boards/issues/list_service_spec.rb
index 7c206cf3ce7..5d53c54254c 100644
--- a/spec/services/boards/issues/list_service_spec.rb
+++ b/spec/services/boards/issues/list_service_spec.rb
@@ -13,15 +13,10 @@ describe Boards::Issues::ListService, services: true do
     let(:p2) { create(:label, title: 'P2', project: project, priority: 2) }
     let(:p3) { create(:label, title: 'P3', project: project, priority: 3) }
 
-    let!(:backlog) { create(:backlog_list, board: board) }
     let!(:list1)   { create(:list, board: board, label: development, position: 0) }
     let!(:list2)   { create(:list, board: board, label: testing, position: 1) }
     let!(:done)    { create(:done_list, board: board) }
 
-    let!(:opened_issue1) { create(:labeled_issue, project: project, labels: [bug]) }
-    let!(:opened_issue2) { create(:labeled_issue, project: project, labels: [p2]) }
-    let!(:reopened_issue1) { create(:issue, :reopened, project: project) }
-
     let!(:list1_issue1) { create(:labeled_issue, project: project, labels: [p2, development]) }
     let!(:list1_issue2) { create(:labeled_issue, project: project, labels: [development]) }
     let!(:list1_issue3) { create(:labeled_issue, project: project, labels: [development, p1]) }
@@ -45,14 +40,6 @@ describe Boards::Issues::ListService, services: true do
     end
 
     context 'sets default order to priority' do
-      it 'returns opened issues when listing issues from Backlog' do
-        params = { board_id: board.id, id: backlog.id }
-
-        issues = described_class.new(project, user, params).execute
-
-        expect(issues).to eq [opened_issue2, reopened_issue1, opened_issue1]
-      end
-
       it 'returns closed issues when listing issues from Done' do
         params = { board_id: board.id, id: done.id }
 
diff --git a/spec/services/boards/issues/move_service_spec.rb b/spec/services/boards/issues/move_service_spec.rb
index c43b2aec490..77f75167b3d 100644
--- a/spec/services/boards/issues/move_service_spec.rb
+++ b/spec/services/boards/issues/move_service_spec.rb
@@ -10,7 +10,6 @@ describe Boards::Issues::MoveService, services: true do
     let(:development) { create(:label, project: project, name: 'Development') }
     let(:testing)  { create(:label, project: project, name: 'Testing') }
 
-    let!(:backlog) { create(:backlog_list, board: board1) }
     let!(:list1)   { create(:list, board: board1, label: development, position: 0) }
     let!(:list2)   { create(:list, board: board1, label: testing, position: 1) }
     let!(:done)    { create(:done_list, board: board1) }
@@ -19,41 +18,6 @@ describe Boards::Issues::MoveService, services: true do
       project.team << [user, :developer]
     end
 
-    context 'when moving from backlog' do
-      it 'adds the label of the list it goes to' do
-        issue = create(:labeled_issue, project: project, labels: [bug])
-        params = { board_id: board1.id, from_list_id: backlog.id, to_list_id: list1.id }
-
-        described_class.new(project, user, params).execute(issue)
-
-        expect(issue.reload.labels).to contain_exactly(bug, development)
-      end
-    end
-
-    context 'when moving to backlog' do
-      it 'removes all list-labels' do
-        issue = create(:labeled_issue, project: project, labels: [bug, development, testing])
-        params = { board_id: board1.id, from_list_id: list1.id, to_list_id: backlog.id }
-
-        described_class.new(project, user, params).execute(issue)
-
-        expect(issue.reload.labels).to contain_exactly(bug)
-      end
-    end
-
-    context 'when moving from backlog to done' do
-      it 'closes the issue' do
-        issue = create(:labeled_issue, project: project, labels: [bug])
-        params = { board_id: board1.id, from_list_id: backlog.id, to_list_id: done.id }
-
-        described_class.new(project, user, params).execute(issue)
-        issue.reload
-
-        expect(issue.labels).to contain_exactly(bug)
-        expect(issue).to be_closed
-      end
-    end
-
     context 'when moving an issue between lists' do
       let(:issue)  { create(:labeled_issue, project: project, labels: [bug, development]) }
       let(:params) { { board_id: board1.id, from_list_id: list1.id, to_list_id: list2.id } }
@@ -113,19 +77,6 @@ describe Boards::Issues::MoveService, services: true do
       end
     end
 
-    context 'when moving from done to backlog' do
-      it 'reopens the issue' do
-        issue = create(:labeled_issue, :closed, project: project, labels: [bug])
-        params = { board_id: board1.id, from_list_id: done.id, to_list_id: backlog.id }
-
-        described_class.new(project, user, params).execute(issue)
-        issue.reload
-
-        expect(issue.labels).to contain_exactly(bug)
-        expect(issue).to be_reopened
-      end
-    end
-
     context 'when moving to same list' do
       let(:issue)  { create(:labeled_issue, project: project, labels: [bug, development]) }
       let(:params) { { board_id: board1.id, from_list_id: list1.id, to_list_id: list1.id } }
diff --git a/spec/services/boards/lists/create_service_spec.rb b/spec/services/boards/lists/create_service_spec.rb
index a7e9efcf93f..ebac38e68f1 100644
--- a/spec/services/boards/lists/create_service_spec.rb
+++ b/spec/services/boards/lists/create_service_spec.rb
@@ -21,7 +21,7 @@ describe Boards::Lists::CreateService, services: true do
       end
     end
 
-    context 'when board lists has backlog, and done lists' do
+    context 'when board lists has the done list' do
       it 'creates a new list at beginning of the list' do
         list = service.execute(board)
 
@@ -40,7 +40,7 @@ describe Boards::Lists::CreateService, services: true do
       end
     end
 
-    context 'when board lists has backlog, label and done lists' do
+    context 'when board lists has label and done lists' do
       it 'creates a new list at end of the label lists' do
         list1 = create(:list, board: board, position: 0)
 
diff --git a/spec/services/boards/lists/destroy_service_spec.rb b/spec/services/boards/lists/destroy_service_spec.rb
index 628caf03476..a30860f828a 100644
--- a/spec/services/boards/lists/destroy_service_spec.rb
+++ b/spec/services/boards/lists/destroy_service_spec.rb
@@ -15,7 +15,6 @@ describe Boards::Lists::DestroyService, services: true do
       end
 
       it 'decrements position of higher lists' do
-        backlog     = board.backlog_list
         development = create(:list, board: board, position: 0)
         review      = create(:list, board: board, position: 1)
         staging     = create(:list, board: board, position: 2)
@@ -23,20 +22,12 @@ describe Boards::Lists::DestroyService, services: true do
 
         described_class.new(project, user).execute(development)
 
-        expect(backlog.reload.position).to be_nil
         expect(review.reload.position).to eq 0
         expect(staging.reload.position).to eq 1
         expect(done.reload.position).to be_nil
       end
     end
 
-    it 'does not remove list from board when list type is backlog' do
-      list = board.backlog_list
-      service = described_class.new(project, user)
-
-      expect { service.execute(list) }.not_to change(board.lists, :count)
-    end
-
     it 'does not remove list from board when list type is done' do
       list = board.done_list
       service = described_class.new(project, user)
diff --git a/spec/services/boards/lists/list_service_spec.rb b/spec/services/boards/lists/list_service_spec.rb
index 334cee3f06d..2dffc62b215 100644
--- a/spec/services/boards/lists/list_service_spec.rb
+++ b/spec/services/boards/lists/list_service_spec.rb
@@ -10,7 +10,7 @@ describe Boards::Lists::ListService, services: true do
 
       service = described_class.new(project, double)
 
-      expect(service.execute(board)).to eq [board.backlog_list, list, board.done_list]
+      expect(service.execute(board)).to eq [list, board.done_list]
     end
   end
 end
diff --git a/spec/services/boards/lists/move_service_spec.rb b/spec/services/boards/lists/move_service_spec.rb
index 63fa0bb8c5f..3786dc82bf0 100644
--- a/spec/services/boards/lists/move_service_spec.rb
+++ b/spec/services/boards/lists/move_service_spec.rb
@@ -6,7 +6,6 @@ describe Boards::Lists::MoveService, services: true do
     let(:board)   { create(:board, project: project) }
     let(:user)    { create(:user) }
 
-    let!(:backlog)     { create(:backlog_list, board: board) }
     let!(:planning)    { create(:list, board: board, position: 0) }
     let!(:development) { create(:list, board: board, position: 1) }
     let!(:review)      { create(:list, board: board, position: 2) }
@@ -87,14 +86,6 @@ describe Boards::Lists::MoveService, services: true do
       end
     end
 
-    it 'keeps position of lists when list type is backlog' do
-      service = described_class.new(project, user, position: 2)
-
-      service.execute(backlog)
-
-      expect(current_list_positions).to eq [0, 1, 2, 3]
-    end
-
     it 'keeps position of lists when list type is done' do
       service = described_class.new(project, user, position: 2)
 

From 79a132a38d3840074a3ab573b97d56155c84aed4 Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Fri, 27 Jan 2017 03:25:16 -0200
Subject: [PATCH 19/53] Fix spec for Projects::Boards::ListsController

---
 spec/controllers/projects/boards/lists_controller_spec.rb | 2 +-
 spec/fixtures/api/schemas/list.json                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/controllers/projects/boards/lists_controller_spec.rb b/spec/controllers/projects/boards/lists_controller_spec.rb
index 34d6119429d..b3f9f76a50c 100644
--- a/spec/controllers/projects/boards/lists_controller_spec.rb
+++ b/spec/controllers/projects/boards/lists_controller_spec.rb
@@ -27,7 +27,7 @@ describe Projects::Boards::ListsController do
       parsed_response = JSON.parse(response.body)
 
       expect(response).to match_response_schema('lists')
-      expect(parsed_response.length).to eq 3
+      expect(parsed_response.length).to eq 2
     end
 
     context 'with unauthorized user' do
diff --git a/spec/fixtures/api/schemas/list.json b/spec/fixtures/api/schemas/list.json
index 8d94cf26ecb..819287bf919 100644
--- a/spec/fixtures/api/schemas/list.json
+++ b/spec/fixtures/api/schemas/list.json
@@ -10,7 +10,7 @@
     "id": { "type": "integer" },
     "list_type": {
       "type": "string",
-      "enum": ["backlog", "label", "done"]
+      "enum": ["label", "done"]
     },
     "label": {
       "type": ["object", "null"],

From 158173a126bcb73af3b2d8b16f767a404c7b91a5 Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Fri, 27 Jan 2017 03:26:48 -0200
Subject: [PATCH 20/53] Update the API endpoint to get the lists of a project
 board

---
 lib/api/boards.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/api/boards.rb b/lib/api/boards.rb
index 4ac491edc1b..13752eb4947 100644
--- a/lib/api/boards.rb
+++ b/lib/api/boards.rb
@@ -37,7 +37,7 @@ module API
         end
 
         desc 'Get the lists of a project board' do
-          detail 'Does not include `backlog` and `done` lists. This feature was introduced in 8.13'
+          detail 'Does not include `done` list. This feature was introduced in 8.13'
           success Entities::List
         end
         get '/lists' do

From a3edd5f1fd154865bfe014d628844796090998e5 Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Fri, 27 Jan 2017 03:27:15 -0200
Subject: [PATCH 21/53] Remove backlog lists from factories

---
 spec/factories/boards.rb | 1 -
 spec/factories/lists.rb  | 6 ------
 2 files changed, 7 deletions(-)

diff --git a/spec/factories/boards.rb b/spec/factories/boards.rb
index ec46146d9b5..a581725245a 100644
--- a/spec/factories/boards.rb
+++ b/spec/factories/boards.rb
@@ -3,7 +3,6 @@ FactoryGirl.define do
     project factory: :empty_project
 
     after(:create) do |board|
-      board.lists.create(list_type: :backlog)
       board.lists.create(list_type: :done)
     end
   end
diff --git a/spec/factories/lists.rb b/spec/factories/lists.rb
index 9e3f06c682c..2a2f3cca91c 100644
--- a/spec/factories/lists.rb
+++ b/spec/factories/lists.rb
@@ -6,12 +6,6 @@ FactoryGirl.define do
     sequence(:position)
   end
 
-  factory :backlog_list, parent: :list do
-    list_type :backlog
-    label nil
-    position nil
-  end
-
   factory :done_list, parent: :list do
     list_type :done
     label nil

From 8a2ecebe439629239ffe3e414477b7fe6a033177 Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Fri, 27 Jan 2017 03:28:06 -0200
Subject: [PATCH 22/53] Fix feature spec to create new issue on issue boards

---
 spec/features/boards/new_issue_spec.rb | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/spec/features/boards/new_issue_spec.rb b/spec/features/boards/new_issue_spec.rb
index a03cd6fbf2d..6d14a8cf483 100644
--- a/spec/features/boards/new_issue_spec.rb
+++ b/spec/features/boards/new_issue_spec.rb
@@ -6,6 +6,7 @@ describe 'Issue Boards new issue', feature: true, js: true do
 
   let(:project) { create(:empty_project, :public) }
   let(:board)   { create(:board, project: project) }
+  let!(:list)   { create(:list, board: board, position: 0) }
   let(:user)    { create(:user) }
 
   context 'authorized user' do
@@ -17,7 +18,7 @@ describe 'Issue Boards new issue', feature: true, js: true do
       visit namespace_project_board_path(project.namespace, project, board)
       wait_for_vue_resource
 
-      expect(page).to have_selector('.board', count: 3)
+      expect(page).to have_selector('.board', count: 2)
     end
 
     it 'displays new issue button' do
@@ -25,7 +26,7 @@ describe 'Issue Boards new issue', feature: true, js: true do
     end
 
     it 'does not display new issue button in done list' do
-      page.within('.board:nth-child(3)') do
+      page.within('.board:nth-child(2)') do
         expect(page).not_to have_selector('.board-issue-count-holder .btn')
       end
     end

From f99a1edf705c26cb9602596e18a9213857894cab Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Fri, 27 Jan 2017 03:28:45 -0200
Subject: [PATCH 23/53] Fix feature spec for issue sidebar on issue boards

---
 spec/features/boards/sidebar_spec.rb | 63 +++++++++++++++-------------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index c28bb0dcdae..a0f32d2ab76 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -4,14 +4,17 @@ describe 'Issue Boards', feature: true, js: true do
   include WaitForAjax
   include WaitForVueResource
 
-  let(:project)     { create(:empty_project, :public) }
-  let(:board)       { create(:board, project: project) }
-  let(:user)        { create(:user) }
-  let!(:label)      { create(:label, project: project) }
-  let!(:label2)     { create(:label, project: project) }
-  let!(:milestone)  { create(:milestone, project: project) }
-  let!(:issue2)     { create(:labeled_issue, project: project, assignee: user, milestone: milestone, labels: [label]) }
-  let!(:issue)      { create(:issue, project: project) }
+  let(:user)         { create(:user) }
+  let(:project)      { create(:empty_project, :public) }
+  let!(:milestone)   { create(:milestone, project: project) }
+  let!(:development) { create(:label, project: project, name: 'Development') }
+  let!(:bug)         { create(:label, project: project, name: 'Bug') }
+  let!(:regression)  { create(:label, project: project, name: 'Regression') }
+  let!(:stretch)     { create(:label, project: project, name: 'Stretch') }
+  let!(:issue1)      { create(:labeled_issue, project: project, assignee: user, milestone: milestone, labels: [development]) }
+  let!(:issue2)      { create(:labeled_issue, project: project, labels: [development, stretch]) }
+  let(:board)        { create(:board, project: project) }
+  let!(:list)        { create(:list, board: board, label: development, position: 0) }
 
   before do
     project.team << [user, :master]
@@ -62,8 +65,8 @@ describe 'Issue Boards', feature: true, js: true do
     end
 
     page.within('.issue-boards-sidebar') do
-      expect(page).to have_content(issue.title)
-      expect(page).to have_content(issue.to_reference)
+      expect(page).to have_content(issue2.title)
+      expect(page).to have_content(issue2.to_reference)
     end
   end
 
@@ -244,22 +247,22 @@ describe 'Issue Boards', feature: true, js: true do
 
         wait_for_ajax
 
-        click_link label.title
+        click_link bug.title
 
         wait_for_vue_resource
 
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 1)
-          expect(page).to have_content(label.title)
+          expect(page).to have_selector('.label', count: 3)
+          expect(page).to have_content(bug.title)
         end
       end
 
       page.within(first('.board')) do
         page.within(first('.card')) do
-          expect(page).to have_selector('.label', count: 1)
-          expect(page).to have_content(label.title)
+          expect(page).to have_selector('.label', count: 2)
+          expect(page).to have_content(bug.title)
         end
       end
     end
@@ -274,32 +277,32 @@ describe 'Issue Boards', feature: true, js: true do
 
         wait_for_ajax
 
-        click_link label.title
-        click_link label2.title
+        click_link bug.title
+        click_link regression.title
 
         wait_for_vue_resource
 
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 2)
-          expect(page).to have_content(label.title)
-          expect(page).to have_content(label2.title)
+          expect(page).to have_selector('.label', count: 4)
+          expect(page).to have_content(bug.title)
+          expect(page).to have_content(regression.title)
         end
       end
 
       page.within(first('.board')) do
         page.within(first('.card')) do
-          expect(page).to have_selector('.label', count: 2)
-          expect(page).to have_content(label.title)
-          expect(page).to have_content(label2.title)
+          expect(page).to have_selector('.label', count: 3)
+          expect(page).to have_content(bug.title)
+          expect(page).to have_content(regression.title)
         end
       end
     end
 
     it 'removes a label' do
       page.within(first('.board')) do
-        find('.card:nth-child(2)').click
+        first('.card').click
       end
 
       page.within('.labels') do
@@ -307,22 +310,22 @@ describe 'Issue Boards', feature: true, js: true do
 
         wait_for_ajax
 
-        click_link label.title
+        click_link stretch.title
 
         wait_for_vue_resource
 
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 0)
-          expect(page).not_to have_content(label.title)
+          expect(page).to have_selector('.label', count: 1)
+          expect(page).not_to have_content(stretch.title)
         end
       end
 
       page.within(first('.board')) do
-        page.within(find('.card:nth-child(2)')) do
-          expect(page).not_to have_selector('.label', count: 1)
-          expect(page).not_to have_content(label.title)
+        page.within(first('.card')) do
+          expect(page).not_to have_selector('.label')
+          expect(page).not_to have_content(stretch.title)
         end
       end
     end

From c4fc17f258d10ec86d0023c44126362ca8fa63c4 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 27 Jan 2017 11:14:50 +0000
Subject: [PATCH 24/53] Boards spec update to take into account removed backlog

---
 .../boards/components/issue_card_inner.js.es6 |   2 +-
 spec/features/boards/boards_spec.rb           | 237 ++++++------------
 2 files changed, 83 insertions(+), 156 deletions(-)

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js.es6 b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
index 383b329edc3..61fcfde0a02 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js.es6
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
@@ -45,7 +45,7 @@
       <div>
         <h4 class="card-title">
           <i
-            class="fa fa-eye-flash"
+            class="fa fa-eye-slash confidential-icon"
             v-if="issue.confidential"></i>
           <a
             :href="issueLinkBase + '/' + issue.id"
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index bfac5a1b8ab..34f47daf0e5 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -20,7 +20,7 @@ describe 'Issue Boards', feature: true, js: true do
     before do
       visit namespace_project_board_path(project.namespace, project, board)
       wait_for_vue_resource
-      expect(page).to have_selector('.board', count: 3)
+      expect(page).to have_selector('.board', count: 2)
     end
 
     it 'shows blank state' do
@@ -31,18 +31,18 @@ describe 'Issue Boards', feature: true, js: true do
       page.within(find('.board-blank-state')) do
         click_button("Nevermind, I'll use my own")
       end
-      expect(page).to have_selector('.board', count: 2)
+      expect(page).to have_selector('.board', count: 1)
     end
 
     it 'creates default lists' do
-      lists = ['Backlog', 'To Do', 'Doing', 'Done']
+      lists = ['To Do', 'Doing', 'Done']
 
       page.within(find('.board-blank-state')) do
         click_button('Add default lists')
       end
       wait_for_vue_resource
 
-      expect(page).to have_selector('.board', count: 4)
+      expect(page).to have_selector('.board', count: 3)
 
       page.all('.board').each_with_index do |list, i|
         expect(list.find('.board-title')).to have_content(lists[i])
@@ -64,42 +64,41 @@ describe 'Issue Boards', feature: true, js: true do
     let!(:list1) { create(:list, board: board, label: planning, position: 0) }
     let!(:list2) { create(:list, board: board, label: development, position: 1) }
 
-    let!(:confidential_issue) { create(:issue, :confidential, project: project, author: user) }
-    let!(:issue1) { create(:issue, project: project, assignee: user) }
-    let!(:issue2) { create(:issue, project: project, author: user2) }
-    let!(:issue3) { create(:issue, project: project) }
-    let!(:issue4) { create(:issue, project: project) }
+    let!(:confidential_issue) { create(:labeled_issue, :confidential, project: project, author: user, labels: [planning]) }
+    let!(:issue1) { create(:labeled_issue, project: project, assignee: user, labels: [planning]) }
+    let!(:issue2) { create(:labeled_issue, project: project, author: user2, labels: [planning]) }
+    let!(:issue3) { create(:labeled_issue, project: project, labels: [planning]) }
+    let!(:issue4) { create(:labeled_issue, project: project, labels: [planning]) }
     let!(:issue5) { create(:labeled_issue, project: project, labels: [planning], milestone: milestone) }
     let!(:issue6) { create(:labeled_issue, project: project, labels: [planning, development]) }
     let!(:issue7) { create(:labeled_issue, project: project, labels: [development]) }
     let!(:issue8) { create(:closed_issue, project: project) }
-    let!(:issue9) { create(:labeled_issue, project: project, labels: [testing, bug, accepting]) }
+    let!(:issue9) { create(:labeled_issue, project: project, labels: [planning, testing, bug, accepting]) }
 
     before do
       visit namespace_project_board_path(project.namespace, project, board)
 
       wait_for_vue_resource
 
-      expect(page).to have_selector('.board', count: 4)
+      expect(page).to have_selector('.board', count: 3)
       expect(find('.board:nth-child(1)')).to have_selector('.card')
       expect(find('.board:nth-child(2)')).to have_selector('.card')
       expect(find('.board:nth-child(3)')).to have_selector('.card')
-      expect(find('.board:nth-child(4)')).to have_selector('.card')
     end
 
     it 'shows lists' do
-      expect(page).to have_selector('.board', count: 4)
+      expect(page).to have_selector('.board', count: 3)
     end
 
     it 'shows description tooltip on list title' do
-      page.within('.board:nth-child(2)') do
+      page.within('.board:nth-child(1)') do
         expect(find('.board-title span.has-tooltip')[:title]).to eq('Test')
       end
     end
 
     it 'shows issues in lists' do
+      wait_for_board_cards(1, 8)
       wait_for_board_cards(2, 2)
-      wait_for_board_cards(3, 2)
     end
 
     it 'shows confidential issues with icon' do
@@ -108,19 +107,6 @@ describe 'Issue Boards', feature: true, js: true do
       end
     end
 
-    it 'search backlog list' do
-      page.within('#js-boards-search') do
-        find('.form-control').set(issue1.title)
-      end
-
-      wait_for_vue_resource
-
-      expect(find('.board:nth-child(1)')).to have_selector('.card', count: 1)
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(4)')).to have_selector('.card', count: 0)
-    end
-
     it 'search done list' do
       page.within('#js-boards-search') do
         find('.form-control').set(issue8.title)
@@ -130,8 +116,7 @@ describe 'Issue Boards', feature: true, js: true do
 
       expect(find('.board:nth-child(1)')).to have_selector('.card', count: 0)
       expect(find('.board:nth-child(2)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(4)')).to have_selector('.card', count: 1)
+      expect(find('.board:nth-child(3)')).to have_selector('.card', count: 1)
     end
 
     it 'search list' do
@@ -141,157 +126,135 @@ describe 'Issue Boards', feature: true, js: true do
 
       wait_for_vue_resource
 
-      expect(find('.board:nth-child(1)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 1)
+      expect(find('.board:nth-child(1)')).to have_selector('.card', count: 1)
+      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 0)
       expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(4)')).to have_selector('.card', count: 0)
     end
 
     it 'allows user to delete board' do
-      page.within(find('.board:nth-child(2)')) do
+      page.within(find('.board:nth-child(1)')) do
         find('.board-delete').click
       end
 
       wait_for_vue_resource
 
-      expect(page).to have_selector('.board', count: 3)
+      expect(page).to have_selector('.board', count: 2)
     end
 
     it 'removes checkmark in new list dropdown after deleting' do
       click_button 'Add list'
       wait_for_ajax
 
-      page.within(find('.board:nth-child(2)')) do
+      page.within(find('.board:nth-child(1)')) do
         find('.board-delete').click
       end
 
       wait_for_vue_resource
 
-      expect(page).to have_selector('.board', count: 3)
-      expect(find(".js-board-list-#{planning.id}", visible: false)).not_to have_css('.is-active')
+      expect(page).to have_selector('.board', count: 2)
     end
 
     it 'infinite scrolls list' do
       50.times do
-        create(:issue, project: project)
+        create(:labeled_issue, project: project, labels: [planning])
       end
 
       visit namespace_project_board_path(project.namespace, project, board)
       wait_for_vue_resource
 
       page.within(find('.board', match: :first)) do
-        expect(page.find('.board-header')).to have_content('56')
+        expect(page.find('.board-header')).to have_content('58')
         expect(page).to have_selector('.card', count: 20)
-        expect(page).to have_content('Showing 20 of 56 issues')
+        expect(page).to have_content('Showing 20 of 58 issues')
 
         evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
         wait_for_vue_resource
 
         expect(page).to have_selector('.card', count: 40)
-        expect(page).to have_content('Showing 40 of 56 issues')
+        expect(page).to have_content('Showing 40 of 58 issues')
 
         evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
         wait_for_vue_resource
 
-        expect(page).to have_selector('.card', count: 56)
+        expect(page).to have_selector('.card', count: 58)
         expect(page).to have_content('Showing all issues')
       end
     end
 
-    context 'backlog' do
-      it 'shows issues in backlog with no labels' do
-        wait_for_board_cards(1, 6)
-      end
-
-      it 'moves issue from backlog into list' do
-        drag_to(list_to_index: 1)
-
-        wait_for_vue_resource
-        wait_for_board_cards(1, 5)
-        wait_for_board_cards(2, 3)
-      end
-    end
-
     context 'done' do
       it 'shows list of done issues' do
-        wait_for_board_cards(4, 1)
+        wait_for_board_cards(3, 1)
         wait_for_ajax
       end
 
       it 'moves issue to done' do
-        drag_to(list_from_index: 0, list_to_index: 3)
+        drag_to(list_from_index: 0, list_to_index: 2)
 
-        wait_for_board_cards(1, 5)
+        wait_for_board_cards(1, 7)
         wait_for_board_cards(2, 2)
         wait_for_board_cards(3, 2)
-        wait_for_board_cards(4, 2)
 
         expect(find('.board:nth-child(1)')).not_to have_content(issue9.title)
-        expect(find('.board:nth-child(4)')).to have_selector('.card', count: 2)
-        expect(find('.board:nth-child(4)')).to have_content(issue9.title)
-        expect(find('.board:nth-child(4)')).not_to have_content(planning.title)
+        expect(find('.board:nth-child(3)')).to have_selector('.card', count: 2)
+        expect(find('.board:nth-child(3)')).to have_content(issue9.title)
+        expect(find('.board:nth-child(3)')).not_to have_content(planning.title)
       end
 
       it 'removes all of the same issue to done' do
-        drag_to(list_from_index: 1, list_to_index: 3)
+        drag_to(list_from_index: 0, list_to_index: 2)
 
-        wait_for_board_cards(1, 6)
-        wait_for_board_cards(2, 1)
-        wait_for_board_cards(3, 1)
-        wait_for_board_cards(4, 2)
+        wait_for_board_cards(1, 7)
+        wait_for_board_cards(2, 2)
+        wait_for_board_cards(3, 2)
 
-        expect(find('.board:nth-child(2)')).not_to have_content(issue6.title)
-        expect(find('.board:nth-child(4)')).to have_content(issue6.title)
-        expect(find('.board:nth-child(4)')).not_to have_content(planning.title)
+        expect(find('.board:nth-child(1)')).not_to have_content(issue9.title)
+        expect(find('.board:nth-child(3)')).to have_content(issue9.title)
+        expect(find('.board:nth-child(3)')).not_to have_content(planning.title)
       end
     end
 
     context 'lists' do
       it 'changes position of list' do
-        drag_to(list_from_index: 1, list_to_index: 2, selector: '.board-header')
+        drag_to(list_from_index: 1, list_to_index: 0, selector: '.board-header')
 
-        wait_for_board_cards(1, 6)
-        wait_for_board_cards(2, 2)
-        wait_for_board_cards(3, 2)
-        wait_for_board_cards(4, 1)
-
-        expect(find('.board:nth-child(2)')).to have_content(development.title)
-        expect(find('.board:nth-child(2)')).to have_content(planning.title)
-      end
-
-      it 'issue moves between lists' do
-        drag_to(list_from_index: 1, card_index: 1, list_to_index: 2)
-
-        wait_for_board_cards(1, 6)
-        wait_for_board_cards(2, 1)
-        wait_for_board_cards(3, 3)
-        wait_for_board_cards(4, 1)
-
-        expect(find('.board:nth-child(3)')).to have_content(issue6.title)
-        expect(find('.board:nth-child(3)').all('.card').last).not_to have_content(development.title)
-      end
-
-      it 'issue moves between lists' do
-        drag_to(list_from_index: 2, list_to_index: 1)
-
-        wait_for_board_cards(1, 6)
-        wait_for_board_cards(2, 3)
+        wait_for_board_cards(1, 2)
+        wait_for_board_cards(2, 8)
         wait_for_board_cards(3, 1)
-        wait_for_board_cards(4, 1)
 
-        expect(find('.board:nth-child(2)')).to have_content(issue7.title)
-        expect(find('.board:nth-child(2)').all('.card').first).not_to have_content(planning.title)
+        expect(find('.board:nth-child(1)')).to have_content(development.title)
+        expect(find('.board:nth-child(1)')).to have_content(planning.title)
+      end
+
+      it 'issue moves between lists' do
+        drag_to(list_from_index: 0, card_index: 1, list_to_index: 1)
+
+        wait_for_board_cards(1, 7)
+        wait_for_board_cards(2, 2)
+        wait_for_board_cards(3, 1)
+
+        expect(find('.board:nth-child(2)')).to have_content(issue6.title)
+        expect(find('.board:nth-child(2)').all('.card').last).not_to have_content(development.title)
+      end
+
+      it 'issue moves between lists' do
+        drag_to(list_from_index: 1, list_to_index: 0)
+
+        wait_for_board_cards(1, 9)
+        wait_for_board_cards(2, 1)
+        wait_for_board_cards(3, 1)
+
+        expect(find('.board:nth-child(1)')).to have_content(issue7.title)
+        expect(find('.board:nth-child(1)').all('.card').first).not_to have_content(planning.title)
       end
 
       it 'issue moves from done' do
-        drag_to(list_from_index: 3, list_to_index: 1)
+        drag_to(list_from_index: 2, list_to_index: 1)
 
         expect(find('.board:nth-child(2)')).to have_content(issue8.title)
 
-        wait_for_board_cards(1, 6)
+        wait_for_board_cards(1, 8)
         wait_for_board_cards(2, 3)
-        wait_for_board_cards(3, 2)
-        wait_for_board_cards(4, 0)
+        wait_for_board_cards(3, 0)
       end
 
       context 'issue card' do
@@ -324,7 +287,7 @@ describe 'Issue Boards', feature: true, js: true do
 
           wait_for_vue_resource
 
-          expect(page).to have_selector('.board', count: 5)
+          expect(page).to have_selector('.board', count: 4)
         end
 
         it 'creates new list for Backlog label' do
@@ -337,7 +300,7 @@ describe 'Issue Boards', feature: true, js: true do
 
           wait_for_vue_resource
 
-          expect(page).to have_selector('.board', count: 5)
+          expect(page).to have_selector('.board', count: 4)
         end
 
         it 'creates new list for Done label' do
@@ -350,7 +313,7 @@ describe 'Issue Boards', feature: true, js: true do
 
           wait_for_vue_resource
 
-          expect(page).to have_selector('.board', count: 5)
+          expect(page).to have_selector('.board', count: 4)
         end
 
         it 'keeps dropdown open after adding new list' do
@@ -366,21 +329,6 @@ describe 'Issue Boards', feature: true, js: true do
           expect(find('.issue-boards-search')).to have_selector('.open')
         end
 
-        it 'moves issues from backlog into new list' do
-          wait_for_board_cards(1, 6)
-
-          click_button 'Add list'
-          wait_for_ajax
-
-          page.within('.dropdown-menu-issues-board-new') do
-            click_link testing.title
-          end
-
-          wait_for_vue_resource
-
-          wait_for_board_cards(1, 5)
-        end
-
         it 'creates new list from a new label' do
           click_button 'Add list'
 
@@ -397,7 +345,7 @@ describe 'Issue Boards', feature: true, js: true do
           wait_for_ajax
           wait_for_vue_resource
 
-          expect(page).to have_selector('.board', count: 5)
+          expect(page).to have_selector('.board', count: 4)
         end
       end
     end
@@ -418,7 +366,7 @@ describe 'Issue Boards', feature: true, js: true do
 
         wait_for_vue_resource
         wait_for_board_cards(1, 1)
-        wait_for_empty_boards((2..4))
+        wait_for_empty_boards((2..3))
       end
 
       it 'filters by assignee' do
@@ -437,7 +385,7 @@ describe 'Issue Boards', feature: true, js: true do
         wait_for_vue_resource
 
         wait_for_board_cards(1, 1)
-        wait_for_empty_boards((2..4))
+        wait_for_empty_boards((2..3))
       end
 
       it 'filters by milestone' do
@@ -454,10 +402,9 @@ describe 'Issue Boards', feature: true, js: true do
         end
 
         wait_for_vue_resource
-        wait_for_board_cards(1, 0)
-        wait_for_board_cards(2, 1)
+        wait_for_board_cards(1, 1)
+        wait_for_board_cards(2, 0)
         wait_for_board_cards(3, 0)
-        wait_for_board_cards(4, 0)
       end
 
       it 'filters by label' do
@@ -474,7 +421,7 @@ describe 'Issue Boards', feature: true, js: true do
 
         wait_for_vue_resource
         wait_for_board_cards(1, 1)
-        wait_for_empty_boards((2..4))
+        wait_for_empty_boards((2..3))
       end
 
       it 'filters by label with space after reload' do
@@ -530,7 +477,7 @@ describe 'Issue Boards', feature: true, js: true do
 
       it 'infinite scrolls list with label filter' do
         50.times do
-          create(:labeled_issue, project: project, labels: [testing])
+          create(:labeled_issue, project: project, labels: [planning, testing])
         end
 
         page.within '.issues-filters' do
@@ -580,32 +527,12 @@ describe 'Issue Boards', feature: true, js: true do
         wait_for_vue_resource
 
         wait_for_board_cards(1, 1)
-        wait_for_empty_boards((2..4))
-      end
-
-      it 'filters by no label' do
-        page.within '.issues-filters' do
-          click_button('Label')
-          wait_for_ajax
-
-          page.within '.dropdown-menu-labels' do
-            click_link("No Label")
-            wait_for_vue_resource
-            find('.dropdown-menu-close').click
-          end
-        end
-
-        wait_for_vue_resource
-
-        wait_for_board_cards(1, 5)
-        wait_for_board_cards(2, 0)
-        wait_for_board_cards(3, 0)
-        wait_for_board_cards(4, 1)
+        wait_for_empty_boards((2..3))
       end
 
       it 'filters by clicking label button on issue' do
         page.within(find('.board', match: :first)) do
-          expect(page).to have_selector('.card', count: 6)
+          expect(page).to have_selector('.card', count: 8)
           expect(find('.card', match: :first)).to have_content(bug.title)
           click_button(bug.title)
           wait_for_vue_resource
@@ -614,7 +541,7 @@ describe 'Issue Boards', feature: true, js: true do
         wait_for_vue_resource
 
         wait_for_board_cards(1, 1)
-        wait_for_empty_boards((2..4))
+        wait_for_empty_boards((2..3))
 
         page.within('.labels-filter') do
           expect(find('.dropdown-toggle-text')).to have_content(bug.title)

From ac7949db174210a84fd4d2af43652559f56dbdb9 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 27 Jan 2017 11:20:29 +0000
Subject: [PATCH 25/53] Fixed masonry re-triggering when it didnt need to Fixed
 scroll position being lost

---
 .../javascripts/boards/components/modal/list.js.es6    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 6a681d9278f..4ef40f851d4 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -14,8 +14,10 @@
         this.initMasonry();
       },
       issues: {
-        handler() {
-          this.initMasonry();
+        handler(issues, oldIssues) {
+          if (this.activeTab === 'selected' || issues.length !== oldIssues.length) {
+            this.initMasonry();
+          }
         },
         deep: true,
       },
@@ -37,11 +39,15 @@
         return issue.selected;
       },
       initMasonry() {
+        const listScrollTop = this.$refs.list.scrollTop;
+
         this.$nextTick(() => {
           this.destroyMasonry();
           listMasonry = new Masonry(this.$refs.list, {
             transitionDuration: 0,
           });
+
+          this.$refs.list.scrollTop = listScrollTop;
         });
       },
       destroyMasonry() {

From 0904e9b107ce78fed80830e00b8fc3621cb98f8f Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 27 Jan 2017 11:58:43 +0000
Subject: [PATCH 26/53] Infinite scrolling

---
 .../boards/components/modal/index.js.es6      |  9 ++++++-
 .../boards/components/modal/list.js.es6       | 24 +++++++++++++++----
 .../boards/stores/modal_store.js.es6          |  3 +++
 app/assets/stylesheets/pages/boards.scss      |  5 ++++
 app/controllers/projects/boards_controller.rb |  2 +-
 5 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 9cab701bb5d..eedfd826787 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -15,6 +15,9 @@
       return ModalStore.store;
     },
     watch: {
+      page() {
+        this.loadIssues();
+      },
       searchTerm() {
         this.searchOperation();
       },
@@ -34,15 +37,17 @@
     },
     methods: {
       searchOperation: _.debounce(function searchOperationDebounce() {
+        this.issues = [];
         this.loadIssues();
       }, 500),
       loadIssues() {
         return gl.boardService.getBacklog({
           search: this.searchTerm,
+          page: this.page,
+          per: this.perPage,
         }).then((res) => {
           const data = res.json();
 
-          this.issues = [];
           data.forEach((issueObj) => {
             const issue = new ListIssue(issueObj);
             const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
@@ -50,6 +55,8 @@
 
             this.issues.push(issue);
           });
+
+          this.loadingNewPage = false;
         });
       },
     },
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 4ef40f851d4..a0b91e6f16a 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -14,10 +14,8 @@
         this.initMasonry();
       },
       issues: {
-        handler(issues, oldIssues) {
-          if (this.activeTab === 'selected' || issues.length !== oldIssues.length) {
-            this.initMasonry();
-          }
+        handler() {
+          this.initMasonry();
         },
         deep: true,
       },
@@ -33,6 +31,15 @@
     },
     methods: {
       toggleIssue: ModalStore.toggleIssue.bind(ModalStore),
+      listHeight () {
+        return this.$refs.list.getBoundingClientRect().height;
+      },
+      scrollHeight () {
+        return this.$refs.list.scrollHeight;
+      },
+      scrollTop () {
+        return this.$refs.list.scrollTop + this.listHeight();
+      },
       showIssue(issue) {
         if (this.activeTab === 'all') return true;
 
@@ -59,6 +66,15 @@
     },
     mounted() {
       this.initMasonry();
+
+      this.$refs.list.onscroll = () => {
+        const currentPage = Math.floor(this.issues.length / this.perPage);
+
+        if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage && currentPage === this.page) {
+          this.loadingNewPage = true;
+          this.page += 1;
+        }
+      };
     },
     destroyed() {
       this.destroyMasonry();
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 54419751433..2d8da482e5f 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -12,6 +12,9 @@
         selectedList: {},
         searchTerm: '',
         loading: false,
+        loadingNewPage: false,
+        page: 1,
+        perPage: 50,
       };
     }
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 04e7aea63fd..d3911ae233a 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -372,6 +372,7 @@
   flex-direction: column;
   width: 90vw;
   height: 85vh;
+  max-width: 1100px;
   min-height: 500px;
   margin: auto;
   padding: 25px 15px 0;
@@ -396,6 +397,8 @@
   margin: -25px -15px -5px;
   border-top: 0;
   border-bottom: 1px solid $border-color;
+  border-top-right-radius: $border-radius-default;
+  border-top-left-radius: $border-radius-default;
 
   > h2 {
     margin: 0;
@@ -448,6 +451,8 @@
   margin-right: -15px;
   padding-left: 15px;
   padding-right: 15px;
+  border-bottom-right-radius: $border-radius-default;
+  border-bottom-left-radius: $border-radius-default;
 }
 
 .add-issues-footer-to-list {
diff --git a/app/controllers/projects/boards_controller.rb b/app/controllers/projects/boards_controller.rb
index ba9d0eaa265..1eaa2ffdf29 100644
--- a/app/controllers/projects/boards_controller.rb
+++ b/app/controllers/projects/boards_controller.rb
@@ -33,7 +33,7 @@ class Projects::BoardsController < Projects::ApplicationController
       LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
                .where(label_id: board.lists.movable.pluck(:label_id)).limit(1).arel.exists
     )
-    @issues = @issues.page(params[:page]).per(50)
+    @issues = @issues.page(params[:page]).per(params[:per])
 
     render json: @issues.as_json(
       labels: true,

From 8b977b295e887f7d134cd92ec352a24c0afd5950 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 27 Jan 2017 13:03:17 +0000
Subject: [PATCH 27/53] Fixed some failing lint tests

---
 .../javascripts/boards/components/modal/footer.js.es6    | 2 +-
 .../javascripts/boards/components/modal/list.js.es6      | 9 +++++----
 app/assets/javascripts/boards/models/issue.js.es6        | 2 +-
 app/assets/stylesheets/pages/boards.scss                 | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 1be58b017ef..81b1aa1da77 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -26,7 +26,7 @@
       },
       addIssues() {
         const list = this.selectedList;
-        const issueIds = this.selectedIssues.map(issue => issue._id);
+        const issueIds = this.selectedIssues.map(issue => issue.globalId);
 
         // Post the data to the backend
         this.$http.post(this.bulkUpdatePath, {
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index a0b91e6f16a..c0c3f4b8d8f 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -31,13 +31,13 @@
     },
     methods: {
       toggleIssue: ModalStore.toggleIssue.bind(ModalStore),
-      listHeight () {
+      listHeight() {
         return this.$refs.list.getBoundingClientRect().height;
       },
-      scrollHeight () {
+      scrollHeight() {
         return this.$refs.list.scrollHeight;
       },
-      scrollTop () {
+      scrollTop() {
         return this.$refs.list.scrollTop + this.listHeight();
       },
       showIssue(issue) {
@@ -70,7 +70,8 @@
       this.$refs.list.onscroll = () => {
         const currentPage = Math.floor(this.issues.length / this.perPage);
 
-        if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage && currentPage === this.page) {
+        if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage
+          && currentPage === this.page) {
           this.loadingNewPage = true;
           this.page += 1;
         }
diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6
index 5b435a76467..2d0a295ae4d 100644
--- a/app/assets/javascripts/boards/models/issue.js.es6
+++ b/app/assets/javascripts/boards/models/issue.js.es6
@@ -6,7 +6,7 @@
 
 class ListIssue {
   constructor (obj) {
-    this._id = obj.id;
+    this.globalId = obj.id;
     this.id = obj.iid;
     this.title = obj.title;
     this.confidential = obj.confidential;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index d3911ae233a..cf1c52a2b38 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -255,7 +255,7 @@
   .form-control {
     display: inline-block;
     width: 210px;
-    margin-right: 10px
+    margin-right: 10px;
   }
 }
 

From a943241056961c7b820adfd8fd08edd25c3a563a Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 27 Jan 2017 16:49:56 +0000
Subject: [PATCH 28/53] Some styling updates Does not remove the issue from the
 selected tab when it it de-selected, it instead gets purged when changing tab

---
 .../boards/components/modal/footer.js.es6     |  8 ++++--
 .../boards/components/modal/header.js.es6     |  7 ++++-
 .../boards/components/modal/list.js.es6       |  8 +++++-
 .../components/modal/lists_dropdown.js.es6    |  4 +--
 .../boards/stores/modal_store.js.es6          | 28 +++++++++++++++----
 app/assets/stylesheets/pages/boards.scss      | 24 ++++++++--------
 app/views/shared/issuable/_filter.html.haml   |  4 +--
 spec/features/boards/add_issues_modal_spec.rb |  3 +-
 .../boards/modal_store_spec.js.es6            | 19 +++++++++++++
 9 files changed, 79 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 81b1aa1da77..1a147daca7a 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -17,7 +17,7 @@
       submitText() {
         const count = ModalStore.selectedCount();
 
-        return `Add ${count} issue${count > 1 || !count ? 's' : ''}`;
+        return `Add ${count > 0 ? count : ''} issue${count > 1 || !count ? 's' : ''}`;
       },
     },
     methods: {
@@ -26,7 +26,9 @@
       },
       addIssues() {
         const list = this.selectedList;
-        const issueIds = this.selectedIssues.map(issue => issue.globalId);
+        const selectedIssues = ModalStore.getSelectedIssues();
+        const issueIds = selectedIssues.filter(issue => issue.selected)
+          .map(issue => issue.globalId);
 
         // Post the data to the backend
         this.$http.post(this.bulkUpdatePath, {
@@ -37,7 +39,7 @@
         });
 
         // Add the issues on the frontend
-        this.selectedIssues.forEach((issue) => {
+        selectedIssues.forEach((issue) => {
           list.addIssue(issue);
           list.issuesSize += 1;
         });
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index d7d896e3be1..ebb2ee1a82f 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -17,7 +17,11 @@
       },
     },
     methods: {
-      toggleAll: ModalStore.toggleAll.bind(ModalStore),
+      toggleAll() {
+        this.$refs.selectAllBtn.blur();
+
+        ModalStore.toggleAll();
+      }
     },
     components: {
       'modal-tabs': gl.issueBoards.ModalTabs,
@@ -49,6 +53,7 @@
           <button
             type="button"
             class="btn btn-success btn-inverted prepend-left-10"
+            ref="selectAllBtn"
             @click="toggleAll">
             {{ selectAllText }}
           </button>
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index c0c3f4b8d8f..605c1101666 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -12,6 +12,10 @@
     watch: {
       activeTab() {
         this.initMasonry();
+
+        if (this.activeTab === 'all') {
+          ModalStore.purgeUnselectedIssues();
+        }
       },
       issues: {
         handler() {
@@ -43,7 +47,9 @@
       showIssue(issue) {
         if (this.activeTab === 'all') return true;
 
-        return issue.selected;
+        const index = ModalStore.selectedIssueIndex(issue);
+
+        return index !== -1;
       },
       initMasonry() {
         const listScrollTop = this.$refs.list.scrollTop;
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index b205c019a31..d6bb755001a 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -21,11 +21,11 @@
           type="button"
           data-toggle="dropdown"
           aria-expanded="false">
-          {{ selected.title }}
           <span
-            class="dropdown-label-box pull-right"
+            class="dropdown-label-box"
             :style="{ backgroundColor: selected.label.color }">
           </span>
+          {{ selected.title }}
           <i class="fa fa-chevron-down"></i>
         </button>
         <div class="dropdown-menu dropdown-menu-selectable">
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 2d8da482e5f..391765c4978 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -19,7 +19,7 @@
     }
 
     selectedCount() {
-      return this.store.selectedIssues.length;
+      return this.store.selectedIssues.filter(issue => issue.selected).length;
     }
 
     toggleIssue(issueObj) {
@@ -51,13 +51,31 @@
       });
     }
 
-    addSelectedIssue(issue) {
-      this.store.selectedIssues.push(issue);
+    getSelectedIssues() {
+      return this.store.selectedIssues.filter(issue => issue.selected);
     }
 
-    removeSelectedIssue(issue) {
+    addSelectedIssue(issue) {
       const index = this.selectedIssueIndex(issue);
-      this.store.selectedIssues.splice(index, 1);
+
+      if (index === -1) {
+        this.store.selectedIssues.push(issue);
+      }
+    }
+
+    removeSelectedIssue(issue, forcePurge = false) {
+      if (this.store.activeTab === 'all' || forcePurge) {
+        const index = this.selectedIssueIndex(issue);
+        this.store.selectedIssues.splice(index, 1);
+      }
+    }
+
+    purgeUnselectedIssues() {
+      this.store.selectedIssues.forEach((issue) => {
+        if (!issue.selected) {
+          this.removeSelectedIssue(issue, true);
+        }
+      });
     }
 
     selectedIssueIndex(issue) {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index cf1c52a2b38..e7321b19e15 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -255,7 +255,6 @@
   .form-control {
     display: inline-block;
     width: 210px;
-    margin-right: 10px;
   }
 }
 
@@ -387,8 +386,11 @@
 
     > .row {
       width: 100%;
-      margin-top: auto;
-      margin-bottom: auto;
+      margin: auto 0;
+    }
+
+    .svg-content {
+      margin-top: -40px;
     }
   }
 }
@@ -420,7 +422,7 @@
 
   .card-parent {
     width: 100%;
-    padding: 0 $gl-vert-padding ($gl-vert-padding * 2);
+    padding: 0 5px 5px;
 
     @media (min-width: $screen-sm-min) {
       width: 50%;
@@ -433,6 +435,7 @@
 
   .card {
     border: 1px solid $border-gray-dark;
+    box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3);
     cursor: pointer;
   }
 }
@@ -446,9 +449,7 @@
 }
 
 .add-issues-footer {
-  margin-top: auto;
-  margin-left: -15px;
-  margin-right: -15px;
+  margin: auto -15px 0;
   padding-left: 15px;
   padding-right: 15px;
   border-bottom-right-radius: $border-radius-default;
@@ -465,10 +466,11 @@
   position: absolute;
   right: -3px;
   top: -3px;
-  width: 20px;
-  background-color: $blue-dark;
+  width: 17px;
+  background-color: $blue-light;
   color: $white-light;
-  font-size: 12px;
-  line-height: 20px;
+  border: 1px solid $border-blue-light;
+  font-size: 9px;
+  line-height: 17px;
   border-radius: 50%;
 }
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index b94bdf14d5e..1b1348d435a 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -38,10 +38,10 @@
             #js-boards-search.issue-boards-search
               %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
               - if can?(current_user, :admin_list, @project)
-                %button.btn.btn-create.btn-inverted.js-show-add-issues{ type: "button" }
+                %button.btn.btn-create.pull-right.prepend-left-10.js-show-add-issues{ type: "button" }
                   Add issues
                 .dropdown.pull-right
-                  %button.btn.btn-create.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
+                  %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
                     Add list
                   .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
                     = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index e6065c0740d..5ba044a4f3c 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -10,6 +10,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
   let!(:planning) { create(:label, project: project, name: 'Planning') }
   let!(:label) { create(:label, project: project) }
   let!(:list1) { create(:list, board: board, label: planning, position: 0) }
+  let!(:list2) { create(:list, board: board, label: label, position: 1) }
   let!(:issue) { create(:issue, project: project) }
   let!(:issue2) { create(:issue, project: project) }
 
@@ -172,7 +173,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
           first('.card').click
 
-          expect(page).not_to have_selector('.card')
+          expect(page).not_to have_selector('.is-active')
         end
       end
     end
diff --git a/spec/javascripts/boards/modal_store_spec.js.es6 b/spec/javascripts/boards/modal_store_spec.js.es6
index 9c0625357bd..3f44e427201 100644
--- a/spec/javascripts/boards/modal_store_spec.js.es6
+++ b/spec/javascripts/boards/modal_store_spec.js.es6
@@ -81,6 +81,7 @@ describe('Modal store', () => {
   });
 
   it('adds issue to selected array', () => {
+    issue.selected = true;
     Store.addSelectedIssue(issue);
 
     expect(Store.selectedCount()).toBe(1);
@@ -112,4 +113,22 @@ describe('Modal store', () => {
   it('does not find a selected issue', () => {
     expect(Store.findSelectedIssue(issue)).toBe(undefined);
   });
+
+  it('does not remove from selected issue if tab is not all', () => {
+    Store.store.activeTab = 'selected';
+
+    Store.toggleIssue(issue);
+    Store.toggleIssue(issue);
+
+    expect(Store.store.selectedIssues.length).toBe(1);
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('gets selected issue array with only selected issues', () => {
+    Store.toggleIssue(issue);
+    Store.toggleIssue(issue2);
+    Store.toggleIssue(issue2);
+
+    expect(Store.getSelectedIssues().length).toBe(1);
+  });
 });

From 26d61113cf74d5714dafd635951962a9d61cec55 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 27 Jan 2017 17:01:39 +0000
Subject: [PATCH 29/53] Lists dropdown drops up

---
 .../boards/components/modal/lists_dropdown.js.es6            | 2 +-
 app/assets/stylesheets/framework/dropdowns.scss              | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index d6bb755001a..bb2d43c4a21 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -28,7 +28,7 @@
           {{ selected.title }}
           <i class="fa fa-chevron-down"></i>
         </button>
-        <div class="dropdown-menu dropdown-menu-selectable">
+        <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
           <ul>
             <li
               v-for="list in state.lists"
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 6bfb9a6d1cb..ca5861bf3e6 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -227,6 +227,11 @@
   }
 }
 
+.dropdown-menu-drop-up {
+  top: auto;
+  bottom: 100%;
+}
+
 .dropdown-menu-large {
   width: 340px;
 }

From 7f58fc0e997a6784d978396747f39ce573dfe289 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 27 Jan 2017 17:13:37 +0000
Subject: [PATCH 30/53] Removed backlog frontend code

---
 app/assets/javascripts/boards/boards_bundle.js.es6 | 2 --
 app/assets/javascripts/boards/models/list.js.es6   | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index e2b3d2c7df6..0e2794334fa 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -59,8 +59,6 @@ $(() => {
       gl.boardService.all()
         .then((resp) => {
           resp.json().forEach((board) => {
-            if (board.list_type === 'backlog') return;
-
             const list = Store.addList(board);
 
             if (list.type === 'done') {
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index 3dd5f273057..5152be56b66 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/app/assets/javascripts/boards/models/list.js.es6
@@ -9,7 +9,7 @@ class List {
     this.position = obj.position;
     this.title = obj.title;
     this.type = obj.list_type;
-    this.preset = ['backlog', 'done', 'blank'].indexOf(this.type) > -1;
+    this.preset = ['done', 'blank'].indexOf(this.type) > -1;
     this.filters = gl.issueBoards.BoardsStore.state.filters;
     this.page = 1;
     this.loading = true;

From 274987d5c0f7b04a9b7510c318c8df6dfab477df Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Fri, 27 Jan 2017 16:21:11 -0200
Subject: [PATCH 31/53] Reuse endpoint to list issues for a list instead of
 create a new one

---
 .../boards/components/modal/index.js.es6      |  2 +-
 .../boards/services/board_service.js.es6      |  6 +-
 .../projects/boards/issues_controller.rb      |  2 +-
 app/controllers/projects/boards_controller.rb | 23 +-----
 app/services/boards/issues/list_service.rb    | 14 +++-
 config/routes/project.rb                      |  4 +-
 .../projects/boards/issues_controller_spec.rb | 76 ++++++++++++-------
 .../boards/issues/list_service_spec.rb        | 12 +++
 8 files changed, 79 insertions(+), 60 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index eedfd826787..ababe3af0e3 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -48,7 +48,7 @@
         }).then((res) => {
           const data = res.json();
 
-          data.forEach((issueObj) => {
+          data.issues.forEach((issueObj) => {
             const issue = new ListIssue(issueObj);
             const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
             issue.selected = foundSelectedIssue !== undefined;
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index 20df8f2b373..993f8599fd4 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -4,9 +4,9 @@
 class BoardService {
   constructor (root, boardId) {
     this.boards = Vue.resource(`${root}{/id}.json`, {}, {
-      backlog: {
+      issues: {
         method: 'GET',
-        url: `${root}/${boardId}/backlog.json`
+        url: `${root}/${boardId}/issues.json`
       }
     });
     this.lists = Vue.resource(`${root}/${boardId}/lists{/id}`, {}, {
@@ -73,7 +73,7 @@ class BoardService {
   }
 
   getBacklog(data) {
-    return this.boards.backlog(data);
+    return this.boards.issues(data);
   }
 }
 
diff --git a/app/controllers/projects/boards/issues_controller.rb b/app/controllers/projects/boards/issues_controller.rb
index dc33e1405f2..a061b575e21 100644
--- a/app/controllers/projects/boards/issues_controller.rb
+++ b/app/controllers/projects/boards/issues_controller.rb
@@ -59,7 +59,7 @@ module Projects
       end
 
       def filter_params
-        params.merge(board_id: params[:board_id], id: params[:list_id])
+        params.merge(board_id: params[:board_id], id: params[:list_id]).compact
       end
 
       def move_params
diff --git a/app/controllers/projects/boards_controller.rb b/app/controllers/projects/boards_controller.rb
index 1eaa2ffdf29..808affa4f98 100644
--- a/app/controllers/projects/boards_controller.rb
+++ b/app/controllers/projects/boards_controller.rb
@@ -1,7 +1,7 @@
 class Projects::BoardsController < Projects::ApplicationController
   include IssuableCollections
 
-  # before_action :authorize_read_board!, only: [:index, :show, :backlog]
+  before_action :authorize_read_board!, only: [:index, :show]
 
   def index
     @boards = ::Boards::ListService.new(project, current_user).execute
@@ -25,27 +25,6 @@ class Projects::BoardsController < Projects::ApplicationController
     end
   end
 
-  def backlog
-    board = project.boards.find(params[:id])
-
-    @issues = issues_collection
-    @issues = @issues.where.not(
-      LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
-               .where(label_id: board.lists.movable.pluck(:label_id)).limit(1).arel.exists
-    )
-    @issues = @issues.page(params[:page]).per(params[:per])
-
-    render json: @issues.as_json(
-      labels: true,
-      only: [:id, :iid, :title, :confidential, :due_date],
-      include: {
-        assignee: { only: [:id, :name, :username], methods: [:avatar_url] },
-        milestone: { only: [:id, :title] }
-      },
-      user: current_user
-    )
-  end
-
   private
 
   def authorize_read_board!
diff --git a/app/services/boards/issues/list_service.rb b/app/services/boards/issues/list_service.rb
index fd4a462c7b2..8a94c54b6ab 100644
--- a/app/services/boards/issues/list_service.rb
+++ b/app/services/boards/issues/list_service.rb
@@ -3,8 +3,8 @@ module Boards
     class ListService < BaseService
       def execute
         issues = IssuesFinder.new(current_user, filter_params).execute
-        issues = without_board_labels(issues) unless list.movable?
-        issues = with_list_label(issues) if list.movable?
+        issues = without_board_labels(issues) unless movable_list?
+        issues = with_list_label(issues) if movable_list?
         issues
       end
 
@@ -15,7 +15,13 @@ module Boards
       end
 
       def list
-        @list ||= board.lists.find(params[:id])
+        return @list if defined?(@list)
+
+        @list = board.lists.find(params[:id]) if params.key?(:id)
+      end
+
+      def movable_list?
+        @movable_list ||= list.present? && list.movable?
       end
 
       def filter_params
@@ -40,7 +46,7 @@ module Boards
       end
 
       def set_state
-        params[:state] = list.done? ? 'closed' : 'opened'
+        params[:state] = list && list.done? ? 'closed' : 'opened'
       end
 
       def board_label_ids
diff --git a/config/routes/project.rb b/config/routes/project.rb
index 46d6530333d..7cd4a73b1a0 100644
--- a/config/routes/project.rb
+++ b/config/routes/project.rb
@@ -266,10 +266,8 @@ constraints(ProjectUrlConstrainer.new) do
       end
 
       resources :boards, only: [:index, :show] do
-        get :backlog, on: :member
-
         scope module: :boards do
-          resources :issues, only: [:update]
+          resources :issues, only: [:index, :update]
 
           resources :lists, only: [:index, :create, :update, :destroy] do
             collection do
diff --git a/spec/controllers/projects/boards/issues_controller_spec.rb b/spec/controllers/projects/boards/issues_controller_spec.rb
index 299d2c981d3..ad15e3942a5 100644
--- a/spec/controllers/projects/boards/issues_controller_spec.rb
+++ b/spec/controllers/projects/boards/issues_controller_spec.rb
@@ -18,23 +18,7 @@ describe Projects::Boards::IssuesController do
   end
 
   describe 'GET index' do
-    context 'with valid list id' do
-      it 'returns issues that have the list label applied' do
-        johndoe = create(:user, avatar: fixture_file_upload(File.join(Rails.root, 'spec/fixtures/dk.png')))
-        issue = create(:labeled_issue, project: project, labels: [planning])
-        create(:labeled_issue, project: project, labels: [planning])
-        create(:labeled_issue, project: project, labels: [development], due_date: Date.tomorrow)
-        create(:labeled_issue, project: project, labels: [development], assignee: johndoe)
-        issue.subscribe(johndoe, project)
-
-        list_issues user: user, board: board, list: list2
-
-        parsed_response = JSON.parse(response.body)
-
-        expect(response).to match_response_schema('issues')
-        expect(parsed_response.length).to eq 2
-      end
-    end
+    let(:johndoe) { create(:user, avatar: fixture_file_upload(File.join(Rails.root, 'spec/fixtures/dk.png'))) }
 
     context 'with invalid board id' do
       it 'returns a not found 404 response' do
@@ -44,11 +28,47 @@ describe Projects::Boards::IssuesController do
       end
     end
 
-    context 'with invalid list id' do
-      it 'returns a not found 404 response' do
-        list_issues user: user, board: board, list: 999
+    context 'when list id is present' do
+      context 'with valid list id' do
+        it 'returns issues that have the list label applied' do
+          issue = create(:labeled_issue, project: project, labels: [planning])
+          create(:labeled_issue, project: project, labels: [planning])
+          create(:labeled_issue, project: project, labels: [development], due_date: Date.tomorrow)
+          create(:labeled_issue, project: project, labels: [development], assignee: johndoe)
+          issue.subscribe(johndoe, project)
 
-        expect(response).to have_http_status(404)
+          list_issues user: user, board: board, list: list2
+
+          parsed_response = JSON.parse(response.body)
+
+          expect(response).to match_response_schema('issues')
+          expect(parsed_response.length).to eq 2
+        end
+      end
+
+      context 'with invalid list id' do
+        it 'returns a not found 404 response' do
+          list_issues user: user, board: board, list: 999
+
+          expect(response).to have_http_status(404)
+        end
+      end
+    end
+
+    context 'when list id is missing' do
+      it 'returns opened issues without board labels applied' do
+        bug = create(:label, project: project, name: 'Bug')
+        create(:issue, project: project)
+        create(:labeled_issue, project: project, labels: [planning])
+        create(:labeled_issue, project: project, labels: [development])
+        create(:labeled_issue, project: project, labels: [bug])
+
+        list_issues user: user, board: board
+
+        parsed_response = JSON.parse(response.body)
+
+        expect(response).to match_response_schema('issues')
+        expect(parsed_response.length).to eq 2
       end
     end
 
@@ -65,13 +85,17 @@ describe Projects::Boards::IssuesController do
       end
     end
 
-    def list_issues(user:, board:, list:)
+    def list_issues(user:, board:, list: nil)
       sign_in(user)
 
-      get :index, namespace_id: project.namespace.to_param,
-                  project_id: project.to_param,
-                  board_id: board.to_param,
-                  list_id: list.to_param
+      params = {
+        namespace_id: project.namespace.to_param,
+        project_id: project.to_param,
+        board_id: board.to_param,
+        list_id: list.try(:to_param)
+      }
+
+      get :index, params.compact
     end
   end
 
diff --git a/spec/services/boards/issues/list_service_spec.rb b/spec/services/boards/issues/list_service_spec.rb
index 5d53c54254c..305278843f5 100644
--- a/spec/services/boards/issues/list_service_spec.rb
+++ b/spec/services/boards/issues/list_service_spec.rb
@@ -17,6 +17,10 @@ describe Boards::Issues::ListService, services: true do
     let!(:list2)   { create(:list, board: board, label: testing, position: 1) }
     let!(:done)    { create(:done_list, board: board) }
 
+    let!(:opened_issue1) { create(:labeled_issue, project: project, labels: [bug]) }
+    let!(:opened_issue2) { create(:labeled_issue, project: project, labels: [p2]) }
+    let!(:reopened_issue1) { create(:issue, :reopened, project: project) }
+
     let!(:list1_issue1) { create(:labeled_issue, project: project, labels: [p2, development]) }
     let!(:list1_issue2) { create(:labeled_issue, project: project, labels: [development]) }
     let!(:list1_issue3) { create(:labeled_issue, project: project, labels: [development, p1]) }
@@ -40,6 +44,14 @@ describe Boards::Issues::ListService, services: true do
     end
 
     context 'sets default order to priority' do
+      it 'returns opened issues when list id is missing' do
+        params = { board_id: board.id }
+
+        issues = described_class.new(project, user, params).execute
+
+        expect(issues).to eq [opened_issue2, reopened_issue1, opened_issue1]
+      end
+
       it 'returns closed issues when listing issues from Done' do
         params = { board_id: board.id, id: done.id }
 

From 8323bc4919b9c13680fdc69e4ae25947b6ab0026 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 30 Jan 2017 14:11:09 +0000
Subject: [PATCH 32/53] Fixed up JS tests

---
 .../boards/components/modal/header.js.es6       |  2 +-
 .../javascripts/boards/boards_store_spec.js.es6 | 17 +----------------
 spec/javascripts/boards/issue_card_spec.js.es6  |  2 +-
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index ebb2ee1a82f..1b01a597874 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -21,7 +21,7 @@
         this.$refs.selectAllBtn.blur();
 
         ModalStore.toggleAll();
-      }
+      },
     },
     components: {
       'modal-tabs': gl.issueBoards.ModalTabs,
diff --git a/spec/javascripts/boards/boards_store_spec.js.es6 b/spec/javascripts/boards/boards_store_spec.js.es6
index 7c5850111cb..a0d434e3588 100644
--- a/spec/javascripts/boards/boards_store_spec.js.es6
+++ b/spec/javascripts/boards/boards_store_spec.js.es6
@@ -61,18 +61,6 @@ describe('Store', () => {
       expect(list).toBeDefined();
     });
 
-    it('finds list limited by type', () => {
-      gl.issueBoards.BoardsStore.addList({
-        id: 1,
-        position: 0,
-        title: 'Test',
-        list_type: 'backlog'
-      });
-      const list = gl.issueBoards.BoardsStore.findList('id', 1, 'backlog');
-
-      expect(list).toBeDefined();
-    });
-
     it('gets issue when new list added', (done) => {
       gl.issueBoards.BoardsStore.addList(listObj);
       const list = gl.issueBoards.BoardsStore.findList('id', 1);
@@ -117,10 +105,7 @@ describe('Store', () => {
       expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(false);
     });
 
-    it('check for blank state adding when backlog & done list exist', () => {
-      gl.issueBoards.BoardsStore.addList({
-        list_type: 'backlog'
-      });
+    it('check for blank state adding when done list exist', () => {
       gl.issueBoards.BoardsStore.addList({
         list_type: 'done'
       });
diff --git a/spec/javascripts/boards/issue_card_spec.js.es6 b/spec/javascripts/boards/issue_card_spec.js.es6
index 181fb684c23..d68108c6f6f 100644
--- a/spec/javascripts/boards/issue_card_spec.js.es6
+++ b/spec/javascripts/boards/issue_card_spec.js.es6
@@ -93,7 +93,7 @@ describe('Issue card component', () => {
 
     setTimeout(() => {
       expect(
-        component.$el.querySelector('.fa-eye-flash'),
+        component.$el.querySelector('.confidential-icon'),
       ).not.toBeNull();
       done();
     }, 0);

From c368b28cc9615b40881f5f39473314950e77aaa4 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 30 Jan 2017 15:39:40 +0000
Subject: [PATCH 33/53] Fixed issue with issue not persisting in list

---
 app/controllers/projects/boards/issues_controller.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/controllers/projects/boards/issues_controller.rb b/app/controllers/projects/boards/issues_controller.rb
index a061b575e21..7fe61c6800d 100644
--- a/app/controllers/projects/boards/issues_controller.rb
+++ b/app/controllers/projects/boards/issues_controller.rb
@@ -73,7 +73,7 @@ module Projects
       def serialize_as_json(resource)
         resource.as_json(
           labels: true,
-          only: [:iid, :title, :confidential, :due_date],
+          only: [:id, :iid, :title, :confidential, :due_date],
           include: {
             assignee: { only: [:id, :name, :username], methods: [:avatar_url] },
             milestone: { only: [:id, :title] }

From b129187267292fb1052c984878f5d6f41483c204 Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Mon, 30 Jan 2017 13:51:09 -0200
Subject: [PATCH 34/53] Remove unnecessary include from
 RemoveBacklogListsFromBoards migration

---
 db/migrate/20170127032550_remove_backlog_lists_from_boards.rb | 2 --
 1 file changed, 2 deletions(-)

diff --git a/db/migrate/20170127032550_remove_backlog_lists_from_boards.rb b/db/migrate/20170127032550_remove_backlog_lists_from_boards.rb
index 3369bd4d123..0ee4229d1f8 100644
--- a/db/migrate/20170127032550_remove_backlog_lists_from_boards.rb
+++ b/db/migrate/20170127032550_remove_backlog_lists_from_boards.rb
@@ -1,6 +1,4 @@
 class RemoveBacklogListsFromBoards < ActiveRecord::Migration
-  include Gitlab::Database::MigrationHelpers
-
   DOWNTIME = false
 
   def up

From 6c828906a24e374c68884c8884135ec1472721b8 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 30 Jan 2017 15:56:45 +0000
Subject: [PATCH 35/53] Disabled add issues button if no lists exist

---
 .../javascripts/boards/boards_bundle.js.es6   | 29 ++++++++++++++-----
 .../projects/boards/issues_controller.rb      |  2 +-
 app/views/shared/issuable/_filter.html.haml   |  3 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 0e2794334fa..18b67abfccc 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -88,12 +88,25 @@ $(() => {
     }
   });
 
-  // This element is outside the Vue app
-  $(document)
-    .off('click', '.js-show-add-issues')
-    .on('click', '.js-show-add-issues', (e) => {
-      e.preventDefault();
-
-      ModalStore.store.showAddIssuesModal = true;
-    });
+  gl.IssueBoardsModalAddBtn = new Vue({
+    el: '#js-add-issues-btn',
+    data: {
+      modal: ModalStore.store,
+      store: Store.state,
+    },
+    computed: {
+      disabled() {
+        return Store.shouldAddBlankState();
+      },
+    },
+    template: `
+      <button
+        class="btn btn-create pull-right prepend-left-10 has-tooltip"
+        type="button"
+        :disabled="disabled"
+        @click="modal.showAddIssuesModal = true">
+        Add issues
+      </button>
+    `,
+  });
 });
diff --git a/app/controllers/projects/boards/issues_controller.rb b/app/controllers/projects/boards/issues_controller.rb
index 7fe61c6800d..61fef4dc133 100644
--- a/app/controllers/projects/boards/issues_controller.rb
+++ b/app/controllers/projects/boards/issues_controller.rb
@@ -7,7 +7,7 @@ module Projects
 
       def index
         issues = ::Boards::Issues::ListService.new(project, current_user, filter_params).execute
-        issues = issues.page(params[:page])
+        issues = issues.page(params[:page]).per(params[:per] || 20)
 
         render json: {
           issues: serialize_as_json(issues),
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index 1b1348d435a..1eed314d068 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -38,8 +38,7 @@
             #js-boards-search.issue-boards-search
               %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
               - if can?(current_user, :admin_list, @project)
-                %button.btn.btn-create.pull-right.prepend-left-10.js-show-add-issues{ type: "button" }
-                  Add issues
+                #js-add-issues-btn.pull-right.prepend-left-10
                 .dropdown.pull-right
                   %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
                     Add list

From e140675eef49e65e8b80909cf22c05284514cdef Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 30 Jan 2017 16:26:42 +0000
Subject: [PATCH 36/53] Fixed issue link href

---
 .../boards/components/modal/index.js.es6            |  6 ++++--
 .../javascripts/boards/components/modal/list.js.es6 | 13 ++++++++++---
 app/views/projects/boards/_show.html.haml           |  3 ++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index ababe3af0e3..f7f50455acc 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -9,7 +9,7 @@
 
   gl.issueBoards.IssuesModal = Vue.extend({
     props: [
-      'blankStateImage', 'newIssuePath', 'bulkUpdatePath',
+      'blankStateImage', 'newIssuePath', 'bulkUpdatePath', 'issueLinkBase',
     ],
     data() {
       return ModalStore.store;
@@ -81,7 +81,9 @@
         v-if="showAddIssuesModal">
         <div class="add-issues-container">
           <modal-header></modal-header>
-          <modal-list v-if="!loading && showList"></modal-list>
+          <modal-list
+            :issue-link-base="issueLinkBase"
+            v-if="!loading && showList"></modal-list>
           <empty-state
             v-if="(!loading && issues.length === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
             :image="blankStateImage"
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 605c1101666..0df09d42059 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -6,6 +6,9 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalList = Vue.extend({
+    props: [
+      'issueLinkBase',
+    ],
     data() {
       return ModalStore.store;
     },
@@ -34,7 +37,11 @@
       },
     },
     methods: {
-      toggleIssue: ModalStore.toggleIssue.bind(ModalStore),
+      toggleIssue(e, issue) {
+        if (e.target.tagName !== 'A') {
+          ModalStore.toggleIssue(issue);
+        }
+      },
       listHeight() {
         return this.$refs.list.getBoundingClientRect().height;
       },
@@ -100,10 +107,10 @@
           <div
             class="card"
             :class="{ 'is-active': issue.selected }"
-            @click="toggleIssue(issue)">
+            @click="toggleIssue($event, issue)">
             <issue-card-inner
               :issue="issue"
-              :issue-link-base="'/'">
+              :issue-link-base="issueLinkBase">
             </issue-card-inner>
             <span
               v-if="issue.selected"
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index 068e69bada6..a0f9dfc5b5b 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -28,4 +28,5 @@
   = render "projects/boards/components/sidebar"
   %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
     "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project),
-    "bulk-update-path" => bulk_update_namespace_project_issues_path(@project.namespace, @project) }
+    "bulk-update-path" => bulk_update_namespace_project_issues_path(@project.namespace, @project),
+    ":issue-link-base" => "issueLinkBase" }

From ffeb3200c1c8558345c99de64723de2747b7ffe8 Mon Sep 17 00:00:00 2001
From: Douglas Barbosa Alexandre <dbalexandre@gmail.com>
Date: Mon, 30 Jan 2017 14:34:47 -0200
Subject: [PATCH 37/53] Add optional id property to the issue schema

---
 spec/fixtures/api/schemas/issue.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/spec/fixtures/api/schemas/issue.json b/spec/fixtures/api/schemas/issue.json
index 77f2bcee1f3..8e19cee5440 100644
--- a/spec/fixtures/api/schemas/issue.json
+++ b/spec/fixtures/api/schemas/issue.json
@@ -6,6 +6,7 @@
     "confidential"
   ],
   "properties" : {
+    "id": { "type": "integer" },
     "iid": { "type": "integer" },
     "title": { "type": "string" },
     "confidential": { "type": "boolean" },

From 954deefa2253dae2c65246a19d6c7202b07715e1 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 30 Jan 2017 17:11:08 +0000
Subject: [PATCH 38/53] Added remove button

---
 .../boards/components/board_card.js.es6       |  1 +
 .../boards/components/board_sidebar.js.es6    | 10 ++++--
 .../components/sidebar/remove_issue.js.es6    | 34 +++++++++++++++++++
 .../boards/components/_sidebar.html.haml      |  2 ++
 spec/features/boards/sidebar_spec.rb          | 32 +++++++++++++++++
 5 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6

diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index ab4226ded1d..037100c0859 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -50,6 +50,7 @@
             Store.detail.issue = {};
           } else {
             Store.detail.issue = this.issue;
+            Store.detail.list = this.list;
           }
         }
       }
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index 75dfcb66bb0..e5937c178f2 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -4,6 +4,7 @@
 /* global MilestoneSelect */
 /* global LabelsSelect */
 /* global Sidebar */
+//= require ./sidebar/remove_issue
 
 (() => {
   const Store = gl.issueBoards.BoardsStore;
@@ -18,7 +19,8 @@
     data() {
       return {
         detail: Store.detail,
-        issue: {}
+        issue: {},
+        list: {},
       };
     },
     computed: {
@@ -36,6 +38,7 @@
           }
 
           this.issue = this.detail.issue;
+          this.list = this.detail.list;
         },
         deep: true
       },
@@ -60,6 +63,9 @@
       new LabelsSelect();
       new Sidebar();
       gl.Subscription.bindAll('.subscription');
-    }
+    },
+    components: {
+      'remove-btn': gl.issueBoards.RemoveIssueBtn,
+    },
   });
 })();
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6 b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
new file mode 100644
index 00000000000..3f965b7b9b2
--- /dev/null
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
@@ -0,0 +1,34 @@
+/* global Vue */
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.RemoveIssueBtn = Vue.extend({
+    props: [
+      'issue', 'list',
+    ],
+    methods: {
+      removeIssue() {
+        const doneList = Store.findList('type', 'done', false);
+
+        Store.moveIssueToList(this.list, doneList, this.issue, 0);
+
+        Store.detail.issue = {};
+      },
+    },
+    template: `
+      <div
+        class="block list"
+        v-if="list.type !== 'done'">
+        <button
+          class="btn btn-default btn-block"
+          type="button"
+          @click="removeIssue">
+          Remove from board
+        </button>
+      </div>
+    `,
+  });
+})();
diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
index df7fa9ddaf2..24d76da6f06 100644
--- a/app/views/projects/boards/components/_sidebar.html.haml
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -22,3 +22,5 @@
           = render "projects/boards/components/sidebar/due_date"
           = render "projects/boards/components/sidebar/labels"
           = render "projects/boards/components/sidebar/notifications"
+          %remove-btn{ ":issue" => "issue",
+            ":list" => "list" }
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index a0f32d2ab76..ea135d0cc95 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -70,6 +70,38 @@ describe 'Issue Boards', feature: true, js: true do
     end
   end
 
+  it 'removes card from board when clicking remove button' do
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    page.within('.issue-boards-sidebar') do
+      click_button 'Remove from board'
+    end
+
+    page.within(first('.board')) do
+      expect(page).to have_selector('.card', count: 1)
+    end
+  end
+
+  it 'does not show remove issue button when issue is closed' do
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    page.within('.issue-boards-sidebar') do
+      click_button 'Remove from board'
+    end
+
+    page.within(find('.board:nth-child(2)')) do
+      first('.card').click
+    end
+
+    page.within('.issue-boards-sidebar') do
+      expect(page).not_to have_button 'Remove from board'
+    end
+  end
+
   context 'assignee' do
     it 'updates the issues assignee' do
       page.within(first('.board')) do

From d5c9d7e7530589e21f13816f3dba5de91f108d8b Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 09:39:53 +0000
Subject: [PATCH 39/53] Fixed DB schema Changed how components are added in
 objects

---
 .../boards/components/modal/footer.js.es6     |  2 +-
 .../boards/components/modal/header.js.es6     |  2 +-
 .../boards/components/modal/index.js.es6      |  8 ++--
 .../boards/components/modal/list.js.es6       |  2 +-
 db/schema.rb                                  | 41 +++++++------------
 5 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 1a147daca7a..566303431f6 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -48,7 +48,7 @@
       },
     },
     components: {
-      'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
+      listsDropdown: gl.issueBoards.ModalFooterListsDropdown,
     },
     template: `
       <footer
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 1b01a597874..f6d891a1633 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -24,7 +24,7 @@
       },
     },
     components: {
-      'modal-tabs': gl.issueBoards.ModalTabs,
+      modalTabs: gl.issueBoards.ModalTabs,
     },
     template: `
       <div>
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index f7f50455acc..dd40075ac47 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -70,10 +70,10 @@
       },
     },
     components: {
-      'modal-header': gl.issueBoards.IssuesModalHeader,
-      'modal-list': gl.issueBoards.ModalList,
-      'modal-footer': gl.issueBoards.ModalFooter,
-      'empty-state': gl.issueBoards.ModalEmptyState,
+      modalHeader: gl.issueBoards.IssuesModalHeader,
+      modalList: gl.issueBoards.ModalList,
+      modalFooter: gl.issueBoards.ModalFooter,
+      emptyState: gl.issueBoards.ModalEmptyState,
     },
     template: `
       <div
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 0df09d42059..309696c7078 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -94,7 +94,7 @@
       this.destroyMasonry();
     },
     components: {
-      'issue-card-inner': gl.issueBoards.IssueCardInner,
+      issueCardInner: gl.issueBoards.IssueCardInner,
     },
     template: `
       <div
diff --git a/db/schema.rb b/db/schema.rb
index d887b441189..c73c311ccb2 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -87,9 +87,9 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.boolean "send_user_confirmation_email", default: false
     t.integer "container_registry_token_expire_delay", default: 5
     t.text "after_sign_up_text"
+    t.boolean "user_default_external", default: false, null: false
     t.string "repository_storages", default: "default"
     t.string "enabled_git_access_protocol"
-    t.boolean "user_default_external", default: false, null: false
     t.boolean "domain_blacklist_enabled", default: false
     t.text "domain_blacklist"
     t.boolean "koding_enabled"
@@ -98,14 +98,14 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.text "help_page_text_html"
     t.text "shared_runners_text_html"
     t.text "after_sign_up_text_html"
+    t.boolean "sidekiq_throttling_enabled", default: false
+    t.string "sidekiq_throttling_queues"
+    t.decimal "sidekiq_throttling_factor"
     t.boolean "housekeeping_enabled", default: true, null: false
     t.boolean "housekeeping_bitmaps_enabled", default: true, null: false
     t.integer "housekeeping_incremental_repack_period", default: 10, null: false
     t.integer "housekeeping_full_repack_period", default: 50, null: false
     t.integer "housekeeping_gc_period", default: 200, null: false
-    t.boolean "sidekiq_throttling_enabled", default: false
-    t.string "sidekiq_throttling_queues"
-    t.decimal "sidekiq_throttling_factor"
     t.boolean "html_emails_enabled", default: true
     t.string "plantuml_url"
     t.boolean "plantuml_enabled"
@@ -398,22 +398,22 @@ ActiveRecord::Schema.define(version: 20170130204620) do
   add_index "deploy_keys_projects", ["project_id"], name: "index_deploy_keys_projects_on_project_id", using: :btree
 
   create_table "deployments", force: :cascade do |t|
-    t.integer "iid"
-    t.integer "project_id"
-    t.integer "environment_id"
-    t.string "ref"
-    t.boolean "tag"
-    t.string "sha"
+    t.integer "iid", null: false
+    t.integer "project_id", null: false
+    t.integer "environment_id", null: false
+    t.string "ref", null: false
+    t.boolean "tag", null: false
+    t.string "sha", null: false
     t.integer "user_id"
-    t.integer "deployable_id", null: false
-    t.string "deployable_type", null: false
+    t.integer "deployable_id"
+    t.string "deployable_type"
     t.datetime "created_at"
     t.datetime "updated_at"
     t.string "on_stop"
   end
 
   add_index "deployments", ["project_id", "environment_id", "iid"], name: "index_deployments_on_project_id_and_environment_id_and_iid", using: :btree
-  add_index "deployments", ["project_id", "iid"], name: "index_deployments_on_project_id_and_iid", using: :btree
+  add_index "deployments", ["project_id", "iid"], name: "index_deployments_on_project_id_and_iid", unique: true, using: :btree
 
   create_table "emails", force: :cascade do |t|
     t.integer "user_id", null: false
@@ -685,8 +685,8 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.integer "merge_user_id"
     t.string "merge_commit_sha"
     t.datetime "deleted_at"
-    t.integer "lock_version"
     t.string "in_progress_merge_commit_sha"
+    t.integer "lock_version"
     t.text "title_html"
     t.text "description_html"
     t.integer "time_estimate"
@@ -763,16 +763,6 @@ ActiveRecord::Schema.define(version: 20170130204620) do
   add_index "namespaces", ["path"], name: "index_namespaces_on_path_trigram", using: :gin, opclasses: {"path"=>"gin_trgm_ops"}
   add_index "namespaces", ["type"], name: "index_namespaces_on_type", using: :btree
 
-  create_table "note_templates", force: :cascade do |t|
-    t.integer "user_id"
-    t.string "title"
-    t.text "note"
-    t.datetime "created_at", null: false
-    t.datetime "updated_at", null: false
-  end
-
-  add_index "note_templates", ["user_id"], name: "index_note_templates_on_user_id", using: :btree
-
   create_table "notes", force: :cascade do |t|
     t.text "note"
     t.string "noteable_type"
@@ -788,7 +778,6 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.text "st_diff"
     t.integer "updated_by_id"
     t.string "type"
-    t.string "system_type"
     t.text "position"
     t.text "original_position"
     t.datetime "resolved_at"
@@ -971,7 +960,7 @@ ActiveRecord::Schema.define(version: 20170130204620) do
     t.boolean "has_external_wiki"
     t.boolean "lfs_enabled"
     t.text "description_html"
-    t.boolean "only_allow_merge_if_all_discussions_are_resolved", default: false, null: false
+    t.boolean "only_allow_merge_if_all_discussions_are_resolved"
   end
 
   add_index "projects", ["ci_id"], name: "index_projects_on_ci_id", using: :btree

From 1b01386a9513ad71f07aab79a29ee1f877db8df6 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 09:41:57 +0000
Subject: [PATCH 40/53] Fixed bug where 2 un-selected issues would stay on
 selected tab

---
 app/assets/javascripts/boards/stores/modal_store.js.es6 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 391765c4978..e2234290657 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -65,8 +65,9 @@
 
     removeSelectedIssue(issue, forcePurge = false) {
       if (this.store.activeTab === 'all' || forcePurge) {
-        const index = this.selectedIssueIndex(issue);
-        this.store.selectedIssues.splice(index, 1);
+        this.store.selectedIssues = this.store.selectedIssues.filter((fIssue) => {
+          return fIssue.id !== issue.id;
+        });
       }
     }
 

From 39fbd18951e7c6bd4b403cd82dd4e008fd00d6fe Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 10:39:44 +0000
Subject: [PATCH 41/53] Fixed bug with empty state showing after search Fixed
 users href path being incorrect

---
 app/assets/javascripts/boards/boards_bundle.js.es6    |  1 +
 app/assets/javascripts/boards/components/board.js.es6 |  3 ++-
 .../javascripts/boards/components/board_card.js.es6   |  3 ++-
 .../javascripts/boards/components/board_list.js.es6   |  1 +
 .../boards/components/board_sidebar.js.es6            |  2 +-
 .../boards/components/issue_card_inner.js.es6         |  9 +++++----
 .../boards/components/modal/empty_state.js.es6        |  6 +++---
 .../javascripts/boards/components/modal/footer.js.es6 |  3 +--
 .../javascripts/boards/components/modal/header.js.es6 |  4 ++--
 .../javascripts/boards/components/modal/index.js.es6  | 10 ++++++++--
 .../javascripts/boards/components/modal/list.js.es6   | 11 +++++++----
 .../javascripts/boards/components/modal/tabs.js.es6   |  2 +-
 .../javascripts/boards/services/board_service.js.es6  |  2 +-
 .../javascripts/boards/stores/boards_store.js.es6     |  5 +----
 .../javascripts/boards/stores/modal_store.js.es6      |  3 ++-
 app/helpers/boards_helper.rb                          |  3 ++-
 app/views/projects/boards/_show.html.haml             |  4 +++-
 app/views/projects/boards/components/_board.html.haml |  1 +
 .../projects/boards/components/_board_list.html.haml  |  1 +
 app/views/projects/boards/components/_card.html.haml  |  3 ++-
 spec/features/boards/add_issues_modal_spec.rb         |  1 +
 21 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 18b67abfccc..1cce580df79 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -44,6 +44,7 @@ $(() => {
       boardId: $boardApp.dataset.boardId,
       disabled: $boardApp.dataset.disabled === 'true',
       issueLinkBase: $boardApp.dataset.issueLinkBase,
+      rootPath: $boardApp.dataset.rootPath,
       detailIssue: Store.detail
     },
     computed: {
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index a32881116d5..d6148ae748a 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -22,7 +22,8 @@
     props: {
       list: Object,
       disabled: Boolean,
-      issueLinkBase: String
+      issueLinkBase: String,
+      rootPath: String,
     },
     data () {
       return {
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 037100c0859..032b93da021 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -18,7 +18,8 @@
       issue: Object,
       issueLinkBase: String,
       disabled: Boolean,
-      index: Number
+      index: Number,
+      rootPath: String,
     },
     data () {
       return {
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 630fe084175..6906a910a2f 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -23,6 +23,7 @@
       issues: Array,
       loading: Boolean,
       issueLinkBase: String,
+      rootPath: String,
     },
     data () {
       return {
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index e5937c178f2..126ccdb4978 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -65,7 +65,7 @@
       gl.Subscription.bindAll('.subscription');
     },
     components: {
-      'remove-btn': gl.issueBoards.RemoveIssueBtn,
+      removeBtn: gl.issueBoards.RemoveIssueBtn,
     },
   });
 })();
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js.es6 b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
index 61fcfde0a02..73db6480269 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js.es6
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
@@ -7,7 +7,7 @@
 
   gl.issueBoards.IssueCardInner = Vue.extend({
     props: [
-      'issue', 'issueLinkBase', 'list',
+      'issue', 'issueLinkBase', 'list', 'rootPath',
     ],
     methods: {
       showLabel(label) {
@@ -57,11 +57,11 @@
           <span
             class="card-number"
             v-if="issue.id">
-            #{{issue.id}}
+            #{{ issue.id }}
           </span>
           <a
             class="card-assignee has-tooltip"
-            :href="issue.assignee.username"
+            :href="rootPath + issue.assignee.username"
             :title="'Assigned to ' + issue.assignee.name"
             v-if="issue.assignee"
             data-container="body">
@@ -69,7 +69,8 @@
               class="avatar avatar-inline s20"
               :src="issue.assignee.avatar"
               width="20"
-              height="20" />
+              height="20"
+              :alt="'Avatar for ' + issue.assignee.name" />
           </a>
           <button
             class="label color-label has-tooltip"
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index 70f2ea51620..c5137d966e2 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -31,10 +31,10 @@
       },
     },
     template: `
-      <div class="empty-state">
+      <section class="empty-state">
         <div class="row">
           <div class="col-xs-12 col-sm-6 col-sm-push-6">
-            <div class="svg-content" v-html="image"></div>
+            <aside class="svg-content" v-html="image"></aside>
           </div>
           <div class="col-xs-12 col-sm-6 col-sm-pull-6">
             <div class="text-content">
@@ -56,7 +56,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </section>
     `,
   });
 })();
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 566303431f6..2ed81abe625 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -27,8 +27,7 @@
       addIssues() {
         const list = this.selectedList;
         const selectedIssues = ModalStore.getSelectedIssues();
-        const issueIds = selectedIssues.filter(issue => issue.selected)
-          .map(issue => issue.globalId);
+        const issueIds = selectedIssues.map(issue => issue.globalId);
 
         // Post the data to the backend
         this.$http.post(this.bulkUpdatePath, {
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index f6d891a1633..8024e89a29b 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -41,10 +41,10 @@
             </button>
           </h2>
         </header>
-        <modal-tabs v-if="!loading && issues.length > 0"></modal-tabs>
+        <modal-tabs v-if="!loading && issuesCount > 0"></modal-tabs>
         <div
           class="add-issues-search append-bottom-10"
-          v-if="activeTab == 'all' && !loading && issues.length > 0">
+          v-if="activeTab == 'all' && !loading && issuesCount > 0">
           <input
             placeholder="Search issues..."
             class="form-control"
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index dd40075ac47..4536f5cfe6f 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -10,6 +10,7 @@
   gl.issueBoards.IssuesModal = Vue.extend({
     props: [
       'blankStateImage', 'newIssuePath', 'bulkUpdatePath', 'issueLinkBase',
+      'rootPath',
     ],
     data() {
       return ModalStore.store;
@@ -57,6 +58,10 @@
           });
 
           this.loadingNewPage = false;
+
+          if (!this.issuesCount) {
+            this.issuesCount = this.issues.length;
+          }
         });
       },
     },
@@ -66,7 +71,7 @@
           return this.selectedIssues.length > 0;
         }
 
-        return this.issues.length > 0;
+        return this.issuesCount > 0;
       },
     },
     components: {
@@ -83,9 +88,10 @@
           <modal-header></modal-header>
           <modal-list
             :issue-link-base="issueLinkBase"
+            :root-path="rootPath"
             v-if="!loading && showList"></modal-list>
           <empty-state
-            v-if="(!loading && issues.length === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
+            v-if="(!loading && issuesCount === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
             :image="blankStateImage"
             :new-issue-path="newIssuePath"></empty-state>
           <section
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 309696c7078..8db1ab4df5e 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -7,7 +7,7 @@
 
   gl.issueBoards.ModalList = Vue.extend({
     props: [
-      'issueLinkBase',
+      'issueLinkBase', 'rootPath',
     ],
     data() {
       return ModalStore.store;
@@ -97,7 +97,7 @@
       issueCardInner: gl.issueBoards.IssueCardInner,
     },
     template: `
-      <div
+      <section
         class="add-issues-list add-issues-list-columns"
         ref="list">
         <div
@@ -110,16 +110,19 @@
             @click="toggleIssue($event, issue)">
             <issue-card-inner
               :issue="issue"
-              :issue-link-base="issueLinkBase">
+              :issue-link-base="issueLinkBase"
+              :root-path="rootPath">
             </issue-card-inner>
             <span
+              :aria-label="'Issue #' + issue.id + ' selected'"
+              aria-checked="true"
               v-if="issue.selected"
               class="issue-card-selected text-center">
               <i class="fa fa-check"></i>
             </span>
           </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 94ff8ec999a..007e01f7d82 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -24,7 +24,7 @@
               @click.prevent="activeTab = 'all'">
               <span>All issues</span>
               <span class="badge">
-                {{ issues.length }}
+                {{ issuesCount }}
               </span>
             </a>
           </li>
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index 993f8599fd4..ad58abdcb45 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -13,7 +13,7 @@ class BoardService {
       generate: {
         method: 'POST',
         url: `${root}/${boardId}/lists/generate.json`
-      },
+      }
     });
     this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
     this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 66ecae1c01d..50842ecbaaa 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -115,9 +115,6 @@
     },
     updateFiltersUrl () {
       history.pushState(null, null, `?${$.param(this.state.filters)}`);
-    },
-    modalSelectedCount() {
-      return this.modal.selectedIssues.length;
-    },
+    }
   };
 })();
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index e2234290657..66305347b8c 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -6,6 +6,7 @@
     constructor() {
       this.store = {
         issues: [],
+        issuesCount: false,
         selectedIssues: [],
         showAddIssuesModal: false,
         activeTab: 'all',
@@ -19,7 +20,7 @@
     }
 
     selectedCount() {
-      return this.store.selectedIssues.filter(issue => issue.selected).length;
+      return this.getSelectedIssues().length;
     }
 
     toggleIssue(issueObj) {
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index 38c586ccd31..0b1b79ce15b 100644
--- a/app/helpers/boards_helper.rb
+++ b/app/helpers/boards_helper.rb
@@ -6,7 +6,8 @@ module BoardsHelper
       endpoint: namespace_project_boards_path(@project.namespace, @project),
       board_id: board.id,
       disabled: "#{!can?(current_user, :admin_list, @project)}",
-      issue_link_base: namespace_project_issues_path(@project.namespace, @project)
+      issue_link_base: namespace_project_issues_path(@project.namespace, @project),
+      root_path: root_path,
     }
   end
 end
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index a0f9dfc5b5b..a35f0ab557d 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -24,9 +24,11 @@
       ":list" => "list",
       ":disabled" => "disabled",
       ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
       ":key" => "_uid" }
   = render "projects/boards/components/sidebar"
   %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
     "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project),
     "bulk-update-path" => bulk_update_namespace_project_issues_path(@project.namespace, @project),
-    ":issue-link-base" => "issueLinkBase" }
+    ":issue-link-base" => "issueLinkBase",
+    ":root-path" => "rootPath" }
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index a2e5118a9f3..72bce4049de 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -29,6 +29,7 @@
       ":loading" => "list.loading",
       ":disabled" => "disabled",
       ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
       "ref" => "board-list" }
     - if can?(current_user, :admin_list, @project)
       = render "projects/boards/components/blank_state"
diff --git a/app/views/projects/boards/components/_board_list.html.haml b/app/views/projects/boards/components/_board_list.html.haml
index 34fdb1f6a74..f413a5e94c1 100644
--- a/app/views/projects/boards/components/_board_list.html.haml
+++ b/app/views/projects/boards/components/_board_list.html.haml
@@ -34,6 +34,7 @@
       ":list" => "list",
       ":issue" => "issue",
       ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
       ":disabled" => "disabled",
       ":key" => "issue.id" }
     %li.board-list-count.text-center{ "v-if" => "showCount" }
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index 51e5d739537..891c2c46251 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -6,4 +6,5 @@
   "@mouseup" => "showIssue($event)" }
   %issue-card-inner{ ":list" => "list",
     ":issue" => "issue",
-    ":issue-link-base" => "issueLinkBase" }
+    ":issue-link-base" => "issueLinkBase",
+    ":root-path" => "rootPath" }
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index 5ba044a4f3c..ae245d7469b 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -90,6 +90,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
           find('.form-control').native.send_keys('testing search')
 
           expect(page).not_to have_selector('.card')
+          expect(page).not_to have_content("You haven't added any issues to your project yet")
         end
       end
     end

From 1b840452b9ae5749cdc95ca391d029fbb40842c6 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 10:58:28 +0000
Subject: [PATCH 42/53] Added webkit CSS properties

---
 app/assets/stylesheets/pages/boards.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index e7321b19e15..ded15dc493e 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -356,6 +356,7 @@
 }
 
 .add-issues-modal {
+  display: -webkit-flex;
   display: flex;
   position: fixed;
   top: 0;
@@ -367,7 +368,9 @@
 }
 
 .add-issues-container {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column;
   width: 90vw;
   height: 85vh;
@@ -380,7 +383,9 @@
   box-shadow: 0 2px 12px rgba($black, .5);
 
   .empty-state {
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex: 1;
     flex: 1;
     margin-top: 0;
 
@@ -409,11 +414,14 @@
 }
 
 .add-issues-search {
+  display: -webkit-flex;
   display: flex;
 }
 
 .add-issues-list {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex: 1;
   flex: 1;
   padding-top: 3px;
   margin-left: -$gl-vert-padding;
@@ -441,6 +449,7 @@
 }
 
 .add-issues-list-loading {
+  -webkit-align-self: center;
   align-self: center;
   width: 100%;
   padding-left: $gl-vert-padding;

From a51aa6ab42a52b3c1d246b72ab3933ac3134cf4b Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 11:54:04 +0000
Subject: [PATCH 43/53] Fixed issue card spec

---
 spec/javascripts/boards/issue_card_spec.js.es6 | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/spec/javascripts/boards/issue_card_spec.js.es6 b/spec/javascripts/boards/issue_card_spec.js.es6
index d68108c6f6f..1d6940ca3a1 100644
--- a/spec/javascripts/boards/issue_card_spec.js.es6
+++ b/spec/javascripts/boards/issue_card_spec.js.es6
@@ -50,6 +50,7 @@ describe('Issue card component', () => {
           list,
           issue,
           issueLinkBase: '/test',
+          rootPath: '/',
         };
       },
       components: {
@@ -59,7 +60,8 @@ describe('Issue card component', () => {
         <issue-card
           :issue="issue"
           :list="list"
-          :issue-link-base="issueLinkBase"></issue-card>
+          :issue-link-base="issueLinkBase"
+          :root-path="rootPath"></issue-card>
       `,
     });
   });
@@ -136,7 +138,7 @@ describe('Issue card component', () => {
       it('sets users path', () => {
         expect(
           component.$el.querySelector('.card-assignee').getAttribute('href'),
-        ).toBe('test');
+        ).toBe('/test');
       });
 
       it('renders avatar', () => {

From 32a97ef19c9adf30bd67bb310551dff883231dbc Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 13:35:11 +0000
Subject: [PATCH 44/53] Fixed JS lint errors

---
 app/assets/javascripts/boards/stores/modal_store.js.es6 | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 66305347b8c..9c498ba48c4 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -66,9 +66,8 @@
 
     removeSelectedIssue(issue, forcePurge = false) {
       if (this.store.activeTab === 'all' || forcePurge) {
-        this.store.selectedIssues = this.store.selectedIssues.filter((fIssue) => {
-          return fIssue.id !== issue.id;
-        });
+        this.store.selectedIssues = this.store.selectedIssues
+          .filter(fIssue => fIssue.id !== issue.id);
       }
     }
 

From 103c78f18c0642c36a6093508707b82eb8d1dd77 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 14:35:53 +0000
Subject: [PATCH 45/53] Removes labels instead of closing issue when clicking
 remove button

---
 .../javascripts/boards/boards_bundle.js.es6   |  3 ++-
 .../components/modal/empty_state.js.es6       |  2 +-
 .../boards/components/modal/footer.js.es6     | 10 ++--------
 .../boards/components/modal/header.js.es6     |  2 +-
 .../boards/components/modal/index.js.es6      |  5 +++--
 .../components/sidebar/remove_issue.js.es6    | 13 +++++++++++--
 .../boards/services/board_service.js.es6      | 19 +++++++++++++++++--
 app/helpers/boards_helper.rb                  |  1 +
 app/views/projects/boards/_show.html.haml     |  1 -
 9 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 1cce580df79..81df823cad1 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -45,6 +45,7 @@ $(() => {
       disabled: $boardApp.dataset.disabled === 'true',
       issueLinkBase: $boardApp.dataset.issueLinkBase,
       rootPath: $boardApp.dataset.rootPath,
+      bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
       detailIssue: Store.detail
     },
     computed: {
@@ -53,7 +54,7 @@ $(() => {
       },
     },
     created () {
-      gl.boardService = new BoardService(this.endpoint, this.boardId);
+      gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
     },
     mounted () {
       Store.disabled = this.disabled;
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index c5137d966e2..93d250e07f5 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -44,7 +44,7 @@
                 :href="newIssuePath"
                 class="btn btn-success btn-inverted"
                 v-if="activeTab === 'all'">
-                Create issue
+                New issue
               </a>
               <button
                 type="button"
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 2ed81abe625..4c0f21fa1d6 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -4,9 +4,6 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalFooter = Vue.extend({
-    props: [
-      'bulkUpdatePath',
-    ],
     data() {
       return ModalStore.store;
     },
@@ -30,11 +27,8 @@
         const issueIds = selectedIssues.map(issue => issue.globalId);
 
         // Post the data to the backend
-        this.$http.post(this.bulkUpdatePath, {
-          update: {
-            issuable_ids: issueIds.join(','),
-            add_label_ids: [list.label.id],
-          },
+        gl.boardService.bulkUpdate(issueIds, {
+          add_label_ids: [list.label.id],
         });
 
         // Add the issues on the frontend
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 8024e89a29b..4a1845e4580 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -13,7 +13,7 @@
           return 'Select all';
         }
 
-        return 'Un-select all';
+        return 'Deselect all';
       },
     },
     methods: {
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 4536f5cfe6f..612657753d5 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -9,7 +9,7 @@
 
   gl.issueBoards.IssuesModal = Vue.extend({
     props: [
-      'blankStateImage', 'newIssuePath', 'bulkUpdatePath', 'issueLinkBase',
+      'blankStateImage', 'newIssuePath', 'issueLinkBase',
       'rootPath',
     ],
     data() {
@@ -33,6 +33,7 @@
         } else if (!this.showAddIssuesModal) {
           this.issues = [];
           this.selectedIssues = [];
+          this.issuesCount = false;
         }
       },
     },
@@ -101,7 +102,7 @@
               <i class="fa fa-spinner fa-spin"></i>
             </div>
           </section>
-          <modal-footer :bulk-update-path="bulkUpdatePath"></modal-footer>
+          <modal-footer></modal-footer>
         </div>
       </div>
     `,
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6 b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
index 3f965b7b9b2..70f7da17d49 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
@@ -11,9 +11,18 @@
     ],
     methods: {
       removeIssue() {
-        const doneList = Store.findList('type', 'done', false);
+        const lists = this.issue.getLists();
+        const labelIds = lists.map(list => list.label.id);
 
-        Store.moveIssueToList(this.list, doneList, this.issue, 0);
+        // Post the remove data
+        gl.boardService.bulkUpdate([this.issue.globalId], {
+          remove_label_ids: labelIds,
+        });
+
+        // Remove from the frontend store
+        lists.forEach((list) => {
+          list.removeIssue(this.issue);
+        });
 
         Store.detail.issue = {};
       },
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index ad58abdcb45..065e90518df 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -2,7 +2,7 @@
 /* global Vue */
 
 class BoardService {
-  constructor (root, boardId) {
+  constructor (root, bulkUpdatePath, boardId) {
     this.boards = Vue.resource(`${root}{/id}.json`, {}, {
       issues: {
         method: 'GET',
@@ -16,7 +16,12 @@ class BoardService {
       }
     });
     this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
-    this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
+    this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {}, {
+      bulkUpdate: {
+        method: 'POST',
+        url: bulkUpdatePath,
+      },
+    });
 
     Vue.http.interceptors.push((request, next) => {
       request.headers['X-CSRF-Token'] = $.rails.csrfToken();
@@ -75,6 +80,16 @@ class BoardService {
   getBacklog(data) {
     return this.boards.issues(data);
   }
+
+  bulkUpdate(issueIds, extraData = {}) {
+    const data = {
+      update: Object.assign(extraData, {
+        issuable_ids: issueIds.join(','),
+      }),
+    };
+
+    return this.issues.bulkUpdate(data);
+  }
 }
 
 window.BoardService = BoardService;
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index 0b1b79ce15b..f43827da446 100644
--- a/app/helpers/boards_helper.rb
+++ b/app/helpers/boards_helper.rb
@@ -8,6 +8,7 @@ module BoardsHelper
       disabled: "#{!can?(current_user, :admin_list, @project)}",
       issue_link_base: namespace_project_issues_path(@project.namespace, @project),
       root_path: root_path,
+      bulk_update_path: bulk_update_namespace_project_issues_path(@project.namespace, @project),
     }
   end
 end
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index a35f0ab557d..13bc20f2ae2 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -29,6 +29,5 @@
   = render "projects/boards/components/sidebar"
   %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
     "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project),
-    "bulk-update-path" => bulk_update_namespace_project_issues_path(@project.namespace, @project),
     ":issue-link-base" => "issueLinkBase",
     ":root-path" => "rootPath" }

From 00b835bad9d68dbc16367bd66afcbf99ca248203 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 14:57:33 +0000
Subject: [PATCH 46/53] Props use objects with required & type values

---
 .../boards/components/issue_card_inner.js.es6 | 21 +++++++++++--
 .../components/modal/empty_state.js.es6       | 13 ++++++--
 .../boards/components/modal/footer.js.es6     |  2 +-
 .../boards/components/modal/header.js.es6     |  2 +-
 .../boards/components/modal/index.js.es6      | 30 ++++++++++++++-----
 .../boards/components/modal/list.js.es6       | 15 +++++++---
 .../components/sidebar/remove_issue.js.es6    | 13 ++++++--
 7 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js.es6 b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
index 73db6480269..10b82ba0998 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js.es6
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
@@ -6,9 +6,24 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssueCardInner = Vue.extend({
-    props: [
-      'issue', 'issueLinkBase', 'list', 'rootPath',
-    ],
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: false,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     methods: {
       showLabel(label) {
         if (!this.list) return true;
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index 93d250e07f5..7bd7c27b579 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -6,9 +6,16 @@
     data() {
       return ModalStore.store;
     },
-    props: [
-      'image', 'newIssuePath',
-    ],
+    props: {
+      image: {
+        type: String,
+        required: true,
+      },
+      newIssuePath: {
+        type: String,
+        required: true,
+      },
+    },
     computed: {
       contents() {
         const obj = {
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 4c0f21fa1d6..059e2416b05 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -41,7 +41,7 @@
       },
     },
     components: {
-      listsDropdown: gl.issueBoards.ModalFooterListsDropdown,
+      'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
     },
     template: `
       <footer
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 4a1845e4580..63268fcdb3d 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -24,7 +24,7 @@
       },
     },
     components: {
-      modalTabs: gl.issueBoards.ModalTabs,
+      'modal-tabs': gl.issueBoards.ModalTabs,
     },
     template: `
       <div>
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 612657753d5..43d2fa03d92 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -8,10 +8,24 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.IssuesModal = Vue.extend({
-    props: [
-      'blankStateImage', 'newIssuePath', 'issueLinkBase',
-      'rootPath',
-    ],
+    props: {
+      blankStateImage: {
+        type: String,
+        required: true,
+      },
+      newIssuePath: {
+        type: String,
+        required: true,
+      },
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     data() {
       return ModalStore.store;
     },
@@ -76,10 +90,10 @@
       },
     },
     components: {
-      modalHeader: gl.issueBoards.IssuesModalHeader,
-      modalList: gl.issueBoards.ModalList,
-      modalFooter: gl.issueBoards.ModalFooter,
-      emptyState: gl.issueBoards.ModalEmptyState,
+      'modal-header': gl.issueBoards.IssuesModalHeader,
+      'modal-list': gl.issueBoards.ModalList,
+      'modal-footer': gl.issueBoards.ModalFooter,
+      'empty-state': gl.issueBoards.ModalEmptyState,
     },
     template: `
       <div
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 8db1ab4df5e..ae3e405e70e 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -6,9 +6,16 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalList = Vue.extend({
-    props: [
-      'issueLinkBase', 'rootPath',
-    ],
+    props: {
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     data() {
       return ModalStore.store;
     },
@@ -94,7 +101,7 @@
       this.destroyMasonry();
     },
     components: {
-      issueCardInner: gl.issueBoards.IssueCardInner,
+      'issue-card-inner': gl.issueBoards.IssueCardInner,
     },
     template: `
       <section
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6 b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
index 70f7da17d49..124baaae42a 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
@@ -6,9 +6,16 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.RemoveIssueBtn = Vue.extend({
-    props: [
-      'issue', 'list',
-    ],
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: true,
+      },
+    },
     methods: {
       removeIssue() {
         const lists = this.issue.getLists();

From cf5396d4b7158a97a49b3a75c6ebc8938954bd2b Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 16:35:04 +0000
Subject: [PATCH 47/53] Fixed up specs

---
 spec/features/boards/add_issues_modal_spec.rb  |  4 ++--
 spec/features/boards/sidebar_spec.rb           | 18 ------------------
 .../boards/boards_store_spec.js.es6            |  2 +-
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index ae245d7469b..b953480cec2 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -142,13 +142,13 @@ describe 'Issue Boards add issue modal', :feature, :js do
         end
       end
 
-      it 'un-selects all issues' do
+      it 'deselects all issues' do
         page.within('.add-issues-modal') do
           click_button 'Select all'
 
           expect(page).to have_selector('.is-active', count: 2)
 
-          click_button 'Un-select all'
+          click_button 'Deselect all'
 
           expect(page).not_to have_selector('.is-active')
         end
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index ea135d0cc95..9cc50167395 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -84,24 +84,6 @@ describe 'Issue Boards', feature: true, js: true do
     end
   end
 
-  it 'does not show remove issue button when issue is closed' do
-    page.within(first('.board')) do
-      first('.card').click
-    end
-
-    page.within('.issue-boards-sidebar') do
-      click_button 'Remove from board'
-    end
-
-    page.within(find('.board:nth-child(2)')) do
-      first('.card').click
-    end
-
-    page.within('.issue-boards-sidebar') do
-      expect(page).not_to have_button 'Remove from board'
-    end
-  end
-
   context 'assignee' do
     it 'updates the issues assignee' do
       page.within(first('.board')) do
diff --git a/spec/javascripts/boards/boards_store_spec.js.es6 b/spec/javascripts/boards/boards_store_spec.js.es6
index a0d434e3588..0c9c889a444 100644
--- a/spec/javascripts/boards/boards_store_spec.js.es6
+++ b/spec/javascripts/boards/boards_store_spec.js.es6
@@ -23,7 +23,7 @@
 describe('Store', () => {
   beforeEach(() => {
     Vue.http.interceptors.push(boardsMockInterceptor);
-    gl.boardService = new BoardService('/test/issue-boards/board', '1');
+    gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
     gl.issueBoards.BoardsStore.create();
 
     Cookies.set('issue_board_welcome_hidden', 'false', {

From b4113dba0378936024c496b15b3c8a5f1c0a1021 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 31 Jan 2017 16:46:57 +0000
Subject: [PATCH 48/53] Uses mixins for repeated functions

---
 app/assets/javascripts/boards/boards_bundle.js.es6 |  3 ++-
 .../boards/components/modal/empty_state.js.es6     |  3 ++-
 .../boards/components/modal/footer.js.es6          |  8 +++-----
 .../boards/components/modal/header.js.es6          |  3 ++-
 .../boards/components/modal/tabs.js.es6            |  5 +++--
 .../javascripts/boards/mixins/modal_mixins.js.es6  | 14 ++++++++++++++
 6 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 app/assets/javascripts/boards/mixins/modal_mixins.js.es6

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 81df823cad1..afe4c9f9175 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -91,6 +91,7 @@ $(() => {
   });
 
   gl.IssueBoardsModalAddBtn = new Vue({
+    mixins: [gl.issueBoards.ModalMixins],
     el: '#js-add-issues-btn',
     data: {
       modal: ModalStore.store,
@@ -106,7 +107,7 @@ $(() => {
         class="btn btn-create pull-right prepend-left-10 has-tooltip"
         type="button"
         :disabled="disabled"
-        @click="modal.showAddIssuesModal = true">
+        @click="toggleModal(true)">
         Add issues
       </button>
     `,
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
index 7bd7c27b579..9538f5b69e9 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js.es6
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -3,6 +3,7 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalEmptyState = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
     },
@@ -56,7 +57,7 @@
               <button
                 type="button"
                 class="btn btn-default"
-                @click="activeTab = 'all'"
+                @click="changeTab('all')"
                 v-if="activeTab === 'selected'">
                 All issues
               </button>
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 059e2416b05..8883beb1290 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -4,6 +4,7 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalFooter = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
     },
@@ -18,9 +19,6 @@
       },
     },
     methods: {
-      hideModal() {
-        this.showAddIssuesModal = false;
-      },
       addIssues() {
         const list = this.selectedList;
         const selectedIssues = ModalStore.getSelectedIssues();
@@ -37,7 +35,7 @@
           list.issuesSize += 1;
         });
 
-        this.hideModal();
+        this.toggleModal(false);
       },
     },
     components: {
@@ -62,7 +60,7 @@
         <button
           class="btn btn-default pull-right"
           type="button"
-          @click="hideModal">
+          @click="toggleModal(false)">
           Cancel
         </button>
       </footer>
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 63268fcdb3d..194d598d42e 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -4,6 +4,7 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.IssuesModalHeader = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
     },
@@ -36,7 +37,7 @@
               class="close"
               data-dismiss="modal"
               aria-label="Close"
-              @click="showAddIssuesModal = false">
+              @click="toggleModal(false)">
               <span aria-hidden="true">×</span>
             </button>
           </h2>
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index 007e01f7d82..d556c6d3e04 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -3,6 +3,7 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalTabs = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
     },
@@ -21,7 +22,7 @@
             <a
               href="#"
               role="button"
-              @click.prevent="activeTab = 'all'">
+              @click.prevent="changeTab('all')">
               <span>All issues</span>
               <span class="badge">
                 {{ issuesCount }}
@@ -32,7 +33,7 @@
             <a
               href="#"
               role="button"
-              @click.prevent="activeTab = 'selected'">
+              @click.prevent="changeTab('selected')">
               <span>Selected issues</span>
               <span class="badge">
                 {{ selectedCount }}
diff --git a/app/assets/javascripts/boards/mixins/modal_mixins.js.es6 b/app/assets/javascripts/boards/mixins/modal_mixins.js.es6
new file mode 100644
index 00000000000..d378b7d4baf
--- /dev/null
+++ b/app/assets/javascripts/boards/mixins/modal_mixins.js.es6
@@ -0,0 +1,14 @@
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalMixins = {
+    methods: {
+      toggleModal(toggle) {
+        ModalStore.store.showAddIssuesModal = toggle;
+      },
+      changeTab(tab) {
+        ModalStore.store.activeTab = tab;
+      },
+    },
+  };
+})();

From 4428bb27b78bf8f75d8ff15c227a8dfbb82aaa8e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 1 Feb 2017 15:23:01 +0000
Subject: [PATCH 49/53] Removed Masonry, instead uses groups of data

Added some error handling which reverts the frontend data changes &
notifies the user
---
 .../javascripts/boards/boards_bundle.js.es6   |    1 -
 .../boards/components/issue_card_inner.js.es6 |   10 +-
 .../boards/components/modal/footer.js.es6     |   11 +-
 .../boards/components/modal/header.js.es6     |    7 +-
 .../boards/components/modal/index.js.es6      |   24 +-
 .../boards/components/modal/list.js.es6       |  117 +-
 .../components/modal/lists_dropdown.js.es6    |    2 +-
 .../boards/components/modal/tabs.js.es6       |    4 +-
 .../components/sidebar/remove_issue.js.es6    |   15 +-
 .../boards/stores/modal_store.js.es6          |    7 +-
 .../javascripts/lib/utils/text_utility.js     |    3 +
 app/assets/stylesheets/pages/boards.scss      |   23 +-
 spec/javascripts/boards/issue_spec.js.es6     |    2 +-
 spec/javascripts/boards/list_spec.js.es6      |    2 +-
 .../lib/utils/text_utility_spec.js.es6        |   14 +
 vendor/assets/javascripts/masonry.js          | 2463 -----------------
 16 files changed, 154 insertions(+), 2551 deletions(-)
 delete mode 100644 vendor/assets/javascripts/masonry.js

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index afe4c9f9175..4ac91786762 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -5,7 +5,6 @@
 //= 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/issue_card_inner.js.es6 b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
index 10b82ba0998..22a8b971ff8 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js.es6
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js.es6
@@ -33,7 +33,7 @@
       filterByLabel(label, e) {
         let labelToggleText = label.title;
         const labelIndex = Store.state.filters.label_name.indexOf(label.title);
-        $(e.target).tooltip('hide');
+        $(e.currentTarget).tooltip('hide');
 
         if (labelIndex === -1) {
           Store.state.filters.label_name.push(label.title);
@@ -55,6 +55,12 @@
 
         Store.updateFiltersUrl();
       },
+      labelStyle(label) {
+        return {
+          backgroundColor: label.color,
+          color: label.textColor,
+        };
+      },
     },
     template: `
       <div>
@@ -93,7 +99,7 @@
             type="button"
             v-if="showLabel(label)"
             @click="filterByLabel(label, $event)"
-            :style="{ backgroundColor: label.color, color: label.textColor }"
+            :style="labelStyle(label)"
             :title="label.description"
             data-container="body">
             {{ label.title }}
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 8883beb1290..4085a22b25a 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -1,5 +1,7 @@
+/* eslint-disable no-new */
 //= require ./lists_dropdown
 /* global Vue */
+/* global Flash */
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -15,7 +17,7 @@
       submitText() {
         const count = ModalStore.selectedCount();
 
-        return `Add ${count > 0 ? count : ''} issue${count > 1 || !count ? 's' : ''}`;
+        return `Add ${count > 0 ? count : ''} ${gl.text.pluralize('issue', count)}`;
       },
     },
     methods: {
@@ -27,6 +29,13 @@
         // Post the data to the backend
         gl.boardService.bulkUpdate(issueIds, {
           add_label_ids: [list.label.id],
+        }).catch(() => {
+          new Flash('Failed to update issues, please try again.', 'alert');
+
+          selectedIssues.forEach((issue) => {
+            list.removeIssue(issue);
+            list.issuesSize -= 1;
+          });
         });
 
         // Add the issues on the frontend
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 194d598d42e..dbbcd73f1fe 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -3,7 +3,7 @@
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
-  gl.issueBoards.IssuesModalHeader = Vue.extend({
+  gl.issueBoards.ModalHeader = Vue.extend({
     mixins: [gl.issueBoards.ModalMixins],
     data() {
       return ModalStore.store;
@@ -16,6 +16,9 @@
 
         return 'Deselect all';
       },
+      showSearch() {
+        return this.activeTab === 'all' && !this.loading && this.issuesCount > 0;
+      },
     },
     methods: {
       toggleAll() {
@@ -45,7 +48,7 @@
         <modal-tabs v-if="!loading && issuesCount > 0"></modal-tabs>
         <div
           class="add-issues-search append-bottom-10"
-          v-if="activeTab == 'all' && !loading && issuesCount > 0">
+          v-if="showSearch">
           <input
             placeholder="Search issues..."
             class="form-control"
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 43d2fa03d92..666f4e16793 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -53,10 +53,9 @@
     },
     methods: {
       searchOperation: _.debounce(function searchOperationDebounce() {
-        this.issues = [];
-        this.loadIssues();
+        this.loadIssues(true);
       }, 500),
-      loadIssues() {
+      loadIssues(clearIssues = false) {
         return gl.boardService.getBacklog({
           search: this.searchTerm,
           page: this.page,
@@ -64,10 +63,14 @@
         }).then((res) => {
           const data = res.json();
 
+          if (clearIssues) {
+            this.issues = [];
+          }
+
           data.issues.forEach((issueObj) => {
             const issue = new ListIssue(issueObj);
             const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
-            issue.selected = foundSelectedIssue !== undefined;
+            issue.selected = !!foundSelectedIssue;
 
             this.issues.push(issue);
           });
@@ -75,7 +78,7 @@
           this.loadingNewPage = false;
 
           if (!this.issuesCount) {
-            this.issuesCount = this.issues.length;
+            this.issuesCount = data.size;
           }
         });
       },
@@ -88,9 +91,16 @@
 
         return this.issuesCount > 0;
       },
+      showEmptyState() {
+        if (!this.loading && this.issuesCount === 0) {
+          return true;
+        }
+
+        return this.activeTab === 'selected' && this.selectedIssues.length === 0;
+      },
     },
     components: {
-      'modal-header': gl.issueBoards.IssuesModalHeader,
+      'modal-header': gl.issueBoards.ModalHeader,
       'modal-list': gl.issueBoards.ModalList,
       'modal-footer': gl.issueBoards.ModalFooter,
       'empty-state': gl.issueBoards.ModalEmptyState,
@@ -106,7 +116,7 @@
             :root-path="rootPath"
             v-if="!loading && showList"></modal-list>
           <empty-state
-            v-if="(!loading && issuesCount === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
+            v-if="showEmptyState"
             :image="blankStateImage"
             :new-issue-path="newIssuePath"></empty-state>
           <section
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index ae3e405e70e..d0901219216 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -1,8 +1,7 @@
 /* global Vue */
 /* global ListIssue */
-/* global Masonry */
+/* global bp */
 (() => {
-  let listMasonry;
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalList = Vue.extend({
@@ -21,18 +20,10 @@
     },
     watch: {
       activeTab() {
-        this.initMasonry();
-
         if (this.activeTab === 'all') {
           ModalStore.purgeUnselectedIssues();
         }
       },
-      issues: {
-        handler() {
-          this.initMasonry();
-        },
-        deep: true,
-      },
     },
     computed: {
       loopIssues() {
@@ -42,8 +33,31 @@
 
         return this.selectedIssues;
       },
+      groupedIssues() {
+        const groups = [];
+        this.loopIssues.forEach((issue, i) => {
+          const index = i % this.columns;
+
+          if (!groups[index]) {
+            groups.push([]);
+          }
+
+          groups[index].push(issue);
+        });
+
+        return groups;
+      },
     },
     methods: {
+      scrollHandler() {
+        const currentPage = Math.floor(this.issues.length / this.perPage);
+
+        if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage
+          && currentPage === this.page) {
+          this.loadingNewPage = true;
+          this.page += 1;
+        }
+      },
       toggleIssue(e, issue) {
         if (e.target.tagName !== 'A') {
           ModalStore.toggleIssue(issue);
@@ -65,40 +79,29 @@
 
         return index !== -1;
       },
-      initMasonry() {
-        const listScrollTop = this.$refs.list.scrollTop;
+      setColumnCount() {
+        const breakpoint = bp.getBreakpointSize();
 
-        this.$nextTick(() => {
-          this.destroyMasonry();
-          listMasonry = new Masonry(this.$refs.list, {
-            transitionDuration: 0,
-          });
-
-          this.$refs.list.scrollTop = listScrollTop;
-        });
-      },
-      destroyMasonry() {
-        if (listMasonry) {
-          listMasonry.destroy();
-          listMasonry = undefined;
+        if (breakpoint === 'lg' || breakpoint === 'md') {
+          this.columns = 3;
+        } else if (breakpoint === 'sm') {
+          this.columns = 2;
+        } else {
+          this.columns = 1;
         }
       },
     },
     mounted() {
-      this.initMasonry();
+      this.scrollHandlerWrapper = this.scrollHandler.bind(this);
+      this.setColumnCountWrapper = this.setColumnCount.bind(this);
+      this.setColumnCount();
 
-      this.$refs.list.onscroll = () => {
-        const currentPage = Math.floor(this.issues.length / this.perPage);
-
-        if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage
-          && currentPage === this.page) {
-          this.loadingNewPage = true;
-          this.page += 1;
-        }
-      };
+      this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
+      window.addEventListener('resize', this.setColumnCountWrapper);
     },
-    destroyed() {
-      this.destroyMasonry();
+    beforeDestroy() {
+      this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
+      window.removeEventListener('resize', this.setColumnCountWrapper);
     },
     components: {
       'issue-card-inner': gl.issueBoards.IssueCardInner,
@@ -108,25 +111,29 @@
         class="add-issues-list add-issues-list-columns"
         ref="list">
         <div
-          v-for="issue in loopIssues"
-          v-if="showIssue(issue)"
-          class="card-parent">
+          v-for="group in groupedIssues"
+          class="add-issues-list-column">
           <div
-            class="card"
-            :class="{ 'is-active': issue.selected }"
-            @click="toggleIssue($event, issue)">
-            <issue-card-inner
-              :issue="issue"
-              :issue-link-base="issueLinkBase"
-              :root-path="rootPath">
-            </issue-card-inner>
-            <span
-              :aria-label="'Issue #' + issue.id + ' selected'"
-              aria-checked="true"
-              v-if="issue.selected"
-              class="issue-card-selected text-center">
-              <i class="fa fa-check"></i>
-            </span>
+            v-for="issue in group"
+            v-if="showIssue(issue)"
+            class="card-parent">
+            <div
+              class="card"
+              :class="{ 'is-active': issue.selected }"
+              @click="toggleIssue($event, issue)">
+              <issue-card-inner
+                :issue="issue"
+                :issue-link-base="issueLinkBase"
+                :root-path="rootPath">
+              </issue-card-inner>
+              <span
+                :aria-label="'Issue #' + issue.id + ' selected'"
+                aria-checked="true"
+                v-if="issue.selected"
+                class="issue-card-selected text-center">
+                <i class="fa fa-check"></i>
+              </span>
+            </div>
           </div>
         </div>
       </section>
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index bb2d43c4a21..96f12da3753 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -37,7 +37,7 @@
                 href="#"
                 role="button"
                 :class="{ 'is-active': list.id == selected.id }"
-                @click="modal.selectedList = list">
+                @click.prevent="modal.selectedList = list">
                 <span
                   class="dropdown-label-box"
                   :style="{ backgroundColor: list.label.color }">
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index d556c6d3e04..e8cb43f3503 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -23,7 +23,7 @@
               href="#"
               role="button"
               @click.prevent="changeTab('all')">
-              <span>All issues</span>
+              All issues
               <span class="badge">
                 {{ issuesCount }}
               </span>
@@ -34,7 +34,7 @@
               href="#"
               role="button"
               @click.prevent="changeTab('selected')">
-              <span>Selected issues</span>
+              Selected issues
               <span class="badge">
                 {{ selectedCount }}
               </span>
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6 b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
index 124baaae42a..e74935e1cb0 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6
@@ -1,4 +1,6 @@
+/* eslint-disable no-new */
 /* global Vue */
+/* global Flash */
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
@@ -18,17 +20,24 @@
     },
     methods: {
       removeIssue() {
-        const lists = this.issue.getLists();
+        const issue = this.issue;
+        const lists = issue.getLists();
         const labelIds = lists.map(list => list.label.id);
 
         // Post the remove data
-        gl.boardService.bulkUpdate([this.issue.globalId], {
+        gl.boardService.bulkUpdate([issue.globalId], {
           remove_label_ids: labelIds,
+        }).catch(() => {
+          new Flash('Failed to remove issue from board, please try again.', 'alert');
+
+          lists.forEach((list) => {
+            list.addIssue(issue);
+          });
         });
 
         // Remove from the frontend store
         lists.forEach((list) => {
-          list.removeIssue(this.issue);
+          list.removeIssue(issue);
         });
 
         Store.detail.issue = {};
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 9c498ba48c4..fa46b6135e0 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -5,6 +5,7 @@
   class ModalStore {
     constructor() {
       this.store = {
+        columns: 3,
         issues: [],
         issuesCount: false,
         selectedIssues: [],
@@ -25,9 +26,11 @@
 
     toggleIssue(issueObj) {
       const issue = issueObj;
-      issue.selected = !issue.selected;
+      const selected = issue.selected;
 
-      if (issue.selected) {
+      issue.selected = !selected;
+
+      if (!selected) {
         this.addSelectedIssue(issue);
       } else {
         this.removeSelectedIssue(issue);
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 6bb575059b7..d9370db0cf2 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -161,6 +161,9 @@
     gl.text.humanize = function(string) {
       return string.charAt(0).toUpperCase() + string.replace(/_/g, ' ').slice(1);
     };
+    gl.text.pluralize = function(str, count) {
+      return str + (count > 1 || count === 0 ? 's' : '');
+    };
     return gl.text.truncate = function(string, maxLength) {
       return string.substr(0, (maxLength - 3)) + '...';
     };
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index ded15dc493e..9b413f3e61c 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -418,6 +418,18 @@
   display: flex;
 }
 
+.add-issues-list-column {
+  width: 100%;
+
+  @media (min-width: $screen-sm-min) {
+    width: 50%;
+  }
+
+  @media (min-width: $screen-md-min) {
+    width: (100% / 3);
+  }
+}
+
 .add-issues-list {
   display: -webkit-flex;
   display: flex;
@@ -429,16 +441,7 @@
   overflow-y: scroll;
 
   .card-parent {
-    width: 100%;
     padding: 0 5px 5px;
-
-    @media (min-width: $screen-sm-min) {
-      width: 50%;
-    }
-
-    @media (min-width: $screen-md-min) {
-      width: (100% / 3);
-    }
   }
 
   .card {
@@ -480,6 +483,6 @@
   color: $white-light;
   border: 1px solid $border-blue-light;
   font-size: 9px;
-  line-height: 17px;
+  line-height: 15px;
   border-radius: 50%;
 }
diff --git a/spec/javascripts/boards/issue_spec.js.es6 b/spec/javascripts/boards/issue_spec.js.es6
index c8a61a0a9b5..1d33490fc75 100644
--- a/spec/javascripts/boards/issue_spec.js.es6
+++ b/spec/javascripts/boards/issue_spec.js.es6
@@ -20,7 +20,7 @@ describe('Issue model', () => {
   let issue;
 
   beforeEach(() => {
-    gl.boardService = new BoardService('/test/issue-boards/board', '1');
+    gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
     gl.issueBoards.BoardsStore.create();
 
     issue = new ListIssue({
diff --git a/spec/javascripts/boards/list_spec.js.es6 b/spec/javascripts/boards/list_spec.js.es6
index 7d942ec3d65..770aa981bcb 100644
--- a/spec/javascripts/boards/list_spec.js.es6
+++ b/spec/javascripts/boards/list_spec.js.es6
@@ -24,7 +24,7 @@ describe('List model', () => {
 
   beforeEach(() => {
     Vue.http.interceptors.push(boardsMockInterceptor);
-    gl.boardService = new BoardService('/test/issue-boards/board', '1');
+    gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
     gl.issueBoards.BoardsStore.create();
 
     list = new List(listObj);
diff --git a/spec/javascripts/lib/utils/text_utility_spec.js.es6 b/spec/javascripts/lib/utils/text_utility_spec.js.es6
index e97356b65d5..329e18f405a 100644
--- a/spec/javascripts/lib/utils/text_utility_spec.js.es6
+++ b/spec/javascripts/lib/utils/text_utility_spec.js.es6
@@ -21,5 +21,19 @@
         expect(largeFont > regular).toBe(true);
       });
     });
+
+    describe('gl.text.pluralize', () => {
+      it('returns pluralized', () => {
+        expect(gl.text.pluralize('test', 2)).toBe('tests');
+      });
+
+      it('returns pluralized', () => {
+        expect(gl.text.pluralize('test', 0)).toBe('tests');
+      });
+
+      it('does not return pluralized', () => {
+        expect(gl.text.pluralize('test', 1)).toBe('test');
+      });
+    });
   });
 })();
diff --git a/vendor/assets/javascripts/masonry.js b/vendor/assets/javascripts/masonry.js
deleted file mode 100644
index adf62864671..00000000000
--- a/vendor/assets/javascripts/masonry.js
+++ /dev/null
@@ -1,2463 +0,0 @@
-/*!
- * Masonry PACKAGED v4.1.1
- * Cascading grid layout library
- * http://masonry.desandro.com
- * MIT License
- * by David DeSandro
- */
-
-/**
- * Bridget makes jQuery widgets
- * v2.0.1
- * MIT license
- */
-
-/* jshint browser: true, strict: true, undef: true, unused: true */
-
-( function( window, factory ) {
-  // universal module definition
-  /*jshint strict: false */ /* globals define, module, require */
-  if ( typeof define == 'function' && define.amd ) {
-    // AMD
-    define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
-      return factory( window, jQuery );
-    });
-  } else if ( typeof module == 'object' && module.exports ) {
-    // CommonJS
-    module.exports = factory(
-      window,
-      require('jquery')
-    );
-  } else {
-    // browser global
-    window.jQueryBridget = factory(
-      window,
-      window.jQuery
-    );
-  }
-
-}( window, function factory( window, jQuery ) {
-'use strict';
-
-// ----- utils ----- //
-
-var arraySlice = Array.prototype.slice;
-
-// helper function for logging errors
-// $.error breaks jQuery chaining
-var console = window.console;
-var logError = typeof console == 'undefined' ? function() {} :
-  function( message ) {
-    console.error( message );
-  };
-
-// ----- jQueryBridget ----- //
-
-function jQueryBridget( namespace, PluginClass, $ ) {
-  $ = $ || jQuery || window.jQuery;
-  if ( !$ ) {
-    return;
-  }
-
-  // add option method -> $().plugin('option', {...})
-  if ( !PluginClass.prototype.option ) {
-    // option setter
-    PluginClass.prototype.option = function( opts ) {
-      // bail out if not an object
-      if ( !$.isPlainObject( opts ) ){
-        return;
-      }
-      this.options = $.extend( true, this.options, opts );
-    };
-  }
-
-  // make jQuery plugin
-  $.fn[ namespace ] = function( arg0 /*, arg1 */ ) {
-    if ( typeof arg0 == 'string' ) {
-      // method call $().plugin( 'methodName', { options } )
-      // shift arguments by 1
-      var args = arraySlice.call( arguments, 1 );
-      return methodCall( this, arg0, args );
-    }
-    // just $().plugin({ options })
-    plainCall( this, arg0 );
-    return this;
-  };
-
-  // $().plugin('methodName')
-  function methodCall( $elems, methodName, args ) {
-    var returnValue;
-    var pluginMethodStr = '$().' + namespace + '("' + methodName + '")';
-
-    $elems.each( function( i, elem ) {
-      // get instance
-      var instance = $.data( elem, namespace );
-      if ( !instance ) {
-        logError( namespace + ' not initialized. Cannot call methods, i.e. ' +
-          pluginMethodStr );
-        return;
-      }
-
-      var method = instance[ methodName ];
-      if ( !method || methodName.charAt(0) == '_' ) {
-        logError( pluginMethodStr + ' is not a valid method' );
-        return;
-      }
-
-      // apply method, get return value
-      var value = method.apply( instance, args );
-      // set return value if value is returned, use only first value
-      returnValue = returnValue === undefined ? value : returnValue;
-    });
-
-    return returnValue !== undefined ? returnValue : $elems;
-  }
-
-  function plainCall( $elems, options ) {
-    $elems.each( function( i, elem ) {
-      var instance = $.data( elem, namespace );
-      if ( instance ) {
-        // set options & init
-        instance.option( options );
-        instance._init();
-      } else {
-        // initialize new instance
-        instance = new PluginClass( elem, options );
-        $.data( elem, namespace, instance );
-      }
-    });
-  }
-
-  updateJQuery( $ );
-
-}
-
-// ----- updateJQuery ----- //
-
-// set $.bridget for v1 backwards compatibility
-function updateJQuery( $ ) {
-  if ( !$ || ( $ && $.bridget ) ) {
-    return;
-  }
-  $.bridget = jQueryBridget;
-}
-
-updateJQuery( jQuery || window.jQuery );
-
-// -----  ----- //
-
-return jQueryBridget;
-
-}));
-
-/**
- * EvEmitter v1.0.3
- * Lil' event emitter
- * MIT License
- */
-
-/* jshint unused: true, undef: true, strict: true */
-
-( function( global, factory ) {
-  // universal module definition
-  /* jshint strict: false */ /* globals define, module, window */
-  if ( typeof define == 'function' && define.amd ) {
-    // AMD - RequireJS
-    define( 'ev-emitter/ev-emitter',factory );
-  } else if ( typeof module == 'object' && module.exports ) {
-    // CommonJS - Browserify, Webpack
-    module.exports = factory();
-  } else {
-    // Browser globals
-    global.EvEmitter = factory();
-  }
-
-}( typeof window != 'undefined' ? window : this, function() {
-
-
-
-function EvEmitter() {}
-
-var proto = EvEmitter.prototype;
-
-proto.on = function( eventName, listener ) {
-  if ( !eventName || !listener ) {
-    return;
-  }
-  // set events hash
-  var events = this._events = this._events || {};
-  // set listeners array
-  var listeners = events[ eventName ] = events[ eventName ] || [];
-  // only add once
-  if ( listeners.indexOf( listener ) == -1 ) {
-    listeners.push( listener );
-  }
-
-  return this;
-};
-
-proto.once = function( eventName, listener ) {
-  if ( !eventName || !listener ) {
-    return;
-  }
-  // add event
-  this.on( eventName, listener );
-  // set once flag
-  // set onceEvents hash
-  var onceEvents = this._onceEvents = this._onceEvents || {};
-  // set onceListeners object
-  var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
-  // set flag
-  onceListeners[ listener ] = true;
-
-  return this;
-};
-
-proto.off = function( eventName, listener ) {
-  var listeners = this._events && this._events[ eventName ];
-  if ( !listeners || !listeners.length ) {
-    return;
-  }
-  var index = listeners.indexOf( listener );
-  if ( index != -1 ) {
-    listeners.splice( index, 1 );
-  }
-
-  return this;
-};
-
-proto.emitEvent = function( eventName, args ) {
-  var listeners = this._events && this._events[ eventName ];
-  if ( !listeners || !listeners.length ) {
-    return;
-  }
-  var i = 0;
-  var listener = listeners[i];
-  args = args || [];
-  // once stuff
-  var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
-
-  while ( listener ) {
-    var isOnce = onceListeners && onceListeners[ listener ];
-    if ( isOnce ) {
-      // remove listener
-      // remove before trigger to prevent recursion
-      this.off( eventName, listener );
-      // unset once flag
-      delete onceListeners[ listener ];
-    }
-    // trigger listener
-    listener.apply( this, args );
-    // get next listener
-    i += isOnce ? 0 : 1;
-    listener = listeners[i];
-  }
-
-  return this;
-};
-
-return EvEmitter;
-
-}));
-
-/*!
- * getSize v2.0.2
- * measure size of elements
- * MIT license
- */
-
-/*jshint browser: true, strict: true, undef: true, unused: true */
-/*global define: false, module: false, console: false */
-
-( function( window, factory ) {
-  'use strict';
-
-  if ( typeof define == 'function' && define.amd ) {
-    // AMD
-    define( 'get-size/get-size',[],function() {
-      return factory();
-    });
-  } else if ( typeof module == 'object' && module.exports ) {
-    // CommonJS
-    module.exports = factory();
-  } else {
-    // browser global
-    window.getSize = factory();
-  }
-
-})( window, function factory() {
-'use strict';
-
-// -------------------------- helpers -------------------------- //
-
-// get a number from a string, not a percentage
-function getStyleSize( value ) {
-  var num = parseFloat( value );
-  // not a percent like '100%', and a number
-  var isValid = value.indexOf('%') == -1 && !isNaN( num );
-  return isValid && num;
-}
-
-function noop() {}
-
-var logError = typeof console == 'undefined' ? noop :
-  function( message ) {
-    console.error( message );
-  };
-
-// -------------------------- measurements -------------------------- //
-
-var measurements = [
-  'paddingLeft',
-  'paddingRight',
-  'paddingTop',
-  'paddingBottom',
-  'marginLeft',
-  'marginRight',
-  'marginTop',
-  'marginBottom',
-  'borderLeftWidth',
-  'borderRightWidth',
-  'borderTopWidth',
-  'borderBottomWidth'
-];
-
-var measurementsLength = measurements.length;
-
-function getZeroSize() {
-  var size = {
-    width: 0,
-    height: 0,
-    innerWidth: 0,
-    innerHeight: 0,
-    outerWidth: 0,
-    outerHeight: 0
-  };
-  for ( var i=0; i < measurementsLength; i++ ) {
-    var measurement = measurements[i];
-    size[ measurement ] = 0;
-  }
-  return size;
-}
-
-// -------------------------- getStyle -------------------------- //
-
-/**
- * getStyle, get style of element, check for Firefox bug
- * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
- */
-function getStyle( elem ) {
-  var style = getComputedStyle( elem );
-  if ( !style ) {
-    logError( 'Style returned ' + style +
-      '. Are you running this code in a hidden iframe on Firefox? ' +
-      'See http://bit.ly/getsizebug1' );
-  }
-  return style;
-}
-
-// -------------------------- setup -------------------------- //
-
-var isSetup = false;
-
-var isBoxSizeOuter;
-
-/**
- * setup
- * check isBoxSizerOuter
- * do on first getSize() rather than on page load for Firefox bug
- */
-function setup() {
-  // setup once
-  if ( isSetup ) {
-    return;
-  }
-  isSetup = true;
-
-  // -------------------------- box sizing -------------------------- //
-
-  /**
-   * WebKit measures the outer-width on style.width on border-box elems
-   * IE & Firefox<29 measures the inner-width
-   */
-  var div = document.createElement('div');
-  div.style.width = '200px';
-  div.style.padding = '1px 2px 3px 4px';
-  div.style.borderStyle = 'solid';
-  div.style.borderWidth = '1px 2px 3px 4px';
-  div.style.boxSizing = 'border-box';
-
-  var body = document.body || document.documentElement;
-  body.appendChild( div );
-  var style = getStyle( div );
-
-  getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;
-  body.removeChild( div );
-
-}
-
-// -------------------------- getSize -------------------------- //
-
-function getSize( elem ) {
-  setup();
-
-  // use querySeletor if elem is string
-  if ( typeof elem == 'string' ) {
-    elem = document.querySelector( elem );
-  }
-
-  // do not proceed on non-objects
-  if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
-    return;
-  }
-
-  var style = getStyle( elem );
-
-  // if hidden, everything is 0
-  if ( style.display == 'none' ) {
-    return getZeroSize();
-  }
-
-  var size = {};
-  size.width = elem.offsetWidth;
-  size.height = elem.offsetHeight;
-
-  var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
-
-  // get all measurements
-  for ( var i=0; i < measurementsLength; i++ ) {
-    var measurement = measurements[i];
-    var value = style[ measurement ];
-    var num = parseFloat( value );
-    // any 'auto', 'medium' value will be 0
-    size[ measurement ] = !isNaN( num ) ? num : 0;
-  }
-
-  var paddingWidth = size.paddingLeft + size.paddingRight;
-  var paddingHeight = size.paddingTop + size.paddingBottom;
-  var marginWidth = size.marginLeft + size.marginRight;
-  var marginHeight = size.marginTop + size.marginBottom;
-  var borderWidth = size.borderLeftWidth + size.borderRightWidth;
-  var borderHeight = size.borderTopWidth + size.borderBottomWidth;
-
-  var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
-
-  // overwrite width and height if we can get it from style
-  var styleWidth = getStyleSize( style.width );
-  if ( styleWidth !== false ) {
-    size.width = styleWidth +
-      // add padding and border unless it's already including it
-      ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
-  }
-
-  var styleHeight = getStyleSize( style.height );
-  if ( styleHeight !== false ) {
-    size.height = styleHeight +
-      // add padding and border unless it's already including it
-      ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
-  }
-
-  size.innerWidth = size.width - ( paddingWidth + borderWidth );
-  size.innerHeight = size.height - ( paddingHeight + borderHeight );
-
-  size.outerWidth = size.width + marginWidth;
-  size.outerHeight = size.height + marginHeight;
-
-  return size;
-}
-
-return getSize;
-
-});
-
-/**
- * matchesSelector v2.0.1
- * matchesSelector( element, '.selector' )
- * MIT license
- */
-
-/*jshint browser: true, strict: true, undef: true, unused: true */
-
-( function( window, factory ) {
-  /*global define: false, module: false */
-  'use strict';
-  // universal module definition
-  if ( typeof define == 'function' && define.amd ) {
-    // AMD
-    define( 'desandro-matches-selector/matches-selector',factory );
-  } else if ( typeof module == 'object' && module.exports ) {
-    // CommonJS
-    module.exports = factory();
-  } else {
-    // browser global
-    window.matchesSelector = factory();
-  }
-
-}( window, function factory() {
-  'use strict';
-
-  var matchesMethod = ( function() {
-    var ElemProto = Element.prototype;
-    // check for the standard method name first
-    if ( ElemProto.matches ) {
-      return 'matches';
-    }
-    // check un-prefixed
-    if ( ElemProto.matchesSelector ) {
-      return 'matchesSelector';
-    }
-    // check vendor prefixes
-    var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
-
-    for ( var i=0; i < prefixes.length; i++ ) {
-      var prefix = prefixes[i];
-      var method = prefix + 'MatchesSelector';
-      if ( ElemProto[ method ] ) {
-        return method;
-      }
-    }
-  })();
-
-  return function matchesSelector( elem, selector ) {
-    return elem[ matchesMethod ]( selector );
-  };
-
-}));
-
-/**
- * Fizzy UI utils v2.0.2
- * MIT license
- */
-
-/*jshint browser: true, undef: true, unused: true, strict: true */
-
-( function( window, factory ) {
-  // universal module definition
-  /*jshint strict: false */ /*globals define, module, require */
-
-  if ( typeof define == 'function' && define.amd ) {
-    // AMD
-    define( 'fizzy-ui-utils/utils',[
-      'desandro-matches-selector/matches-selector'
-    ], function( matchesSelector ) {
-      return factory( window, matchesSelector );
-    });
-  } else if ( typeof module == 'object' && module.exports ) {
-    // CommonJS
-    module.exports = factory(
-      window,
-      require('desandro-matches-selector')
-    );
-  } else {
-    // browser global
-    window.fizzyUIUtils = factory(
-      window,
-      window.matchesSelector
-    );
-  }
-
-}( window, function factory( window, matchesSelector ) {
-
-
-
-var utils = {};
-
-// ----- extend ----- //
-
-// extends objects
-utils.extend = function( a, b ) {
-  for ( var prop in b ) {
-    a[ prop ] = b[ prop ];
-  }
-  return a;
-};
-
-// ----- modulo ----- //
-
-utils.modulo = function( num, div ) {
-  return ( ( num % div ) + div ) % div;
-};
-
-// ----- makeArray ----- //
-
-// turn element or nodeList into an array
-utils.makeArray = function( obj ) {
-  var ary = [];
-  if ( Array.isArray( obj ) ) {
-    // use object if already an array
-    ary = obj;
-  } else if ( obj && typeof obj.length == 'number' ) {
-    // convert nodeList to array
-    for ( var i=0; i < obj.length; i++ ) {
-      ary.push( obj[i] );
-    }
-  } else {
-    // array of single index
-    ary.push( obj );
-  }
-  return ary;
-};
-
-// ----- removeFrom ----- //
-
-utils.removeFrom = function( ary, obj ) {
-  var index = ary.indexOf( obj );
-  if ( index != -1 ) {
-    ary.splice( index, 1 );
-  }
-};
-
-// ----- getParent ----- //
-
-utils.getParent = function( elem, selector ) {
-  while ( elem != document.body ) {
-    elem = elem.parentNode;
-    if ( matchesSelector( elem, selector ) ) {
-      return elem;
-    }
-  }
-};
-
-// ----- getQueryElement ----- //
-
-// use element as selector string
-utils.getQueryElement = function( elem ) {
-  if ( typeof elem == 'string' ) {
-    return document.querySelector( elem );
-  }
-  return elem;
-};
-
-// ----- handleEvent ----- //
-
-// enable .ontype to trigger from .addEventListener( elem, 'type' )
-utils.handleEvent = function( event ) {
-  var method = 'on' + event.type;
-  if ( this[ method ] ) {
-    this[ method ]( event );
-  }
-};
-
-// ----- filterFindElements ----- //
-
-utils.filterFindElements = function( elems, selector ) {
-  // make array of elems
-  elems = utils.makeArray( elems );
-  var ffElems = [];
-
-  elems.forEach( function( elem ) {
-    // check that elem is an actual element
-    if ( !( elem instanceof HTMLElement ) ) {
-      return;
-    }
-    // add elem if no selector
-    if ( !selector ) {
-      ffElems.push( elem );
-      return;
-    }
-    // filter & find items if we have a selector
-    // filter
-    if ( matchesSelector( elem, selector ) ) {
-      ffElems.push( elem );
-    }
-    // find children
-    var childElems = elem.querySelectorAll( selector );
-    // concat childElems to filterFound array
-    for ( var i=0; i < childElems.length; i++ ) {
-      ffElems.push( childElems[i] );
-    }
-  });
-
-  return ffElems;
-};
-
-// ----- debounceMethod ----- //
-
-utils.debounceMethod = function( _class, methodName, threshold ) {
-  // original method
-  var method = _class.prototype[ methodName ];
-  var timeoutName = methodName + 'Timeout';
-
-  _class.prototype[ methodName ] = function() {
-    var timeout = this[ timeoutName ];
-    if ( timeout ) {
-      clearTimeout( timeout );
-    }
-    var args = arguments;
-
-    var _this = this;
-    this[ timeoutName ] = setTimeout( function() {
-      method.apply( _this, args );
-      delete _this[ timeoutName ];
-    }, threshold || 100 );
-  };
-};
-
-// ----- docReady ----- //
-
-utils.docReady = function( callback ) {
-  var readyState = document.readyState;
-  if ( readyState == 'complete' || readyState == 'interactive' ) {
-    callback();
-  } else {
-    document.addEventListener( 'DOMContentLoaded', callback );
-  }
-};
-
-// ----- htmlInit ----- //
-
-// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
-utils.toDashed = function( str ) {
-  return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {
-    return $1 + '-' + $2;
-  }).toLowerCase();
-};
-
-var console = window.console;
-/**
- * allow user to initialize classes via [data-namespace] or .js-namespace class
- * htmlInit( Widget, 'widgetName' )
- * options are parsed from data-namespace-options
- */
-utils.htmlInit = function( WidgetClass, namespace ) {
-  utils.docReady( function() {
-    var dashedNamespace = utils.toDashed( namespace );
-    var dataAttr = 'data-' + dashedNamespace;
-    var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );
-    var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );
-    var elems = utils.makeArray( dataAttrElems )
-      .concat( utils.makeArray( jsDashElems ) );
-    var dataOptionsAttr = dataAttr + '-options';
-    var jQuery = window.jQuery;
-
-    elems.forEach( function( elem ) {
-      var attr = elem.getAttribute( dataAttr ) ||
-        elem.getAttribute( dataOptionsAttr );
-      var options;
-      try {
-        options = attr && JSON.parse( attr );
-      } catch ( error ) {
-        // log error, do not initialize
-        if ( console ) {
-          console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +
-          ': ' + error );
-        }
-        return;
-      }
-      // initialize
-      var instance = new WidgetClass( elem, options );
-      // make available via $().data('layoutname')
-      if ( jQuery ) {
-        jQuery.data( elem, namespace, instance );
-      }
-    });
-
-  });
-};
-
-// -----  ----- //
-
-return utils;
-
-}));
-
-/**
- * Outlayer Item
- */
-
-( function( window, factory ) {
-  // universal module definition
-  /* jshint strict: false */ /* globals define, module, require */
-  if ( typeof define == 'function' && define.amd ) {
-    // AMD - RequireJS
-    define( 'outlayer/item',[
-        'ev-emitter/ev-emitter',
-        'get-size/get-size'
-      ],
-      factory
-    );
-  } else if ( typeof module == 'object' && module.exports ) {
-    // CommonJS - Browserify, Webpack
-    module.exports = factory(
-      require('ev-emitter'),
-      require('get-size')
-    );
-  } else {
-    // browser global
-    window.Outlayer = {};
-    window.Outlayer.Item = factory(
-      window.EvEmitter,
-      window.getSize
-    );
-  }
-
-}( window, function factory( EvEmitter, getSize ) {
-'use strict';
-
-// ----- helpers ----- //
-
-function isEmptyObj( obj ) {
-  for ( var prop in obj ) {
-    return false;
-  }
-  prop = null;
-  return true;
-}
-
-// -------------------------- CSS3 support -------------------------- //
-
-
-var docElemStyle = document.documentElement.style;
-
-var transitionProperty = typeof docElemStyle.transition == 'string' ?
-  'transition' : 'WebkitTransition';
-var transformProperty = typeof docElemStyle.transform == 'string' ?
-  'transform' : 'WebkitTransform';
-
-var transitionEndEvent = {
-  WebkitTransition: 'webkitTransitionEnd',
-  transition: 'transitionend'
-}[ transitionProperty ];
-
-// cache all vendor properties that could have vendor prefix
-var vendorProperties = {
-  transform: transformProperty,
-  transition: transitionProperty,
-  transitionDuration: transitionProperty + 'Duration',
-  transitionProperty: transitionProperty + 'Property',
-  transitionDelay: transitionProperty + 'Delay'
-};
-
-// -------------------------- Item -------------------------- //
-
-function Item( element, layout ) {
-  if ( !element ) {
-    return;
-  }
-
-  this.element = element;
-  // parent layout class, i.e. Masonry, Isotope, or Packery
-  this.layout = layout;
-  this.position = {
-    x: 0,
-    y: 0
-  };
-
-  this._create();
-}
-
-// inherit EvEmitter
-var proto = Item.prototype = Object.create( EvEmitter.prototype );
-proto.constructor = Item;
-
-proto._create = function() {
-  // transition objects
-  this._transn = {
-    ingProperties: {},
-    clean: {},
-    onEnd: {}
-  };
-
-  this.css({
-    position: 'absolute'
-  });
-};
-
-// trigger specified handler for event type
-proto.handleEvent = function( event ) {
-  var method = 'on' + event.type;
-  if ( this[ method ] ) {
-    this[ method ]( event );
-  }
-};
-
-proto.getSize = function() {
-  this.size = getSize( this.element );
-};
-
-/**
- * apply CSS styles to element
- * @param {Object} style
- */
-proto.css = function( style ) {
-  var elemStyle = this.element.style;
-
-  for ( var prop in style ) {
-    // use vendor property if available
-    var supportedProp = vendorProperties[ prop ] || prop;
-    elemStyle[ supportedProp ] = style[ prop ];
-  }
-};
-
- // measure position, and sets it
-proto.getPosition = function() {
-  var style = getComputedStyle( this.element );
-  var isOriginLeft = this.layout._getOption('originLeft');
-  var isOriginTop = this.layout._getOption('originTop');
-  var xValue = style[ isOriginLeft ? 'left' : 'right' ];
-  var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
-  // convert percent to pixels
-  var layoutSize = this.layout.size;
-  var x = xValue.indexOf('%') != -1 ?
-    ( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 );
-  var y = yValue.indexOf('%') != -1 ?
-    ( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 );
-
-  // clean up 'auto' or other non-integer values
-  x = isNaN( x ) ? 0 : x;
-  y = isNaN( y ) ? 0 : y;
-  // remove padding from measurement
-  x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
-  y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
-
-  this.position.x = x;
-  this.position.y = y;
-};
-
-// set settled position, apply padding
-proto.layoutPosition = function() {
-  var layoutSize = this.layout.size;
-  var style = {};
-  var isOriginLeft = this.layout._getOption('originLeft');
-  var isOriginTop = this.layout._getOption('originTop');
-
-  // x
-  var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';
-  var xProperty = isOriginLeft ? 'left' : 'right';
-  var xResetProperty = isOriginLeft ? 'right' : 'left';
-
-  var x = this.position.x + layoutSize[ xPadding ];
-  // set in percentage or pixels
-  style[ xProperty ] = this.getXValue( x );
-  // reset other property
-  style[ xResetProperty ] = '';
-
-  // y
-  var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';
-  var yProperty = isOriginTop ? 'top' : 'bottom';
-  var yResetProperty = isOriginTop ? 'bottom' : 'top';
-
-  var y = this.position.y + layoutSize[ yPadding ];
-  // set in percentage or pixels
-  style[ yProperty ] = this.getYValue( y );
-  // reset other property
-  style[ yResetProperty ] = '';
-
-  this.css( style );
-  this.emitEvent( 'layout', [ this ] );
-};
-
-proto.getXValue = function( x ) {
-  var isHorizontal = this.layout._getOption('horizontal');
-  return this.layout.options.percentPosition && !isHorizontal ?
-    ( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px';
-};
-
-proto.getYValue = function( y ) {
-  var isHorizontal = this.layout._getOption('horizontal');
-  return this.layout.options.percentPosition && isHorizontal ?
-    ( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px';
-};
-
-proto._transitionTo = function( x, y ) {
-  this.getPosition();
-  // get current x & y from top/left
-  var curX = this.position.x;
-  var curY = this.position.y;
-
-  var compareX = parseInt( x, 10 );
-  var compareY = parseInt( y, 10 );
-  var didNotMove = compareX === this.position.x && compareY === this.position.y;
-
-  // save end position
-  this.setPosition( x, y );
-
-  // if did not move and not transitioning, just go to layout
-  if ( didNotMove && !this.isTransitioning ) {
-    this.layoutPosition();
-    return;
-  }
-
-  var transX = x - curX;
-  var transY = y - curY;
-  var transitionStyle = {};
-  transitionStyle.transform = this.getTranslate( transX, transY );
-
-  this.transition({
-    to: transitionStyle,
-    onTransitionEnd: {
-      transform: this.layoutPosition
-    },
-    isCleaning: true
-  });
-};
-
-proto.getTranslate = function( x, y ) {
-  // flip cooridinates if origin on right or bottom
-  var isOriginLeft = this.layout._getOption('originLeft');
-  var isOriginTop = this.layout._getOption('originTop');
-  x = isOriginLeft ? x : -x;
-  y = isOriginTop ? y : -y;
-  return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
-};
-
-// non transition + transform support
-proto.goTo = function( x, y ) {
-  this.setPosition( x, y );
-  this.layoutPosition();
-};
-
-proto.moveTo = proto._transitionTo;
-
-proto.setPosition = function( x, y ) {
-  this.position.x = parseInt( x, 10 );
-  this.position.y = parseInt( y, 10 );
-};
-
-// ----- transition ----- //
-
-/**
- * @param {Object} style - CSS
- * @param {Function} onTransitionEnd
- */
-
-// non transition, just trigger callback
-proto._nonTransition = function( args ) {
-  this.css( args.to );
-  if ( args.isCleaning ) {
-    this._removeStyles( args.to );
-  }
-  for ( var prop in args.onTransitionEnd ) {
-    args.onTransitionEnd[ prop ].call( this );
-  }
-};
-
-/**
- * proper transition
- * @param {Object} args - arguments
- *   @param {Object} to - style to transition to
- *   @param {Object} from - style to start transition from
- *   @param {Boolean} isCleaning - removes transition styles after transition
- *   @param {Function} onTransitionEnd - callback
- */
-proto.transition = function( args ) {
-  // redirect to nonTransition if no transition duration
-  if ( !parseFloat( this.layout.options.transitionDuration ) ) {
-    this._nonTransition( args );
-    return;
-  }
-
-  var _transition = this._transn;
-  // keep track of onTransitionEnd callback by css property
-  for ( var prop in args.onTransitionEnd ) {
-    _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ];
-  }
-  // keep track of properties that are transitioning
-  for ( prop in args.to ) {
-    _transition.ingProperties[ prop ] = true;
-    // keep track of properties to clean up when transition is done
-    if ( args.isCleaning ) {
-      _transition.clean[ prop ] = true;
-    }
-  }
-
-  // set from styles
-  if ( args.from ) {
-    this.css( args.from );
-    // force redraw. http://blog.alexmaccaw.com/css-transitions
-    var h = this.element.offsetHeight;
-    // hack for JSHint to hush about unused var
-    h = null;
-  }
-  // enable transition
-  this.enableTransition( args.to );
-  // set styles that are transitioning
-  this.css( args.to );
-
-  this.isTransitioning = true;
-
-};
-
-// dash before all cap letters, including first for
-// WebkitTransform => -webkit-transform
-function toDashedAll( str ) {
-  return str.replace( /([A-Z])/g, function( $1 ) {
-    return '-' + $1.toLowerCase();
-  });
-}
-
-var transitionProps = 'opacity,' + toDashedAll( transformProperty );
-
-proto.enableTransition = function(/* style */) {
-  // HACK changing transitionProperty during a transition
-  // will cause transition to jump
-  if ( this.isTransitioning ) {
-    return;
-  }
-
-  // make `transition: foo, bar, baz` from style object
-  // HACK un-comment this when enableTransition can work
-  // while a transition is happening
-  // var transitionValues = [];
-  // for ( var prop in style ) {
-  //   // dash-ify camelCased properties like WebkitTransition
-  //   prop = vendorProperties[ prop ] || prop;
-  //   transitionValues.push( toDashedAll( prop ) );
-  // }
-  // munge number to millisecond, to match stagger
-  var duration = this.layout.options.transitionDuration;
-  duration = typeof duration == 'number' ? duration + 'ms' : duration;
-  // enable transition styles
-  this.css({
-    transitionProperty: transitionProps,
-    transitionDuration: duration,
-    transitionDelay: this.staggerDelay || 0
-  });
-  // listen for transition end event
-  this.element.addEventListener( transitionEndEvent, this, false );
-};
-
-// ----- events ----- //
-
-proto.onwebkitTransitionEnd = function( event ) {
-  this.ontransitionend( event );
-};
-
-proto.onotransitionend = function( event ) {
-  this.ontransitionend( event );
-};
-
-// properties that I munge to make my life easier
-var dashedVendorProperties = {
-  '-webkit-transform': 'transform'
-};
-
-proto.ontransitionend = function( event ) {
-  // disregard bubbled events from children
-  if ( event.target !== this.element ) {
-    return;
-  }
-  var _transition = this._transn;
-  // get property name of transitioned property, convert to prefix-free
-  var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName;
-
-  // remove property that has completed transitioning
-  delete _transition.ingProperties[ propertyName ];
-  // check if any properties are still transitioning
-  if ( isEmptyObj( _transition.ingProperties ) ) {
-    // all properties have completed transitioning
-    this.disableTransition();
-  }
-  // clean style
-  if ( propertyName in _transition.clean ) {
-    // clean up style
-    this.element.style[ event.propertyName ] = '';
-    delete _transition.clean[ propertyName ];
-  }
-  // trigger onTransitionEnd callback
-  if ( propertyName in _transition.onEnd ) {
-    var onTransitionEnd = _transition.onEnd[ propertyName ];
-    onTransitionEnd.call( this );
-    delete _transition.onEnd[ propertyName ];
-  }
-
-  this.emitEvent( 'transitionEnd', [ this ] );
-};
-
-proto.disableTransition = function() {
-  this.removeTransitionStyles();
-  this.element.removeEventListener( transitionEndEvent, this, false );
-  this.isTransitioning = false;
-};
-
-/**
- * removes style property from element
- * @param {Object} style
-**/
-proto._removeStyles = function( style ) {
-  // clean up transition styles
-  var cleanStyle = {};
-  for ( var prop in style ) {
-    cleanStyle[ prop ] = '';
-  }
-  this.css( cleanStyle );
-};
-
-var cleanTransitionStyle = {
-  transitionProperty: '',
-  transitionDuration: '',
-  transitionDelay: ''
-};
-
-proto.removeTransitionStyles = function() {
-  // remove transition
-  this.css( cleanTransitionStyle );
-};
-
-// ----- stagger ----- //
-
-proto.stagger = function( delay ) {
-  delay = isNaN( delay ) ? 0 : delay;
-  this.staggerDelay = delay + 'ms';
-};
-
-// ----- show/hide/remove ----- //
-
-// remove element from DOM
-proto.removeElem = function() {
-  this.element.parentNode.removeChild( this.element );
-  // remove display: none
-  this.css({ display: '' });
-  this.emitEvent( 'remove', [ this ] );
-};
-
-proto.remove = function() {
-  // just remove element if no transition support or no transition
-  if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {
-    this.removeElem();
-    return;
-  }
-
-  // start transition
-  this.once( 'transitionEnd', function() {
-    this.removeElem();
-  });
-  this.hide();
-};
-
-proto.reveal = function() {
-  delete this.isHidden;
-  // remove display: none
-  this.css({ display: '' });
-
-  var options = this.layout.options;
-
-  var onTransitionEnd = {};
-  var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');
-  onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd;
-
-  this.transition({
-    from: options.hiddenStyle,
-    to: options.visibleStyle,
-    isCleaning: true,
-    onTransitionEnd: onTransitionEnd
-  });
-};
-
-proto.onRevealTransitionEnd = function() {
-  // check if still visible
-  // during transition, item may have been hidden
-  if ( !this.isHidden ) {
-    this.emitEvent('reveal');
-  }
-};
-
-/**
- * get style property use for hide/reveal transition end
- * @param {String} styleProperty - hiddenStyle/visibleStyle
- * @returns {String}
- */
-proto.getHideRevealTransitionEndProperty = function( styleProperty ) {
-  var optionStyle = this.layout.options[ styleProperty ];
-  // use opacity
-  if ( optionStyle.opacity ) {
-    return 'opacity';
-  }
-  // get first property
-  for ( var prop in optionStyle ) {
-    return prop;
-  }
-};
-
-proto.hide = function() {
-  // set flag
-  this.isHidden = true;
-  // remove display: none
-  this.css({ display: '' });
-
-  var options = this.layout.options;
-
-  var onTransitionEnd = {};
-  var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');
-  onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd;
-
-  this.transition({
-    from: options.visibleStyle,
-    to: options.hiddenStyle,
-    // keep hidden stuff hidden
-    isCleaning: true,
-    onTransitionEnd: onTransitionEnd
-  });
-};
-
-proto.onHideTransitionEnd = function() {
-  // check if still hidden
-  // during transition, item may have been un-hidden
-  if ( this.isHidden ) {
-    this.css({ display: 'none' });
-    this.emitEvent('hide');
-  }
-};
-
-proto.destroy = function() {
-  this.css({
-    position: '',
-    left: '',
-    right: '',
-    top: '',
-    bottom: '',
-    transition: '',
-    transform: ''
-  });
-};
-
-return Item;
-
-}));
-
-/*!
- * Outlayer v2.1.0
- * the brains and guts of a layout library
- * MIT license
- */
-
-( function( window, factory ) {
-  'use strict';
-  // universal module definition
-  /* jshint strict: false */ /* globals define, module, require */
-  if ( typeof define == 'function' && define.amd ) {
-    // AMD - RequireJS
-    define( 'outlayer/outlayer',[
-        'ev-emitter/ev-emitter',
-        'get-size/get-size',
-        'fizzy-ui-utils/utils',
-        './item'
-      ],
-      function( EvEmitter, getSize, utils, Item ) {
-        return factory( window, EvEmitter, getSize, utils, Item);
-      }
-    );
-  } else if ( typeof module == 'object' && module.exports ) {
-    // CommonJS - Browserify, Webpack
-    module.exports = factory(
-      window,
-      require('ev-emitter'),
-      require('get-size'),
-      require('fizzy-ui-utils'),
-      require('./item')
-    );
-  } else {
-    // browser global
-    window.Outlayer = factory(
-      window,
-      window.EvEmitter,
-      window.getSize,
-      window.fizzyUIUtils,
-      window.Outlayer.Item
-    );
-  }
-
-}( window, function factory( window, EvEmitter, getSize, utils, Item ) {
-'use strict';
-
-// ----- vars ----- //
-
-var console = window.console;
-var jQuery = window.jQuery;
-var noop = function() {};
-
-// -------------------------- Outlayer -------------------------- //
-
-// globally unique identifiers
-var GUID = 0;
-// internal store of all Outlayer intances
-var instances = {};
-
-
-/**
- * @param {Element, String} element
- * @param {Object} options
- * @constructor
- */
-function Outlayer( element, options ) {
-  var queryElement = utils.getQueryElement( element );
-  if ( !queryElement ) {
-    if ( console ) {
-      console.error( 'Bad element for ' + this.constructor.namespace +
-        ': ' + ( queryElement || element ) );
-    }
-    return;
-  }
-  this.element = queryElement;
-  // add jQuery
-  if ( jQuery ) {
-    this.$element = jQuery( this.element );
-  }
-
-  // options
-  this.options = utils.extend( {}, this.constructor.defaults );
-  this.option( options );
-
-  // add id for Outlayer.getFromElement
-  var id = ++GUID;
-  this.element.outlayerGUID = id; // expando
-  instances[ id ] = this; // associate via id
-
-  // kick it off
-  this._create();
-
-  var isInitLayout = this._getOption('initLayout');
-  if ( isInitLayout ) {
-    this.layout();
-  }
-}
-
-// settings are for internal use only
-Outlayer.namespace = 'outlayer';
-Outlayer.Item = Item;
-
-// default options
-Outlayer.defaults = {
-  containerStyle: {
-    position: 'relative'
-  },
-  initLayout: true,
-  originLeft: true,
-  originTop: true,
-  resize: true,
-  resizeContainer: true,
-  // item options
-  transitionDuration: '0.4s',
-  hiddenStyle: {
-    opacity: 0,
-    transform: 'scale(0.001)'
-  },
-  visibleStyle: {
-    opacity: 1,
-    transform: 'scale(1)'
-  }
-};
-
-var proto = Outlayer.prototype;
-// inherit EvEmitter
-utils.extend( proto, EvEmitter.prototype );
-
-/**
- * set options
- * @param {Object} opts
- */
-proto.option = function( opts ) {
-  utils.extend( this.options, opts );
-};
-
-/**
- * get backwards compatible option value, check old name
- */
-proto._getOption = function( option ) {
-  var oldOption = this.constructor.compatOptions[ option ];
-  return oldOption && this.options[ oldOption ] !== undefined ?
-    this.options[ oldOption ] : this.options[ option ];
-};
-
-Outlayer.compatOptions = {
-  // currentName: oldName
-  initLayout: 'isInitLayout',
-  horizontal: 'isHorizontal',
-  layoutInstant: 'isLayoutInstant',
-  originLeft: 'isOriginLeft',
-  originTop: 'isOriginTop',
-  resize: 'isResizeBound',
-  resizeContainer: 'isResizingContainer'
-};
-
-proto._create = function() {
-  // get items from children
-  this.reloadItems();
-  // elements that affect layout, but are not laid out
-  this.stamps = [];
-  this.stamp( this.options.stamp );
-  // set container style
-  utils.extend( this.element.style, this.options.containerStyle );
-
-  // bind resize method
-  var canBindResize = this._getOption('resize');
-  if ( canBindResize ) {
-    this.bindResize();
-  }
-};
-
-// goes through all children again and gets bricks in proper order
-proto.reloadItems = function() {
-  // collection of item elements
-  this.items = this._itemize( this.element.children );
-};
-
-
-/**
- * turn elements into Outlayer.Items to be used in layout
- * @param {Array or NodeList or HTMLElement} elems
- * @returns {Array} items - collection of new Outlayer Items
- */
-proto._itemize = function( elems ) {
-
-  var itemElems = this._filterFindItemElements( elems );
-  var Item = this.constructor.Item;
-
-  // create new Outlayer Items for collection
-  var items = [];
-  for ( var i=0; i < itemElems.length; i++ ) {
-    var elem = itemElems[i];
-    var item = new Item( elem, this );
-    items.push( item );
-  }
-
-  return items;
-};
-
-/**
- * get item elements to be used in layout
- * @param {Array or NodeList or HTMLElement} elems
- * @returns {Array} items - item elements
- */
-proto._filterFindItemElements = function( elems ) {
-  return utils.filterFindElements( elems, this.options.itemSelector );
-};
-
-/**
- * getter method for getting item elements
- * @returns {Array} elems - collection of item elements
- */
-proto.getItemElements = function() {
-  return this.items.map( function( item ) {
-    return item.element;
-  });
-};
-
-// ----- init & layout ----- //
-
-/**
- * lays out all items
- */
-proto.layout = function() {
-  this._resetLayout();
-  this._manageStamps();
-
-  // don't animate first layout
-  var layoutInstant = this._getOption('layoutInstant');
-  var isInstant = layoutInstant !== undefined ?
-    layoutInstant : !this._isLayoutInited;
-  this.layoutItems( this.items, isInstant );
-
-  // flag for initalized
-  this._isLayoutInited = true;
-};
-
-// _init is alias for layout
-proto._init = proto.layout;
-
-/**
- * logic before any new layout
- */
-proto._resetLayout = function() {
-  this.getSize();
-};
-
-
-proto.getSize = function() {
-  this.size = getSize( this.element );
-};
-
-/**
- * get measurement from option, for columnWidth, rowHeight, gutter
- * if option is String -> get element from selector string, & get size of element
- * if option is Element -> get size of element
- * else use option as a number
- *
- * @param {String} measurement
- * @param {String} size - width or height
- * @private
- */
-proto._getMeasurement = function( measurement, size ) {
-  var option = this.options[ measurement ];
-  var elem;
-  if ( !option ) {
-    // default to 0
-    this[ measurement ] = 0;
-  } else {
-    // use option as an element
-    if ( typeof option == 'string' ) {
-      elem = this.element.querySelector( option );
-    } else if ( option instanceof HTMLElement ) {
-      elem = option;
-    }
-    // use size of element, if element
-    this[ measurement ] = elem ? getSize( elem )[ size ] : option;
-  }
-};
-
-/**
- * layout a collection of item elements
- * @api public
- */
-proto.layoutItems = function( items, isInstant ) {
-  items = this._getItemsForLayout( items );
-
-  this._layoutItems( items, isInstant );
-
-  this._postLayout();
-};
-
-/**
- * get the items to be laid out
- * you may want to skip over some items
- * @param {Array} items
- * @returns {Array} items
- */
-proto._getItemsForLayout = function( items ) {
-  return items.filter( function( item ) {
-    return !item.isIgnored;
-  });
-};
-
-/**
- * layout items
- * @param {Array} items
- * @param {Boolean} isInstant
- */
-proto._layoutItems = function( items, isInstant ) {
-  this._emitCompleteOnItems( 'layout', items );
-
-  if ( !items || !items.length ) {
-    // no items, emit event with empty array
-    return;
-  }
-
-  var queue = [];
-
-  items.forEach( function( item ) {
-    // get x/y object from method
-    var position = this._getItemLayoutPosition( item );
-    // enqueue
-    position.item = item;
-    position.isInstant = isInstant || item.isLayoutInstant;
-    queue.push( position );
-  }, this );
-
-  this._processLayoutQueue( queue );
-};
-
-/**
- * get item layout position
- * @param {Outlayer.Item} item
- * @returns {Object} x and y position
- */
-proto._getItemLayoutPosition = function( /* item */ ) {
-  return {
-    x: 0,
-    y: 0
-  };
-};
-
-/**
- * iterate over array and position each item
- * Reason being - separating this logic prevents 'layout invalidation'
- * thx @paul_irish
- * @param {Array} queue
- */
-proto._processLayoutQueue = function( queue ) {
-  this.updateStagger();
-  queue.forEach( function( obj, i ) {
-    this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i );
-  }, this );
-};
-
-// set stagger from option in milliseconds number
-proto.updateStagger = function() {
-  var stagger = this.options.stagger;
-  if ( stagger === null || stagger === undefined ) {
-    this.stagger = 0;
-    return;
-  }
-  this.stagger = getMilliseconds( stagger );
-  return this.stagger;
-};
-
-/**
- * Sets position of item in DOM
- * @param {Outlayer.Item} item
- * @param {Number} x - horizontal position
- * @param {Number} y - vertical position
- * @param {Boolean} isInstant - disables transitions
- */
-proto._positionItem = function( item, x, y, isInstant, i ) {
-  if ( isInstant ) {
-    // if not transition, just set CSS
-    item.goTo( x, y );
-  } else {
-    item.stagger( i * this.stagger );
-    item.moveTo( x, y );
-  }
-};
-
-/**
- * Any logic you want to do after each layout,
- * i.e. size the container
- */
-proto._postLayout = function() {
-  this.resizeContainer();
-};
-
-proto.resizeContainer = function() {
-  var isResizingContainer = this._getOption('resizeContainer');
-  if ( !isResizingContainer ) {
-    return;
-  }
-  var size = this._getContainerSize();
-  if ( size ) {
-    this._setContainerMeasure( size.width, true );
-    this._setContainerMeasure( size.height, false );
-  }
-};
-
-/**
- * Sets width or height of container if returned
- * @returns {Object} size
- *   @param {Number} width
- *   @param {Number} height
- */
-proto._getContainerSize = noop;
-
-/**
- * @param {Number} measure - size of width or height
- * @param {Boolean} isWidth
- */
-proto._setContainerMeasure = function( measure, isWidth ) {
-  if ( measure === undefined ) {
-    return;
-  }
-
-  var elemSize = this.size;
-  // add padding and border width if border box
-  if ( elemSize.isBorderBox ) {
-    measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight +
-      elemSize.borderLeftWidth + elemSize.borderRightWidth :
-      elemSize.paddingBottom + elemSize.paddingTop +
-      elemSize.borderTopWidth + elemSize.borderBottomWidth;
-  }
-
-  measure = Math.max( measure, 0 );
-  this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px';
-};
-
-/**
- * emit eventComplete on a collection of items events
- * @param {String} eventName
- * @param {Array} items - Outlayer.Items
- */
-proto._emitCompleteOnItems = function( eventName, items ) {
-  var _this = this;
-  function onComplete() {
-    _this.dispatchEvent( eventName + 'Complete', null, [ items ] );
-  }
-
-  var count = items.length;
-  if ( !items || !count ) {
-    onComplete();
-    return;
-  }
-
-  var doneCount = 0;
-  function tick() {
-    doneCount++;
-    if ( doneCount == count ) {
-      onComplete();
-    }
-  }
-
-  // bind callback
-  items.forEach( function( item ) {
-    item.once( eventName, tick );
-  });
-};
-
-/**
- * emits events via EvEmitter and jQuery events
- * @param {String} type - name of event
- * @param {Event} event - original event
- * @param {Array} args - extra arguments
- */
-proto.dispatchEvent = function( type, event, args ) {
-  // add original event to arguments
-  var emitArgs = event ? [ event ].concat( args ) : args;
-  this.emitEvent( type, emitArgs );
-
-  if ( jQuery ) {
-    // set this.$element
-    this.$element = this.$element || jQuery( this.element );
-    if ( event ) {
-      // create jQuery event
-      var $event = jQuery.Event( event );
-      $event.type = type;
-      this.$element.trigger( $event, args );
-    } else {
-      // just trigger with type if no event available
-      this.$element.trigger( type, args );
-    }
-  }
-};
-
-// -------------------------- ignore & stamps -------------------------- //
-
-
-/**
- * keep item in collection, but do not lay it out
- * ignored items do not get skipped in layout
- * @param {Element} elem
- */
-proto.ignore = function( elem ) {
-  var item = this.getItem( elem );
-  if ( item ) {
-    item.isIgnored = true;
-  }
-};
-
-/**
- * return item to layout collection
- * @param {Element} elem
- */
-proto.unignore = function( elem ) {
-  var item = this.getItem( elem );
-  if ( item ) {
-    delete item.isIgnored;
-  }
-};
-
-/**
- * adds elements to stamps
- * @param {NodeList, Array, Element, or String} elems
- */
-proto.stamp = function( elems ) {
-  elems = this._find( elems );
-  if ( !elems ) {
-    return;
-  }
-
-  this.stamps = this.stamps.concat( elems );
-  // ignore
-  elems.forEach( this.ignore, this );
-};
-
-/**
- * removes elements to stamps
- * @param {NodeList, Array, or Element} elems
- */
-proto.unstamp = function( elems ) {
-  elems = this._find( elems );
-  if ( !elems ){
-    return;
-  }
-
-  elems.forEach( function( elem ) {
-    // filter out removed stamp elements
-    utils.removeFrom( this.stamps, elem );
-    this.unignore( elem );
-  }, this );
-};
-
-/**
- * finds child elements
- * @param {NodeList, Array, Element, or String} elems
- * @returns {Array} elems
- */
-proto._find = function( elems ) {
-  if ( !elems ) {
-    return;
-  }
-  // if string, use argument as selector string
-  if ( typeof elems == 'string' ) {
-    elems = this.element.querySelectorAll( elems );
-  }
-  elems = utils.makeArray( elems );
-  return elems;
-};
-
-proto._manageStamps = function() {
-  if ( !this.stamps || !this.stamps.length ) {
-    return;
-  }
-
-  this._getBoundingRect();
-
-  this.stamps.forEach( this._manageStamp, this );
-};
-
-// update boundingLeft / Top
-proto._getBoundingRect = function() {
-  // get bounding rect for container element
-  var boundingRect = this.element.getBoundingClientRect();
-  var size = this.size;
-  this._boundingRect = {
-    left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
-    top: boundingRect.top + size.paddingTop + size.borderTopWidth,
-    right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ),
-    bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth )
-  };
-};
-
-/**
- * @param {Element} stamp
-**/
-proto._manageStamp = noop;
-
-/**
- * get x/y position of element relative to container element
- * @param {Element} elem
- * @returns {Object} offset - has left, top, right, bottom
- */
-proto._getElementOffset = function( elem ) {
-  var boundingRect = elem.getBoundingClientRect();
-  var thisRect = this._boundingRect;
-  var size = getSize( elem );
-  var offset = {
-    left: boundingRect.left - thisRect.left - size.marginLeft,
-    top: boundingRect.top - thisRect.top - size.marginTop,
-    right: thisRect.right - boundingRect.right - size.marginRight,
-    bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom
-  };
-  return offset;
-};
-
-// -------------------------- resize -------------------------- //
-
-// enable event handlers for listeners
-// i.e. resize -> onresize
-proto.handleEvent = utils.handleEvent;
-
-/**
- * Bind layout to window resizing
- */
-proto.bindResize = function() {
-  window.addEventListener( 'resize', this );
-  this.isResizeBound = true;
-};
-
-/**
- * Unbind layout to window resizing
- */
-proto.unbindResize = function() {
-  window.removeEventListener( 'resize', this );
-  this.isResizeBound = false;
-};
-
-proto.onresize = function() {
-  this.resize();
-};
-
-utils.debounceMethod( Outlayer, 'onresize', 100 );
-
-proto.resize = function() {
-  // don't trigger if size did not change
-  // or if resize was unbound. See #9
-  if ( !this.isResizeBound || !this.needsResizeLayout() ) {
-    return;
-  }
-
-  this.layout();
-};
-
-/**
- * check if layout is needed post layout
- * @returns Boolean
- */
-proto.needsResizeLayout = function() {
-  var size = getSize( this.element );
-  // check that this.size and size are there
-  // IE8 triggers resize on body size change, so they might not be
-  var hasSizes = this.size && size;
-  return hasSizes && size.innerWidth !== this.size.innerWidth;
-};
-
-// -------------------------- methods -------------------------- //
-
-/**
- * add items to Outlayer instance
- * @param {Array or NodeList or Element} elems
- * @returns {Array} items - Outlayer.Items
-**/
-proto.addItems = function( elems ) {
-  var items = this._itemize( elems );
-  // add items to collection
-  if ( items.length ) {
-    this.items = this.items.concat( items );
-  }
-  return items;
-};
-
-/**
- * Layout newly-appended item elements
- * @param {Array or NodeList or Element} elems
- */
-proto.appended = function( elems ) {
-  var items = this.addItems( elems );
-  if ( !items.length ) {
-    return;
-  }
-  // layout and reveal just the new items
-  this.layoutItems( items, true );
-  this.reveal( items );
-};
-
-/**
- * Layout prepended elements
- * @param {Array or NodeList or Element} elems
- */
-proto.prepended = function( elems ) {
-  var items = this._itemize( elems );
-  if ( !items.length ) {
-    return;
-  }
-  // add items to beginning of collection
-  var previousItems = this.items.slice(0);
-  this.items = items.concat( previousItems );
-  // start new layout
-  this._resetLayout();
-  this._manageStamps();
-  // layout new stuff without transition
-  this.layoutItems( items, true );
-  this.reveal( items );
-  // layout previous items
-  this.layoutItems( previousItems );
-};
-
-/**
- * reveal a collection of items
- * @param {Array of Outlayer.Items} items
- */
-proto.reveal = function( items ) {
-  this._emitCompleteOnItems( 'reveal', items );
-  if ( !items || !items.length ) {
-    return;
-  }
-  var stagger = this.updateStagger();
-  items.forEach( function( item, i ) {
-    item.stagger( i * stagger );
-    item.reveal();
-  });
-};
-
-/**
- * hide a collection of items
- * @param {Array of Outlayer.Items} items
- */
-proto.hide = function( items ) {
-  this._emitCompleteOnItems( 'hide', items );
-  if ( !items || !items.length ) {
-    return;
-  }
-  var stagger = this.updateStagger();
-  items.forEach( function( item, i ) {
-    item.stagger( i * stagger );
-    item.hide();
-  });
-};
-
-/**
- * reveal item elements
- * @param {Array}, {Element}, {NodeList} items
- */
-proto.revealItemElements = function( elems ) {
-  var items = this.getItems( elems );
-  this.reveal( items );
-};
-
-/**
- * hide item elements
- * @param {Array}, {Element}, {NodeList} items
- */
-proto.hideItemElements = function( elems ) {
-  var items = this.getItems( elems );
-  this.hide( items );
-};
-
-/**
- * get Outlayer.Item, given an Element
- * @param {Element} elem
- * @param {Function} callback
- * @returns {Outlayer.Item} item
- */
-proto.getItem = function( elem ) {
-  // loop through items to get the one that matches
-  for ( var i=0; i < this.items.length; i++ ) {
-    var item = this.items[i];
-    if ( item.element == elem ) {
-      // return item
-      return item;
-    }
-  }
-};
-
-/**
- * get collection of Outlayer.Items, given Elements
- * @param {Array} elems
- * @returns {Array} items - Outlayer.Items
- */
-proto.getItems = function( elems ) {
-  elems = utils.makeArray( elems );
-  var items = [];
-  elems.forEach( function( elem ) {
-    var item = this.getItem( elem );
-    if ( item ) {
-      items.push( item );
-    }
-  }, this );
-
-  return items;
-};
-
-/**
- * remove element(s) from instance and DOM
- * @param {Array or NodeList or Element} elems
- */
-proto.remove = function( elems ) {
-  var removeItems = this.getItems( elems );
-
-  this._emitCompleteOnItems( 'remove', removeItems );
-
-  // bail if no items to remove
-  if ( !removeItems || !removeItems.length ) {
-    return;
-  }
-
-  removeItems.forEach( function( item ) {
-    item.remove();
-    // remove item from collection
-    utils.removeFrom( this.items, item );
-  }, this );
-};
-
-// ----- destroy ----- //
-
-// remove and disable Outlayer instance
-proto.destroy = function() {
-  // clean up dynamic styles
-  var style = this.element.style;
-  style.height = '';
-  style.position = '';
-  style.width = '';
-  // destroy items
-  this.items.forEach( function( item ) {
-    item.destroy();
-  });
-
-  this.unbindResize();
-
-  var id = this.element.outlayerGUID;
-  delete instances[ id ]; // remove reference to instance by id
-  delete this.element.outlayerGUID;
-  // remove data for jQuery
-  if ( jQuery ) {
-    jQuery.removeData( this.element, this.constructor.namespace );
-  }
-
-};
-
-// -------------------------- data -------------------------- //
-
-/**
- * get Outlayer instance from element
- * @param {Element} elem
- * @returns {Outlayer}
- */
-Outlayer.data = function( elem ) {
-  elem = utils.getQueryElement( elem );
-  var id = elem && elem.outlayerGUID;
-  return id && instances[ id ];
-};
-
-
-// -------------------------- create Outlayer class -------------------------- //
-
-/**
- * create a layout class
- * @param {String} namespace
- */
-Outlayer.create = function( namespace, options ) {
-  // sub-class Outlayer
-  var Layout = subclass( Outlayer );
-  // apply new options and compatOptions
-  Layout.defaults = utils.extend( {}, Outlayer.defaults );
-  utils.extend( Layout.defaults, options );
-  Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions  );
-
-  Layout.namespace = namespace;
-
-  Layout.data = Outlayer.data;
-
-  // sub-class Item
-  Layout.Item = subclass( Item );
-
-  // -------------------------- declarative -------------------------- //
-
-  utils.htmlInit( Layout, namespace );
-
-  // -------------------------- jQuery bridge -------------------------- //
-
-  // make into jQuery plugin
-  if ( jQuery && jQuery.bridget ) {
-    jQuery.bridget( namespace, Layout );
-  }
-
-  return Layout;
-};
-
-function subclass( Parent ) {
-  function SubClass() {
-    Parent.apply( this, arguments );
-  }
-
-  SubClass.prototype = Object.create( Parent.prototype );
-  SubClass.prototype.constructor = SubClass;
-
-  return SubClass;
-}
-
-// ----- helpers ----- //
-
-// how many milliseconds are in each unit
-var msUnits = {
-  ms: 1,
-  s: 1000
-};
-
-// munge time-like parameter into millisecond number
-// '0.4s' -> 40
-function getMilliseconds( time ) {
-  if ( typeof time == 'number' ) {
-    return time;
-  }
-  var matches = time.match( /(^\d*\.?\d*)(\w*)/ );
-  var num = matches && matches[1];
-  var unit = matches && matches[2];
-  if ( !num.length ) {
-    return 0;
-  }
-  num = parseFloat( num );
-  var mult = msUnits[ unit ] || 1;
-  return num * mult;
-}
-
-// ----- fin ----- //
-
-// back in global
-Outlayer.Item = Item;
-
-return Outlayer;
-
-}));
-
-/*!
- * Masonry v4.1.1
- * Cascading grid layout library
- * http://masonry.desandro.com
- * MIT License
- * by David DeSandro
- */
-
-( function( window, factory ) {
-  // universal module definition
-  /* jshint strict: false */ /*globals define, module, require */
-  if ( typeof define == 'function' && define.amd ) {
-    // AMD
-    define( [
-        'outlayer/outlayer',
-        'get-size/get-size'
-      ],
-      factory );
-  } else if ( typeof module == 'object' && module.exports ) {
-    // CommonJS
-    module.exports = factory(
-      require('outlayer'),
-      require('get-size')
-    );
-  } else {
-    // browser global
-    window.Masonry = factory(
-      window.Outlayer,
-      window.getSize
-    );
-  }
-
-}( window, function factory( Outlayer, getSize ) {
-
-
-
-// -------------------------- masonryDefinition -------------------------- //
-
-  // create an Outlayer layout class
-  var Masonry = Outlayer.create('masonry');
-  // isFitWidth -> fitWidth
-  Masonry.compatOptions.fitWidth = 'isFitWidth';
-
-  Masonry.prototype._resetLayout = function() {
-    this.getSize();
-    this._getMeasurement( 'columnWidth', 'outerWidth' );
-    this._getMeasurement( 'gutter', 'outerWidth' );
-    this.measureColumns();
-
-    // reset column Y
-    this.colYs = [];
-    for ( var i=0; i < this.cols; i++ ) {
-      this.colYs.push( 0 );
-    }
-
-    this.maxY = 0;
-  };
-
-  Masonry.prototype.measureColumns = function() {
-    this.getContainerWidth();
-    // if columnWidth is 0, default to outerWidth of first item
-    if ( !this.columnWidth ) {
-      var firstItem = this.items[0];
-      var firstItemElem = firstItem && firstItem.element;
-      // columnWidth fall back to item of first element
-      this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
-        // if first elem has no width, default to size of container
-        this.containerWidth;
-    }
-
-    var columnWidth = this.columnWidth += this.gutter;
-
-    // calculate columns
-    var containerWidth = this.containerWidth + this.gutter;
-    var cols = containerWidth / columnWidth;
-    // fix rounding errors, typically with gutters
-    var excess = columnWidth - containerWidth % columnWidth;
-    // if overshoot is less than a pixel, round up, otherwise floor it
-    var mathMethod = excess && excess < 1 ? 'round' : 'floor';
-    cols = Math[ mathMethod ]( cols );
-    this.cols = Math.max( cols, 1 );
-  };
-
-  Masonry.prototype.getContainerWidth = function() {
-    // container is parent if fit width
-    var isFitWidth = this._getOption('fitWidth');
-    var container = isFitWidth ? this.element.parentNode : this.element;
-    // check that this.size and size are there
-    // IE8 triggers resize on body size change, so they might not be
-    var size = getSize( container );
-    this.containerWidth = size && size.innerWidth;
-  };
-
-  Masonry.prototype._getItemLayoutPosition = function( item ) {
-    item.getSize();
-    // how many columns does this brick span
-    var remainder = item.size.outerWidth % this.columnWidth;
-    var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
-    // round if off by 1 pixel, otherwise use ceil
-    var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
-    colSpan = Math.min( colSpan, this.cols );
-
-    var colGroup = this._getColGroup( colSpan );
-    // get the minimum Y value from the columns
-    var minimumY = Math.min.apply( Math, colGroup );
-    var shortColIndex = colGroup.indexOf( minimumY );
-
-    // position the brick
-    var position = {
-      x: this.columnWidth * shortColIndex,
-      y: minimumY
-    };
-
-    // apply setHeight to necessary columns
-    var setHeight = minimumY + item.size.outerHeight;
-    var setSpan = this.cols + 1 - colGroup.length;
-    for ( var i = 0; i < setSpan; i++ ) {
-      this.colYs[ shortColIndex + i ] = setHeight;
-    }
-
-    return position;
-  };
-
-  /**
-   * @param {Number} colSpan - number of columns the element spans
-   * @returns {Array} colGroup
-   */
-  Masonry.prototype._getColGroup = function( colSpan ) {
-    if ( colSpan < 2 ) {
-      // if brick spans only one column, use all the column Ys
-      return this.colYs;
-    }
-
-    var colGroup = [];
-    // how many different places could this brick fit horizontally
-    var groupCount = this.cols + 1 - colSpan;
-    // for each group potential horizontal position
-    for ( var i = 0; i < groupCount; i++ ) {
-      // make an array of colY values for that one group
-      var groupColYs = this.colYs.slice( i, i + colSpan );
-      // and get the max value of the array
-      colGroup[i] = Math.max.apply( Math, groupColYs );
-    }
-    return colGroup;
-  };
-
-  Masonry.prototype._manageStamp = function( stamp ) {
-    var stampSize = getSize( stamp );
-    var offset = this._getElementOffset( stamp );
-    // get the columns that this stamp affects
-    var isOriginLeft = this._getOption('originLeft');
-    var firstX = isOriginLeft ? offset.left : offset.right;
-    var lastX = firstX + stampSize.outerWidth;
-    var firstCol = Math.floor( firstX / this.columnWidth );
-    firstCol = Math.max( 0, firstCol );
-    var lastCol = Math.floor( lastX / this.columnWidth );
-    // lastCol should not go over if multiple of columnWidth #425
-    lastCol -= lastX % this.columnWidth ? 0 : 1;
-    lastCol = Math.min( this.cols - 1, lastCol );
-    // set colYs to bottom of the stamp
-
-    var isOriginTop = this._getOption('originTop');
-    var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
-      stampSize.outerHeight;
-    for ( var i = firstCol; i <= lastCol; i++ ) {
-      this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
-    }
-  };
-
-  Masonry.prototype._getContainerSize = function() {
-    this.maxY = Math.max.apply( Math, this.colYs );
-    var size = {
-      height: this.maxY
-    };
-
-    if ( this._getOption('fitWidth') ) {
-      size.width = this._getContainerFitWidth();
-    }
-
-    return size;
-  };
-
-  Masonry.prototype._getContainerFitWidth = function() {
-    var unusedCols = 0;
-    // count unused columns
-    var i = this.cols;
-    while ( --i ) {
-      if ( this.colYs[i] !== 0 ) {
-        break;
-      }
-      unusedCols++;
-    }
-    // fit container to columns that have been used
-    return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
-  };
-
-  Masonry.prototype.needsResizeLayout = function() {
-    var previousWidth = this.containerWidth;
-    this.getContainerWidth();
-    return previousWidth != this.containerWidth;
-  };
-
-  return Masonry;
-
-}));
-

From e85cd9eedef18e2109ca8578380bcc91578b14f3 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 1 Feb 2017 18:42:47 +0000
Subject: [PATCH 50/53] Removed duplicated test

---
 spec/javascripts/lib/utils/text_utility_spec.js.es6 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/javascripts/lib/utils/text_utility_spec.js.es6 b/spec/javascripts/lib/utils/text_utility_spec.js.es6
index 329e18f405a..f7d627ceac5 100644
--- a/spec/javascripts/lib/utils/text_utility_spec.js.es6
+++ b/spec/javascripts/lib/utils/text_utility_spec.js.es6
@@ -27,7 +27,7 @@
         expect(gl.text.pluralize('test', 2)).toBe('tests');
       });
 
-      it('returns pluralized', () => {
+      it('returns pluralized when count is 0', () => {
         expect(gl.text.pluralize('test', 0)).toBe('tests');
       });
 

From 8c5e50e12b72ca4a80dab02534739bde6e5a9eb5 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 3 Feb 2017 13:17:11 +0000
Subject: [PATCH 51/53] Fixed remove btn error after creating new issue in list

---
 app/assets/javascripts/boards/components/board_new_issue.js.es6 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6
index 2386d3a613c..b5c14a198ba 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js.es6
+++ b/app/assets/javascripts/boards/components/board_new_issue.js.es6
@@ -37,6 +37,7 @@
             $(this.$refs.submitButton).enable();
 
             Store.detail.issue = issue;
+            Store.detail.list = this.list;
           })
           .catch(() => {
             // Need this because our jQuery very kindly disables buttons on ALL form submissions

From fee064be01e6e37076b9af4028ade12a2ce0180a Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 3 Feb 2017 14:48:31 +0000
Subject: [PATCH 52/53] Fixed modal lists dropdown not updating when list is
 deleted

---
 .../javascripts/boards/boards_bundle.js.es6   |  4 ----
 .../components/modal/lists_dropdown.js.es6    |  5 ++++-
 .../boards/stores/modal_store.js.es6          |  2 +-
 spec/features/boards/add_issues_modal_spec.rb | 21 +++++++++++++++++++
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 4ac91786762..529ea9aec5b 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -71,10 +71,6 @@ $(() => {
 
           Store.addBlankState();
           this.loading = false;
-
-          if (this.state.lists.length > 0) {
-            ModalStore.store.selectedList = this.state.lists[0];
-          }
         });
     }
   });
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index 96f12da3753..3c05120a2da 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -11,9 +11,12 @@
     },
     computed: {
       selected() {
-        return this.modal.selectedList;
+        return this.modal.selectedList || this.state.lists[0];
       },
     },
+    destroyed() {
+      this.modal.selectedList = null;
+    },
     template: `
       <div class="dropdown inline">
         <button
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index fa46b6135e0..73518b42b84 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -11,7 +11,7 @@
         selectedIssues: [],
         showAddIssuesModal: false,
         activeTab: 'all',
-        selectedList: {},
+        selectedList: null,
         searchTerm: '',
         loading: false,
         loadingNewPage: false,
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index b953480cec2..2875fc1e533 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -76,6 +76,27 @@ describe 'Issue Boards add issue modal', :feature, :js do
       end
     end
 
+    context 'list dropdown' do
+      it 'resets after deleting list' do
+        page.within('.add-issues-modal') do
+          expect(find('.add-issues-footer')).to have_button(planning.title)
+
+          click_button 'Cancel'
+        end
+
+        first('.board-delete').click
+
+        click_button('Add issues')
+
+        wait_for_vue_resource
+
+        page.within('.add-issues-modal') do
+          expect(find('.add-issues-footer')).not_to have_button(planning.title)
+          expect(find('.add-issues-footer')).to have_button(label.title)
+        end
+      end
+    end
+
     context 'search' do
       it 'returns issues' do
         page.within('.add-issues-modal') do

From a810e2e2f28cdc5f204717f5caf24e4e9db4d22b Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 3 Feb 2017 16:05:15 +0000
Subject: [PATCH 53/53] Fixed adding to list bug

---
 .../javascripts/boards/components/modal/footer.js.es6      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 4085a22b25a..a71d71106b4 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -8,7 +8,10 @@
   gl.issueBoards.ModalFooter = Vue.extend({
     mixins: [gl.issueBoards.ModalMixins],
     data() {
-      return ModalStore.store;
+      return {
+        modal: ModalStore.store,
+        state: gl.issueBoards.BoardsStore.state,
+      };
     },
     computed: {
       submitDisabled() {
@@ -22,7 +25,7 @@
     },
     methods: {
       addIssues() {
-        const list = this.selectedList;
+        const list = this.modal.selectedList || this.state.lists[0];
         const selectedIssues = ModalStore.getSelectedIssues();
         const issueIds = selectedIssues.map(issue => issue.globalId);