mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-27 15:17:38 +00:00
Remove remaining animations and fix file browser issues
- Swap file picker and settings buttons in session header (settings now at the end) - Disable all button transitions in session view with body.in-session-view - Disable modal backdrop fade-in animation (0.3s) in session view - Fix file browser briefly showing then going dark by preventing event bubbling - Add stopPropagation to file browser button click to prevent duplicate modals The session detail page should now have zero animations when toggling sidebar or opening modals. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
d7a8b565d2
commit
ea3c22fba1
2 changed files with 25 additions and 4 deletions
|
|
@ -157,9 +157,15 @@ export class SessionHeader extends LitElement {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-2 text-xs flex-shrink-0 ml-2 relative">
|
<div class="flex items-center gap-2 text-xs flex-shrink-0 ml-2 relative">
|
||||||
|
<notification-status
|
||||||
|
@open-settings=${() => this.onOpenSettings?.()}
|
||||||
|
></notification-status>
|
||||||
<button
|
<button
|
||||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
||||||
@click=${() => this.onOpenFileBrowser?.()}
|
@click=${(e: Event) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.onOpenFileBrowser?.();
|
||||||
|
}}
|
||||||
title="Browse Files (⌘O)"
|
title="Browse Files (⌘O)"
|
||||||
data-testid="file-browser-button"
|
data-testid="file-browser-button"
|
||||||
>
|
>
|
||||||
|
|
@ -169,9 +175,6 @@ export class SessionHeader extends LitElement {
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<notification-status
|
|
||||||
@open-settings=${() => this.onOpenSettings?.()}
|
|
||||||
></notification-status>
|
|
||||||
<button
|
<button
|
||||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
||||||
@click=${() => this.onScreenshare?.()}
|
@click=${() => this.onScreenshare?.()}
|
||||||
|
|
|
||||||
|
|
@ -541,6 +541,24 @@ body.in-session-view .space-y-2 > div {
|
||||||
animation-delay: 0s !important;
|
animation-delay: 0s !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Disable all transitions on buttons in session view */
|
||||||
|
body.in-session-view button {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Disable transitions on all interactive elements in session view */
|
||||||
|
body.in-session-view .transition-all,
|
||||||
|
body.in-session-view .transition-colors,
|
||||||
|
body.in-session-view .transition-opacity,
|
||||||
|
body.in-session-view .transition-transform {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Disable modal backdrop animation in session view */
|
||||||
|
body.in-session-view .modal-backdrop {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Stagger animation when showing exited sessions */
|
/* Stagger animation when showing exited sessions */
|
||||||
body.sessions-showing .session-flex-responsive > session-card:nth-child(1) {
|
body.sessions-showing .session-flex-responsive > session-card:nth-child(1) {
|
||||||
animation-delay: 0s;
|
animation-delay: 0s;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue