fix: view options and breadcrumbs on mobile with right sidebar

packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts

@@ -1,4 +1,4 @@
-import { defaultPlugins, shallowMount } from '@opencloud-eu/web-test-helpers'
+import { defaultPlugins, PartialComponentProps, shallowMount } from '@opencloud-eu/web-test-helpers'
 import Breadcrumb from './OcBreadcrumb.vue'
 
 const items = [
@@ -48,9 +48,28 @@ describe('OcBreadcrumb', () => {
       expect(wrapper.find('.oc-breadcrumb-mobile-current').exists()).toBe(shows)
     })
   })
+  describe('mobile breakpoint', () => {
+    it.each<{ breakpoint: 'sm' | 'md' | 'lg'; listClass: string }>([
+      { breakpoint: 'sm', listClass: 'sm:flex' },
+      { breakpoint: 'md', listClass: 'md:flex' },
+      { breakpoint: 'lg', listClass: 'lg:flex' }
+    ])('sets the correct tailwind class on the breadcrumb list', ({ breakpoint, listClass }) => {
+      const { wrapper } = getWrapper({ items, mobileBreakpoint: breakpoint })
+      expect(wrapper.find('.oc-breadcrumb-list').classes()).toContain(listClass)
+    })
+    it.each<{ breakpoint: 'sm' | 'md' | 'lg'; listClass: string }>([
+      { breakpoint: 'sm', listClass: 'sm:hidden' },
+      { breakpoint: 'md', listClass: 'md:hidden' },
+      { breakpoint: 'lg', listClass: 'lg:hidden' }
+    ])('sets the correct tailwind class on the mobile breadcrumbs', ({ breakpoint, listClass }) => {
+      const { wrapper } = getWrapper({ items, mobileBreakpoint: breakpoint })
+      expect(wrapper.find('.oc-breadcrumb-mobile-navigation').classes()).toContain(listClass)
+      expect(wrapper.find('.oc-breadcrumb-mobile-current').classes()).toContain(listClass)
+    })
+  })
 })
 
