Added virtual scroll package and finished basic implementation

Fixed sizes of columns

Made responsive

Adjusted layout

Adjusted shared with list

Bring back id for the list

Moved virtual scroller into files app dependencies and added polyfill

Make table header fixed

Use only class selector for file row

Added border and selected background colour

Scroll files list

Fixed file row selector

Scroll with interval

Moved findFile into custom commands and added wait for filesListContainer

Fixed wrong name in private link feature

Fixed wrong item type

Moved row actions into own component and moved after files list

Made functions async and escape double quotes

Count files via counters in footer and fixed scrollToTop function

Check if the item is actually visible and not only rendered and await click on row for private link

Fixed trashbin delete tests

Finishing touches for scroll functions and adjusted sharing functions to await scrolling

Adjusted resharing tests

Adjusted sharing and distance of scrolling

Add position of header to get properly visible items

Re-enable correct step in shared-with pages tests

Bring waitForFileVisible into versions test

Fixed mobile view

Adjusted order of scroll for opening of sidebar and wait for file in shared with pages

Use shareId as default id and get rid of two TODOs

Remove unneccesary logs

Check if list container is visible in scrollToTop, reorder calls for different scrolling and reuse filename attribute

Added isVisible data state

Adjusted selector for trashbin

Changed selector for actions dropdown

Escape double quotes

Adjusted dependencies

Adjusted filter selectors and label after ods update

Fixed order of parameters

apps/files/package.json

@@ -25,9 +25,11 @@
     "babel-loader": "^8.0.6",
     "core-js": "3.2.1",
     "css-loader": "^3.1.0",
+    "intersection-observer": "^0.7.0",
     "p-queue": "^6.1.1",
     "vue-loader": "^15.7.1",
     "vue-template-compiler": "^2.6.10",
+    "vue-virtual-scroller": "^1.0.0-rc.2",
     "vue2-dropzone": "^3.6.0",
     "webpack": "^4.36.1",
     "webpack-cli": "^3.3.8",

apps/files/src/components/AllFilesList.vue

@@ -1,20 +1,23 @@
 <template>
   <div class="uk-height-1-1">
     <div class="uk-flex uk-flex-column uk-height-1-1">
-      <div id="files-list-container" class="uk-overflow-auto uk-flex-auto">
+      <div class="uk-overflow-auto uk-flex-auto">
         <file-list :fileData="fileData" id="files-list" :loading="loadingFolder" :actions="actions" :compactMode="_sidebarOpen"
             :isActionEnabled="isActionEnabled">
           <template #headerColumns>
-            <oc-table-cell shrink type="head" v-if="!publicPage()"><span class="oc-visually-hidden">{{favoritesHeaderText}}</span></oc-table-cell>
-            <oc-table-cell type="head" class="uk-text-truncate" v-translate>Name</oc-table-cell>
-            <oc-table-cell shrink type="head" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m'  : _sidebarOpen }"><translate>Size</translate></oc-table-cell>
-            <oc-table-cell shrink type="head" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m'  : _sidebarOpen }" class="uk-text-nowrap" v-translate>Modification Time</oc-table-cell>
+            <div v-if="!publicPage()">
+              <span class="oc-visually-hidden" v-text="favoritesHeaderText" />
+              <oc-star id="files-table-header-star" aria-hidden="true" class="uk-display-block uk-disabled" />
+            </div>
+            <div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate>Name</div>
+            <div :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }" class="uk-text-meta uk-width-small" v-translate>Size</div>
+            <div type="head" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }" class="uk-text-nowrap uk-text-meta uk-width-small" v-translate>Modification Time</div>
           </template>
           <template #rowColumns="{ item }">
-            <oc-table-cell class="uk-padding-remove" v-if="!publicPage()">
+            <div v-if="!publicPage()">
               <oc-star class="uk-display-block" @click.native.stop="toggleFileFavorite(item)" :shining="item.starred" />
