Merge pull request #10646 from owncloud/fix-spaces-tile-slider

fix: tile size slider on spaces overview

changelog/unreleased/enhancement-tile-sizes

@@ -5,4 +5,6 @@ In addition to that the default tile size has been changed to the second steppin
 space tiles and file/folder tiles have a sufficient size for reading longer names.
 
 https://github.com/owncloud/web/issues/10018
+https://github.com/owncloud/web/issues/10638
 https://github.com/owncloud/web/pull/10558
+https://github.com/owncloud/web/pull/10646

packages/web-app-files/src/views/spaces/Projects.vue

@@ -54,6 +54,8 @@
             :sort-fields="sortFields"
             :sort-by="sortBy"
             :sort-dir="sortDir"
+            :header-position="fileListHeaderY"
+            :view-size="viewSize"
             v-bind="folderView.componentAttrs?.()"
             @sort="handleSort"
             @row-mounted="rowMounted"
@@ -192,8 +194,6 @@ import { ResourceTable, ResourceTiles } from '@ownclouders/web-pkg'
 import { eventBus } from '@ownclouders/web-pkg'
 import { SideBarEventTopics, useSideBar } from '@ownclouders/web-pkg'
 import { WebDAV } from '@ownclouders/web-client/src/webdav'
-import { useScrollTo } from '@ownclouders/web-pkg'
-import { useSelectedResources } from '@ownclouders/web-pkg'
 import { sortFields as availableSortFields } from '@ownclouders/web-pkg'
 import { defaultFuseOptions, formatFileSize, ResourceIcon } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
@@ -209,6 +209,7 @@ import {
   useKeyboardTableActions
 } from 'web-app-files/src/composables/keyboardActions'
 import { orderBy } from 'lodash-es'
+import { useResourcesViewDefaults } from '../../composables'
 
 export default defineComponent({
   components: {
@@ -229,7 +230,6 @@ export default defineComponent({
     const router = useRouter()
     const route = useRoute()
     const clientService = useClientService()
-    const { selectedResourcesIds, selectedResources } = useSelectedResources()
     const { can } = useAbility()
     const { current: currentLanguage, $gettext } = useGettext()
     const filterTerm = ref('')
@@ -240,7 +240,22 @@ export default defineComponent({
 
     const { setSelection, initResourceList, clearResourceList } = useResourcesStore()
 
-    let loadPreviewToken = null
+    const loadResourcesTask = useTask(function* () {
+      clearResourceList()
+      yield spacesStore.reloadProjectSpaces({ graphClient: clientService.graphAuthenticated })
+      initResourceList({ currentFolder: null, resources: unref(spaces) })
+    })
+
+    const {
+      viewSize,
+      fileListHeaderY,
+      scrollToResourceFromRoute,
+      areResourcesLoading,
+      selectedResourcesIds,
+      selectedResources
+    } = useResourcesViewDefaults({ loadResourcesTask })
+
+    let loadPreviewToken: string = null
 
     const runtimeSpaces = computed(() => {
       return spacesStore.spaces.filter(isProjectSpaceResource) || []
@@ -309,18 +324,6 @@ export default defineComponent({
       })
     })
 
-    const { scrollToResourceFromRoute } = useScrollTo()
-
-    const loadResourcesTask = useTask(function* () {
-      clearResourceList()
-      yield spacesStore.reloadProjectSpaces({ graphClient: clientService.graphAuthenticated })
-      initResourceList({ currentFolder: null, resources: unref(spaces) })
-    })
-
-    const areResourcesLoading = computed(() => {
-      return loadResourcesTask.isRunning || !loadResourcesTask.last
-    })
-
     const hasCreatePermission = computed(() => can('create-all', 'Drive'))
 
     const extensionRegistry = useExtensionRegistry()
@@ -486,7 +489,9 @@ export default defineComponent({
       items,
       imageContentObject,
       rowMounted,
-      setSelection
+      setSelection,
+      viewSize,
+      fileListHeaderY
     }
   },
   computed: {

packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap

@@ -16,7 +16,7 @@ exports[`Projects view > different files view states > lists all available proje
             <!--v-if-->
           </div>
         </div>
-        <div class="resource-table" selectedids="" resource-type="space" are-thumbnails-displayed="true" resources="[object Object],[object Object]" fields-displayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sort-by="undefined" sort-dir="desc"></div>
+        <div class="resource-table" selectedids="" resource-type="space" are-thumbnails-displayed="true" resources="[object Object],[object Object]" fields-displayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sort-by="undefined" sort-dir="desc" header-position="0" view-size="NaN"></div>
       </div>
     </div>
   </div>