feat: soothe right sidebar panel transitions

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

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>

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);
  }

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() }))

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> => {

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()