-            </oc-table-cell>
-            <oc-table-cell class="uk-text-truncate">
+            </div>
+            <div class="uk-text-truncate uk-width-expand">
               <oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
                 :name="$_ocFileName(item)" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
                 :filename="item.name" :key="item.id"/>
@@ -24,25 +27,21 @@
                 :uk-tooltip="disabledActionTooltip(item)"
                 class="uk-margin-small-left"
               />
-            </oc-table-cell>
-            <oc-table-cell class="uk-text-meta uk-text-nowrap" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m'  : _sidebarOpen }">
+            </div>
+            <div class="uk-text-meta uk-text-nowrap uk-width-small" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }">
               {{ item.size | fileSize }}
-            </oc-table-cell>
-            <oc-table-cell class="uk-text-meta uk-text-nowrap" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m'  : _sidebarOpen }">
+            </div>
+            <div class="uk-text-meta uk-text-nowrap uk-width-small" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }">
               {{ formDateFromNow(item.mdate) }}
-            </oc-table-cell>
+            </div>
           </template>
           <template #footer>
             <div v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0" class="uk-text-nowrap uk-text-meta">
-              <template v-if="activeFilesCount.folders > 0">
-                {{ activeFilesCount.folders }}
-                <translate :translate-n="activeFilesCount.folders" translate-plural="folders">folder</translate>
-              </template>
-              <translate v-if="activeFilesCount.folders > 0 && activeFilesCount.files > 0">and</translate>
-              <template v-if="activeFilesCount.files > 0">
-                {{ activeFilesCount.files }}
-                <translate :translate-n="activeFilesCount.files" translate-plural="files">file</translate>
-              </template>
+              <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
+              <translate :translate-n="activeFilesCount.folders" translate-plural="folders">folder</translate>
+              <translate>and</translate>
+              <span id="files-list-count-files" v-text="activeFilesCount.files" />
+              <translate :translate-n="activeFilesCount.files" translate-plural="files">file</translate>
               <template v-if="activeFiles.length > 0">
                 &dash; {{ filesTotalSize | fileSize }}
               </template>
@@ -180,3 +179,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  /* FIXME */
+  #files-table-header-star {
+    opacity: 0;
+  }
+</style>

apps/files/src/components/Collaborators/SharedFilesList.vue

@@ -2,21 +2,21 @@
   <file-list :fileData="fileData" id="files-list" :loading="loadingFolder" :actions="actions" :compactMode="_sidebarOpen"
     :isActionEnabled="isActionEnabled">
     <template #headerColumns>
-      <oc-table-cell type="head" class="uk-text-truncate" v-translate>Name</oc-table-cell>
-      <oc-table-cell shrink type="head" class="uk-text-nowrap" v-text="sharedCellTitle" />
-      <oc-table-cell
+      <div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate>Name</div>
+      <div class="uk-text-nowrap uk-text-meta uk-width-small" v-text="sharedCellTitle" />
+      <div
         v-if="$route.name === 'files-shared-with-me'"
         shrink
         type="head"
-        class="uk-text-nowrap"
+        class="uk-text-nowrap uk-text-meta uk-width-small"
         v-translate
       >
         Status
-      </oc-table-cell>
-      <oc-table-cell shrink type="head" class="uk-text-nowrap" v-translate>Share time</oc-table-cell>
+      </div>
+      <div class="uk-text-nowrap uk-text-meta uk-width-small" v-translate>Share time</div>
     </template>
     <template #rowColumns="{ item }">
-      <oc-table-cell class="uk-text-truncate">
+      <div class="uk-text-truncate uk-width-expand">
         <oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
           :name="item.basename" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
           :filename="item.name" :key="item.path" />
@@ -26,21 +26,21 @@
           :uk-tooltip="disabledActionTooltip(item)"
           class="uk-margin-small-left"
         />
