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.
owncloud · Aug 8, 2024 · 1299b6b · 1299b6b
1 parent 6507707
commit 1299b6b
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 18 deletions.
diff --git a/changelog/unreleased/enhancement-unstick-top-bar 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }
+}