Shows count at bottom of list
Only visible when scrollable area is larger than height
This commit is contained in:
parent
4f341ed85b
commit
105c80b6be
|
@ -20,7 +20,8 @@
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
scrollOffset: 250,
|
scrollOffset: 250,
|
||||||
filters: Store.state.filters
|
filters: Store.state.filters,
|
||||||
|
showCount: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -30,6 +31,15 @@
|
||||||
this.$els.list.scrollTop = 0;
|
this.$els.list.scrollTop = 0;
|
||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
|
},
|
||||||
|
issues () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.scrollHeight() > this.listHeight()) {
|
||||||
|
this.showCount = true;
|
||||||
|
} else {
|
||||||
|
this.showCount = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -58,6 +68,7 @@
|
||||||
group: 'issues',
|
group: 'issues',
|
||||||
sort: false,
|
sort: false,
|
||||||
disabled: this.disabled,
|
disabled: this.disabled,
|
||||||
|
filter: '.board-list-count',
|
||||||
onStart: (e) => {
|
onStart: (e) => {
|
||||||
const card = this.$refs.issue[e.oldIndex];
|
const card = this.$refs.issue[e.oldIndex];
|
||||||
|
|
||||||
|
|
|
@ -142,11 +142,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.board-header-loading-spinner {
|
|
||||||
margin-right: 10px;
|
|
||||||
color: $gray-darkest;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-inner-container {
|
.board-inner-container {
|
||||||
border-bottom: 1px solid $border-color;
|
border-bottom: 1px solid $border-color;
|
||||||
padding: $gl-padding;
|
padding: $gl-padding;
|
||||||
|
@ -279,3 +274,13 @@
|
||||||
width: 210px;
|
width: 210px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.board-list-count {
|
||||||
|
padding: 10px 0;
|
||||||
|
color: $gl-placeholder-color;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
> .fa {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -20,7 +20,6 @@
|
||||||
"v-if" => "!list.preset && list.id" }
|
"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" }
|
%button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
|
||||||
= icon("trash")
|
= icon("trash")
|
||||||
= icon("spinner spin", class: "board-header-loading-spinner pull-right", "v-show" => "list.loadingMore")
|
|
||||||
%board-list{ "inline-template" => true,
|
%board-list{ "inline-template" => true,
|
||||||
"v-if" => "list.type !== 'blank'",
|
"v-if" => "list.type !== 'blank'",
|
||||||
":list" => "list",
|
":list" => "list",
|
||||||
|
@ -34,5 +33,11 @@
|
||||||
"v-show" => "!loading",
|
"v-show" => "!loading",
|
||||||
":data-board" => "list.id" }
|
":data-board" => "list.id" }
|
||||||
= render "projects/boards/components/card"
|
= 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)
|
- if can?(current_user, :admin_list, @project)
|
||||||
= render "projects/boards/components/blank_state"
|
= render "projects/boards/components/blank_state"
|
||||||
|
|
|
@ -184,11 +184,19 @@ describe 'Issue Boards', feature: true, js: true do
|
||||||
page.within(find('.board', match: :first)) do
|
page.within(find('.board', match: :first)) do
|
||||||
expect(page.find('.board-header')).to have_content('56')
|
expect(page.find('.board-header')).to have_content('56')
|
||||||
expect(page).to have_selector('.card', count: 20)
|
expect(page).to have_selector('.card', count: 20)
|
||||||
|
expect(page).to have_content('Showing 20 of 56 issues')
|
||||||
|
|
||||||
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
|
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
|
||||||
wait_for_vue_resource(spinner: false)
|
wait_for_vue_resource(spinner: false)
|
||||||
|
|
||||||
expect(page).to have_selector('.card', count: 40)
|
expect(page).to have_selector('.card', count: 40)
|
||||||
|
expect(page).to have_content('Showing 40 of 56 issues')
|
||||||
|
|
||||||
|
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
|
||||||
|
wait_for_vue_resource(spinner: false)
|
||||||
|
|
||||||
|
expect(page).to have_selector('.card', count: 56)
|
||||||
|
expect(page).to have_content('Showing all issues')
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -480,10 +488,17 @@ describe 'Issue Boards', feature: true, js: true do
|
||||||
page.within(find('.board', match: :first)) do
|
page.within(find('.board', match: :first)) do
|
||||||
expect(page.find('.board-header')).to have_content('51')
|
expect(page.find('.board-header')).to have_content('51')
|
||||||
expect(page).to have_selector('.card', count: 20)
|
expect(page).to have_selector('.card', count: 20)
|
||||||
|
expect(page).to have_content('Showing 20 of 51 issues')
|
||||||
|
|
||||||
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
|
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
|
||||||
|
|
||||||
expect(page).to have_selector('.card', count: 40)
|
expect(page).to have_selector('.card', count: 40)
|
||||||
|
expect(page).to have_content('Showing 40 of 51 issues')
|
||||||
|
|
||||||
|
evaluate_script("document.querySelectorAll('.board .board-list')[0].scrollTop = document.querySelectorAll('.board .board-list')[0].scrollHeight")
|
||||||
|
|
||||||
|
expect(page).to have_selector('.card', count: 51)
|
||||||
|
expect(page).to have_content('Showing all issues')
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -26,12 +26,15 @@ const listObjDuplicate = {
|
||||||
|
|
||||||
const BoardsMockData = {
|
const BoardsMockData = {
|
||||||
'GET': {
|
'GET': {
|
||||||
'/test/issue-boards/board/lists{/id}/issues': [{
|
'/test/issue-boards/board/lists{/id}/issues': {
|
||||||
|
issues: [{
|
||||||
title: 'Testing',
|
title: 'Testing',
|
||||||
iid: 1,
|
iid: 1,
|
||||||
confidential: false,
|
confidential: false,
|
||||||
labels: []
|
labels: []
|
||||||
}]
|
}],
|
||||||
|
size: 1
|
||||||
|
}
|
||||||
},
|
},
|
||||||
'POST': {
|
'POST': {
|
||||||
'/test/issue-boards/board/lists{/id}': listObj
|
'/test/issue-boards/board/lists{/id}': listObj
|
||||||
|
|
Loading…
Reference in New Issue