Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: scrolling when using keyboard navigation #2784

Merged
merged 2 commits into from
Sep 29, 2024
+7 −12
Merged

fix: scrolling when using keyboard navigation #2784

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
862e44c
fix: scrolling when using keyboard navigation
wofferl Sep 26, 2024
8c16c6e
Merge branch 'nextcloud:master' into fix-scrolling-with-key-navigation
wofferl Sep 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/feed-display/FeedItemDisplayList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ export default Vue.extend({
return response.sort(this.sort)
},
// Trigger the click event programmatically to benefit from the item handling inside the FeedItemRow component
clickItem(item: FeedItem, alignToTop = false) {
clickItem(item: FeedItem) {
if (!item) {
return
}
Expand All @@ -249,8 +249,8 @@ export default Vue.extend({
if (element) {
element.click()
const virtualScroll = this.$refs.virtualScroll
// TODO: This is still jerky and even can derail the current item
// virtualScroll.showElement(element, alignToTop)
virtualScroll.showElement(element)

}
},
currentIndex(items: FeedItem[]): number {
Expand All @@ -266,7 +266,7 @@ export default Vue.extend({
// Jump to the previous item
if (currentIndex > 0) {
const previousItem = items[currentIndex - 1]
this.clickItem(previousItem, true)
this.clickItem(previousItem)
}
},
jumpToNextItem() {
Expand All @@ -275,7 +275,7 @@ export default Vue.extend({
// Jump to the first item, if none was selected, otherwise jump to the next item
if (currentIndex === -1 || (currentIndex < items.length - 1)) {
const nextItem = items[currentIndex + 1]
this.clickItem(nextItem, false)
this.clickItem(nextItem)
}
},
},
Expand Down
9 changes: 2 additions & 7 deletions src/components/feed-display/VirtualScroll.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

const GRID_ITEM_HEIGHT = 200 + 10
// const GRID_ITEM_WIDTH = 250 + 10
const LIST_ITEM_HEIGHT = 45 + 1
const LIST_ITEM_HEIGHT = 110 + 1

export default Vue.extend({
name: 'VirtualScroll',
Expand Down Expand Up @@ -47,9 +47,6 @@
this.$el.scrollTop = 0
},
},
created() {
this.elementToShowAlignToTop = false
},
mounted() {
this.onScroll()
window.addEventListener('resize', this.onScroll)
Expand All @@ -62,9 +59,8 @@
this.scrollTop = this.$el.scrollTop
this.scrollHeight = this.$el.scrollHeight
},
showElement(element, alignToTop) {

Check warning on line 62 in src/components/feed-display/VirtualScroll.vue

View workflow job for this annotation

GitHub Actions / eslint node 

'alignToTop' is defined but never used

Check warning on line 62 in src/components/feed-display/VirtualScroll.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

'alignToTop' is defined but never used
this.elementToShow = element
this.elementToShowAlignToTop = alignToTop
},
},
render(h) {
Expand Down Expand Up @@ -115,8 +111,7 @@
const scrollTop = this.scrollTop
this.$nextTick(() => {
if (this.elementToShow) {
// this.elementToShow.scrollIntoView(this.elementToShowAlignToTop)
this.elementToShow.scrollIntoView({ behavior: 'smooth', block: 'center' })
this.elementToShow.scrollIntoView({ behavior: 'auto', block: 'nearest' })
this.elementToShow = null
} else {
this.$el.scrollTop = scrollTop
Expand Down
Loading