Rebase and iterate on approach

owncloud · Jul 10, 2023 · f5a5231 · f5a5231
1 parent 226a787
commit f5a5231
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts
@@ -75,7 +75,7 @@ export const useFileActionsCreateNewFolder = ({
         title: $gettext('"%{folderName}" was created successfully', { folderName })
       })
 
-      scrollToResource(resource.id)
+      scrollToResource(resource.id, true)
     } catch (error) {
       console.error(error)
       store.dispatch('showMessage', {

diff --git a/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts b/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts
@@ -6,7 +6,7 @@ import { useRouteQuery } from 'web-pkg/src/composables'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export interface ScrollToResult {
-  scrollToResource(resourceId: Resource['id']): void
+  scrollToResource(resourceId: Resource['id'], forceScroll?: boolean): void
   scrollToResourceFromRoute(resources: Resource[]): void
 }
 
@@ -21,7 +21,7 @@ export const useScrollTo = (): ScrollToResult => {
     return queryItemAsString(unref(detailsQuery))
   })
 
-  const scrollToResource = (resourceId: Resource['id']) => {
+  const scrollToResource = (resourceId: Resource['id'], forceScroll = false) => {
     const resourceElement = document.querySelectorAll(
       `[data-item-id='${resourceId}']`
     )[0] as HTMLElement
@@ -30,7 +30,17 @@ export const useScrollTo = (): ScrollToResult => {
       return
     }
 
-    resourceElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    const topbarElement = document.getElementsByClassName('files-topbar')[0] as HTMLElement
+    // topbar height + th height + height of one row = offset needed when scrolling top
+    const topOffset = topbarElement.offsetHeight + resourceElement.offsetHeight * 2
+
+    if (
+      resourceElement.getBoundingClientRect().bottom > window.innerHeight ||
+      resourceElement.getBoundingClientRect().top < topOffset ||
+      forceScroll
+    ) {
+      resourceElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
   }
 
   const scrollToResourceFromRoute = (resources: Resource[]) => {
@@ -41,7 +51,7 @@ export const useScrollTo = (): ScrollToResult => {
     const resource = unref(resources).find((r) => r.id === unref(scrollTo))
     if (resource) {
       store.commit('Files/SET_FILE_SELECTION', [resource])
-      scrollToResource(resource.id)
+      scrollToResource(resource.id, true)
 
       if (unref(details)) {
         eventBus.publish(SideBarEventTopics.openWithPanel, unref(details))