diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts index 2e5cde7bf68..b591d8a9f87 100644 --- 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 index 0d7a94b8adc..d2e95d70c3d 100644 --- 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))