Merge pull request #11614 from owncloud/feat/soothe-sidebar-transition

feat: soothe right sidebar panel transitions
owncloud · Sep 20, 2024 · 0a3f222 · 0a3f222
2 parents 5b1e803 + 03e10f9
commit 0a3f222
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 6 deletions.
diff --git a/changelog/unreleased/enhancement-soothe-sidebar-transitions b/changelog/unreleased/enhancement-soothe-sidebar-transitions
@@ -0,0 +1,5 @@
+Enhancement: Soothe right sidebar panel transitions
+
+The panel transitions of the right sidebar are a bit smoother now.
+
+https://github.com/owncloud/web/pull/11614
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -13,11 +13,19 @@
     @select-panel="setActiveSideBarPanel"
     @close="closeSideBar"
   >
-    <template #header>
+    <template #rootHeader>
       <file-info
         v-if="isFileHeaderVisible"
         class="sidebar-panel__file_info"
-        :is-sub-panel-active="!!activePanel"
+        :is-sub-panel-active="false"
+      />
+      <space-info v-else-if="isSpaceHeaderVisible" class="sidebar-panel__space_info" />
+    </template>
+    <template #subHeader>
+      <file-info
+        v-if="isFileHeaderVisible"
+        class="sidebar-panel__file_info"
+        :is-sub-panel-active="true"
       />
       <space-info v-else-if="isSpaceHeaderVisible" class="sidebar-panel__space_info" />
     </template>

diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -19,7 +19,9 @@
         :data-testid="`sidebar-panel-${panel.name}`"
         :tabindex="activePanelName === panel.name ? -1 : null"
         class="sidebar-panel"
+        :inert="activePanelName !== panel.name"
         :class="{
+          'is-root-panel': panel.isRoot?.(panelContext),
           'is-active-sub-panel': hasActiveSubPanel && activeSubPanelName === panel.name, // only one specific sub panel can be active
           'is-active-root-panel': hasActiveRootPanel && panel.isRoot?.(panelContext) // all root panels are active if no sub panel is active
         }"
@@ -54,7 +56,8 @@
         </div>
 
         <div>
-          <slot name="header" />
+          <slot v-if="panel.isRoot?.(panelContext)" name="rootHeader" />
+          <slot v-else name="subHeader" />
         </div>
         <div class="sidebar-panel__body" :class="[`sidebar-panel__body-${panel.name}`]">
           <div
@@ -329,6 +332,18 @@ export default defineComponent({
     transform: translateX(0);
   }
 
+  &.is-active-root-panel {
+    right: 0 !important;
+    transition: right 0.4s 0s;
+  }
+
+  &.is-root-panel {
+    transform: translateX(0);
+    visibility: visible;
+    transition: right 0.4s 0s;
+    right: 100px;
+  }
+
   .multi-root-panel-separator {
     border-top: 1px solid var(--oc-color-border);
   }

diff --git a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
@@ -19,7 +19,7 @@ import { AncestorMetaDataValue } from '../../../../src'
 
 const InnerSideBarComponent = defineComponent({
   props: { availablePanels: { type: Array, required: true } },
-  template: '<div id="foo"><slot name="header"></slot></div>'
+  template: '<div id="foo"><slot name="rootHeader"></slot></div>'
 })
 
 vi.mock('../../../../src/composables/selection', () => ({ useSelectedResources: vi.fn() }))

diff --git a/tests/e2e/support/objects/app-files/utils/sidebar.ts b/tests/e2e/support/objects/app-files/utils/sidebar.ts
@@ -4,6 +4,8 @@ import { locatorUtils } from '../../../utils'
 
 const contextMenuSelector =
   '//span[@data-test-resource-name="%s"]/ancestor::tr[contains(@class, "oc-tbody-tr")]//button[contains(@class, "resource-table-btn-action-dropdown")]'
+const closeSidebarRootPanelBtn = `#app-sidebar .is-active-root-panel .header__close`
+const closeSidebarSubPanelBtn = `#app-sidebar .is-active-sub-panel .header__close`
 
 const openForResource = async ({
   page,
@@ -48,8 +50,14 @@ export const open = async ({
 }
 
 export const close = async ({ page }: { page: Page }): Promise<void> => {
-  const closeButtonSelector = `//div[contains(@class,"sidebar-panel is-active")]//button[contains(@class,"header__close")]`
-  await page.locator(closeButtonSelector).click()
+  // await sidebar transitions
+  await new Promise((resolve) => setTimeout(resolve, 250))
+  const isSubPanelActive = await page.locator(closeSidebarSubPanelBtn).isVisible()
+  if (isSubPanelActive) {
+    await page.locator(closeSidebarSubPanelBtn).click()
+  } else {
+    await page.locator(closeSidebarRootPanelBtn).click()
+  }
 }
 
 export const openPanel = async ({ page, name }: { page: Page; name: string }): Promise<void> => {

diff --git a/tests/e2e/support/objects/runtime/application.ts b/tests/e2e/support/objects/runtime/application.ts
@@ -71,6 +71,8 @@ export class Application {
   }
 
   async closeSidebar(): Promise<void> {
+    // await sidebar transitions
+    await new Promise((resolve) => setTimeout(resolve, 250))
     const isSubPanelActive = await this.#page.locator(closeSidebarSubPanelBtn).isVisible()
     if (isSubPanelActive) {
       await this.#page.locator(closeSidebarSubPanelBtn).click()