Skip to content

Commit 75dcf90

Browse files
committed
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 <[email protected]>
1 parent fbceac9 commit 75dcf90

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

apps/files/src/components/VirtualList.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,17 @@ export default Vue.extend({
146146
return Math.floor(this.filesListWidth / this.itemWidth)
147147
},
148148
149+
/**
150+
* Index of the first item to be rendered
151+
*/
149152
startIndex() {
150153
return Math.max(0, this.index - this.bufferItems)
151154
},
155+
156+
/**
157+
* Number of items to be rendered at the same time
158+
* For list view this is the same as `rowCount`, for grid view this is `rowCount` * `columnCount`
159+
*/
152160
shownItems() {
153161
// If in grid mode, we need to multiply the number of rows by the number of columns
154162
if (this.gridMode) {
@@ -157,6 +165,7 @@ export default Vue.extend({
157165
158166
return this.rowCount
159167
},
168+
160169
renderedItems(): RecycledPoolItem[] {
161170
if (!this.isReady) {
162171
return []
@@ -185,20 +194,35 @@ export default Vue.extend({
185194
})
186195
},
187196
197+
/**
198+
* The total number of rows that are available
199+
*/
200+
totalRowCount() {
201+
return Math.floor(this.dataSources.length / this.columnCount)
202+
},
203+
188204
tbodyStyle() {
189205
const isOverScrolled = this.startIndex + this.rowCount > this.dataSources.length
190206
const lastIndex = this.dataSources.length - this.startIndex - this.shownItems
191207
const hiddenAfterItems = Math.floor(Math.min(this.dataSources.length - this.startIndex, lastIndex) / this.columnCount)
192208
return {
193209
paddingTop: `${Math.floor(this.startIndex / this.columnCount) * this.itemHeight}px`,
194210
paddingBottom: isOverScrolled ? 0 : `${hiddenAfterItems * this.itemHeight}px`,
211+
minHeight: `${this.totalRowCount * this.itemHeight + this.beforeHeight}px`,
195212
}
196213
},
197214
},
198215
watch: {
199216
scrollToIndex(index) {
200217
this.scrollTo(index)
201218
},
219+
220+
totalRowCount() {
221+
if (this.scrollToIndex) {
222+
this.$nextTick(() => this.scrollTo(this.scrollToIndex))
223+
}
224+
},
225+
202226
columnCount(columnCount, oldColumnCount) {
203227
if (oldColumnCount === 0) {
204228
// We're initializing, the scroll position

0 commit comments

Comments
 (0)