lab.nexedi.com will be down from Thursday, 20 March 2025, 07:30:00 UTC for a duration of approximately 2 hours

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