-      </oc-table-cell>
-      <oc-table-cell class="uk-text-meta uk-text-nowrap">
+      </div>
+      <div class="uk-text-meta uk-text-nowrap uk-width-small">
         <div v-if="$route.name === 'files-shared-with-others'" key="shared-with-cell">
           {{ item.sharedWith }} (<translate v-if="item.shareType === 1">group</translate>)
         </div>
         <div v-else key="shared-from-cell">
           {{ item.shareOwnerDisplayname }}
         </div>
-      </oc-table-cell>
-      <oc-table-cell v-if="$route.name === 'files-shared-with-me'" class="uk-text-nowrap uk-text-right" :key="item.id + item.status">
+      </div>
+      <div v-if="$route.name === 'files-shared-with-me'" class="uk-text-nowrap uk-width-small" :key="item.id + item.status">
         <a v-if="item.status === 1 || item.status === 2" class="uk-text-meta" @click="pendingShareAction(item, 'POST')" v-translate>Accept</a>
         <a v-if="item.status === 1" class="uk-text-meta uk-margin-left" @click="pendingShareAction(item, 'DELETE')" v-translate>Decline</a>
         <span class="uk-text-small uk-margin-left" v-text="shareStatus(item.status)" />
-      </oc-table-cell>
-      <oc-table-cell class="uk-text-meta uk-text-nowrap" v-text="formDateFromNow(item.shareTime)" />
+      </div>
+      <div class="uk-text-meta uk-text-nowrap uk-width-small" v-text="formDateFromNow(item.shareTime)" />
     </template>
   </file-list>
 </template>

apps/files/src/components/FileFilterMenu.vue

@@ -2,10 +2,13 @@
   <oc-drop toggle="#oc-filter-list-btn" mode="click">
     <ul class="uk-list">
       <li v-for="(filter, fid) in fileFilter" :key="fid">
-        <oc-checkbox :id="'oc-filter-' + filter.tag + '-checkbox'" :name="filter.tag" :value="filter.value" @change="setFileFilter({ name: filter.name, value: !filter.value })" />
-        <label :id="'oc-filter-' + filter.tag + '-label'" :for="'oc-filter-' + filter.tag + '-checkbox'" class="uk-text-meta">
-          {{ fileFilterTranslations[filter.name] }}
-        </label>
+        <oc-checkbox
+          :id="'oc-filter-' + filter.tag"
+          :name="filter.tag"
+          :value="filter.value"
+          :label="fileFilterTranslations[filter.name]"
+          @change="setFileFilter({ name: filter.name, value: !filter.value })"
+        />
       </li>
       <li>
         <label for="oc-filter-search" class="uk-text-meta" v-translate>

apps/files/src/components/FileList.vue

@@ -1,78 +1,105 @@
 <template>
-  <div class="uk-height-1-1">
+  <!-- TODO: Take care of outside click overall and not just in files list -->
+  <div :id="id" class="uk-height-1-1 uk-position-relative" @click="hideRowActionsDropdown">
     <div class="uk-flex uk-flex-column uk-height-1-1">
