From 1299b6bf01314aa4289a1307c75a06ab52b9141a 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 ++++--
 .../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 +++++++++++++++++++
 10 files changed, 87 insertions(+), 18 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-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 dceb6a7ebf7..fc8724ad845 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"
@@ -273,7 +273,8 @@ import {
   useClipboardStore,
   useResourcesStore,
   useRouter,
-  useCanBeOpenedWithSecureView
+  useCanBeOpenedWithSecureView,
+  useIsTopBarSticky
 } from '../../composables'
 import ResourceListItem from './ResourceListItem.vue'
 import ResourceGhostElement from './ResourceGhostElement.vue'
@@ -528,6 +529,7 @@ export default defineComponent({
     const capabilityStore = useCapabilityStore()
     const { getMatchingSpace } = useGetMatchingSpace()
     const { canBeOpenedWithSecureView } = useCanBeOpenedWithSecureView()
+    const { isSticky } = useIsTopBarSticky()
     const {
       isLocationPicker,
       isFilePicker,
@@ -649,7 +651,8 @@ export default defineComponent({
       toggleSelection,
       areFileExtensionsShown,
       latestSelectedId,
-      isResourceClickable
+      isResourceClickable,
+      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 }
+}