refactor: introduce files-view-wrapper component

owncloud · Aug 22, 2022 · 35b9aa1 · 35b9aa1
1 parent 241951f
commit 35b9aa1
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 60 deletions.
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
@@ -1,9 +1,7 @@
 <template>
   <main id="files" class="oc-flex oc-height-1-1">
     <div v-if="dragareaEnabled" class="dragarea" />
-    <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
-      <router-view id="files-view" tabindex="0" />
-    </div>
+    <router-view tabindex="0" class="oc-width-expand" />
   </main>
 </template>
 <script lang="ts">
@@ -15,10 +13,6 @@ export default defineComponent({
     dragareaEnabled: false
   }),
   created() {
-    this.$root.$on('upload-end', () => {
-      // delay for screen reader virtual buffer
-      setTimeout(() => this.$refs.filesListWrapper.focus(), 500)
-    })
     const dragOver = bus.subscribe('drag-over', this.onDragOver)
     const dragOut = bus.subscribe('drag-out', this.hideDropzone)
     const drop = bus.subscribe('drop', this.hideDropzone)
@@ -58,30 +52,8 @@ main {
   border-radius: 14px;
   border: 2px dashed var(--oc-color-swatch-primary-muted);
 }
-.files-list-wrapper {
-  position: relative;
-  overflow-y: auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content max-content 1fr;
-  gap: 0 0;
-  grid-template-areas:
-    'header'
-    'upload'
-    'main';
-
-  &:focus {
-    outline: none;
-  }
-}
 
 #files {
   position: relative;
 }
-
-#files-view {
-  grid-area: main;
-  z-index: 0;
-  outline: none;
-}
 </style>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -24,7 +24,7 @@ export default {
   watch: {
     currentPage: {
       handler: function () {
-        document.getElementsByClassName('files-list-wrapper')[0]?.scrollTo(0, 0)
+        document.getElementsByClassName('files-view-wrapper')[0]?.scrollTo(0, 0)
       }
     }
   }

diff --git a/packages/web-app-files/src/components/FilesViewWrapper.vue b/packages/web-app-files/src/components/FilesViewWrapper.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  inheritAttrs: false
+})
+</script>
+
+<style lang="scss" scoped>
+.files-view-wrapper {
+  position: relative;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content max-content 1fr;
+  gap: 0 0;
+  grid-template-areas:
+    'header'
+    'upload'
+    'main';
+
+  &:focus {
+    outline: none;
+  }
+}
+
+#files-view {
+  grid-area: main;
+  z-index: 0;
+  outline: none;
+}
+</style>
diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -45,7 +45,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -68,11 +68,13 @@ import { bus } from 'web-pkg/src/instance'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from './FilesViewWrapper.vue'
 
 export default defineComponent({
   name: 'TrashBin',
 
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     AppLoadingSpinner,

diff --git a/packages/web-app-files/src/mixins/filesListScrolling.js b/packages/web-app-files/src/mixins/filesListScrolling.js
@@ -15,7 +15,7 @@ export default {
 
       // top reached
       if (resourceElement.getBoundingClientRect().top < topOffset) {
-        const fileListWrapperElement = document.getElementsByClassName('files-list-wrapper')[0]
+        const fileListWrapperElement = document.getElementsByClassName('files-view-wrapper')[0]
         fileListWrapperElement.scrollBy(0, -resourceElement.offsetHeight)
       }
     }

diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -53,7 +53,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -82,11 +82,13 @@ import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     QuickActions,

diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -71,7 +71,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -110,11 +110,13 @@ import { useGraphClient } from 'web-client/src/composables'
 import { useCapabilityShareJailEnabled, useRouteParam } from 'web-pkg/src/composables'
 import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     CreateAndUpload,
     ResourceTable,

diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -64,7 +64,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -98,11 +98,13 @@ import { Resource } from 'web-client'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
 import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     CreateAndUpload,
     ResourceTable,

diff --git a/packages/web-app-files/src/views/shares/SharedResource.vue b/packages/web-app-files/src/views/shares/SharedResource.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -71,7 +71,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -98,6 +98,9 @@ import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
+import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 // misc
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -111,8 +114,6 @@ import { move } from '../../helpers/resource'
 import { Resource } from 'web-client'
 import { breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { useRouteParam, useRouteQuery } from 'web-pkg/src/composables'
-import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
-import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -129,7 +130,8 @@ export default defineComponent({
     Pagination,
     ContextActions,
     KeyboardActions,
-    SideBar
+    SideBar,
+    FilesViewWrapper
   },
 
   mixins: [

diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar :has-shares-navigation="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -46,14 +46,13 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
 
 <script lang="ts">
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 
 import FileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
@@ -68,17 +67,21 @@ import AppBar from '../../components/AppBar/AppBar.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
+import ResourceTable from '../../components/FilesList/ResourceTable.vue'
+
 import { createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
-import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     AppLoadingSpinner,

diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand oc-flex-column">
+    <files-view-wrapper class="oc-flex-column">
       <app-bar :has-shares-navigation="true" :has-bulk-actions="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -45,7 +45,7 @@
           :resource-clickable="false"
         />
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -61,9 +61,11 @@ import { ShareStatus } from 'web-client/src/helpers/share'
 import { computed, defineComponent, unref } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     AppLoadingSpinner,
     SharedWithMeSection,