lfg2025/archy
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 44 Wiki Activity

feat(ui): cloud folder zoom transition on path change

Browse Source 
Re-key FileGrid on the current folder path and wrap it in a cloud-zoom
Transition so the depth/zoom animation replays at every folder level; the
header + breadcrumb nav stay fixed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
archipelago 2026-06-18 09:40:16 -04:00
parent 790da4bd0f
commit d0ca53501c
1 changed files with 55 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
neode-ui/src/views/CloudFolder.vue
View File

@ -93,16 +93,23 @@
@upload="handleUpload"
@update:view-mode="viewMode = $event"
/>
<FileGrid
:items="cloudStore.sortedItems"
:loading="cloudStore.loading"
:view-mode="viewMode"
@navigate="navigateCloudPath"
@delete="handleDelete"
@play="handlePlay"
@share="handleShare"
@preview="handlePreview"
/>
<!-- Re-key on the current folder path so the depth/zoom animation replays
at every level (folder → subfolder → …), not just on first entry.
Only the file content zooms; the header + breadcrumb nav above stay
fixed in place. -->
<Transition name="cloud-zoom" mode="out-in">
<FileGrid
:key="cloudStore.currentPath"
:items="cloudStore.sortedItems"
:loading="cloudStore.loading"
:view-mode="viewMode"
@navigate="navigateCloudPath"
@delete="handleDelete"
@play="handlePlay"
@share="handleShare"
@preview="handlePreview"
/>
</Transition>
<!-- Audio player is now the global bottom bar (GlobalAudioPlayer in App.vue) -->
</div>
@ -386,3 +393,41 @@ function goBack() {
router.push('/dashboard/cloud')
}
</script>
<!-- Not scoped: the transition classes are applied to the FileGrid child's root
element, which lives outside this component's style scope. Matches the
`depth-forward` route transition feel (zoom in from depth + blur). -->
<style>
.cloud-zoom-enter-active,
.cloud-zoom-leave-active {
transition:
opacity 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
filter 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center center;
will-change: opacity, transform, filter;
}
/* New folder zooms in from depth */
.cloud-zoom-enter-from {
opacity: 0;
transform: scale(0.82);
filter: blur(4px);
}
/* Previous folder recedes forward as it leaves */
.cloud-zoom-leave-to {
opacity: 0;
transform: scale(1.12);
filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) {
.cloud-zoom-enter-active,
.cloud-zoom-leave-active {
transition: opacity 0.2s ease;
}
.cloud-zoom-enter-from,
.cloud-zoom-leave-to {
transform: none;
filter: none;
}
}
</style>