jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🐛 fix(codeAreaComponent): adjust classNames to fix styling issues and improve readability

Browse source 
🐛 fix(promptComponent): adjust classNames to fix styling issues and improve readability
🐛 fix(textAreaComponent): adjust classNames to fix styling issues and improve readability
This commit is contained in:
Lucas Oliveira 2023-07-05 19:30:48 -03:00
commit 9f24f7830c
3 changed files with 123 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -30,57 +30,63 @@ export default function CodeAreaComponent({
}, [value]); }, [value]);
return ( return (
<div <div className={disabled ? "cursor-not-allowed" : ""}>
className={ <div
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full" className={
} (editNode ? "w-full items-center" : "flex w-full items-center") +
> (disabled ? " pointer-events-none" : "")
<div className="flex w-full items-center"> }
<span >
onClick={() => { <div className="flex w-full items-center">
openPopUp( <span
<CodeAreaModal onClick={() => {
value={myValue} openPopUp(
nodeClass={nodeClass} <CodeAreaModal
setNodeClass={setNodeClass} value={myValue}
setValue={(t: string) => { nodeClass={nodeClass}
setMyValue(t); setNodeClass={setNodeClass}
onChange(t); setValue={(t: string) => {
}} setMyValue(t);
onChange(t);
}}
/>
);
}}
className={
editNode
? "input-edit-node input-dialog "
: "input-dialog input-primary " +
(disabled ? "input-disable" : "")
}
>
{myValue !== "" ? myValue : "Type something..."}
</span>
<button
onClick={() => {
openPopUp(
<CodeAreaModal
setNodeClass={setNodeClass}
value={myValue}
nodeClass={nodeClass}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
"ml-3 h-6 w-6" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/> />
); )}
}} </button>
className={ </div>
editNode
? "input-edit-node input-dialog "
: "input-dialog input-primary " +
(disabled ? "input-disable" : "")
}
>
{myValue !== "" ? myValue : "Type something..."}
</span>
<button
onClick={() => {
openPopUp(
<CodeAreaModal
setNodeClass={setNodeClass}
value={myValue}
nodeClass={nodeClass}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className="ml-3 h-6 w-6 hover:text-accent-foreground"
/>
)}
</button>
</div> </div>
</div> </div>
); );

117
src/frontend/src/components/promptComponent/index.tsx
View file

@ -47,65 +47,66 @@ export default function PromptAreaComponent({
}, [reactFlowInstance, field_name]); }, [reactFlowInstance, field_name]);
return ( return (
<div <div className={disabled ? "cursor-not-allowed" : ""}>
className={ <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full" <div className="flex w-full items-center">
} <span
> onClick={() => {
<div className="flex w-full items-center"> openPopUp(
<span <GenericModal
onClick={() => { type={TypeModal.PROMPT}
openPopUp( value={myValue}
<GenericModal buttonText="Check & Save"
type={TypeModal.PROMPT} modalTitle="Edit Prompt"
value={myValue} setValue={(t: string) => {
buttonText="Check & Save" setMyValue(t);
modalTitle="Edit Prompt" onChange(t);
setValue={(t: string) => { }}
setMyValue(t); nodeClass={nodeClass}
onChange(t); setNodeClass={setNodeClass}
}} />
nodeClass={nodeClass} );
setNodeClass={setNodeClass} }}
className={
editNode
? " input-edit-node " + " input-dialog "
: (disabled ? " input-disable " : "") +
" input-primary " +
" input-dialog "
}
>
{myValue !== "" ? myValue : "Type your prompt here"}
</span>
<button
onClick={() => {
openPopUp(
<GenericModal
field_name={field_name}
type={TypeModal.PROMPT}
value={myValue}
buttonText="Check & Save"
modalTitle="Edit Prompt"
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
nodeClass={nodeClass}
setNodeClass={setNodeClass}
/>
);
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
"ml-3 h-6 w-6" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/> />
); )}
}} </button>
className={ </div>
editNode
? " input-edit-node " + " input-dialog "
: (disabled ? " input-disable " : "") +
" input-primary " +
" input-dialog "
}
>
{myValue !== "" ? myValue : "Type your prompt here"}
</span>
<button
onClick={() => {
openPopUp(
<GenericModal
field_name={field_name}
type={TypeModal.PROMPT}
value={myValue}
buttonText="Check & Save"
modalTitle="Edit Prompt"
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
nodeClass={nodeClass}
setNodeClass={setNodeClass}
/>
);
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className="ml-3 h-6 w-6 hover:text-accent-foreground"
/>
)}
</button>
</div> </div>
</div> </div>
); );

11
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -27,10 +27,11 @@ export default function TextAreaComponent({
}, [closePopUp]); }, [closePopUp]);
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "cursor-not-allowed" : ""}>
<div <div
className={ className={
editNode ? "w-full items-center" : "flex w-full items-center" (editNode ? "w-full items-center" : "flex w-full items-center") +
(disabled ? " pointer-events-none" : "")
} }
> >
<span <span
@ -57,6 +58,7 @@ export default function TextAreaComponent({
> >
{myValue !== "" ? myValue : "Type something..."} {myValue !== "" ? myValue : "Type something..."}
</span> </span>
<button <button
onClick={() => { onClick={() => {
openPopUp( openPopUp(
@ -76,7 +78,10 @@ export default function TextAreaComponent({
{!editNode && ( {!editNode && (
<ExternalLink <ExternalLink
strokeWidth={1.5} strokeWidth={1.5}
className="ml-3 h-6 w-6 hover:text-accent-foreground" className={
"ml-3 h-6 w-6" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/> />
)} )}
</button> </button>