-const getWrapper = (props = {}) => {
+const getWrapper = (props: PartialComponentProps<typeof Breadcrumb> = {}) => {
   return {
     wrapper: shallowMount(Breadcrumb, {
       props: {

packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue

@@ -4,7 +4,14 @@
     :class="`oc-breadcrumb oc-breadcrumb-${variation} overflow-visible`"
     :aria-label="$gettext('Breadcrumbs')"
   >
-    <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
+    <ol
+      class="oc-breadcrumb-list hidden items-baseline m-0 p-0 flex-nowrap"
+      :class="{
+        'sm:flex': mobileBreakpoint === 'sm',
+        'md:flex': mobileBreakpoint === 'md',
+        'lg:flex': mobileBreakpoint === 'lg'
+      }"
+    >
       <li
         v-for="(item, index) in displayItems"
         :key="index"
@@ -110,14 +117,24 @@
       type="router-link"
       :aria-label="$gettext('Navigate one level up')"
       :to="parentFolderTo"
-      class="oc-breadcrumb-mobile-navigation sm:hidden block"
+      class="oc-breadcrumb-mobile-navigation flex"
+      :class="{
+        'sm:hidden': mobileBreakpoint === 'sm',
+        'md:hidden': mobileBreakpoint === 'md',
+        'lg:hidden': mobileBreakpoint === 'lg'
+      }"
     >
       <oc-icon name="arrow-left-s" fill-type="line" size="large" />
     </oc-button>
   </nav>
   <div
     v-if="displayItems.length > 1"
-    class="oc-breadcrumb-mobile-current sm:hidden flex justify-center items-center w-0 flex-1"
+    class="oc-breadcrumb-mobile-current flex justify-center items-center w-0 flex-1"
+    :class="{
+      'sm:hidden': mobileBreakpoint === 'sm',
+      'md:hidden': mobileBreakpoint === 'md',
+      'lg:hidden': mobileBreakpoint === 'lg'
+    }"
   >
     <span class="truncate" aria-current="page" v-text="currentFolder.text" />
   </div>
@@ -151,6 +168,11 @@ export interface Props {
    * @default -1
    */
   maxWidth?: number
+  /**
+   * @docs The Tailwind breakpoint at which the mobile version of the breadcrumb is shown.
+   * @default sm
+   */
+  mobileBreakpoint?: 'sm' | 'md' | 'lg'
   /**
    * @docs Determines if the context actions are shown for the last breadcrumb item.
    * @default false
@@ -187,6 +209,7 @@ const {
   contextMenuPadding = 'medium',
   id = uniqueId('oc-breadcrumbs-'),
   maxWidth = -1,
+  mobileBreakpoint = 'sm',
   showContextActions = false,
   truncationOffset = 2,
   variation = 'default'

packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`OcBreadcrumb > displays all items 1`] = `
 "<nav data-v-5914b352="" id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default overflow-visible" aria-label="Breadcrumbs">
-  <ol data-v-5914b352="" class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
+  <ol data-v-5914b352="" class="oc-breadcrumb-list hidden items-baseline m-0 p-0 flex-nowrap sm:flex">
     <li data-v-5914b352="" data-key="0" class="oc-breadcrumb-list-item flex items-center">
       <router-link-stub data-v-5914b352="" tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span data-v-5914b352="" class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">First folder</span></router-link-stub>
       <oc-icon-stub data-v-5914b352="" accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
@@ -27,17 +27,17 @@ exports[`OcBreadcrumb > displays all items 1`] = `
       <!--v-if-->
     </li>
   </ol>
-  <oc-button-stub data-v-5914b352="" arialabel="Navigate one level up" to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="oc-breadcrumb-mobile-navigation sm:hidden block">
+  <oc-button-stub data-v-5914b352="" arialabel="Navigate one level up" to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="oc-breadcrumb-mobile-navigation flex sm:hidden">
     <oc-icon-stub data-v-5914b352="" accessiblelabel="" color="" filltype="line" name="arrow-left-s" size="large" type="span"></oc-icon-stub>
   </oc-button-stub>
 </nav>
 
-<div data-v-5914b352="" class="oc-breadcrumb-mobile-current sm:hidden flex justify-center items-center w-0 flex-1"><span data-v-5914b352="" class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
+<div data-v-5914b352="" class="oc-breadcrumb-mobile-current flex justify-center items-center w-0 flex-1 sm:hidden"><span data-v-5914b352="" class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
 `;
 
 exports[`OcBreadcrumb > sets correct variation 1`] = `
 "<nav data-v-5914b352="" id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead overflow-visible" aria-label="Breadcrumbs">
-  <ol data-v-5914b352="" class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
+  <ol data-v-5914b352="" class="oc-breadcrumb-list hidden items-baseline m-0 p-0 flex-nowrap sm:flex">
     <li data-v-5914b352="" data-key="0" class="oc-breadcrumb-list-item flex items-center">
       <router-link-stub data-v-5914b352="" tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span data-v-5914b352="" class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">First folder</span></router-link-stub>
       <oc-icon-stub data-v-5914b352="" accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
@@ -62,10 +62,10 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
       <!--v-if-->
     </li>
   </ol>
-  <oc-button-stub data-v-5914b352="" arialabel="Navigate one level up" to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="oc-breadcrumb-mobile-navigation sm:hidden block">
+  <oc-button-stub data-v-5914b352="" arialabel="Navigate one level up" to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="oc-breadcrumb-mobile-navigation flex sm:hidden">
     <oc-icon-stub data-v-5914b352="" accessiblelabel="" color="" filltype="line" name="arrow-left-s" size="large" type="span"></oc-icon-stub>
   </oc-button-stub>
 </nav>
 
-<div data-v-5914b352="" class="oc-breadcrumb-mobile-current sm:hidden flex justify-center items-center w-0 flex-1"><span data-v-5914b352="" class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
+<div data-v-5914b352="" class="oc-breadcrumb-mobile-current flex justify-center items-center w-0 flex-1 sm:hidden"><span data-v-5914b352="" class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
 `;

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -15,6 +15,7 @@
                 v-if="!isMobileWidth"
                 id="admin-settings-breadcrumb"
                 :items="breadcrumbs"
+                :mobile-breakpoint="isSideBarOpen ? 'md' : 'sm'"
               />
               <portal-target name="app.runtime.mobile.nav" />
               <div class="flex">

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
-            <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
+            <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
             <div class="flex">
               <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
-            <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
+            <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
             <div class="flex">
               <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
@@ -67,7 +67,7 @@ exports[`Users view > list view > renders list initially 1`] = `
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
-            <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
+            <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
             <div class="flex">
               <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>

packages/web-pkg/src/components/AppBar/AppBar.vue

@@ -23,6 +23,7 @@
           :items="breadcrumbs"
           :max-width="breadcrumbMaxWidth"
           :truncation-offset="breadcrumbTruncationOffset"
+          :mobile-breakpoint="isSideBarOpen ? 'md' : 'sm'"
           @item-dropped-breadcrumb="fileDroppedBreadcrumb"
         >
           <template #contextMenu>