184 lines
6.6 KiB
HTML
184 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Shot Detail Panel - Persistence Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
border-color: #c3e6cb;
|
|
}
|
|
.info {
|
|
background-color: #d1ecf1;
|
|
border-color: #bee5eb;
|
|
}
|
|
.warning {
|
|
background-color: #fff3cd;
|
|
border-color: #ffeaa7;
|
|
}
|
|
.code {
|
|
background-color: #f8f9fa;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
margin: 10px 0;
|
|
}
|
|
.test-step {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #007bff;
|
|
border-radius: 4px;
|
|
}
|
|
.expected {
|
|
background-color: #e7f3ff;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Shot Detail Panel - Persistence Test</h1>
|
|
|
|
<div class="test-section success">
|
|
<h2>✅ Fixed Behavior</h2>
|
|
<p>The detail panel now maintains visibility when manually opened with 'i' key, even when selecting different rows.</p>
|
|
|
|
<h3>Key Changes Made:</h3>
|
|
<ul>
|
|
<li>Removed automatic hiding of manual panel visibility on row selection</li>
|
|
<li>Panel stays open when manually activated until 'i' is pressed again</li>
|
|
<li>Content updates to show the newly selected shot</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section info">
|
|
<h2>🧪 Test Scenarios</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>Scenario 1: Auto Panel Behavior (Unchanged)</h3>
|
|
<ol>
|
|
<li>Ensure detail panel toggle button is enabled (primary color)</li>
|
|
<li>Click on a shot row</li>
|
|
<li>Panel should appear automatically</li>
|
|
<li>Click on another shot row</li>
|
|
<li>Panel should stay visible and show new shot details</li>
|
|
</ol>
|
|
<div class="expected">
|
|
<strong>Expected:</strong> Panel follows auto-enable/disable setting and shows current shot
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Scenario 2: Manual Panel Persistence (Fixed)</h3>
|
|
<ol>
|
|
<li>Disable auto detail panel (button should be outline style)</li>
|
|
<li>Select a shot row (panel should not appear)</li>
|
|
<li>Press 'i' key to manually show panel</li>
|
|
<li>Panel should appear showing selected shot</li>
|
|
<li>Click on different shot rows</li>
|
|
<li>Panel should stay visible and update content</li>
|
|
<li>Press 'i' key again</li>
|
|
<li>Panel should hide</li>
|
|
</ol>
|
|
<div class="expected">
|
|
<strong>Expected:</strong> Manual panel visibility persists across row selections until 'i' is pressed again
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Scenario 3: Mixed Behavior</h3>
|
|
<ol>
|
|
<li>Enable auto detail panel</li>
|
|
<li>Select a shot (panel appears automatically)</li>
|
|
<li>Press 'i' to manually hide panel</li>
|
|
<li>Select another shot</li>
|
|
<li>Panel should appear automatically (auto-enable overrides manual hide)</li>
|
|
<li>Press 'i' to manually show/hide</li>
|
|
<li>Manual control should work while auto-enable is on</li>
|
|
</ol>
|
|
<div class="expected">
|
|
<strong>Expected:</strong> Manual 'i' key control works independently of auto-enable setting
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section info">
|
|
<h2>🔧 Implementation Details</h2>
|
|
|
|
<h3>Modified Functions:</h3>
|
|
<div class="code">
|
|
// handleRowClick - Removed automatic hiding of manual visibility
|
|
const handleRowClick = (shot: Shot, event: MouseEvent) => {
|
|
selectedShot.value = shot
|
|
// isDetailPanelVisible.value = false // ← REMOVED THIS LINE
|
|
// Panel stays open if manually activated
|
|
}
|
|
|
|
// selectShot - Same change
|
|
const selectShot = (shot: Shot) => {
|
|
selectedShot.value = shot
|
|
// isDetailPanelVisible.value = false // ← REMOVED THIS LINE
|
|
}
|
|
</div>
|
|
|
|
<h3>Panel Visibility Logic:</h3>
|
|
<div class="code">
|
|
// Panel shows when:
|
|
// 1. Auto-enabled AND shot selected: isDetailPanelEnabled && selectedShot
|
|
// 2. OR manually shown: isDetailPanelVisible
|
|
v-if="selectedShot && (isDetailPanelEnabled || isDetailPanelVisible)"
|
|
</div>
|
|
|
|
<h3>Keyboard Handler (Unchanged):</h3>
|
|
<div class="code">
|
|
// 'i' key toggles manual visibility
|
|
if (event.key.toLowerCase() === 'i' && selectedShot.value) {
|
|
isDetailPanelVisible.value = !isDetailPanelVisible.value
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section warning">
|
|
<h2>⚠️ Edge Cases to Test</h2>
|
|
|
|
<ul>
|
|
<li><strong>No Shot Selected:</strong> 'i' key should not work when no shot is selected</li>
|
|
<li><strong>Dialog Open:</strong> 'i' key should not work when dialogs are open</li>
|
|
<li><strong>Input Focus:</strong> 'i' key should not work when typing in input fields</li>
|
|
<li><strong>Mobile View:</strong> Manual panel control should work with mobile sheet</li>
|
|
<li><strong>Panel Close Button:</strong> Clicking close should reset both auto and manual states</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section success">
|
|
<h2>🎯 Expected User Experience</h2>
|
|
|
|
<h3>Improved Workflow:</h3>
|
|
<ol>
|
|
<li>User can press 'i' to open detail panel for focused work</li>
|
|
<li>Panel stays open while browsing different shots</li>
|
|
<li>Content updates automatically to show current shot details</li>
|
|
<li>User presses 'i' again when done to close panel</li>
|
|
<li>No accidental panel hiding when selecting rows</li>
|
|
</ol>
|
|
|
|
<p><strong>This provides a much better user experience for reviewing multiple shots in sequence!</strong></p>
|
|
</div>
|
|
</body>
|
|
</html> |