Skip to content

[feat] Add red styling to Remove Slot context menu option #4918

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
christian-byrne merged 1 commit into from
Aug 11, 2025
Merged

[feat] Add red styling to Remove Slot context menu option #4918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
[feat] Add red styling to Remove Slot context menu option 
Makes the "Remove Slot" option visually distinct by displaying it in red text, improving UI clarity for destructive actions. Applied to both regular nodes and subgraph IO nodes.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
  • Loading branch information
@christian-byrne @claude
christian-byrne and claude committed Aug 11, 2025
commit b9065524d512ff4e16096c03818d654037cff0dc
10 changes: 10 additions & 0 deletions src/lib/litegraph/public/css/litegraph.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -495,6 +495,16 @@
padding-left: 12px;
}

.graphmenu-entry.danger,
.litemenu-entry.danger {
color: var(--error-text) !important;
}

.litegraph .litemenu-entry.danger:hover:not(.disabled) {
color: var(--error-text) !important;
opacity: 0.8;
}

.graphmenu-entry.disabled {
opacity: 0.3;
}
Expand Down
4 changes: 3 additions & 1 deletion src/lib/litegraph/src/LGraphCanvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8244,7 +8244,9 @@ export class LGraphCanvas
if (_slot.removable) {
menu_info.push(null)
menu_info.push(
_slot.locked ? 'Cannot remove' : { content: 'Remove Slot', slot }
_slot.locked
? 'Cannot remove'
: { content: 'Remove Slot', slot, className: 'danger' }
)
}

Expand Down
22 changes: 14 additions & 8 deletions src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export abstract class SubgraphIONodeBase<
* @param event The event that triggered the context menu.
*/
protected showSlotContextMenu(slot: TSlot, event: CanvasPointerEvent): void {
const options: IContextMenuValue[] = this.#getSlotMenuOptions(slot)
const options: (IContextMenuValue | null)[] = this.#getSlotMenuOptions(slot)
if (!(options.length > 0)) return

new LiteGraph.ContextMenu(options, {
Expand All @@ -208,20 +208,26 @@ export abstract class SubgraphIONodeBase<
* @param slot The slot to get the context menu options for.
* @returns The context menu options.
*/
#getSlotMenuOptions(slot: TSlot): IContextMenuValue[] {
const options: IContextMenuValue[] = []
#getSlotMenuOptions(slot: TSlot): (IContextMenuValue | null)[] {
const options: (IContextMenuValue | null)[] = []

// Disconnect option if slot has connections
if (slot !== this.emptySlot && slot.linkIds.length > 0) {
options.push({ content: 'Disconnect Links', value: 'disconnect' })
}

// Remove / rename slot option (except for the empty slot)
// Rename slot option (except for the empty slot)
if (slot !== this.emptySlot) {
options.push(
{ content: 'Remove Slot', value: 'remove' },
{ content: 'Rename Slot', value: 'rename' }
)
options.push({ content: 'Rename Slot', value: 'rename' })
}

if (slot !== this.emptySlot) {
options.push(null) // separator
options.push({
content: 'Remove Slot',
value: 'remove',
className: 'danger'
})
}

return options
Expand Down