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