-      <div id="files-list-container" class="uk-overflow-auto uk-flex-auto">
-        <oc-table middle divider class="oc-filelist uk-margin-remove-bottom" :id="id" v-show="!loading">
-          <thead>
-            <oc-table-row>
-              <oc-table-cell shrink type="head">
-                <oc-checkbox class="uk-margin-small-left" id="filelist-check-all" :hideLabel="true" :label="labelSelectAllItems" @click.native="toggleAll" :value="selectedAll" />
-              </oc-table-cell>
-              <slot name="headerColumns"/>
-              <oc-table-cell shrink type="head" :class="{ 'uk-visible@s' : compactMode }" v-translate>Actions</oc-table-cell>
-            </oc-table-row>
-          </thead>
-          <oc-table-group>
-            <oc-table-row v-for="(item, index) in fileData" :key="index" :class="_rowClasses(item)" @click="selectRow(item, $event)" :id="'file-row-' + item.id">
-              <oc-table-cell>
-                <oc-checkbox :hideLabel="true" class="uk-margin-small-left" @click.stop @change.native="toggleFileSelect(item)" :value="selectedFiles.indexOf(item) >= 0" :label="labelSelectSingleItem(item)"/>
-              </oc-table-cell>
-              <slot name="rowColumns" :item="item" :index="index" />
-              <oc-table-cell :class="{ 'uk-visible@s' : compactMode }" class="uk-position-relative">
-                <div class="uk-button-group uk-margin-small-right" :class="{ 'uk-visible@m' : !compactMode, 'uk-visible@xl' : compactMode  }">
-                  <oc-button
-                    v-for="action in actions"
-                   :key="action.ariaLabel"
-                   @click.stop="action.handler(item, action.handlerData)"
-                   :disabled="!$_isActionEnabled(item, action) || $_actionInProgress(item)"
-                   :icon="action.icon"
-                   :ariaLabel="action.ariaLabel"
-                   :uk-tooltip="$_disabledActionTooltip(item)"
-                  />
-                </div>
+      <oc-grid gutter="small" flex id="files-table-header" class="uk-padding-small">
+        <div>
+          <oc-checkbox
+            class="uk-margin-small-left"
+            id="filelist-check-all"
+            :hideLabel="true"
+            :label="labelSelectAllItems"
+            @click.native="toggleAll"
+            :value="selectedAll"
+          />
+        </div>
+        <slot name="headerColumns"/>
+        <div
+          class="uk-text-meta uk-text-right uk-width-auto "
+          :class="{ 'uk-width-small@s uk-width-medium@m' : !compactMode }"
+          v-translate
+        >
+          Actions
+        </div>
+      </oc-grid>
+      <RecycleScroller
+        id="files-list-container"
+        class="uk-flex-1"
+        :items="fileData"
+        :item-size="70"
+        v-slot="{ item, index, active }"
+        v-if="!loading"
+        :key="fileData.length"
+      >
+        <div
+          :data-is-visible="active"
+          @click="selectRow(item, $event); hideRowActionsDropdown()"
+        >
+          <oc-grid gutter="small" flex class="uk-padding-small oc-border-top" :class="_rowClasses(item)" :id="'file-row-' + item.id">
+            <div>
+              <oc-checkbox
+                class="uk-margin-small-left"
+                @click.stop @change.native="toggleFileSelect(item)"
+                :value="selectedFiles.indexOf(item) >= 0"
+                :label="labelSelectSingleItem(item)"
+              />
+            </div>
+            <slot name="rowColumns" :item="item" :index="item.id" />
+            <div :class="{ 'uk-visible@s' : compactMode, 'uk-width-small@s uk-width-medium@m': !compactMode }" class="uk-width-auto uk-text-right">
+              <div
+                class="uk-button-group"
+                :class="{
+                  'uk-visible@m' : !compactMode,
+                  'uk-visible@xl' : compactMode
+                }"
+              >
                 <oc-button
-                  :id="'files-file-list-action-button-small-resolution-' + index"
-                  icon="more_vert"
-                  :class="{ 'uk-hidden@m' : !compactMode, 'uk-visible@s uk-hidden@xl' : compactMode }"
-                  :disabled="$_actionInProgress(item)"
-                  :aria-label="'show-file-actions'"
-                  @click.stop
+                  v-for="action in actions"
+                  :key="action.ariaLabel"
+                  @click.stop="action.handler(item, action.handlerData)"
+                  :disabled="!$_isActionEnabled(item, action) || $_actionInProgress(item)"
+                  :icon="action.icon"
+                  :ariaLabel="action.ariaLabel"
+                  :uk-tooltip="$_disabledActionTooltip(item)"
                 />
