Skip to content

G
gitlab-ce
Commit aef3aec5 authored by Simon Knox's avatar Simon Knox
Browse files
Options

allow animating both the new issue form, and the list below it 

disable animations for now
parent e52ab81f
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 99 deletions
app/assets/javascripts/boards/components/board_list.js
View file @ aef3aec5
...@@ -163,20 +163,21 @@ export default { ...@@ -163,20 +163,21 @@ export default {
this.$refs.list.removeEventListener('scroll', this.onScroll); this.$refs.list.removeEventListener('scroll', this.onScroll);
}, },
template: ` template: `
<div class="board-list-component"> <transition-group tag="div" class="board-list-component">
<div <div
key="loading"
class="board-list-loading text-center" class="board-list-loading text-center"
aria-label="Loading issues" aria-label="Loading issues"
v-if="loading"> v-if="loading">
<loading-icon /> <loading-icon />
</div> </div>
<transition name="slide-down"> <board-new-issue
<board-new-issue key="newIssue"
:group-id="groupId" :group-id="groupId"
:list="list" :list="list"
v-if="list.type !== 'closed' && showIssueForm"/> v-if="list.type !== 'closed' && showIssueForm"/>
</transition>
<ul <ul
key="list"
class="board-list" class="board-list"
v-show="!loading" v-show="!loading"
ref="list" ref="list"
...@@ -211,6 +212,6 @@ export default { ...@@ -211,6 +212,6 @@ export default {
</span> </span>
</li> </li>
</ul> </ul>
</div> </transition-group>
`, `,
}; };
app/assets/javascripts/boards/components/board_new_issue.js
View file @ aef3aec5
...@@ -23,7 +23,6 @@ export default { ...@@ -23,7 +23,6 @@ export default {
title: '', title: '',
loading: true, loading: true,
selectedProject: {}, selectedProject: {},
projects: [],
error: false, error: false,
}; };
}, },
...@@ -126,67 +125,71 @@ export default { ...@@ -126,67 +125,71 @@ export default {
} }
}, },
template: ` template: `
<div class="card board-new-issue-form"> <div class="board-new-issue-form">
<form @submit="submit($event)"> <div class="card">
<div class="flash-container" <form @submit="submit($event)">
v-if="error"> <div class="flash-container"
<div class="flash-alert"> v-if="error">
An error occured. Please try again. <div class="flash-alert">
An error occured. Please try again.
</div>
</div> </div>
</div> <label class="label-light"
<label class="label-light" :for="list.id + '-title'">
:for="list.id + '-title'"> Title
Title
</label>
<input class="form-control"
type="text"
v-model="title"
ref="input"
autocomplete="off"
:id="list.id + '-title'" />
<template v-if="groupId">
<label class="label-light prepend-top-10"
:for="list.id + '-project'">
Project
</label> </label>
<div ref="projectsDropdown" class="dropdown"> <input class="form-control"
<button type="text"
class="dropdown-menu-toggle wide" v-model="title"
type="button" ref="input"
data-toggle="dropdown" autocomplete="off"
aria-expanded="false"> :id="list.id + '-title'" />
{{ selectedProjectName }} <template v-if="groupId">
<i class="fa fa-chevron-down" aria-hidden="true"></i> <label class="label-light prepend-top-10"
</button> :for="list.id + '-project'">
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width"> Project
<div class="dropdown-title"> </label>
<span>Projects</span> <div ref="projectsDropdown" class="dropdown">
<button aria-label="Close" type="button" class="dropdown-title-button dropdown-menu-close"> <button
<i aria-hidden="true" data-hidden="true" class="fa fa-times dropdown-menu-close-icon"></i> class="dropdown-menu-toggle wide"
</button> type="button"
</div> data-toggle="dropdown"
<div class="dropdown-input"> aria-expanded="false">
<input class="dropdown-input-field"> {{ selectedProjectName }}
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
<div class="dropdown-title">
<span>Projects</span>
<button aria-label="Close" type="button" class="dropdown-title-button dropdown-menu-close">
<i aria-hidden="true" data-hidden="true" class="fa fa-times dropdown-menu-close-icon"></i>
</button>
</div>
<div class="dropdown-input">
<input class="dropdown-input-field">
</div>
<div class="dropdown-content"></div>
<div class="dropdown-loading">
<loading-icon />
</div>
</div> </div>
<div class="dropdown-content"></div>
<div class="dropdown-loading"></div>
</div> </div>
</template>
<div class="clearfix prepend-top-10">
<button class="btn btn-success pull-left"
type="submit"
:disabled="disabled"
ref="submit-button">
Submit issue
</button>
<button class="btn btn-default pull-right"
type="button"
@click="cancel">
Cancel
</button>
</div> </div>
</template> </form>
<div class="clearfix prepend-top-10"> </div>
<button class="btn btn-success pull-left"
type="submit"
:disabled="disabled"
ref="submit-button">
Submit issue
</button>
<button class="btn btn-default pull-right"
type="button"
@click="cancel">
Cancel
</button>
</div>
</form>
</div> </div>
`, `,
}; };
app/assets/stylesheets/pages/boards.scss
View file @ aef3aec5
...@@ -262,43 +262,10 @@ ...@@ -262,43 +262,10 @@
} }
} }
.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; overflow: hidden;
position: relative;
} }
.board-list { .board-list {
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7