From e96da17f1b47e85cf89fc4d575c79503c106773b Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@kiteworks.com>
Date: Thu, 8 Aug 2024 14:16:05 +0200
Subject: [PATCH] feat: unstick topbar with limited vertical space

Unsticks the top bar above tables as well as the table headers with limited vertical screen space. This way, we prevent those elements from overflowing content below.
---
 .../unreleased/enhancement-unstick-top-bar    |  6 +++++
 .../src/components/AppTemplate.vue            | 21 +++++++++++++---
 .../src/components/Groups/GroupsList.vue      |  7 ++++--
 .../src/components/Spaces/SpacesList.vue      |  9 ++++---
 .../src/components/Users/UsersList.vue        |  7 ++++--
 .../tests/unit/components/AppTemplate.spec.ts |  4 ++-
 .../views/__snapshots__/Spaces.spec.ts.snap   |  2 +-
 .../views/__snapshots__/Users.spec.ts.snap    |  4 +--
 .../web-pkg/src/components/AppBar/AppBar.vue  | 19 +++++++++++---
 .../components/FilesList/ResourceTable.vue    |  9 ++++---
 packages/web-pkg/src/composables/index.ts     |  1 +
 .../src/composables/isTopBarSticky/index.ts   |  1 +
 .../isTopBarSticky/useIsTopBarSticky.ts       | 25 +++++++++++++++++++
 .../AppBar/__snapshots__/AppBar.spec.ts.snap  |  6 ++---
 14 files changed, 96 insertions(+), 25 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-unstick-top-bar
 create mode 100644 packages/web-pkg/src/composables/isTopBarSticky/index.ts
 create mode 100644 packages/web-pkg/src/composables/isTopBarSticky/useIsTopBarSticky.ts

diff --git a/changelog/unreleased/enhancement-unstick-top-bar b/changelog/unreleased/enhancement-unstick-top-bar
new file mode 100644
index 00000000000..9d8b8800857
--- /dev/null
+++ b/changelog/unreleased/enhancement-unstick-top-bar
@@ -0,0 +1,6 @@
+Enhancement: Unstick top bar
+
+The top bar above tables as well as the table headers now lose their "stickiness" with limited vertical screen space. This way, we prevent those elements from overflowing content below.
+
+https://github.com/owncloud/web/pull/11344
+https://github.com/owncloud/web/issues/10728
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index ada01a6b597..682ae9ba58e 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -3,7 +3,12 @@
     <app-loading-spinner v-if="loading" />
     <template v-else>
       <div id="admin-settings-wrapper" class="oc-width-expand oc-height-1-1 oc-position-relative">
-        <div id="admin-settings-app-bar" ref="appBarRef" class="oc-app-bar oc-py-s">
+        <div
+          id="admin-settings-app-bar"
+          ref="appBarRef"
+          class="oc-app-bar oc-py-s"
+          :class="{ 'admin-settings-app-bar-sticky': isSticky }"
+        >
           <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
             <oc-breadcrumb
               v-if="!isMobileWidth"
