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