diff options
| -rw-r--r-- | tools/timeline_editor/index.html | 119 |
1 files changed, 105 insertions, 14 deletions
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html index b84908a..c77ae41 100644 --- a/tools/timeline_editor/index.html +++ b/tools/timeline_editor/index.html @@ -154,14 +154,20 @@ background: #3a3d41; border: 1px solid #858585; border-radius: 3px; - padding: 6px; + padding: 4px 8px; cursor: move; - font-size: 12px; + font-size: 11px; transition: box-shadow 0.2s; + display: flex; + align-items: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .effect:hover { box-shadow: 0 0 8px rgba(133, 133, 133, 0.5); + background: #45484d; } .effect.selected { @@ -169,16 +175,80 @@ box-shadow: 0 0 8px rgba(206, 145, 120, 0.5); } + .effect small { + font-size: 11px; + color: #d4d4d4; + } + .properties-panel { + position: fixed; + top: 80px; + right: 20px; + width: 350px; + max-height: 80vh; background: #252526; - padding: 20px; + padding: 15px; border-radius: 8px; - margin-top: 20px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); + z-index: 1000; + overflow-y: auto; + transition: transform 0.3s ease; + } + + .properties-panel.collapsed { + transform: translateX(370px); } - .properties-panel h2 { + .panel-header { + display: flex; + justify-content: space-between; + align-items: center; margin-bottom: 15px; + padding-bottom: 10px; + border-bottom: 1px solid #3c3c3c; + } + + .panel-header h2 { + margin: 0; color: #4ec9b0; + font-size: 16px; + } + + .panel-toggle { + background: transparent; + border: 1px solid #858585; + color: #d4d4d4; + padding: 4px 8px; + border-radius: 3px; + cursor: pointer; + font-size: 12px; + } + + .panel-toggle:hover { + background: #3c3c3c; + } + + .panel-collapse-btn { + position: fixed; + top: 80px; + right: 20px; + background: #252526; + border: 1px solid #858585; + color: #d4d4d4; + padding: 8px 12px; + border-radius: 4px; + cursor: pointer; + z-index: 999; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + display: none; + } + + .panel-collapse-btn:hover { + background: #3c3c3c; + } + + .panel-collapse-btn.visible { + display: block; } .property-group { @@ -267,8 +337,13 @@ <div class="timeline" id="timeline"></div> </div> + <button class="panel-collapse-btn" id="panelCollapseBtn">◀ Properties</button> + <div class="properties-panel" id="propertiesPanel" style="display: none;"> - <h2>Properties</h2> + <div class="panel-header"> + <h2>Properties</h2> + <button class="panel-toggle" id="panelToggle">▶ Collapse</button> + </div> <div id="propertiesContent"></div> </div> @@ -476,7 +551,8 @@ // Calculate sequence height based on number of effects (stacked vertically) const numEffects = seq.effects.length; - const seqHeight = Math.max(70, 25 + numEffects * 40 + 5); + const effectSpacing = 30; // Reduced from 40px + const seqHeight = Math.max(70, 20 + numEffects * effectSpacing + 5); seqDiv.style.left = `${seq.startTime * pixelsPerSecond}px`; seqDiv.style.top = `${seqIndex * 80}px`; @@ -521,11 +597,11 @@ const effectWidth = (effect.endTime - effect.startTime) * pixelsPerSecond; effectDiv.style.left = `${effectStart}px`; - effectDiv.style.top = `${seqIndex * 80 + 25 + effectIndex * 40}px`; + effectDiv.style.top = `${seqIndex * 80 + 20 + effectIndex * 30}px`; effectDiv.style.width = `${effectWidth}px`; - effectDiv.style.height = '35px'; + effectDiv.style.height = '26px'; - // Format time display based on mode + // Format time display based on mode (for tooltip) let timeDisplay; if (showBeats) { const beatDuration = 60.0 / bpm; @@ -536,10 +612,9 @@ timeDisplay = `${effect.startTime.toFixed(1)}-${effect.endTime.toFixed(1)}s`; } - effectDiv.innerHTML = ` - ${effect.className}<br> - <small>${timeDisplay}</small> - `; + // Show only class name, full info on hover + effectDiv.innerHTML = `<small>${effect.className}</small>`; + effectDiv.title = `${effect.className}\n${timeDisplay}\nPriority: ${effect.priority}\n${effect.args || '(no args)'}`; if (selectedItem && selectedItem.type === 'effect' && selectedItem.seqIndex === seqIndex && selectedItem.effectIndex === effectIndex) { @@ -771,6 +846,22 @@ renderTimeline(); }); + // Properties panel collapse/expand + const panelToggle = document.getElementById('panelToggle'); + const panelCollapseBtn = document.getElementById('panelCollapseBtn'); + + panelToggle.addEventListener('click', () => { + propertiesPanel.classList.add('collapsed'); + panelCollapseBtn.classList.add('visible'); + panelToggle.textContent = '◀ Expand'; + }); + + panelCollapseBtn.addEventListener('click', () => { + propertiesPanel.classList.remove('collapsed'); + panelCollapseBtn.classList.remove('visible'); + panelToggle.textContent = '▶ Collapse'; + }); + // Click outside to deselect timeline.addEventListener('click', () => { selectedItem = null; |