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]);
return (
<div
className={
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
}
>
<div className="flex w-full items-center">
<span
onClick={() => {
openPopUp(
<CodeAreaModal
value={myValue}
nodeClass={nodeClass}
setNodeClass={setNodeClass}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
<div className={disabled ? "cursor-not-allowed" : ""}>
<div
className={
(editNode ? "w-full items-center" : "flex w-full items-center") +
(disabled ? " pointer-events-none" : "")
}
>
<div className="flex w-full items-center">
<span
onClick={() => {
openPopUp(
<CodeAreaModal
value={myValue}
nodeClass={nodeClass}
setNodeClass={setNodeClass}
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")
}
/>
);
}}
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 hover:text-accent-foreground"
/>
)}
</button>
)}
</button>
</div>
</div>
</div>
);

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

@ -47,65 +47,66 @@ export default function PromptAreaComponent({
}, [reactFlowInstance, field_name]);
return (
<div
className={
disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
}
>
<div className="flex w-full items-center">
<span
onClick={() => {
openPopUp(
<GenericModal
type={TypeModal.PROMPT}
value={myValue}
buttonText="Check & Save"
modalTitle="Edit Prompt"
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
nodeClass={nodeClass}
setNodeClass={setNodeClass}
<div className={disabled ? "cursor-not-allowed" : ""}>
<div className={disabled ? "pointer-events-none w-full " : " w-full"}>
<div className="flex w-full items-center">
<span
onClick={() => {
openPopUp(
<GenericModal
type={TypeModal.PROMPT}
value={myValue}
buttonText="Check & Save"
modalTitle="Edit Prompt"
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
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")
}
/>
);
}}
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 hover:text-accent-foreground"
/>
)}
</button>
)}
</button>
</div>
</div>
</div>
);

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

@ -27,10 +27,11 @@ export default function TextAreaComponent({
}, [closePopUp]);
return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<div className={disabled ? "cursor-not-allowed" : ""}>
<div
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
@ -57,6 +58,7 @@ export default function TextAreaComponent({
>
{myValue !== "" ? myValue : "Type something..."}
</span>
<button
onClick={() => {
openPopUp(
@ -76,7 +78,10 @@ export default function TextAreaComponent({
{!editNode && (
<ExternalLink
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>