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 () {
|
||||
return {
|
||||
scrollOffset: 250,
|
||||
filters: Store.state.filters
|
||||
filters: Store.state.filters,
|
||||
showCount: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
@ -30,6 +31,15 @@
|
|||
this.$els.list.scrollTop = 0;
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
issues () {
|
||||
this.$nextTick(() => {
|
||||
if (this.scrollHeight() > this.listHeight()) {
|
||||
this.showCount = true;
|
||||
} else {
|
||||
this.showCount = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -58,6 +68,7 @@
|
|||
group: 'issues',
|
||||
sort: false,
|
||||
disabled: this.disabled,
|
||||
filter: '.board-list-count',
|
||||
onStart: (e) => {
|
||||
const card = this.$refs.issue[e.oldIndex];
|
||||
|
||||
|
|
|
@ -142,11 +142,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.board-header-loading-spinner {
|
||||
margin-right: 10px;
|
||||
color: $gray-darkest;
|
||||
}
|
||||
|
||||
.board-inner-container {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: $gl-padding;
|
||||
|
@ -279,3 +274,13 @@
|
|||
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" }
|
||||
%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("spinner spin", class: "board-header-loading-spinner pull-right", "v-show" => "list.loadingMore")
|
||||
%board-list{ "inline-template" => true,
|
||||
"v-if" => "list.type !== 'blank'",
|
||||
":list" => "list",
|
||||
|
@ -34,5 +33,11 @@
|
|||
"v-show" => "!loading",
|
||||
":data-board" => "list.id" }
|
||||
= 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"
|
||||
|
|
|
@ -184,11 +184,19 @@ describe 'Issue Boards', feature: true, js: true do
|
|||
page.within(find('.board', match: :first)) do
|
||||
expect(page.find('.board-header')).to have_content('56')
|
||||
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")
|
||||
wait_for_vue_resource(spinner: false)
|
||||
|
||||
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
|
||||
|
||||
|
@ -480,10 +488,17 @@ describe 'Issue Boards', feature: true, js: true do
|
|||
page.within(find('.board', match: :first)) do
|
||||
expect(page.find('.board-header')).to have_content('51')
|
||||
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")
|
||||
|
||||
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
|
||||
|
||||
|
|
|
@ -26,12 +26,15 @@ const listObjDuplicate = {
|
|||
|
||||
const BoardsMockData = {
|
||||
'GET': {
|
||||
'/test/issue-boards/board/lists{/id}/issues': [{
|
||||
title: 'Testing',
|
||||
iid: 1,
|
||||
confidential: false,
|
||||
labels: []
|
||||
}]
|
||||
'/test/issue-boards/board/lists{/id}/issues': {
|
||||
issues: [{
|
||||
title: 'Testing',
|
||||
iid: 1,
|
||||
confidential: false,
|
||||
labels: []
|
||||
}],
|
||||
size: 1
|
||||
}
|
||||
},
|
||||
'POST': {
|
||||
'/test/issue-boards/board/lists{/id}': listObj
|
||||
|
|
Loading…
Reference in New Issue