Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
1505fc3a
Commit
1505fc3a
authored
Nov 04, 2016
by
Phil Hughes
Committed by
Fatih Acet
Nov 10, 2016
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Refactor of issue boards to work with Vue2
parent
a1fc04df
Changes
16
Hide whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
225 additions
and
234 deletions
+225
-234
app/assets/javascripts/boards/boards_bundle.js.es6
app/assets/javascripts/boards/boards_bundle.js.es6
+6
-2
app/assets/javascripts/boards/components/board.js.es6
app/assets/javascripts/boards/components/board.js.es6
+3
-11
app/assets/javascripts/boards/components/board_card.js.es6
app/assets/javascripts/boards/components/board_card.js.es6
+1
-5
app/assets/javascripts/boards/components/board_list.js.es6
app/assets/javascripts/boards/components/board_list.js.es6
+16
-6
app/assets/javascripts/boards/components/board_new_issue.js.es6
...sets/javascripts/boards/components/board_new_issue.js.es6
+5
-9
app/assets/javascripts/boards/components/new_list_dropdown.js.es6
...ts/javascripts/boards/components/new_list_dropdown.js.es6
+51
-46
app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
...javascripts/boards/mixins/sortable_default_options.js.es6
+1
-1
app/assets/javascripts/boards/stores/boards_store.js.es6
app/assets/javascripts/boards/stores/boards_store.js.es6
+2
-0
app/assets/stylesheets/pages/boards.scss
app/assets/stylesheets/pages/boards.scss
+6
-2
app/views/projects/boards/_show.html.haml
app/views/projects/boards/_show.html.haml
+28
-0
app/views/projects/boards/components/_blank_state.html.haml
app/views/projects/boards/components/_blank_state.html.haml
+1
-1
app/views/projects/boards/components/_board.html.haml
app/views/projects/boards/components/_board.html.haml
+33
-79
app/views/projects/boards/components/_board_list.html.haml
app/views/projects/boards/components/_board_list.html.haml
+44
-0
app/views/projects/boards/components/_card.html.haml
app/views/projects/boards/components/_card.html.haml
+26
-36
app/views/projects/boards/index.html.haml
app/views/projects/boards/index.html.haml
+1
-18
app/views/projects/boards/show.html.haml
app/views/projects/boards/show.html.haml
+1
-18
No files found.
app/assets/javascripts/boards/boards_bundle.js.es6
View file @
1505fc3a
...
@@ -22,6 +22,8 @@ $(() => {
...
@@ -22,6 +22,8 @@ $(() => {
gl.IssueBoardsApp.$destroy(true);
gl.IssueBoardsApp.$destroy(true);
}
}
Store.create();
gl.IssueBoardsApp = new Vue({
gl.IssueBoardsApp = new Vue({
el: $boardApp,
el: $boardApp,
components: {
components: {
...
@@ -37,11 +39,10 @@ $(() => {
...
@@ -37,11 +39,10 @@ $(() => {
issueLinkBase: $boardApp.dataset.issueLinkBase,
issueLinkBase: $boardApp.dataset.issueLinkBase,
detailIssue: Store.detail
detailIssue: Store.detail
},
},
beforeCreate: Store.create.bind(Store),
computed: {
computed: {
detailIssueVisible () {
detailIssueVisible () {
return Object.keys(this.detailIssue.issue).length;
return Object.keys(this.detailIssue.issue).length;
}
}
,
},
},
created () {
created () {
gl.boardService = new BoardService(this.endpoint, this.boardId);
gl.boardService = new BoardService(this.endpoint, this.boardId);
...
@@ -70,6 +71,9 @@ $(() => {
...
@@ -70,6 +71,9 @@ $(() => {
el: '#js-boards-seach',
el: '#js-boards-seach',
data: {
data: {
filters: Store.state.filters
filters: Store.state.filters
},
mounted () {
gl.issueBoards.newListDropdownInit();
}
}
});
});
});
});
app/assets/javascripts/boards/components/board.js.es6
View file @
1505fc3a
...
@@ -10,6 +10,7 @@
...
@@ -10,6 +10,7 @@
window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.Board = Vue.extend({
gl.issueBoards.Board = Vue.extend({
template: '#js-board-template',
components: {
components: {
'board-list': gl.issueBoards.BoardList,
'board-list': gl.issueBoards.BoardList,
'board-delete': gl.issueBoards.BoardDelete,
'board-delete': gl.issueBoards.BoardDelete,
...
@@ -24,7 +25,6 @@
...
@@ -24,7 +25,6 @@
return {
return {
detailIssue: Store.detail,
detailIssue: Store.detail,
filters: Store.state.filters,
filters: Store.state.filters,
showIssueForm: false
};
};
},
},
watch: {
watch: {
...
@@ -58,7 +58,7 @@
...
@@ -58,7 +58,7 @@
},
},
methods: {
methods: {
showNewIssueForm() {
showNewIssueForm() {
this.
showIssueForm = !this
.showIssueForm;
this.
$refs['board-list'].showIssueForm = !this.$refs['board-list']
.showIssueForm;
}
}
},
},
mounted () {
mounted () {
...
@@ -72,13 +72,9 @@
...
@@ -72,13 +72,9 @@
if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
const order = this.sortable.toArray(),
const order = this.sortable.toArray(),
$board = this.$parent.$refs.board[e.oldIndex + 1],
list = Store.findList('id', parseInt(e.item.dataset.id));
list = $board.list;
$board.$destroy(true);
this.$nextTick(() => {
this.$nextTick(() => {
Store.state.lists.splice(e.newIndex, 0, list);
Store.moveList(list, order);
Store.moveList(list, order);
});
});
}
}
...
@@ -87,9 +83,5 @@
...
@@ -87,9 +83,5 @@
this.sortable = Sortable.create(this.$el.parentNode, options);
this.sortable = Sortable.create(this.$el.parentNode, options);
},
},
beforeDestroy () {
const index = Store.state.lists.indexOf(this.list);
Store.state.lists.splice(index, 1);
}
});
});
})();
})();
app/assets/javascripts/boards/components/board_card.js.es6
View file @
1505fc3a
...
@@ -6,6 +6,7 @@
...
@@ -6,6 +6,7 @@
window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardCard = Vue.extend({
gl.issueBoards.BoardCard = Vue.extend({
template: '#js-board-list-card',
props: {
props: {
list: Object,
list: Object,
issue: Object,
issue: Object,
...
@@ -53,11 +54,6 @@
...
@@ -53,11 +54,6 @@
mouseDown () {
mouseDown () {
this.showDetail = true;
this.showDetail = true;
},
},
mouseMove () {
if (this.showDetail) {
this.showDetail = false;
}
},
showIssue (e) {
showIssue (e) {
const targetTagName = e.target.tagName.toLowerCase();
const targetTagName = e.target.tagName.toLowerCase();
...
...
app/assets/javascripts/boards/components/board_list.js.es6
View file @
1505fc3a
...
@@ -9,6 +9,7 @@
...
@@ -9,6 +9,7 @@
window.gl.issueBoards = window.gl.issueBoards || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardList = Vue.extend({
gl.issueBoards.BoardList = Vue.extend({
template: '#js-board-list-template',
components: {
components: {
'board-card': gl.issueBoards.BoardCard,
'board-card': gl.issueBoards.BoardCard,
'board-new-issue': gl.issueBoards.BoardNewIssue
'board-new-issue': gl.issueBoards.BoardNewIssue
...
@@ -19,13 +20,13 @@
...
@@ -19,13 +20,13 @@
issues: Array,
issues: Array,
loading: Boolean,
loading: Boolean,
issueLinkBase: String,
issueLinkBase: String,
showIssueForm: Boolean
},
},
data () {
data () {
return {
return {
scrollOffset: 250,
scrollOffset: 250,
filters: Store.state.filters,
filters: Store.state.filters,
showCount: false
showCount: false,
showIssueForm: false
};
};
},
},
watch: {
watch: {
...
@@ -51,6 +52,11 @@
...
@@ -51,6 +52,11 @@
});
});
}
}
},
},
computed: {
orderedIssues () {
return _.sortBy(this.issues, 'priority');
},
},
methods: {
methods: {
listHeight () {
listHeight () {
return this.$refs.list.getBoundingClientRect().height;
return this.$refs.list.getBoundingClientRect().height;
...
@@ -81,17 +87,21 @@
...
@@ -81,17 +87,21 @@
onStart: (e) => {
onStart: (e) => {
const card = this.$refs.issue[e.oldIndex];
const card = this.$refs.issue[e.oldIndex];
card.showDetail = false;
Store.moving.issue = card.issue;
Store.moving.issue = card.issue;
Store.moving.list = card.list;
Store.moving.list = card.list;
gl.issueBoards.onStart();
gl.issueBoards.onStart();
},
},
onAdd: (e) => {
onAdd: (e) => {
gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
// Add the element back to original list to allow Vue to handle DOM updates
e.from.appendChild(e.item);
this.$nextTick(() => {
// Update the issues once we know the element has been moved
gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
});
},
},
onRemove: (e) => {
this.$refs.issue[e.oldIndex].$destroy(true);
}
});
});
this.sortable = Sortable.create(this.$refs.list, options);
this.sortable = Sortable.create(this.$refs.list, options);
...
...
app/assets/javascripts/boards/components/board_new_issue.js.es6
View file @
1505fc3a
...
@@ -7,7 +7,6 @@
...
@@ -7,7 +7,6 @@
gl.issueBoards.BoardNewIssue = Vue.extend({
gl.issueBoards.BoardNewIssue = Vue.extend({
props: {
props: {
list: Object,
list: Object,
showIssueForm: Boolean
},
},
data() {
data() {
return {
return {
...
@@ -15,11 +14,6 @@
...
@@ -15,11 +14,6 @@
error: false
error: false
};
};
},
},
watch: {
showIssueForm () {
this.$refs.input.focus();
}
},
methods: {
methods: {
submit(e) {
submit(e) {
e.preventDefault();
e.preventDefault();
...
@@ -50,15 +44,17 @@
...
@@ -50,15 +44,17 @@
// Show error message
// Show error message
this.error = true;
this.error = true;
this.showIssueForm = true;
});
});
this.cancel();
this.cancel();
},
},
cancel() {
cancel() {
this.showIssueForm = false;
this.title = '';
this.title = '';
this.$parent.showIssueForm = false;
}
}
}
},
mounted() {
this.$refs.input.focus();
},
});
});
})();
})();
app/assets/javascripts/boards/components/new_list_dropdown.js.es6
View file @
1505fc3a
/* eslint-disable */
/* eslint-disable */
$(() => {
(() => {
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
const Store = gl.issueBoards.BoardsStore;
const Store = gl.issueBoards.BoardsStore;
$(document).off('created.label').on('created.label', (e, label) => {
$(document).off('created.label').on('created.label', (e, label) => {
...
@@ -15,54 +18,56 @@ $(() => {
...
@@ -15,54 +18,56 @@ $(() => {
});
});
});
});
$('.js-new-board-list').each(function () {
gl.issueBoards.newListDropdownInit = () => {
const $this = $(this);
$('.js-new-board-list').each(function () {
new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
const $this = $(this);
new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
$this.glDropdown({
$this.glDropdown({
data(term, callback) {
data(term, callback) {
$.get($this.attr('data-labels'))
$.get($this.attr('data-labels'))
.then((resp) => {
.then((resp) => {
callback(resp);
callback(resp);
});
});
},
},
renderRow (label) {
renderRow (label) {
const active = Store.findList('title', label.title),
const active = Store.findList('title', label.title),
$li = $('<li />'),
$li = $('<li />'),
$a = $('<a />', {
$a = $('<a />', {
class: (active ? `is-active js-board-list-${active.id}` : ''),
class: (active ? `is-active js-board-list-${active.id}` : ''),
text: label.title,
text: label.title,
href: '#'
href: '#'
}),
}),
$labelColor = $('<span />', {
$labelColor = $('<span />', {
class: 'dropdown-label-box',
class: 'dropdown-label-box',
style: `background-color: ${label.color}`
style: `background-color: ${label.color}`
});
});
return $li.append($a.prepend($labelColor));
return $li.append($a.prepend($labelColor));
},
},
search: {
search: {
fields: ['title']
fields: ['title']
},
},
filterable: true,
filterable: true,
selectable: true,
selectable: true,
multiSelect: true,
multiSelect: true,
clicked (label, $el, e) {
clicked (label, $el, e) {
e.preventDefault();
e.preventDefault();
if (!Store.findList('title', label.title)) {
if (!Store.findList('title', label.title)) {
Store.new({
Store.new({
title: label.title,
position: Store.state.lists.length - 2,
list_type: 'label',
label: {
id: label.id,
title: label.title,
title: label.title,
color: label.color
position: Store.state.lists.length - 2,
}
list_type: 'label',
});
label: {
id: label.id,
title: label.title,
color: label.color
}
});
}
}
}
}
}
);
});
});
}
)
;
};
});
})
()
;
app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
View file @
1505fc3a
...
@@ -23,7 +23,7 @@
...
@@ -23,7 +23,7 @@
fallbackOnBody: true,
fallbackOnBody: true,
ghostClass: 'is-ghost',
ghostClass: 'is-ghost',
filter: '.board-delete, .btn',
filter: '.board-delete, .btn',
delay: gl.issueBoards.touchEnabled ? 100 :
5
0,
delay: gl.issueBoards.touchEnabled ? 100 : 0,
scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
scrollSpeed: 20,
scrollSpeed: 20,
onStart: gl.issueBoards.onStart,
onStart: gl.issueBoards.onStart,
...
...
app/assets/javascripts/boards/stores/boards_store.js.es6
View file @
1505fc3a
...
@@ -39,6 +39,8 @@
...
@@ -39,6 +39,8 @@
// Remove any new issues from the backlog
// Remove any new issues from the backlog
// as they will be visible in the new list
// as they will be visible in the new list
list.issues.forEach(backlogList.removeIssue.bind(backlogList));
list.issues.forEach(backlogList.removeIssue.bind(backlogList));
this.state.lists = _.sortBy(this.state.lists, 'position');
});
});
this.removeBlankState();
this.removeBlankState();
},
},
...
...
app/assets/stylesheets/pages/boards.scss
View file @
1505fc3a
...
@@ -166,8 +166,12 @@
...
@@ -166,8 +166,12 @@
}
}
}
}
.board-list
{
.board-list
-component
{
height
:
calc
(
100%
-
49px
);
height
:
calc
(
100%
-
49px
);
}
.board-list
{
height
:
100%
;
margin-bottom
:
0
;
margin-bottom
:
0
;
padding
:
5px
;
padding
:
5px
;
list-style
:
none
;
list-style
:
none
;
...
@@ -175,7 +179,7 @@
...
@@ -175,7 +179,7 @@
overflow-x
:
hidden
;
overflow-x
:
hidden
;
&
.is-smaller
{
&
.is-smaller
{
height
:
calc
(
100%
-
1
85
px
);
height
:
calc
(
100%
-
1
36
px
);
}
}
}
}
...
...
app/views/projects/boards/_show.html.haml
0 → 100644
View file @
1505fc3a
-
@no_container
=
true
-
@content_class
=
"issue-boards-content"
-
page_title
"Boards"
-
content_for
:page_specific_javascripts
do
=
page_specific_javascript_tag
(
'boards/boards_bundle.js'
)
=
page_specific_javascript_tag
(
'boards/test_utils/simulate_drag.js'
)
if
Rails
.
env
.
test?
%script
#js-board-template
{
type:
"text/x-template"
}=
render
"projects/boards/components/board"
%script
#js-board-list-template
{
type:
"text/x-template"
}=
render
"projects/boards/components/board_list"
%script
#js-board-list-card
{
type:
"text/x-template"
}=
render
"projects/boards/components/card"
=
render
"projects/issues/head"
=
render
'shared/issuable/filter'
,
type: :boards
#board-app
.boards-app
{
"v-cloak"
=>
true
,
data:
board_data
}
.boards-list
{
":class"
=>
"{ 'is-compact': detailIssueVisible }"
}
.boards-app-loading.text-center
{
"v-if"
=>
"loading"
}
=
icon
(
"spinner spin"
)
%board
{
"v-cloak"
=>
true
,
"v-for"
=>
"list in state.lists"
,
"ref"
=>
"board"
,
":list"
=>
"list"
,
":disabled"
=>
"disabled"
,
":issue-link-base"
=>
"issueLinkBase"
,
":key"
=>
"_uid"
}
=
render
"projects/boards/components/sidebar"
app/views/projects/boards/components/_blank_state.html.haml
View file @
1505fc3a
%board-blank-state
{
"inline-template"
=>
true
,
%board-blank-state
{
"inline-template"
=>
true
,
"v-if"
=>
"list.id == 'blank'"
}
"v-if"
=>
'list.id == "blank"'
}
.board-blank-state
.board-blank-state
%p
%p
Add the following default lists to your Issue Board with one click:
Add the following default lists to your Issue Board with one click:
...
...
app/views/projects/boards/components/_board.html.haml
View file @
1505fc3a
%board
{
"inline-template"
=>
true
,
.board
{
":class"
=>
'
{
"is-draggable"
:
!
list
.
preset
}
'
,
"v-cloak"
=>
true
,
":data-id"
=>
"list.id"
}
"v-for"
=>
"list in state.lists | orderBy 'position'"
,
.board-inner
"v-ref:board"
=>
true
,
%header
.board-header
{
":class"
=>
'
{
"has-border"
:
list
.
label
}
'
,
":style"
=>
"{ borderTopColor: (list.label ? list.label.color : null) }"
}
":list"
=>
"list"
,
%h3
.board-title.js-board-handle
{
":class"
=>
'
{
"user-can-drag"
:
(
!
disabled
&&
!
list
.
preset
)
}
'
}
":disabled"
=>
"disabled"
,
%span
.has-tooltip
{
":title"
=>
'(list.label ? list.label.description : "")'
,
":issue-link-base"
=>
"issueLinkBase"
,
data:
{
container:
"body"
,
placement:
"bottom"
}
}
"track-by"
=>
"_uid"
}
{{ list.title }}
.board
{
":class"
=>
"{ 'is-draggable': !list.preset }"
,
.board-issue-count-holder.pull-right.clearfix
{
"v-if"
=>
'list.type !== "blank"'
}
":data-id"
=>
"list.id"
}
%span
.board-issue-count.pull-left
{
":class"
=>
'
{
"has-btn"
:
list
.
type
!==
"done"
}
'
}
.board-inner
{{ list.issuesSize }}
%header
.board-header
{
":class"
=>
"{ 'has-border': list.label }"
,
":style"
=>
"{ borderTopColor: (list.label ? list.label.color : null) }"
}
-
if
can?
(
current_user
,
:admin_issue
,
@project
)
%h3
.board-title.js-board-handle
{
":class"
=>
"{ 'user-can-drag': (!disabled && !list.preset) }"
}
%button
.btn.btn-small.btn-default.pull-right.has-tooltip
{
type:
"button"
,
%span
.has-tooltip
{
":title"
=>
"(list.label ? list.label.description : '')"
,
"@click"
=>
"showNewIssueForm"
,
data:
{
container:
"body"
,
placement:
"bottom"
}
}
"v-if"
=>
'list.type !== "done"'
,
{{ list.title }}
"aria-label"
=>
"Add an issue"
,
.board-issue-count-holder.pull-right.clearfix
{
"v-if"
=>
"list.type !== 'blank'"
}
"title"
=>
"Add an issue"
,
%span
.board-issue-count.pull-left
{
":class"
=>
"{ 'has-btn': list.type !== 'done' }"
}
data:
{
placement:
"top"
,
container:
"body"
}
}
{{ list.issuesSize }}
=
icon
(
"plus"
)
-
if
can?
(
current_user
,
:admin_issue
,
@project
)
-
if
can?
(
current_user
,
:admin_list
,
@project
)
%button
.btn.btn-small.btn-default.pull-right.has-tooltip
{
type:
"button"
,
%board-delete
{
"inline-template"
=>
true
,
"@click"
=>
"showNewIssueForm"
,
"v-if"
=>
"list.type !== 'done'"
,
"aria-label"
=>
"Add an issue"
,
"title"
=>
"Add an issue"
,
data:
{
placement:
"top"
,
container:
"body"
}
}
=
icon
(
"plus"
)
-
if
can?
(
current_user
,
:admin_list
,
@project
)
%board-delete
{
"inline-template"
=>
true
,
":list"
=>
"list"
,
"v-if"
=>
"!list.preset && list.id"
}
%button
.board-delete.has-tooltip.pull-right
{
type:
"button"
,
title:
"Delete list"
,
"aria-label"
=>
"Delete list"
,
data:
{
placement:
"bottom"
},
"@click.stop"
=>
"deleteBoard"
}
=
icon
(
"trash"
)
%board-list
{
"inline-template"
=>
true
,
"v-if"
=>
"list.type !== 'blank'"
,
":list"
=>
"list"
,
":issues"
=>
"list.issues"
,
":loading"
=>
"list.loading"
,
":disabled"
=>
"disabled"
,
":show-issue-form.sync"
=>
"showIssueForm"
,
":issue-link-base"
=>
"issueLinkBase"
}
.board-list-loading.text-center
{
"v-if"
=>
"loading"
}
=
icon
(
"spinner spin"
)
-
if
can?
current_user
,
:create_issue
,
@project
%board-new-issue
{
"inline-template"
=>
true
,
":list"
=>
"list"
,
":list"
=>
"list"
,
":show-issue-form.sync"
=>
"showIssueForm"
,
"v-if"
=>
"!list.preset && list.id"
}
"v-show"
=>
"list.type !== 'done' && showIssueForm"
}
%button
.board-delete.has-tooltip.pull-right
{
type:
"button"
,
title:
"Delete list"
,
"aria-label"
=>
"Delete list"
,
data:
{
placement:
"bottom"
},
"@click.stop"
=>
"deleteBoard"
}
.card.board-new-issue-form
=
icon
(
"trash"
)
%form
{
"@submit"
=>
"submit($event)"
}
%board-list
{
"v-if"
=>
'list.type !== "blank"'
,
.flash-container
{
"v-if"
=>
"error"
}
":list"
=>
"list"
,
.flash-alert
":issues"
=>
"list.issues"
,
An error occured. Please try again.
":loading"
=>
"list.loading"
,
%label
.label-light
{
":for"
=>
"list.id + '-title'"
}
":disabled"
=>
"disabled"
,
Title
":issue-link-base"
=>
"issueLinkBase"
,
%input
.form-control
{
type:
"text"
,
"ref"
=>
"board-list"
}
"v-model"
=>
"title"
,
-
if
can?
(
current_user
,
:admin_list
,
@project
)
"v-el:input"
=>
true
,
=
render
"projects/boards/components/blank_state"
":id"
=>
"list.id + '-title'"
}
.clearfix.prepend-top-10
%button
.btn.btn-success.pull-left
{
type:
"submit"
,
":disabled"
=>
"title === ''"
,
"v-el:submit-button"
=>
true
}
Submit issue
%button
.btn.btn-default.pull-right
{
type:
"button"
,
"@click"
=>
"cancel"
}
Cancel
%ul
.board-list
{
"v-el:list"
=>
true
,
"v-show"
=>
"!loading"
,
":data-board"
=>
"list.id"
,
":class"
=>
"{ 'is-smaller': showIssueForm }"
}
=
render
"projects/boards/components/card"
%li
.board-list-count.text-center
{
"v-if"
=>
"showCount"
}
=
icon
(
"spinner spin"
,
"v-show"
=>
"list.loadingMore"
)
%span
{
"v-if"
=>
"list.issues.length === list.issuesSize"
}
Showing all issues
%span
{
"v-else"
=>
true
}
Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
-
if
can?
(
current_user
,
:admin_list
,
@project
)
=
render
"projects/boards/components/blank_state"
app/views/projects/boards/components/_board_list.html.haml
0 → 100644
View file @
1505fc3a
.board-list-component
.board-list-loading.text-center
{
"v-if"
=>
"loading"
}
=
icon
(
"spinner spin"
)
-
if
can?
current_user
,
:create_issue
,
@project
%board-new-issue
{
"inline-template"
=>
true
,
":list"
=>
"list"
,
"v-if"
=>
'list.type !== "done" && showIssueForm'
}
.card.board-new-issue-form
%form
{
"@submit"
=>
"submit($event)"
}
.flash-container
{
"v-if"
=>
"error"
}
.flash-alert
An error occured. Please try again.
%label
.label-light
{
":for"
=>
'list.id + "-title"'
}
Title
%input
.form-control
{
type:
"text"
,
"v-model"
=>
"title"
,
"ref"
=>
"input"
,
":id"
=>
'list.id + "-title"'
}
.clearfix.prepend-top-10
%button
.btn.btn-success.pull-left
{
type:
"submit"
,
":disabled"
=>
'title === ""'
,
"ref"
=>
"submit-button"
}
Submit issue
%button
.btn.btn-default.pull-right
{
type:
"button"
,
"@click"
=>
"cancel"
}
Cancel
%ul
.board-list
{
"ref"
=>
"list"
,
"v-show"
=>
"!loading"
,
":data-board"
=>
"list.id"
,
":class"
=>
'
{
"is-smaller"
:
showIssueForm
}
'
}
%board-card
{
"v-for"
=>
"(issue, index) in orderedIssues"
,
"ref"
=>
"issue"
,
":index"
=>
"index"
,
":list"
=>
"list"
,
":issue"
=>
"issue"
,
":issue-link-base"
=>
"issueLinkBase"
,
":disabled"
=>
"disabled"
,
"key"
=>
"id"
}
%li
.board-list-count.text-center
{
"v-if"
=>
"showCount"
}
=
icon
(
"spinner spin"
,
"v-show"
=>
"list.loadingMore"
)
%span
{
"v-if"
=>
"list.issues.length === list.issuesSize"
}
Showing all issues
%span
{
"v-else"
=>
true
}
Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
app/views/projects/boards/components/_card.html.haml
View file @
1505fc3a
%board-card
{
"inline-template"
=>
true
,
%li
.card
{
":class"
=>
'
{
"user-can-drag"
:
!
disabled
&&
issue
.
id
,
"is-disabled"
:
disabled
||
!
issue
.
id
,
"is-active"
:
issueDetailVisible
}
'
,
"v-for"
=>
"issue in issues | orderBy 'priority'"
,
":index"
=>
"index"
,
"v-ref:issue"
=>
true
,
"@mousedown"
=>
"mouseDown"
,
":index"
=>
"$index"
,
"@mouseup"
=>
"showIssue($event)"
}
":list"
=>
"list"
,
%h4
.card-title
":issue"
=>
"issue"
,
=
icon
(
"eye-slash"
,
class:
"confidential-icon"
,
"v-if"
=>
"issue.confidential"
)
":issue-link-base"
=>
"issueLinkBase"
,
%a
{
":href"
=>
'issueLinkBase + "/" + issue.id'
,
":disabled"
=>
"disabled"
,
":title"
=>
"issue.title"
}
"track-by"
=>
"id"
}
{{ issue.title }}
%li
.card
{
":class"
=>
"{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
,
.card-footer
":index"
=>
"index"
,
%span
.card-number
{
"v-if"
=>
"issue.id"
}
"@mousedown"
=>
"mouseDown"
,
=
precede
'#'
do
"@mouseMove"
=>
"mouseMove"
,
{{ issue.id }}
"@mouseup"
=>
"showIssue($event)"
}
%a
.has-tooltip
{
":href"
=>
"
\"
#{root_path}
\"
+ issue.assignee.username"
,
%h4
.card-title
":title"
=>
'"Assigned to " + issue.assignee.name'
,
=
icon
(
"eye-slash"
,
class:
"confidential-icon"
,
"v-if"
=>
"issue.confidential"
)
"v-if"
=>
"issue.assignee"
,
%a
{
":href"
=>
"issueLinkBase + '/' + issue.id"
,
data:
{
container:
'body'
}
}
":title"
=>
"issue.title"
}
%img
.avatar.avatar-inline.s20
{
":src"
=>
"issue.assignee.avatar"
,
width:
20
,
height:
20
}
{{ issue.title }}
%button
.label.color-label.has-tooltip
{
"v-for"
=>
"label in issue.labels"
,
.card-footer
type:
"button"
,
%span
.card-number
{
"v-if"
=>
"issue.id"
}
"v-if"
=>
"(!list.label || label.id !== list.label.id)"
,
=
precede
'#'
do
"@click"
=>
"filterByLabel(label, $event)"
,
{{ issue.id }}
":style"
=>
"{ backgroundColor: label.color, color: label.textColor }"
,
%a
.has-tooltip
{
":href"
=>
"'#{root_path}' + issue.assignee.username"
,
":title"
=>
"label.description"
,
":title"
=>
"'Assigned to ' + issue.assignee.name"
,
data:
{
container:
'body'
}
}
"v-if"
=>
"issue.assignee"
,
{{ label.title }}
data:
{
container:
'body'
}
}
%img
.avatar.avatar-inline.s20
{
":src"
=>
"issue.assignee.avatar"
,
width:
20
,
height:
20
}
%button
.label.color-label.has-tooltip
{
"v-for"
=>
"label in issue.labels"
,
type:
"button"
,
"v-if"
=>
"(!list.label || label.id !== list.label.id)"
,
"@click"
=>
"filterByLabel(label, $event)"
,
":style"
=>
"{ backgroundColor: label.color, color: label.textColor }"
,
":title"
=>
"label.description"
,
data:
{
container:
'body'
}
}
{{ label.title }}
app/views/projects/boards/index.html.haml
View file @
1505fc3a
-
@no_container
=
true
=
render
"show"
-
@content_class
=
"issue-boards-content"
-
page_title
"Boards"
-
content_for
:page_specific_javascripts
do
=
page_specific_javascript_tag
(
'boards/boards_bundle.js'
)
=
page_specific_javascript_tag
(
'boards/test_utils/simulate_drag.js'
)
if
Rails
.
env
.
test?
=
render
"projects/issues/head"
=
render
'shared/issuable/filter'
,
type: :boards
#board-app
.boards-app
{
"v-cloak"
=>
true
,
data:
board_data
}
.boards-list
{
":class"
=>
"{ 'is-compact': detailIssueVisible }"
}
.boards-app-loading.text-center
{
"v-if"
=>
"loading"
}
=
icon
(
"spinner spin"
)
=
render
"projects/boards/components/board"
=
render
"projects/boards/components/sidebar"
app/views/projects/boards/show.html.haml
View file @
1505fc3a
-
@no_container
=
true
=
render
"show"
-
@content_class
=
"issue-boards-content"
-
page_title
"Boards"
-
content_for
:page_specific_javascripts
do
=
page_specific_javascript_tag
(
'boards/boards_bundle.js'
)
=
page_specific_javascript_tag
(
'boards/test_utils/simulate_drag.js'
)
if
Rails
.
env
.
test?
=
render
"projects/issues/head"
=
render
'shared/issuable/filter'
,
type: :boards
#board-app
.boards-app
{
"v-cloak"
=>
true
,
data:
board_data
}
.boards-list
{
":class"
=>
"{ 'is-compact': detailIssueVisible }"
}
.boards-app-loading.text-center
{
"v-if"
=>
"loading"
}
=
icon
(
"spinner spin"
)
=
render
"projects/boards/components/board"
=
render
"projects/boards/components/sidebar"
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment