Merge pull request #11313 from owncloud/fix/horizontal-scroll-on-smal…

…l-screens fix: horizontal resource table scroll
owncloud · Aug 5, 2024 · 32d81a8 · 32d81a8
2 parents 2750f70 + 38894b0
commit 32d81a8
Show file tree

Hide file tree

Showing 27 changed files with 77 additions and 30 deletions.
diff --git a/changelog/unreleased/bugfix-horizontal-table-scroll b/changelog/unreleased/bugfix-horizontal-table-scroll
@@ -0,0 +1,6 @@
+Bugfix: Prevent horizontal table scroll
+
+We've prevented resource tables from being horizontally scrollable for a11y reasons. Instead, information that is available elsewhere will get hidden on smaller displays.
+
+https://github.com/owncloud/web/pull/11313
+https://github.com/owncloud/web/issues/10728
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -291,6 +291,7 @@ export default defineComponent({
 }
 
 .oc-drop {
+  max-width: 100%;
   width: 300px;
 
   li a:focus {

diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -28,7 +28,11 @@
             v-if="showAppBar"
             class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs"
           >
-            <slot name="topbarActions" class="oc-flex-1 oc-flex oc-flex-start" />
+            <slot
+              name="topbarActions"
+              :limited-screen-space="limitedScreenSpace"
+              class="oc-flex-1 oc-flex oc-flex-start"
+            />
             <batch-actions
               v-if="showBatchActions"
               :actions="batchActions"

diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -98,7 +98,7 @@
       </template>
       <template #footer>
         <pagination :pages="totalPages" :current-page="currentPage" />
-        <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+        <div class="oc-text-center oc-width-1-1 oc-my-s">
           <p class="oc-text-muted">{{ footerTextTotal }}</p>
           <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
         </div>

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -108,7 +108,7 @@
       </template>
       <template #footer>
         <pagination :pages="totalPages" :current-page="currentPage" />
-        <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+        <div class="oc-text-center oc-width-1-1 oc-my-s">
           <p class="oc-text-muted">{{ footerTextTotal }}</p>
           <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
         </div>

diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -95,7 +95,7 @@
         </template>
         <template #footer>
           <pagination :pages="totalPages" :current-page="currentPage" />
-          <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+          <div class="oc-text-center oc-width-1-1 oc-my-s">
             <p class="oc-text-muted">{{ footerTextTotal }}</p>
           </div>
         </template>
@@ -431,7 +431,9 @@ export default defineComponent({
   .oc-table-header-cell-role,
   .oc-table-data-cell-role,
   .oc-table-header-cell-accountEnabled,
-  .oc-table-data-cell-accountEnabled {
+  .oc-table-data-cell-accountEnabled,
+  .oc-table-header-cell-mail,
+  .oc-table-data-cell-mail {
     display: none;
 
     @media only screen and (min-width: 1200px) {
@@ -452,7 +454,9 @@ export default defineComponent({
     .oc-table-header-cell-role,
     .oc-table-data-cell-role,
     .oc-table-header-cell-accountEnabled,
-    .oc-table-data-cell-accountEnabled {
+    .oc-table-data-cell-accountEnabled,
+    .oc-table-header-cell-mail,
+    .oc-table-data-cell-mail {
       display: none;
 
       @media only screen and (min-width: 1600px) {

diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -13,17 +13,18 @@
       :batch-action-items="selectedGroups"
       :show-view-options="true"
     >
-      <template #topbarActions>
+      <template #topbarActions="{ limitedScreenSpace }">
         <div>
           <oc-button
             id="create-group-btn"
+            v-oc-tooltip="limitedScreenSpace ? createGroupAction.label() : undefined"
             class="oc-mr-s"
             variation="primary"
             appearance="filled"
             @click="createGroupAction.handler()"
           >
             <oc-icon :name="createGroupAction.icon" />
-            <span v-text="createGroupAction.label()" />
+            <span v-if="!limitedScreenSpace" v-text="createGroupAction.label()" />
           </oc-button>
         </div>
       </template>

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
@@ -13,18 +13,19 @@
       :batch-action-items="selectedUsers"
       :show-view-options="true"
     >
-      <template #topbarActions>
+      <template #topbarActions="{ limitedScreenSpace }">
         <div>
           <oc-button
             v-if="createUserAction.isVisible()"
             id="create-user-btn"
+            v-oc-tooltip="limitedScreenSpace ? createUserAction.label() : undefined"
             class="oc-mr-s"
             variation="primary"
             appearance="filled"
             @click="createUserAction.handler()"
           >
             <oc-icon :name="createUserAction.icon" />
-            <span v-text="createUserAction.label()" />
+            <span v-if="!limitedScreenSpace" v-text="createUserAction.label()" />
           </oc-button>
         </div>
       </template>

diff --git a/...web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/...web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -116,7 +116,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td colspan="11" class="oc-table-footer-cell">
           <!-- @slot Footer of the table -->
           <!--v-if-->
-          <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+          <div class="oc-text-center oc-width-1-1 oc-my-s">
             <p class="oc-text-muted">2 spaces in total</p>
             <!--v-if-->
           </div>

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
@@ -139,7 +139,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                 <td colspan="8" class="oc-table-footer-cell">
                   <!-- @slot Footer of the table -->
                   <!--v-if-->
-                  <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+                  <div class="oc-text-center oc-width-1-1 oc-my-s">
                     <p class="oc-text-muted">1 users in total</p>
                   </div>
                 </td>

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -436,7 +436,7 @@ export default defineComponent({
       return this.clipboardResources && this.clipboardResources.length !== 0
     },
     hideButtonLabels() {
-      return this.limitedScreenSpace && this.showPasteHereButton
+      return this.limitedScreenSpace
     },
 
     showActions() {

diff --git a/packages/web-app-files/src/components/FilesList/ListInfo.vue b/packages/web-app-files/src/components/FilesList/ListInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-text-nowrap oc-text-center">
+  <div class="oc-text-center">
     <p data-testid="files-list-footer-info" class="oc-text-muted" v-text="resourceContentsText"></p>
   </div>
 </template>

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
@@ -6,7 +6,10 @@
         :has-bulk-actions="true"
         :is-side-bar-open="isSideBarOpen"
       />
-      <div v-if="displayFilter" class="files-search-result-filter oc-flex oc-mx-m oc-mb-m oc-mt-xs">
+      <div
+        v-if="displayFilter"
+        class="files-search-result-filter oc-flex oc-flex-wrap oc-mx-m oc-mb-m oc-mt-xs"
+      >
         <div class="oc-mr-m oc-flex oc-flex-middle">
           <oc-icon name="filter-2" class="oc-mr-xs" />
           <span v-text="$gettext('Filter:')" />
@@ -127,7 +130,7 @@
             <pagination :pages="paginationPages" :current-page="paginationPage" />
             <div
               v-if="searchResultExceedsLimit"
-              class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s"
+              class="oc-text-center oc-width-1-1 oc-my-s"
               v-text="searchResultExceedsLimitText"
             />
             <list-info v-else-if="paginatedResources.length > 0" class="oc-width-1-1 oc-my-s" />

diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -19,7 +19,6 @@
       v-model:selectedIds="selectedResourcesIds"
       :is-side-bar-open="isSideBarOpen"
       :fields-displayed="displayedFields"
-      sidebar-closed
       :resources="resourceItems"
       :are-resources-clickable="resourceClickable"
       :target-route-callback="resourceTargetRouteCallback"

diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -11,7 +11,7 @@
         <div
           class="shared-with-me-filters oc-flex oc-flex-between oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m"
         >
-          <div class="oc-flex">
+          <div class="oc-flex oc-flex-wrap">
             <div class="oc-mr-m oc-flex oc-flex-middle">
               <oc-icon name="filter-2" class="oc-mr-xs" />
               <span v-text="$gettext('Filter:')" />

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -81,6 +81,7 @@
               :drag-drop="true"
               :sort-by="sortBy"
               :sort-dir="sortDir"
+              :is-side-bar-open="isSideBarOpen"
               :header-position="fileListHeaderY /* table */"
               :sort-fields="sortFields /* tiles */"
               :view-size="viewSize /* tiles */"

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -32,7 +32,7 @@
             <span v-text="$gettext('You don\'t have access to any spaces')" />
           </template>
         </no-content-message>
-        <div v-else class="spaces-list oc-mt-l">
+        <div v-else class="spaces-list">
           <div
             class="spaces-list-filters oc-flex oc-flex-between oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m"
           >
@@ -64,6 +64,7 @@
             :sort-by="sortBy"
             :sort-dir="sortDir"
             :header-position="fileListHeaderY"
+            :is-side-bar-open="isSideBarOpen"
             :view-size="viewSize"
             v-bind="folderView.componentAttrs?.()"
             @sort="handleSort"
@@ -107,7 +108,7 @@
             </template>
             <template #footer>
               <pagination :pages="totalPages" :current-page="currentPage" />
-              <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+              <div class="oc-text-center oc-width-1-1 oc-my-s">
                 <p class="oc-text-muted">{{ footerTextTotal }}</p>
                 <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
               </div>

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
@@ -52,7 +52,7 @@
               </oc-button>
             </template>
             <template #footer>
-              <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+              <div class="oc-text-center oc-width-1-1 oc-my-s">
                 <p class="oc-text-muted">{{ footerTextTotal }}</p>
                 <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
               </div>

diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ListInfo.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ListInfo.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ListInfo > it renders content summary correctly 1`] = `
-"<div class="oc-text-nowrap oc-text-center">
+"<div class="oc-text-center">
   <p data-testid="files-list-footer-info" class="oc-text-muted">4 items with 50 kB in total (2 files, 2 folders)</p>
 </div>"
 `;
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Projects view > different files view states > lists all available proje
   <div data-v-39c970be="" class="files-view-wrapper oc-width-expand">
     <div data-v-39c970be="" id="files-view">
       <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="true" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="true" issidebaropen="false"></app-bar-stub>
-      <div class="spaces-list oc-mt-l">
+      <div class="spaces-list">
         <div class="spaces-list-filters oc-flex oc-flex-between oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m">
           <div class="oc-flex">
             <div class="oc-mr-m oc-flex oc-flex-middle"><span class="oc-icon oc-icon-m oc-icon-passive oc-mr-xs"><!----></span> <span>Filter:</span></div>
@@ -30,7 +30,7 @@ exports[`Projects view > different files view states > lists all available proje
             <!--v-if-->
           </div>
         </div>
-        <div class="resource-table" selectedids="" resource-type="space" resources="[object Object],[object Object]" fields-displayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sort-by="undefined" sort-dir="desc" header-position="0" view-size="NaN"></div>
+        <div class="resource-table" selectedids="" resource-type="space" resources="[object Object],[object Object]" fields-displayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sort-by="undefined" sort-dir="desc" header-position="0" is-side-bar-open="false" view-size="NaN"></div>
       </div>
     </div>
   </div>

diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -51,7 +51,7 @@ exports[`TrashOverview > view states > should render spaces list 1`] = `
           <tr class="oc-table-footer-row">
             <td colspan="2" class="oc-table-footer-cell">
               <!-- @slot Footer of the table -->
-              <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+              <div class="oc-text-center oc-width-1-1 oc-my-s">
                 <p class="oc-text-muted">3 trashes in total</p>
                 <!--v-if-->
               </div>

diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -1219,7 +1219,11 @@ export default defineComponent({
   .oc-table-header-cell-manager,
   .oc-table-data-cell-manager,
   .oc-table-header-cell-remainingQuota,
-  .oc-table-data-cell-remainingQuota {
+  .oc-table-data-cell-remainingQuota,
+  .oc-table-header-cell-members,
+  .oc-table-data-cell-members,
+  .oc-table-header-cell-status,
+  .oc-table-data-cell-status {
     display: none;
 
     @media only screen and (min-width: 960px) {
@@ -1251,7 +1255,9 @@ export default defineComponent({
     .oc-table-header-cell-totalQuota,
     .oc-table-data-cell-totalQuota,
     .oc-table-header-cell-usedQuota,
-    .oc-table-data-cell-usedQuota {
+    .oc-table-data-cell-usedQuota,
+    .oc-table-header-cell-members,
+    .oc-table-data-cell-members {
       display: none;
 
       @media only screen and (min-width: 1400px) {
@@ -1368,14 +1374,18 @@ export default defineComponent({
 
 // shared with me: on tablets hide shared with column and display sharedBy column instead
 #files-shared-with-me-view .files-table .oc-table-header-cell-sharedBy,
-#files-shared-with-me-view .files-table .oc-table-data-cell-sharedBy {
+#files-shared-with-me-view .files-table .oc-table-data-cell-sharedBy,
+#files-shared-with-me-view .files-table .oc-table-header-cell-syncEnabled,
+#files-shared-with-me-view .files-table .oc-table-data-cell-syncEnabled {
   @media only screen and (min-width: 640px) {
     display: table-cell;
   }
 }
 
 #files-shared-with-me-view .files-table .oc-table-header-cell-sharedWith,
-#files-shared-with-me-view .files-table .oc-table-data-cell-sharedWith {
+#files-shared-with-me-view .files-table .oc-table-data-cell-sharedWith,
+#files-shared-with-me-view .files-table .oc-table-header-cell-syncEnabled,
+#files-shared-with-me-view .files-table .oc-table-data-cell-syncEnabled {
   @media only screen and (max-width: 1199px) {
     display: none;
   }

diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
@@ -69,7 +69,7 @@
         </li>
         <li
           v-if="viewModes.find((v) => v.name === FolderViewModeConstants.name.tiles)"
-          class="files-view-options-list-item oc-visible@s oc-flex oc-flex-between oc-flex-middle"
+          class="files-view-options-list-item oc-flex oc-flex-between oc-flex-middle"
         >
           <label for="tiles-size-slider" v-text="$gettext('Tile size')" />
           <input

diff --git a/tests/e2e/cucumber/features/shares/link.feature b/tests/e2e/cucumber/features/shares/link.feature
@@ -345,6 +345,7 @@ Feature: link
       | resource     | role     | password |
       | folderPublic | Can edit | %public% |
     When "Alice" opens the "files" app
+    And "Alice" closes the sidebar
     Then "Alice" should see link-direct indicator on the folder "folderPublic"
     When "Alice" opens folder "folderPublic"
     Then "Alice" should see link-indirect indicator on the file "lorem.txt"

diff --git a/tests/e2e/cucumber/features/smoke/sse.feature b/tests/e2e/cucumber/features/smoke/sse.feature
@@ -77,6 +77,7 @@ Feature: server sent events
       | space-folder | Carol     | user | Can view |
     Then "Alice" should get "share-created" SSE event
     And "Brian" should get "share-created" SSE event
+    And "Brian" closes the sidebar
     And "Brian" should see user-direct indicator on the folder "space-folder"
 
     # share-updated

diff --git a/tests/e2e/cucumber/steps/ui/application.ts b/tests/e2e/cucumber/steps/ui/application.ts
@@ -43,3 +43,9 @@ When(
     await applicationObject.openUrl(url)
   }
 )
+
+When('{string} closes the sidebar', async function (this: World, user: string): Promise<void> {
+  const { page } = this.actorsEnvironment.getActor({ key: user })
+  const applicationObject = new objects.runtime.Application({ page })
+  await applicationObject.closeSidebar()
+})
diff --git a/tests/e2e/support/objects/runtime/application.ts b/tests/e2e/support/objects/runtime/application.ts
@@ -8,6 +8,7 @@ const notificationsDrop = `#oc-notifications-drop`
 const notificationsLoading = `#oc-notifications-drop .oc-notifications-loading`
 const markNotificationsAsReadButton = `#oc-notifications-drop .oc-notifications-mark-all`
 const notificationItemsMessages = `#oc-notifications-drop .oc-notifications-item .oc-notifications-message`
+const closeSidebarBtn = `#app-sidebar .header__close`
 
 export class Application {
   #page: Page
@@ -66,4 +67,11 @@ export class Application {
   async openUrl(url): Promise<void> {
     await this.#page.goto(url)
   }
+
+  async closeSidebar(): Promise<void> {
+    const sideBarIsOpen = await this.#page.locator(closeSidebarBtn).isVisible()
+    if (sideBarIsOpen) {
+      await this.#page.locator(closeSidebarBtn).click()
+    }
+  }
 }