feat: soothe right sidebar panel transitions

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

Hide file tree

Showing 4 changed files with 33 additions and 4 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,19 @@ export default defineComponent({
     transform: translateX(0);
   }
 
+  &.is-active-root-panel {
+    right: 0 !important;
+    transition: right 0.4s 0s;
+  }
+
+  &.is-root-panel {
+    transition: unset;
+    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() }))