feat: move sidebar toggle button into the topbar

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

@@ -22,17 +22,6 @@
                 :per-page-default="perPageDefault"
                 per-page-storage-prefix="admin-settings"
               />
-              <oc-button
-                v-if="sideBarAvailablePanels.length"
-                id="files-toggle-sidebar"
-                v-oc-tooltip="toggleSidebarButtonLabel"
-                :aria-label="toggleSidebarButtonLabel"
-                appearance="raw"
-                class="oc-my-s oc-p-xs"
-                @click.stop="toggleSideBar"
-              >
-                <oc-icon name="side-bar-right" :fill-type="toggleSidebarButtonIconFillType" />
-              </oc-button>
             </div>
           </div>
           <div
@@ -169,9 +158,6 @@ export default defineComponent({
     const closeSideBar = () => {
       eventBus.publish(SideBarEventTopics.close)
     }
-    const toggleSideBar = () => {
-      eventBus.publish(SideBarEventTopics.toggle)
-    }
     const selectPanel = (panel) => {
       eventBus.publish(SideBarEventTopics.setActivePanel, panel)
     }
@@ -197,24 +183,13 @@ export default defineComponent({
       appBarRef,
       limitedScreenSpace,
       closeSideBar,
-      toggleSideBar,
       selectPanel,
       ...useAppDefaults({
         applicationId: 'admin-settings'
       }),
       perPageDefault,
       paginationOptions
     }
-  },
-  computed: {
-    toggleSidebarButtonLabel() {
-      return this.isSideBarOpen
-        ? this.$gettext('Close sidebar to hide details')
-        : this.$gettext('Open sidebar to view details')
-    },
-    toggleSidebarButtonIconFillType() {
-      return this.isSideBarOpen ? 'fill' : 'line'
-    }
   }
 })
 </script>
