Commit 1fae4d81 authored by Phil Hughes's avatar Phil Hughes Committed by Fatih Acet

Added masonry layout

Possibly need to change masonry library but so far it is the only one I found that works well
parent 94c07c21
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
//= require vue //= require vue
//= require vue-resource //= require vue-resource
//= require Sortable //= require Sortable
//= require masonry
//= require_tree ./models //= require_tree ./models
//= require_tree ./stores //= require_tree ./stores
//= require_tree ./services //= require_tree ./services
......
...@@ -10,11 +10,39 @@ ...@@ -10,11 +10,39 @@
data() { data() {
return Store.modal; return Store.modal;
}, },
watch: {
activeTab() {
this.$nextTick(() => {
this.destroyMasonry();
this.initMasonry();
});
},
},
computed: { computed: {
loading() { loading() {
return this.issues.length === 0; 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() { mounted() {
gl.boardService.getBacklog() gl.boardService.getBacklog()
.then((res) => { .then((res) => {
...@@ -23,8 +51,16 @@ ...@@ -23,8 +51,16 @@
data.forEach((issueObj) => { data.forEach((issueObj) => {
this.issues.push(new ListIssue(issueObj)); this.issues.push(new ListIssue(issueObj));
}); });
this.$nextTick(() => {
this.initMasonry();
});
}); });
}, },
destroyed() {
this.issues = [];
this.destroyMasonry();
},
components: { components: {
'issue-card-inner': gl.issueBoards.IssueCardInner, 'issue-card-inner': gl.issueBoards.IssueCardInner,
}, },
...@@ -33,18 +69,25 @@ ...@@ -33,18 +69,25 @@
<i <i
class="fa fa-spinner fa-spin" class="fa fa-spinner fa-spin"
v-if="loading"></i> v-if="loading"></i>
<ul <div
class="add-issues-list-columns list-unstyled" class="add-issues-list-columns list-unstyled"
v-if="!loading"> ref="list"
<li v-show="!loading">
<div
v-for="issue in issues"
v-if="showIssue(issue)"
class="card-parent">
<div
class="card" class="card"
v-for="issue in issues"> :class="{ 'is-active': issue.selected }"
@click="toggleIssue(issue)">
<issue-card-inner <issue-card-inner
:issue="issue" :issue="issue"
:issue-link-base="'/'"> :issue-link-base="'/'">
</issue-card-inner> </issue-card-inner>
</li> </div>
</ul> </div>
</div>
</section> </section>
`, `,
}); });
......
...@@ -14,6 +14,19 @@ ...@@ -14,6 +14,19 @@
this.activeTab = tab; this.activeTab = tab;
}, },
}, },
computed: {
selectedCount() {
let count = 0;
this.issues.forEach((issue) => {
if (issue.selected) {
count += 1;
}
});
return count;
},
},
template: ` template: `
<div class="top-area"> <div class="top-area">
<ul class="nav-links issues-state-filters"> <ul class="nav-links issues-state-filters">
...@@ -35,7 +48,7 @@ ...@@ -35,7 +48,7 @@
@click.prevent="changeTab('selected')"> @click.prevent="changeTab('selected')">
<span>Selected issues</span> <span>Selected issues</span>
<span class="badge"> <span class="badge">
0 {{ selectedCount }}
</span> </span>
</a> </a>
</li> </li>
......
...@@ -12,6 +12,7 @@ class ListIssue { ...@@ -12,6 +12,7 @@ class ListIssue {
this.dueDate = obj.due_date; this.dueDate = obj.due_date;
this.subscribed = obj.subscribed; this.subscribed = obj.subscribed;
this.labels = []; this.labels = [];
this.selected = false;
if (obj.assignee) { if (obj.assignee) {
this.assignee = new ListUser(obj.assignee); this.assignee = new ListUser(obj.assignee);
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
}, },
modal: { modal: {
issues: [], issues: [],
showAddIssuesModal: false, showAddIssuesModal: true,
activeTab: 'all', activeTab: 'all',
}, },
moving: { moving: {
......
...@@ -390,10 +390,16 @@ ...@@ -390,10 +390,16 @@
.top-area { .top-area {
margin-bottom: 10px; margin-bottom: 10px;
} }
.form-control {
margin-bottom: 10px;
}
} }
.add-issues-list { .add-issues-list {
flex: 1; flex: 1;
margin-left: -$gl-vert-padding;
margin-right: -$gl-vert-padding;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -406,8 +412,12 @@ ...@@ -406,8 +412,12 @@
} }
.add-issues-list-columns { .add-issues-list-columns {
padding-left: 5px; .card-parent {
padding-right: 5px; width: (100% / 3);
margin-left: -5px; padding: 0 $gl-vert-padding ($gl-vert-padding * 2);
margin-right: -5px; }
.card {
cursor: pointer;
}
} }
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment