3dtours/SonicForgeStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: bố cục lại UI/button với float panel

Browse Source
This commit is contained in:
3dtours
2026-07-19 12:51:24 +07:00
parent 60dce0135e
commit dce104221d
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/index.html
+24 -6
View File
@@ -3963,6 +3963,9 @@
{ label: 'Split at Playhead', icon: 'scissors', shortcut: 'S', action: () => handleSplitTrack(selectedTrackId) }, { label: 'Split at Playhead', icon: 'scissors', shortcut: 'S', action: () => handleSplitTrack(selectedTrackId) },
{ label: 'Merge Tracks', icon: 'combine', shortcut: 'Ctrl+M', action: () => { handleMergeTracks(); } }, { label: 'Merge Tracks', icon: 'combine', shortcut: 'Ctrl+M', action: () => { handleMergeTracks(); } },
{ sep: true }, { sep: true },
{ label: 'Undo', icon: 'undo', shortcut: 'Ctrl+Z', action: () => { handleUndo(); } },
{ label: 'Redo', icon: 'redo', shortcut: 'Ctrl+Y', action: () => { handleRedo(); } },
{ sep: true },
{ label: 'Copy', icon: 'copy', shortcut: 'Ctrl+C', action: () => { handleCopyTrack(); } }, { label: 'Copy', icon: 'copy', shortcut: 'Ctrl+C', action: () => { handleCopyTrack(); } },
{ label: 'Cut', icon: 'scissors', shortcut: 'Ctrl+X', action: () => { handleCutTrack(); } }, { label: 'Cut', icon: 'scissors', shortcut: 'Ctrl+X', action: () => { handleCutTrack(); } },
{ label: 'Paste', icon: 'clipboard', shortcut: 'Ctrl+V', action: handlePasteTrack }, { label: 'Paste', icon: 'clipboard', shortcut: 'Ctrl+V', action: handlePasteTrack },
@@ -4152,6 +4155,17 @@
title="Paste (Ctrl+V)"> title="Paste (Ctrl+V)">
<i data-lucide="clipboard" className="w-3.5 h-3.5"></i> <i data-lucide="clipboard" className="w-3.5 h-3.5"></i>
</button> </button>
<div className="w-[1px] h-4 bg-zinc-700 mx-0.5"></div>
<button onClick={handleUndo} disabled={undoStack.length === 0}
className="p-0.5 rounded text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 disabled:opacity-30"
title="Undo (Ctrl+Z)">
<i data-lucide="undo" className="w-3.5 h-3.5"></i>
</button>
<button onClick={handleRedo} disabled={redoStack.length === 0}
className="p-0.5 rounded text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 disabled:opacity-30"
title="Redo (Ctrl+Y)">
<i data-lucide="redo" className="w-3.5 h-3.5"></i>
</button>
</div> </div>
<div className="w-[1px] h-5 bg-zinc-800 mx-0.5"></div> <div className="w-[1px] h-5 bg-zinc-800 mx-0.5"></div>
@@ -4261,12 +4275,16 @@
<div className="text-zinc-500">// <span className="text-zinc-300">{analysisState.status}</span></div> <div className="text-zinc-500">// <span className="text-zinc-300">{analysisState.status}</span></div>
{analysisState.data && <div className="text-emerald-500 font-semibold">BPM: {analysisState.data.bpm}</div>} {analysisState.data && <div className="text-emerald-500 font-semibold">BPM: {analysisState.data.bpm}</div>}
</div> </div>
<div className="flex gap-1"> <div className="grid grid-cols-3 gap-1">
<button onClick={handleMarkSelection} className="flex-1 py-1 bg-purple-900 hover:bg-purple-800 text-purple-100 font-bold rounded text-[9px] border border-purple-700">Mark</button> <button onClick={handleMarkSelection} className="py-1 bg-purple-900 hover:bg-purple-800 text-purple-100 font-bold rounded text-[9px] border border-purple-700 flex items-center justify-center gap-1">
<button onClick={handleAICutToNewTrack} disabled={analysisState.isRunning} className="flex-1 py-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded text-[9px]">Cut</button> <i data-lucide="map-pin" className="w-3 h-3"></i> Mark
<button onClick={triggerAIAnalysis} disabled={analysisState.isRunning} className="p-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700"><i data-lucide="sparkles" className="w-3 h-3"></i></button> </button>
<button onClick={handleUndo} disabled={undoStack.length === 0} className="px-1.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 text-[9px]"><i data-lucide="undo" className="w-3 h-3"></i></button> <button onClick={handleAICutToNewTrack} disabled={analysisState.isRunning} className="py-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded text-[9px] flex items-center justify-center gap-1">
<button onClick={handleRedo} disabled={redoStack.length === 0} className="px-1.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 text-[9px]"><i data-lucide="redo" className="w-3 h-3"></i></button> <i data-lucide="scissors" className="w-3 h-3"></i> AI Cut
</button>
<button onClick={triggerAIAnalysis} disabled={analysisState.isRunning} className="py-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-200 font-bold rounded text-[9px] border border-zinc-600 flex items-center justify-center gap-1">
<i data-lucide="sparkles" className="w-3 h-3"></i> Analyze
</button>
</div> </div>
</div> </div>
); );