@@ -234,15 +209,6 @@ export default defineComponent({
   top: 0;
 }
 
-#files-toggle-sidebar {
-  vertical-align: middle;
-  border: 3px solid transparent;
-  &:hover {
-    background-color: var(--oc-color-background-hover);
-    border-radius: 3px;
-  }
-}
-
 .admin-settings-app-bar-controls {
   height: 52px;
 

packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts

@@ -65,12 +65,6 @@ describe('AppTemplate', () => {
       const { wrapper } = getWrapper({ props: { isSideBarOpen: false } })
       expect(wrapper.find(stubSelectors.sideBar).exists()).toBeFalsy()
     })
-    it('can be toggled', async () => {
-      const eventSpy = jest.spyOn(eventBus, 'publish')
-      const { wrapper } = getWrapper({ props: { sideBarAvailablePanels: [jest.fn()] } })
-      await wrapper.find(stubSelectors.sideBarToggleButton).trigger('click')
-      expect(eventSpy).toHaveBeenCalledWith(SideBarEventTopics.toggle)
-    })
     it('can be closed', async () => {
       const eventSpy = jest.spyOn(eventBus, 'publish')
       const { wrapper } = getWrapper()

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

@@ -10,13 +10,6 @@ exports[`Spaces view loading states should render spaces list after loading has
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div class="oc-flex">
             <view-options-stub hasfileextensions="false" hashiddenfiles="false" haspagination="true" paginationoptions="20,50,100,250" perpagedefault="50" perpagequeryname="items-per-page" perpagestorageprefix="admin-settings" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
-            <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <span class="oc-icon oc-icon-m oc-icon-passive">
-                <!---->
-              </span>
-            </button>
           </div>
         </div>
         <div class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs">

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

@@ -10,7 +10,6 @@ exports[`Users view list view renders initially warning if filters are mandatory
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div class="oc-flex">
             <view-options-stub hasfileextensions="false" hashiddenfiles="false" haspagination="true" paginationoptions="20,50,100,250" perpagedefault="50" perpagequeryname="items-per-page" perpagestorageprefix="admin-settings" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
-            <oc-button-stub appearance="raw" arialabel="Open sidebar to view details" class="oc-my-s oc-p-xs" disabled="false" gapsize="medium" id="files-toggle-sidebar" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
           </div>
         </div>
         <div class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs">
@@ -71,7 +70,6 @@ exports[`Users view list view renders list initially 1`] = `
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div class="oc-flex">
             <view-options-stub hasfileextensions="false" hashiddenfiles="false" haspagination="true" paginationoptions="20,50,100,250" perpagedefault="50" perpagequeryname="items-per-page" perpagestorageprefix="admin-settings" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
-            <oc-button-stub appearance="raw" arialabel="Open sidebar to view details" class="oc-my-s oc-p-xs" disabled="false" gapsize="medium" id="files-toggle-sidebar" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
           </div>
         </div>
         <div class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs">

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -7,7 +7,6 @@
         :breadcrumbs-context-actions-items="[currentFolder]"
         :has-bulk-actions="displayFullAppBar"
         :show-actions-on-selection="displayFullAppBar"
-        :has-sidebar-toggle="displayFullAppBar"
         :has-view-options="displayFullAppBar"
         :is-side-bar-open="isSideBarOpen"
         :space="space"

packages/web-app-files/src/views/spaces/Projects.vue

@@ -3,7 +3,6 @@
     <files-view-wrapper>
       <app-bar
         :breadcrumbs="breadcrumbs"
-        :has-sidebar-toggle="true"
         :show-actions-on-selection="true"
         :has-bulk-actions="true"
         :has-hidden-files="false"

packages/web-app-files/src/views/trash/Overview.vue

@@ -3,7 +3,6 @@
     <files-view-wrapper>
       <app-bar
         :breadcrumbs="breadcrumbs"
-        :has-sidebar-toggle="false"
         :has-view-options="false"
         :has-hidden-files="false"
         :has-file-extensions="false"

packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`Projects view different files view states lists all available project s
 <div class="oc-flex oc-width-1-1">
   <div class="files-view-wrapper oc-width-expand">
     <div id="files-view">
-      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="true" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassidebartoggle="true" hasviewoptions="true" issidebaropen="false" showactionsonselection="true" viewmodedefault="resource-tiles" viewmodes="[object Object],[object Object]"></app-bar-stub>
+      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="true" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hasviewoptions="true" issidebaropen="false" showactionsonselection="true" viewmodedefault="resource-tiles" viewmodes="[object Object],[object Object]"></app-bar-stub>
       <div class="spaces-list oc-mt-l">
         <div class="spaces-list-filters oc-flex oc-flex-right oc-px-m oc-mb-m">
           <div class="">

packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`TrashOverview view states should render spaces list 1`] = `
 <div class="oc-flex">
   <div class="files-view-wrapper oc-width-expand">
     <div id="files-view">
-      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="false" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassidebartoggle="false" hasviewoptions="false" issidebaropen="false" showactionsonselection="false" viewmodedefault="resource-table" viewmodes=""></app-bar-stub>
+      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="false" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hasviewoptions="false" issidebaropen="false" showactionsonselection="false" viewmodedefault="resource-table" viewmodes=""></app-bar-stub>
       <div class="trash-bin-filters oc-flex oc-flex-right oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m">
         <div class="">
           <label class="oc-label" for="spaces-filter">Search</label>

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

@@ -37,21 +37,15 @@
         </oc-breadcrumb>
         <portal-target v-if="showMobileNav" name="app.runtime.mobile.nav" />
         <slot v-if="hasSharesNavigation" name="navigation" />
-        <div
-          v-if="hasViewOptions || hasSidebarToggle"
-          id="files-app-bar-controls-right"
-          class="oc-flex"
-        >
+        <div v-if="hasViewOptions" id="files-app-bar-controls-right" class="oc-flex">
           <view-options
-            v-if="hasViewOptions"
             :view-modes="viewModes"
             :has-hidden-files="hasHiddenFiles"
             :has-file-extensions="hasFileExtensions"
             :has-pagination="hasPagination"
             per-page-storage-prefix="files"
             :view-mode-default="viewModeDefault"
           />
-          <sidebar-toggle v-if="hasSidebarToggle" :is-side-bar-open="isSideBarOpen" />
         </div>
       </div>
       <div class="files-app-bar-actions oc-mt-xs">
@@ -84,9 +78,10 @@ import {
   SpaceResource
 } from '@ownclouders/web-client/src/helpers'
 import BatchActions from '../BatchActions.vue'
-import { isLocationCommonActive, isLocationTrashActive } from '../../router'
 import ContextActions from '../FilesList/ContextActions.vue'
-import SidebarToggle from './SidebarToggle.vue'
+import QuotaModal from '../Spaces/QuotaModal.vue'
+import ViewOptions from '../ViewOptions.vue'
+import { isLocationCommonActive, isLocationTrashActive } from '../../router'
 import { ViewMode } from '../../ui/types'
 import {
   useFileActionsAcceptShare,
@@ -111,7 +106,6 @@ import {
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from '../../composables'
 import { helpers } from 'design-system'
-import ViewOptions from '../ViewOptions.vue'
 import { useGettext } from 'vue3-gettext'
 import {
   FileAction,
@@ -120,15 +114,13 @@ import {
   useSpaceActionsEditQuota,
   useSpaceActionsRestore
 } from '../../composables'
-import QuotaModal from '../Spaces/QuotaModal.vue'
 
 const { EVENT_ITEM_DROPPED } = helpers
 
 export default defineComponent({
   components: {
     BatchActions,
     ContextActions,
-    SidebarToggle,
     ViewOptions,
     QuotaModal
   },
@@ -151,7 +143,6 @@ export default defineComponent({
       default: () => []
     },
     hasBulkActions: { type: Boolean, default: false },
-    hasSidebarToggle: { type: Boolean, default: true },
     hasViewOptions: { type: Boolean, default: true },
     hasHiddenFiles: { type: Boolean, default: true },
     hasFileExtensions: { type: Boolean, default: true },

packages/web-pkg/src/components/AppBar/index.ts

@@ -1,2 +1 @@
 export { default as AppBar } from './AppBar.vue'
-export { default as SidebarToggle } from './SidebarToggle.vue'

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

@@ -73,10 +73,6 @@
           </oc-button>
         </div>
       </span>
-      <oc-button @click="toggleSideBar">
-        {{ isSideBarOpen }}
-        <oc-icon name="side-bar-right" />
-      </oc-button>
     </div>
   </portal>
 </template>
@@ -85,14 +81,7 @@
 import { computed, defineComponent, PropType, unref } from 'vue'
 import ContextActionMenu from './ContextActions/ContextActionMenu.vue'
 import { useGettext } from 'vue3-gettext'
-import {
-  Action,
-  SideBarEventTopics,
-  useEventBus,
-  useFolderLink,
-  useGetMatchingSpace,
-  useSideBar
-} from '../composables'
+import { Action, useEventBus, useFolderLink, useGetMatchingSpace } from '../composables'
 import {
   Resource,
   isPublicSpaceResource,
@@ -149,20 +138,13 @@ export default defineComponent({
       return props.resource ? getParentFolderLinkIconAdditionalAttributes(props.resource) : null
     })
 
-    const toggleSideBar = () => {
-      eventBus.publish(SideBarEventTopics.toggle)
-    }
-    const { isSideBarOpen } = useSideBar()
-
     return {
       pathPrefix,
       isPathDisplayed,
       contextMenuLabel,
       closeButtonLabel,
       parentFolderName,
-      parentFolderLinkIconAdditionalAttributes,
-      isSideBarOpen,
-      toggleSideBar
+      parentFolderLinkIconAdditionalAttributes
     }
   }
 })

packages/web-pkg/tests/unit/components/AppBar/AppBar.spec.ts

@@ -104,25 +104,14 @@ describe('AppBar component', () => {
         expect(wrapper.find(selectors.mobileNavPortal).exists()).toBe(shows)
       })
     })
-    describe('viewoptions and sidebartoggle', () => {
-      it('only viewoptions if sidebartoggle is disabled', () => {
-        const { wrapper } = getShallowWrapper([], {}, { hasSidebarToggle: false })
+    describe('viewoptions', () => {
+      it('show if options are available', () => {
+        const { wrapper } = getShallowWrapper([], {}, { hasViewOptions: true })
         expect(wrapper.find(selectors.viewOptionsStub).exists()).toBeTruthy()
-        expect(wrapper.find(selectors.sidebarToggleStub).exists()).toBeFalsy()
       })
-      it('only sidebartoggle if viewoptions is disabled', () => {
+      it('hide if options are not available', () => {
         const { wrapper } = getShallowWrapper([], {}, { hasViewOptions: false })
         expect(wrapper.find(selectors.viewOptionsStub).exists()).toBeFalsy()
-        expect(wrapper.find(selectors.sidebarToggleStub).exists()).toBeTruthy()
-      })
-      it('neither if both are disabled', () => {
-        const { wrapper } = getShallowWrapper(
-          [],
-          {},
-          { hasSidebarToggle: false, hasViewOptions: false }
-        )
-        expect(wrapper.find(selectors.viewOptionsStub).exists()).toBeFalsy()
-        expect(wrapper.find(selectors.sidebarToggleStub).exists()).toBeFalsy()
       })
       it('passes viewModes array to ViewOptions', () => {
         const viewModes = [ViewModeConstants.tilesView]