Allow scrolling in users and groups list (#7321)

Allow scrolling in users and groups list
owncloud · Jul 26, 2022 · 15ecf32 · 15ecf32
1 parent 10685ba
commit 15ecf32
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 9 deletions.
diff --git a/changelog/unreleased/bugfix-missing-scroll-bar-in-user-management-app b/changelog/unreleased/bugfix-missing-scroll-bar-in-user-management-app
@@ -0,0 +1,7 @@
+Bugfix: Missing scroll bar in user management app
+
+We've fixed a bug in the user management app where no scroll bar was displayed in the users or groups list
+if it exceeds the screen size.
+
+https://github.com/owncloud/web/pull/7321
+https://github.com/owncloud/web/issues/7266
diff --git a/packages/web-app-user-management/src/components/Groups/GroupsList.vue b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
@@ -6,6 +6,8 @@
     :fields="fields"
     :data="data"
     :highlighted="highlighted"
+    :sticky="true"
+    :header-position="headerPosition"
     @sort="handleSort"
   >
     <template #selectHeader>
@@ -74,6 +76,10 @@ export default {
     selectedGroups: {
       type: Array,
       required: true
+    },
+    headerPosition: {
+      type: Number,
+      required: true
     }
   },
   setup() {

diff --git a/packages/web-app-user-management/src/components/Users/UsersList.vue b/packages/web-app-user-management/src/components/Users/UsersList.vue
@@ -6,6 +6,8 @@
     :fields="fields"
     :data="data"
     :highlighted="highlighted"
+    :sticky="true"
+    :header-position="headerPosition"
     @sort="handleSort"
   >
     <template #selectHeader>
@@ -83,6 +85,10 @@ export default {
     selectedUsers: {
       type: Array,
       required: true
+    },
+    headerPosition: {
+      type: Number,
+      required: true
     }
   },
   setup() {

diff --git a/packages/web-app-user-management/src/views/Groups.vue b/packages/web-app-user-management/src/views/Groups.vue
@@ -15,8 +15,8 @@
     <main class="oc-flex oc-height-1-1 app-content oc-width-1-1">
       <app-loading-spinner v-if="loadResourcesTask.isRunning" />
       <template v-else>
-        <div class="files-list-wrapper oc-width-expand">
-          <div class="oc-app-bar oc-p-m">
+        <div id="groups-wrapper" class="oc-width-expand">
+          <div id="groups-app-bar" ref="appBar" class="oc-app-bar oc-py-s">
             <div class="oc-flex oc-flex-between">
               <oc-breadcrumb class="oc-flex oc-flex-middle" :items="breadcrumbs" />
               <div>
@@ -32,7 +32,7 @@
                 </oc-button>
               </div>
             </div>
-            <div class="oc-flex-1 oc-flex oc-flex-start oc-mt-m">
+            <div class="oc-flex-1 oc-flex oc-flex-start">
               <div v-if="selectedGroups.length" class="oc-flex oc-flex-middle">
                 <span v-text="selectedGroupsText" />
                 <oc-button
@@ -72,7 +72,7 @@
             <GroupsList
               :groups="groups"
               :selected-groups="selectedGroups"
-              class="oc-mt-m"
+              :header-position="listHeaderPosition"
               @toggleSelectGroup="toggleSelectGroup"
               @toggleSelectAllGroups="toggleSelectAllGroups"
               @clickDetails="showDetailsSideBarPanel"
@@ -151,6 +151,7 @@ export default defineComponent({
   },
   data: function () {
     return {
+      listHeaderPosition: 0,
       selectedGroups: [],
       createGroupModalOpen: false,
       deleteGroupModalOpen: false,
@@ -228,13 +229,20 @@ export default defineComponent({
       this.loadResourcesTask.perform(this)
     })
 
+    this.calculateListHeaderPosition()
+
+    window.addEventListener('resize', this.calculateListHeaderPosition)
+
     this.$on('beforeDestroy', () => {
       bus.unsubscribe('app.user-management.list.load', loadResourcesEventToken)
     })
   },
 
   methods: {
     ...mapActions(['showMessage']),
+    calculateListHeaderPosition() {
+      this.listHeaderPosition = this.$refs.appBar.getBoundingClientRect().height
+    },
     toggleSelectAllGroups() {
       if (this.allGroupsSelected) {
         return (this.selectedGroups = [])
@@ -371,6 +379,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+#groups-app-bar {
+  background-color: var(--oc-color-background-default);
+  border-top-right-radius: 15px;
+  box-sizing: border-box;
+  z-index: 2;
+  position: sticky;
+  padding: 0 var(--oc-space-medium);
+  top: 0;
+}
+
+#groups-wrapper {
+  overflow-y: auto;
+}
+
 .groups-sidebar {
   position: relative;
   overflow: hidden;

diff --git a/packages/web-app-user-management/src/views/Users.vue b/packages/web-app-user-management/src/views/Users.vue
@@ -15,8 +15,8 @@
     <main class="oc-flex oc-height-1-1 app-content oc-width-1-1">
       <app-loading-spinner v-if="loadResourcesTask.isRunning" />
       <template v-else>
-        <div class="files-list-wrapper oc-width-expand">
-          <div class="oc-app-bar oc-p-m">
+        <div id="users-wrapper" class="oc-width-expand">
+          <div id="users-app-bar" ref="appBar" class="oc-py-s">
             <div class="oc-flex oc-flex-between">
               <oc-breadcrumb class="oc-flex oc-flex-middle" :items="breadcrumbs" />
               <div>
@@ -32,7 +32,7 @@
                 </oc-button>
               </div>
             </div>
-            <div class="oc-flex-1 oc-flex oc-flex-start oc-mt-m">
+            <div class="oc-flex-1 oc-flex oc-flex-start">
               <div v-if="selectedUsers.length" class="oc-flex oc-flex-middle">
                 <span v-text="selectedUsersText" />
                 <oc-button
@@ -72,7 +72,7 @@
             <UsersList
               :users="users"
               :selected-users="selectedUsers"
-              class="oc-mt-m"
+              :header-position="listHeaderPosition"
               @toggleSelectUser="toggleSelectUser"
               @toggleSelectAllUsers="toggleSelectAllUsers"
               @clickDetails="showDetailsSideBarPanel"
@@ -232,6 +232,7 @@ export default defineComponent({
   },
   data: function () {
     return {
+      listHeaderPosition: 0,
       selectedUsers: [],
       createUserModalOpen: false,
       deleteUserModalOpen: false,
@@ -315,20 +316,26 @@ export default defineComponent({
       this.loadResourcesTask.perform(this)
     })
 
+    this.calculateListHeaderPosition()
+
+    window.addEventListener('resize', this.calculateListHeaderPosition)
+
     this.$on('beforeDestroy', () => {
       bus.unsubscribe('app.user-management.list.load', loadResourcesEventToken)
     })
   },
 
   methods: {
     ...mapActions(['showMessage']),
+    calculateListHeaderPosition() {
+      this.listHeaderPosition = this.$refs.appBar.getBoundingClientRect().height
+    },
     toggleSelectAllUsers() {
       if (this.allUsersSelected) {
         return (this.selectedUsers = [])
       }
       this.selectedUsers = [...this.users]
     },
-
     toggleSelectUser(toggledUser) {
       const isUserSelected = this.selectedUsers.find((user) => user.id === toggledUser.id)
 
@@ -529,6 +536,20 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+#users-app-bar {
+  background-color: var(--oc-color-background-default);
+  border-top-right-radius: 15px;
+  box-sizing: border-box;
+  z-index: 2;
+  position: sticky;
+  padding: 0 var(--oc-space-medium);
+  top: 0;
+}
+
+#users-wrapper {
+  overflow-y: auto;
+}
+
 .users-sidebar {
   position: relative;
   overflow: hidden;