Commit 9c2f8284 authored by Phil Hughes's avatar Phil Hughes

Merge branch '31633-animate-issue' into 'master'

animate adding issue to boards

Closes #31633

See merge request !11785
parents eebd18c3 854e9de9
......@@ -57,6 +57,9 @@ export default {
scrollTop() {
return this.$refs.list.scrollTop + this.listHeight();
},
scrollToTop() {
this.$refs.list.scrollTop = 0;
},
loadNextPage() {
const getIssues = this.list.nextPage();
const loadingDone = () => {
......@@ -108,6 +111,7 @@ export default {
},
created() {
eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
},
mounted() {
const options = gl.issueBoards.getBoardSortableDefaultOptions({
......@@ -150,6 +154,7 @@ export default {
},
beforeDestroy() {
eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
this.$refs.list.removeEventListener('scroll', this.onScroll);
},
template: `
......@@ -160,9 +165,11 @@ export default {
v-if="loading">
<loading-icon />
</div>
<board-new-issue
:list="list"
v-if="list.type !== 'closed' && showIssueForm"/>
<transition name="slide-down">
<board-new-issue
:list="list"
v-if="list.type !== 'closed' && showIssueForm"/>
</transition>
<ul
class="board-list"
v-show="!loading"
......
......@@ -48,6 +48,7 @@ export default {
this.error = true;
});
eventHub.$emit(`scroll-board-list-${this.list.id}`);
this.cancel();
},
cancel() {
......@@ -75,6 +76,7 @@ export default {
type="text"
v-model="title"
ref="input"
autocomplete="off"
:id="list.id + '-title'" />
<div class="clearfix prepend-top-10">
<button class="btn btn-success pull-left"
......
......@@ -103,13 +103,19 @@ class List {
}
newIssue (issue) {
this.addIssue(issue);
this.addIssue(issue, null, 0);
this.issuesSize += 1;
return gl.boardService.newIssue(this.id, issue)
.then((resp) => {
const data = resp.json();
issue.id = data.iid;
})
.then(() => {
if (this.issuesSize > 1) {
const moveBeforeIid = this.issues[1].id;
gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeIid);
}
});
}
......
......@@ -22,6 +22,7 @@ gl.issueBoards.BoardsStore = {
create () {
this.state.lists = [];
this.filter.path = gl.utils.getUrlParamsArray().join('&');
this.detail = { issue: {} };
},
addList (listObj, defaultAvatar) {
const list = new List(listObj, defaultAvatar);
......
......@@ -175,21 +175,53 @@
}
}
.slide-down-enter {
transform: translateY(-100%);
}
.slide-down-enter-active {
transition: transform $fade-in-duration;
+ .board-list {
transform: translateY(-136px);
transition: none;
}
}
.slide-down-enter-to {
+ .board-list {
transform: translateY(0);
transition: transform $fade-in-duration ease;
}
}
.slide-down-leave {
transform: translateY(0);
}
.slide-down-leave-active {
transition: all $fade-in-duration;
transform: translateY(-136px);
+ .board-list {
transition: transform $fade-in-duration ease;
transform: translateY(-136px);
}
}
.board-list-component {
height: calc(100% - 49px);
overflow: hidden;
}
.board-list {
height: 100%;
width: 100%;
margin-bottom: 0;
padding: 5px;
list-style: none;
overflow-y: scroll;
overflow-x: hidden;
&.is-smaller {
height: calc(100% - 136px);
}
}
.board-list-loading {
......@@ -351,6 +383,7 @@
}
.board-new-issue-form {
z-index: 1;
margin: 5px;
}
......
---
title: animate adding issue to boards
merge_request:
author:
......@@ -19,6 +19,7 @@ describe('Issue boards new issue form', () => {
};
},
};
const submitIssue = () => {
vm.$el.querySelector('.btn-success').click();
};
......@@ -107,7 +108,7 @@ describe('Issue boards new issue form', () => {
setTimeout(() => {
submitIssue();
expect(vm.$el.querySelector('.btn-success').disbled).not.toBe(true);
expect(vm.$el.querySelector('.btn-success').disabled).toBe(false);
done();
}, 0);
});
......@@ -115,36 +116,43 @@ describe('Issue boards new issue form', () => {
it('clears title after submit', (done) => {
vm.title = 'submit issue';
setTimeout(() => {
Vue.nextTick(() => {
submitIssue();
expect(vm.title).toBe('');
done();
}, 0);
setTimeout(() => {
expect(vm.title).toBe('');
done();
}, 0);
});
});
it('adds new issue to list after submit', (done) => {
it('adds new issue to top of list after submit request', (done) => {
vm.title = 'submit issue';
setTimeout(() => {
submitIssue();
expect(list.issues.length).toBe(2);
expect(list.issues[1].title).toBe('submit issue');
expect(list.issues[1].subscribed).toBe(true);
done();
setTimeout(() => {
expect(list.issues.length).toBe(2);
expect(list.issues[0].title).toBe('submit issue');
expect(list.issues[0].subscribed).toBe(true);
done();
}, 0);
}, 0);
});
it('sets detail issue after submit', (done) => {
expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe(undefined);
vm.title = 'submit issue';
setTimeout(() => {
submitIssue();
expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
done();
});
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
done();
}, 0);
}, 0);
});
it('sets detail list after submit', (done) => {
......@@ -153,8 +161,10 @@ describe('Issue boards new issue form', () => {
setTimeout(() => {
submitIssue();
expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
done();
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
done();
}, 0);
}, 0);
});
});
......@@ -169,13 +179,12 @@ describe('Issue boards new issue form', () => {
setTimeout(() => {
expect(list.issues.length).toBe(1);
done();
}, 500);
}, 0);
}, 0);
});
it('shows error', (done) => {
vm.title = 'error';
submitIssue();
setTimeout(() => {
submitIssue();
......@@ -183,7 +192,7 @@ describe('Issue boards new issue form', () => {
setTimeout(() => {
expect(vm.error).toBe(true);
done();
}, 500);
}, 0);
}, 0);
});
});
......
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