Use toggle control for boolean node params
This commit is contained in:
parent
38cc7676cd
commit
53a045a6ef
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue