weitao
/
popiart-node-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style: right-align Run/Apply buttons in ControlPanel 

Wrap each button in a flex justify-end container so they sit in the
bottom-right of the settings panel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 4 months ago
parent
6d4b7d3971
commit
665336d2be
1 changed files with 60 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      src/components/nodes/ControlPanel.tsx

108
src/components/nodes/ControlPanel.tsx
View File

@ -482,14 +482,16 @@ function GenerateImageControls({ node }: { node: Node }) {
)} )}
</div> </div>
<button <div className="flex justify-end">
onClick={() => regenerateNode(node.id)} <button
disabled={isRunning} onClick={() => regenerateNode(node.id)}
className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors" disabled={isRunning}
> className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg> >
{isRunning ? "Running..." : "Run"} <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
</button> {isRunning ? "Running..." : "Run"}
</button>
</div>
{isBrowseDialogOpen && ( {isBrowseDialogOpen && (
<ModelSearchDialog <ModelSearchDialog
@ -584,14 +586,16 @@ function GenerateVideoControls({ node }: { node: Node }) {
)} )}
</div> </div>
<button <div className="flex justify-end">
onClick={() => regenerateNode(node.id)} <button
disabled={isRunning} onClick={() => regenerateNode(node.id)}
className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors" disabled={isRunning}
> className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg> >
{isRunning ? "Running..." : "Run"} <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
</button> {isRunning ? "Running..." : "Run"}
</button>
</div>
{isBrowseDialogOpen && ( {isBrowseDialogOpen && (
<ModelSearchDialog <ModelSearchDialog
@ -688,14 +692,16 @@ function Generate3DControls({ node }: { node: Node }) {
)} )}
</div> </div>
<button <div className="flex justify-end">
onClick={() => regenerateNode(node.id)} <button
disabled={isRunning} onClick={() => regenerateNode(node.id)}
className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors" disabled={isRunning}
> className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg> >
{isRunning ? "Running..." : "Run"} <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
</button> {isRunning ? "Running..." : "Run"}
</button>
</div>
{isBrowseDialogOpen && ( {isBrowseDialogOpen && (
<ModelSearchDialog <ModelSearchDialog
@ -719,14 +725,16 @@ function GenerateAudioControls({ node }: { node: Node }) {
<div className="text-xs text-neutral-400"> <div className="text-xs text-neutral-400">
Audio generation settings Audio generation settings
</div> </div>
<button <div className="flex justify-end">
onClick={() => regenerateNode(node.id)} <button
disabled={isRunning} onClick={() => regenerateNode(node.id)}
className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors" disabled={isRunning}
> className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg> >
{isRunning ? "Running..." : "Run"} <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
</button> {isRunning ? "Running..." : "Run"}
</button>
</div>
</div> </div>
); );
} }
@ -836,14 +844,16 @@ function LLMControls({ node }: { node: Node }) {
/> />
</div> </div>
<button <div className="flex justify-end">
onClick={() => regenerateNode(node.id)} <button
disabled={isRunning} onClick={() => regenerateNode(node.id)}
className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors" disabled={isRunning}
> className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg> >
{isRunning ? "Running..." : "Run"} <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
</button> {isRunning ? "Running..." : "Run"}
</button>
</div>
</div> </div>
); );
} }
@ -937,14 +947,16 @@ function EaseCurveControls({ node }: { node: Node }) {
/> />
</div> </div>
<button <div className="flex justify-end">
onClick={() => regenerateNode(node.id)} <button
disabled={isRunning} onClick={() => regenerateNode(node.id)}
className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors" disabled={isRunning}
> className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> >
{isRunning ? "Applying..." : "Apply"} <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
</button> {isRunning ? "Applying..." : "Apply"}
</button>
</div>
{showPresets && typeof document !== 'undefined' && createPortal( {showPresets && typeof document !== 'undefined' && createPortal(
<div <div

Write Preview
Loading…
Cancel
Save