-                <oc-drop
-                  v-if="!isDialogOpen"
-                  :toggle="'#files-file-list-action-button-small-resolution-' + index"
-                  :options="{ offset: 0 }"
-                  position="bottom-right"
-                >
-                  <ul class="uk-list">
-                    <li v-for="action in $_enabledActions(item)" :key="action.ariaLabel">
-                      <oc-button
-                        class="uk-width-1-1"
-                        @click.native.stop="action.handler(item, action.handlerData)"
-                        :icon="action.icon"
-                        :ariaLabel="action.ariaLabel"
-                      >
-                        {{ action.ariaLabel }}
-                      </oc-button>
-                    </li>
-                  </ul>
-                </oc-drop>
-              </oc-table-cell>
-            </oc-table-row>
-          </oc-table-group>
-        </oc-table>
-      </div>
+              </div>
+              <oc-button
+                :id="`files-file-list-action-button-small-resolution-${item.id}${{ '-active': active }}`"
+                icon="more_vert"
+                :class="{ 'uk-hidden@m' : !compactMode, 'uk-visible@s uk-hidden@xl' : compactMode }"
+                :disabled="$_actionInProgress(item)"
+                :aria-label="'show-file-actions'"
+                @click.stop="toggleRowActionsDropdown(item)"
+              />
+            </div>
+          </oc-grid>
+        </div>
+      </RecycleScroller>
       <oc-grid gutter="large" class="uk-width-1-1 uk-padding-small" v-if="!loading">
         <slot name="footer" />
       </oc-grid>
     </div>
+    <row-actions-dropdown
+      :displayed="rowActionsDisplayed"
+      :item="rowActionsItem"
+      :actions="rowActions"
+      @actionClicked="hideRowActionsDropdown"
+    />
   </div>
 </template>
 <script>
 import { mapGetters, mapActions, mapState } from 'vuex'
+import { RecycleScroller } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+const RowActionsDropdown = () => import('./FilesLists/RowActionsDropdown.vue')
 
 export default {
   name: 'FileList',
+  components: {
+    RecycleScroller,
+    RowActionsDropdown
+  },
   props: {
     id: {
       type: String,
@@ -111,7 +138,10 @@ export default {
   data () {
     return {
       labelSelectAllItems: this.$gettext('Select all items'),
-      labelSelectSingleItemText: this.$gettext('Select %{type} %{name}')
+      labelSelectSingleItemText: this.$gettext('Select %{type} %{name}'),
+      rowActions: [],
+      rowActionsDisplayed: false,
+      rowActionsItem: {}
     }
   },
   methods: {
@@ -210,15 +240,11 @@ export default {
     },
     _rowClasses (item) {
       if (this.highlightedFile && item.id === this.highlightedFile.id) {
-        return 'file-row uk-active'
+        return 'file-row oc-background-selected'
       }
       return 'file-row'
     },
     selectRow (item, event) {
-      if (event.target.tagName !== 'TD') {
-        return
-      }
-
       if (item.status && (item.status === 1 || item.status === 2)) return
 
       event.stopPropagation()
@@ -241,12 +267,29 @@ export default {
           }
         }
       }
+    },
+
+    toggleRowActionsDropdown (item) {
+      if (item === this.rowActionsItem) {
+        this.hideRowActionsDropdown()
+        return
+      }
+
+      this.rowActionsDisplayed = true
+      this.rowActionsItem = item
+      this.rowActions = this.$_enabledActions(item)
+    },
+
+    hideRowActionsDropdown () {
+      this.rowActionsDisplayed = false
+      this.rowActionsItem = {}
+      this.rowActions = []
     }
   },
   computed: {
     ...mapState(['route']),
     ...mapGetters('Files', ['selectedFiles', 'highlightedFile', 'activeFiles', 'quota',
-      'filesTotalSize', 'activeFilesCount', 'actionsInProgress', 'isDialogOpen']),
+      'filesTotalSize', 'activeFilesCount', 'actionsInProgress']),
     ...mapGetters(['configuration']),
 
     selectedAll () {