fix(files): Ensure that focussed file is always scrolled right

Ensure the correct file is scrolled if the content changes,
this also sets a minimal height to the virtual scrolling area
so that the `scrollTop` can be set.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2024-05-31 16:01:47 +02:00 committed by backportbot[bot]
parent e6fc2e4a82
commit 280a9bdd21

View file

@ -142,9 +142,17 @@ export default Vue.extend({
return Math.floor(this.filesListWidth / this.itemWidth)
},
/**
* Index of the first item to be rendered
*/
startIndex() {
return Math.max(0, this.index - this.bufferItems)
},
/**
* Number of items to be rendered at the same time
* For list view this is the same as `rowCount`, for grid view this is `rowCount` * `columnCount`
*/
shownItems() {
// If in grid mode, we need to multiply the number of rows by the number of columns
if (this.gridMode) {
@ -153,6 +161,7 @@ export default Vue.extend({
return this.rowCount
},
renderedItems(): RecycledPoolItem[] {
if (!this.isReady) {
return []
@ -181,6 +190,13 @@ export default Vue.extend({
})
},
/**
* The total number of rows that are available
*/
totalRowCount() {
return Math.floor(this.dataSources.length / this.columnCount)
},
tbodyStyle() {
const isOverScrolled = this.startIndex + this.rowCount > this.dataSources.length
const lastIndex = this.dataSources.length - this.startIndex - this.shownItems
@ -188,6 +204,7 @@ export default Vue.extend({
return {
paddingTop: `${Math.floor(this.startIndex / this.columnCount) * this.itemHeight}px`,
paddingBottom: isOverScrolled ? 0 : `${hiddenAfterItems * this.itemHeight}px`,
minHeight: `${this.totalRowCount * this.itemHeight + this.beforeHeight}px`,
}
},
},
@ -195,6 +212,13 @@ export default Vue.extend({
scrollToIndex(index) {
this.scrollTo(index)
},
totalRowCount() {
if (this.scrollToIndex) {
this.$nextTick(() => this.scrollTo(this.scrollToIndex))
}
},
columnCount(columnCount, oldColumnCount) {
if (oldColumnCount === 0) {
// We're initializing, the scroll position