fix(files): drop visible and adjust drag-to-scroll feature

Signed-off-by: John Molakvoæ <[email protected]>

Author: skjnldsv

apps/files/src/components/FileEntry.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<tr :class="{'files-list__row--visible': visible, 'files-list__row--active': isActive, 'files-list__row--dragover': dragover, 'files-list__row--loading': isLoading}"
+	<tr :class="{'files-list__row--dragover': dragover, 'files-list__row--loading': isLoading}"
 		data-cy-files-list-row
 		:data-cy-files-list-row-fileid="fileid"
 		:data-cy-files-list-row-name="source.basename"
@@ -37,8 +37,7 @@
 		<span v-if="source.attributes.failed" class="files-list__row--failed" />
 
 		<!-- Checkbox -->
-		<FileEntryCheckbox v-if="visible"
-			:display-name="displayName"
+		<FileEntryCheckbox :display-name="displayName"
 			:fileid="fileid"
 			:is-loading="isLoading"
 			:nodes="nodes" />
@@ -67,8 +66,7 @@
 			:files-list-width="filesListWidth"
 			:loading.sync="loading"
 			:opened.sync="openedMenu"
-			:source="source"
-			:visible="visible" />
+			:source="source" />
 
 		<!-- Size -->
 		<td v-if="!compact && isSizeAvailable"
@@ -95,8 +93,7 @@
 			class="files-list__row-column-custom"
 			:data-cy-files-list-row-column-custom="column.id"
 			@click="openDetailsIfAvailable">
-			<CustomElementRender v-if="visible"
-				:current-view="currentView"
+			<CustomElementRender :current-view="currentView"
 				:render="column.render"
 				:source="source" />
 		</td>
@@ -146,10 +143,6 @@ export default Vue.extend({
 	},
 
 	props: {
-		visible: {
-			type: Boolean,
-			default: false,
-		},
 		isMtimeAvailable: {
 			type: Boolean,
 			default: false,

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -20,8 +20,7 @@
   -
   -->
 <template>
-	<td v-show="visible"
-		class="files-list__row-actions"
+	<td class="files-list__row-actions"
 		data-cy-files-list-row-actions>
 		<!-- Render actions -->
 		<CustomElementRender v-for="action in enabledRenderActions"
@@ -33,8 +32,7 @@
 			class="files-list__row-action--inline" />
 
 		<!-- Menu actions -->
-		<NcActions v-if="visible"
-			ref="actionsMenu"
+		<NcActions ref="actionsMenu"
 			:boundaries-element="getBoundariesElement"
 			:container="getBoundariesElement"
 			:disabled="isLoading || loading !== ''"
@@ -71,7 +69,6 @@ import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import CustomElementRender from '../CustomElementRender.vue'
-
 import logger from '../../logger.js'
 
 // The registered actions list
@@ -105,10 +102,6 @@ export default Vue.extend({
 			type: Object as PropType<Node>,
 			required: true,
 		},
-		visible: {
-			type: Boolean,
-			default: false,
-		},
 		gridMode: {
 			type: Boolean,
 			default: false,
@@ -153,7 +146,7 @@ export default Vue.extend({
 
 		// Enabled action that are displayed inline with a custom render function
 		enabledRenderActions() {
-			if (!this.visible || this.gridMode) {
+			if (this.gridMode) {
 				return []
 			}
 			return this.enabledActions.filter(action => typeof action.renderInline === 'function')

apps/files/src/components/FileEntryGrid.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<tr :class="{'files-list__row--visible': visible, 'files-list__row--active': isActive, 'files-list__row--dragover': dragover, 'files-list__row--loading': isLoading}"
+	<tr :class="{'files-list__row--active': isActive, 'files-list__row--dragover': dragover, 'files-list__row--loading': isLoading}"
 		data-cy-files-list-row
 		:data-cy-files-list-row-fileid="fileid"
 		:data-cy-files-list-row-name="source.basename"
@@ -37,8 +37,7 @@
 		<span v-if="source.attributes.failed" class="files-list__row--failed" />
 
 		<!-- Checkbox -->
-		<FileEntryCheckbox v-if="visible"
-			:display-name="displayName"
+		<FileEntryCheckbox :display-name="displayName"
 			:fileid="fileid"
 			:is-loading="isLoading"
 			:nodes="nodes" />
@@ -69,8 +68,7 @@
 			:grid-mode="true"
 			:loading.sync="loading"
 			:opened.sync="openedMenu"
-			:source="source"
-			:visible="visible" />
+			:source="source" />
 	</tr>
 </template>
 
@@ -115,10 +113,6 @@ export default Vue.extend({
 
 	inheritAttrs: false,
 	props: {
-		visible: {
-			type: Boolean,
-			default: false,
-		},
 		source: {
 			type: [Folder, NcFile, Node] as PropType<Node>,
 			required: true,

apps/files/src/components/FilesListVirtual.vue

@@ -259,18 +259,17 @@ export default Vue.extend({
 			event.preventDefault()
 			event.stopPropagation()
 
-			// If reaching top, scroll up
-			const firstVisible = this.$refs.table?.$el?.querySelector('.files-list__row--visible') as HTMLElement
-			const firstSibling = firstVisible?.previousElementSibling as HTMLElement
-			if ([firstVisible, firstSibling].some(elmt => elmt?.contains(event.target as Node))) {
+			const tableTop = this.$refs.table.$el.getBoundingClientRect().top
+			const tableBottom = tableTop + this.$refs.table.$el.getBoundingClientRect().height
+
+			// If reaching top, scroll up. Using 100 because of the floating header
+			if (event.clientY < tableTop + 100) {
 				this.$refs.table.$el.scrollTop = this.$refs.table.$el.scrollTop - 25
 				return
 			}
 
 			// If reaching bottom, scroll down
-			const lastVisible = [...(this.$refs.table?.$el?.querySelectorAll('.files-list__row--visible') || [])].pop() as HTMLElement
-			const nextSibling = lastVisible?.nextElementSibling as HTMLElement
-			if ([lastVisible, nextSibling].some(elmt => elmt?.contains(event.target as Node))) {
+			if (event.clientY > tableBottom - 50) {
 				this.$refs.table.$el.scrollTop = this.$refs.table.$el.scrollTop + 25
 			}
 		},

apps/files/src/components/VirtualList.vue

@@ -18,7 +18,6 @@
 			<component :is="dataComponent"
 				v-for="({key, item}, i) in renderedItems"
 				:key="key"
-				:visible="true"
 				:source="item"
 				:index="i"
 				v-bind="extraProps" />