feat: soothe right sidebar panel transitions

owncloud · Sep 20, 2024 · 6bf0773 · 6bf0773
1 parent 830e5fb
commit 6bf0773
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 5 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
@@ -49,7 +49,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()
+ const rootCloseButtonSelector = `//div[contains(@class,"is-active-root-panel")]//button[contains(@class,"header__close")]`
+
+ const rootPanelVisible = await page.locator('.is-active-root-panel').isVisible()
+ if (rootPanelVisible) {
+ await page.locator(rootCloseButtonSelector).click()
+ } else {
+ await page.locator(closeButtonSelector).click()
+ }
 }
 
 export const openPanel = async ({ page, name }: { page: Page; name: string }): Promise<void> => {