mirror of
https://github.com/OFFIS-ESC/constellation-analyzer
synced 2026-01-26 23:43:40 +00:00
9ffd62d54a
Add comprehensive presentation/viewer mode optimized for touch table interactions with clean UI and touch-friendly timeline navigation. State Management: - Add presentationMode toggle to settingsStore with localStorage persistence - Add preferPresentationMode to DocumentMetadata for per-document preferences - Auto-enter presentation mode when opening documents that prefer it - Add setDocumentPresentationPreference() helper to workspaceStore UI Components: - Create PresentationTimelineOverlay component with floating timeline control - Previous/Next navigation buttons with chevron icons - Horizontal scrollable state list - Only shows when document has 2+ states - Proper vertical alignment using flex items-stretch and centered content - Scales to ~10 states with max-w-screen-md (768px) container - Create presentation.css for touch optimizations (60px+ touch targets) UI Modifications: - App.tsx: Conditional rendering hides editing chrome in presentation mode - GraphEditor: Disable editing interactions, keep pan/zoom enabled - MenuBar: Add "Presentation Mode" menu item - Global shortcuts: F11 to toggle, Escape to exit presentation mode Tests: - Add presentation mode tests to settingsStore.test.ts - Add document preference tests to workspaceStore.test.ts - All 376 tests passing Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
73 lines
1.6 KiB
CSS
73 lines
1.6 KiB
CSS
/**
|
|
* Presentation Mode Touch Optimizations
|
|
*
|
|
* CSS styles to optimize the interface for touch table interactions
|
|
* in presentation mode.
|
|
*/
|
|
|
|
/* Touch optimization for presentation mode container */
|
|
.presentation-mode {
|
|
/* Faster tap response - removes 300ms delay */
|
|
touch-action: manipulation;
|
|
|
|
/* Prevent text selection during touch interactions */
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
/* Larger touch targets for better accessibility */
|
|
.presentation-mode button,
|
|
.presentation-mode .touch-target {
|
|
min-height: 60px;
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* Smooth transitions for touch interactions */
|
|
.presentation-mode .transition-all {
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 200ms;
|
|
}
|
|
|
|
/* Hide scrollbars in presentation mode for cleaner look */
|
|
.presentation-mode ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.presentation-mode {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Ensure backdrop blur is supported */
|
|
@supports (backdrop-filter: blur(8px)) {
|
|
.backdrop-blur-sm {
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.backdrop-blur-md {
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
}
|
|
|
|
/* Fallback for browsers without backdrop-filter support */
|
|
@supports not (backdrop-filter: blur(8px)) {
|
|
.backdrop-blur-sm {
|
|
background-color: rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.backdrop-blur-md {
|
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
}
|
|
|
|
/* Touch-optimized button feedback */
|
|
.presentation-mode button:active {
|
|
transform: scale(0.95);
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
/* Prevent double-tap zoom on buttons */
|
|
.presentation-mode button {
|
|
touch-action: manipulation;
|
|
}
|