@@ -68,7 +73,8 @@ import {
   SideBar,
   BatchActions,
   SideBarPanelContext,
-  Action
+  Action,
+  useIsTopBarSticky
 } from '@ownclouders/web-pkg'
 import {
   defineComponent,
@@ -159,6 +165,8 @@ export default defineComponent({
   setup(props) {
     const appBarRef = ref<VNodeRef>()
     const limitedScreenSpace = ref(false)
+    const { isSticky } = useIsTopBarSticky()
+
     const onResize = () => {
       limitedScreenSpace.value = props.isSideBarOpen
         ? window.innerWidth <= 1600
@@ -199,7 +207,8 @@ export default defineComponent({
         applicationId: 'admin-settings'
       }),
       perPageDefault,
-      paginationOptions
+      paginationOptions,
+      isSticky
     }
   }
 })
@@ -215,9 +224,13 @@ export default defineComponent({
   border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
-  position: sticky;
+  position: inherit;
   padding: 0 var(--oc-space-medium);
   top: 0;
+
+  &.admin-settings-app-bar-sticky {
+    position: sticky;
+  }
 }
 
 .admin-settings-app-bar-controls {
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index 917dcd81e01..ea7564b205b 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -14,7 +14,7 @@
       :fields="fields"
       :data="paginatedItems"
       :highlighted="highlighted"
-      :sticky="true"
+      :sticky="isSticky"
       :header-position="fileListHeaderY"
       :hover="true"
       @sort="handleSort"
@@ -125,6 +125,7 @@ import {
   displayPositionedDropdown,
   eventBus,
   SortDir,
+  useIsTopBarSticky,
   useKeyboardActions,
   useRoute,
   useRouter
@@ -157,6 +158,7 @@ export default defineComponent({
     const filterTerm = ref('')
     const router = useRouter()
     const route = useRoute()
+    const { isSticky } = useIsTopBarSticky()
 
     const lastSelectedGroupIndex = ref(0)
     const lastSelectedGroupId = ref(null)
@@ -351,7 +353,8 @@ export default defineComponent({
       unselectAllGroups,
       selectGroups,
       selectGroup,
-      groups
+      groups,
+      isSticky
     }
   },
   computed: {
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index f5173fa2d31..06f43257280 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -15,7 +15,7 @@
       :fields="fields"
       :data="paginatedItems"
       :highlighted="highlighted"
-      :sticky="true"
+      :sticky="isSticky"
       :header-position="fileListHeaderY"
       :hover="true"
       @sort="handleSort"
@@ -124,7 +124,8 @@ import {
   formatFileSize,
   defaultFuseOptions,
   useKeyboardActions,
-  ContextMenuBtnClickEventData
+  ContextMenuBtnClickEventData,
+  useIsTopBarSticky
 } from '@ownclouders/web-pkg'
 import {
   ComponentPublicInstance,
@@ -163,6 +164,7 @@ export default defineComponent({
     const route = useRoute()
     const language = useGettext()
     const { $gettext } = language
+    const { isSticky } = useIsTopBarSticky()
 
     const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
     const contextMenuButtonRef = ref(undefined)
@@ -535,7 +537,8 @@ export default defineComponent({
       totalPages,
       selectSpace,
       selectSpaces,
-      unselectAllSpaces
+      unselectAllSpaces,
+      isSticky
     }
   },
   methods: { $gettext }
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index 8747c6da9c1..53a88b094ed 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -14,7 +14,7 @@
         :fields="fields"
         :data="paginatedItems"
         :highlighted="highlighted"
-        :sticky="true"
+        :sticky="isSticky"
         :header-position="fileListHeaderY"
         :hover="true"
         @sort="handleSort"
@@ -124,6 +124,7 @@ import {
   eventBus,
   queryItemAsString,
   SortDir,
+  useIsTopBarSticky,
   useKeyboardActions,
   useRouteQuery
 } from '@ownclouders/web-pkg'
@@ -157,6 +158,7 @@ export default defineComponent({
   },
   setup(props) {
     const { $gettext } = useGettext()
+    const { isSticky } = useIsTopBarSticky()
 
     const contextMenuButtonRef = ref(undefined)
     const sortBy = ref('onPremisesSamAccountName')
@@ -366,7 +368,8 @@ export default defineComponent({
       selectUser,
       selectUsers,
       unselectAllUsers,
-      users
+      users,
+      isSticky
     }
   },
   computed: {
diff --git a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
index 31dfbc4c8e6..59f141b042e 100644
--- a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
@@ -6,7 +6,7 @@ import {
   RouteLocation,
   shallowMount
 } from 'web-test-helpers'
-import { eventBus, SideBar } from '@ownclouders/web-pkg'
+import { eventBus, SideBar, useIsTopBarSticky } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
 import { mock } from 'vitest-mock-extended'
 import { OcBreadcrumb } from 'design-system/src/components'
@@ -111,6 +111,8 @@ describe('AppTemplate', () => {
 })
 
 function getWrapper({ props = {}, isMobileWidth = false } = {}) {
+  vi.mocked(useIsTopBarSticky).mockReturnValue({ isSticky: ref(true) })
+
   return {
     wrapper: shallowMount(AppTemplate, {
       props: {
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index ec8176528b2..fc841701b6e 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
 "<div>
   <main class="oc-flex oc-height-1-1 app-content oc-width-1-1">
     <div id="admin-settings-wrapper" class="oc-width-expand oc-height-1-1 oc-position-relative">
-      <div id="admin-settings-app-bar" class="oc-app-bar oc-py-s">
+      <div id="admin-settings-app-bar" class="oc-app-bar oc-py-s admin-settings-app-bar-sticky">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
           <oc-breadcrumb-stub items="[object Object],[object Object]" id="admin-settings-breadcrumb" variation="default" contextmenupadding="medium" maxwidth="-1" truncationoffset="2" showcontextactions="false" class="oc-flex oc-flex-middle"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index f272f232083..62356a567f4 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
 "<div data-v-32efd9c6="">
   <main data-v-32efd9c6="" class="oc-flex oc-height-1-1 app-content oc-width-1-1">
     <div id="admin-settings-wrapper" class="oc-width-expand oc-height-1-1 oc-position-relative">
-      <div id="admin-settings-app-bar" class="oc-app-bar oc-py-s">
+      <div id="admin-settings-app-bar" class="oc-app-bar oc-py-s admin-settings-app-bar-sticky">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
           <oc-breadcrumb-stub items="[object Object],[object Object]" id="admin-settings-breadcrumb" variation="default" contextmenupadding="medium" maxwidth="-1" truncationoffset="2" showcontextactions="false" class="oc-flex oc-flex-middle"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
@@ -52,7 +52,7 @@ exports[`Users view > list view > renders list initially 1`] = `
 "<div data-v-32efd9c6="">
   <main data-v-32efd9c6="" class="oc-flex oc-height-1-1 app-content oc-width-1-1">
     <div id="admin-settings-wrapper" class="oc-width-expand oc-height-1-1 oc-position-relative">
-      <div id="admin-settings-app-bar" class="oc-app-bar oc-py-s">
+      <div id="admin-settings-app-bar" class="oc-app-bar oc-py-s admin-settings-app-bar-sticky">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
           <oc-breadcrumb-stub items="[object Object],[object Object]" id="admin-settings-breadcrumb" variation="default" contextmenupadding="medium" maxwidth="-1" truncationoffset="2" showcontextactions="false" class="oc-flex oc-flex-middle"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 08b6a8cbc81..a839782598b 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="files-app-bar" ref="filesAppBar" :class="{ 'files-app-bar-squashed': isSideBarOpen }">
+  <div
+    id="files-app-bar"
+    ref="filesAppBar"
+    :class="{ 'files-app-bar-squashed': isSideBarOpen, 'files-app-bar-sticky': isSticky }"
+  >
     <div class="files-topbar oc-py-s">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
       <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
@@ -93,7 +97,8 @@ import {
   useRouter,
   FolderViewModeConstants,
   useExtensionRegistry,
-  ActionExtension
+  ActionExtension,
+  useIsTopBarSticky
 } from '../../composables'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from '../../composables'
@@ -154,6 +159,7 @@ export default defineComponent({
     const { can } = useAbility()
     const router = useRouter()
     const { requestExtensions } = useExtensionRegistry()
+    const { isSticky } = useIsTopBarSticky()
 
     const resourcesStore = useResourcesStore()
     const { selectedResources } = storeToRefs(resourcesStore)
@@ -275,7 +281,8 @@ export default defineComponent({
       breadcrumbTruncationOffset,
       fileDroppedBreadcrumb,
       pageTitle,
-      selectedResources
+      selectedResources,
+      isSticky
     }
   },
   data: function () {
@@ -346,10 +353,14 @@ export default defineComponent({
   border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
-  position: sticky;
+  position: inherit;
   padding: 0 var(--oc-space-medium);
   top: 0;
 
+  &.files-app-bar-sticky {
+    position: sticky;
+  }
+
   .files-app-bar-controls {
     min-height: 52px;
 
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 61770750147..a2c619dcf9c 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -16,7 +16,7 @@
     :fields="fields"
     :highlighted="selectedIds"
     :disabled="disabledResources"
-    :sticky="true"
+    :sticky="isSticky"
     :header-position="headerPosition"
     :drag-drop="dragDrop"
     :hover="hover"
@@ -274,7 +274,8 @@ import {
   useResourcesStore,
   useRouter,
   useCanBeOpenedWithSecureView,
-  useFileActions
+  useFileActions,
+  useIsTopBarSticky
 } from '../../composables'
 import ResourceListItem from './ResourceListItem.vue'
 import ResourceGhostElement from './ResourceGhostElement.vue'
@@ -529,6 +530,7 @@ export default defineComponent({
     const { getMatchingSpace } = useGetMatchingSpace()
     const { canBeOpenedWithSecureView } = useCanBeOpenedWithSecureView()
     const { getFolderLink } = useFolderLink()
+    const { isSticky } = useIsTopBarSticky()
     const {
       isLocationPicker,
       isFilePicker,
@@ -670,7 +672,8 @@ export default defineComponent({
       areFileExtensionsShown,
       latestSelectedId,
       isResourceClickable,
-      getResourceLink
+      getResourceLink,
+      isSticky
     }
   },
   data() {
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index aff095e505f..90dde18b535 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -14,6 +14,7 @@ export * from './eventBus'
 export * from './fileListHeaderPosition'
 export * from './filesList'
 export * from './folderLink'
+export * from './isTopBarSticky'
 export * from './keyboardActions'
 export * from './links'
 export * from './loadingService'
diff --git a/packages/web-pkg/src/composables/isTopBarSticky/index.ts b/packages/web-pkg/src/composables/isTopBarSticky/index.ts
new file mode 100644
index 00000000000..86c92e82f7e
--- /dev/null
+++ b/packages/web-pkg/src/composables/isTopBarSticky/index.ts
@@ -0,0 +1 @@
+export * from './useIsTopBarSticky'
diff --git a/packages/web-pkg/src/composables/isTopBarSticky/useIsTopBarSticky.ts b/packages/web-pkg/src/composables/isTopBarSticky/useIsTopBarSticky.ts
new file mode 100644
index 00000000000..249e4c96a53
--- /dev/null
+++ b/packages/web-pkg/src/composables/isTopBarSticky/useIsTopBarSticky.ts
@@ -0,0 +1,25 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+/**
+ * Determines if the topbar (including table headers) should be sticky or not.
+ * With a vertical height less than 500px, the topbar should not be sticky because
+ * it takes up too much space and overflows content.
+ */
+export const useIsTopBarSticky = () => {
+  const isSticky = ref(true)
+
+  const setIsSticky = () => {
+    isSticky.value = window.innerHeight > 500
+  }
+
+  onMounted(() => {
+    setIsSticky()
+    window.addEventListener('resize', setIsSticky)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', setIsSticky)
+  })
+
+  return { isSticky }
+}
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 621159ccc7f..5c26a3f83c2 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions, no sharesnavigation but viewoptions and sidebartoggle 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="files-app-bar-sticky">
   <div data-v-aba8ddeb="" class="files-topbar oc-py-s">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
@@ -23,7 +23,7 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
 `;
 
 exports[`AppBar component > renders > if given, with content in the actions slot 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="files-app-bar-sticky">
   <div data-v-aba8ddeb="" class="files-topbar oc-py-s">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
@@ -45,7 +45,7 @@ exports[`AppBar component > renders > if given, with content in the actions slot
 `;
 
 exports[`AppBar component > renders > if given, with content in the content slot 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="files-app-bar-sticky">
   <div data-v-aba8ddeb="" class="files-topbar oc-py-s">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>