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 @@
//= require vue
//= require vue-resource
//= require Sortable
//= require masonry
//= require_tree ./models
//= require_tree ./stores
//= require_tree ./services
......
......@@ -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>
`,
});
......
......@@ -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>
......
......@@ -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);
......
......@@ -14,7 +14,7 @@
},
modal: {
issues: [],
showAddIssuesModal: false,
showAddIssuesModal: true,
activeTab: 'all',
},
moving: {
......
......@@ -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;
}
}
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