Use toggle control for boolean node params

This commit is contained in:
Lucio Lelii 2026-03-10 15:06:31 +01:00
parent 38cc7676cd
commit 53a045a6ef
2 changed files with 60 additions and 4 deletions

View File

@ -748,6 +748,54 @@
resize: vertical;
}
.node-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #fff;
color: #0f172a;
padding: 6px 10px;
cursor: pointer;
width: fit-content;
}
.node-toggle-track {
position: relative;
width: 34px;
height: 20px;
border-radius: 999px;
background: #cbd5e1;
transition: background-color 0.2s ease;
}
.node-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
transition: transform 0.2s ease;
}
.node-toggle-label {
font-size: 12px;
font-weight: 600;
text-transform: lowercase;
}
.node-toggle-on .node-toggle-track {
background: #2563eb;
}
.node-toggle-on .node-toggle-thumb {
transform: translateX(14px);
}
.llm-modal-actions {
display: flex;
justify-content: flex-end;

View File

@ -187,10 +187,18 @@
@if (localEditorLoading) {
<input type="text" [ngModel]="localEditorValue" placeholder="Loading..." disabled (pointerdown)="$event.stopPropagation()" />
} @else if (localEditorType === 'boolean') {
<select [(ngModel)]="localEditorValue" (pointerdown)="$event.stopPropagation()">
<option value="true">true</option>
<option value="false">false</option>
</select>
<button
type="button"
class="node-toggle"
[class.node-toggle-on]="localEditorValue === 'true'"
[attr.aria-pressed]="localEditorValue === 'true'"
(pointerdown)="$event.stopPropagation()"
(click)="localEditorValue = localEditorValue === 'true' ? 'false' : 'true'">
<span class="node-toggle-track">
<span class="node-toggle-thumb"></span>
</span>
<span class="node-toggle-label">{{ localEditorValue === 'true' ? 'true' : 'false' }}</span>
</button>
} @else if (localEditorHasRetriever) {
<select [(ngModel)]="localEditorValue" (pointerdown)="$event.stopPropagation()">
<option value="">{{ localEditorOptions.length ? ('Select ' + (localEditorLabel | lowercase) + '...') : 'No options available' }}</option>