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

🔧 fix(genericModal/index.tsx): fix CSS class name in DialogContent to include gap-2 to add gap between elements

Browse source 
🔧 fix(genericModal/index.tsx): fix CSS class name in flex container to change height to h-[55vh]
🔧 fix(genericModal/index.tsx): fix CSS class name in div container to change height to h-[60px] and adjust width for different screen sizes
🔧 fix(genericModal/index.tsx): fix CSS class name in Badge component to add max-width and truncate long text
🔧 fix(genericModal/index.tsx): fix logic to handle long text in Tooltip component and truncate it if necessary
🔧 fix(genericModal/index.tsx): fix logic to handle button click in DialogFooter component and close modal if input value is empty
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-07 15:16:57 -03:00
commit 1a83cce2f0
1 changed files with 36 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/frontend/src/modals/genericModal/index.tsx
View file

@ -171,7 +171,7 @@ export default function GenericModal({
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
<DialogContent className="min-w-[80vw]"> <DialogContent className="min-w-[80vw] gap-2">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span> <span className="pr-2">{myModalTitle}</span>
@ -200,7 +200,7 @@ export default function GenericModal({
<div <div
className={classNames( className={classNames(
!isEdit ? "rounded-lg border" : "", !isEdit ? "rounded-lg border" : "",
"flex h-[60vh] w-full" "flex h-[55vh] w-full"
)} )}
> >
{type == TypeModal.PROMPT && isEdit ? ( {type == TypeModal.PROMPT && isEdit ? (
@ -238,40 +238,40 @@ export default function GenericModal({
{type == TypeModal.PROMPT && ( {type == TypeModal.PROMPT && (
<> <>
<div className="h-[6vh] overflow-y-auto custom-scroll"> <div className="h-[60px] overflow-y-auto custom-scroll md:w-5/6 sm:6/6 mt-3">
<div className="flex flex-wrap items-center"> <div className="flex flex-wrap items-center">
<Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable> <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
<span className="text-md font-semibold text-primary"> <span className="text-md font-semibold text-primary">
Input Variables:{" "} Input Variables:{" "}
{wordsHighlight && wordsHighlight.length == 0 ? "-" : ""} {wordsHighlight && wordsHighlight.length == 0 ? "-" : ""}
</span> </span>
{wordsHighlight.map((word, index) => ( {wordsHighlight.map((word, index) => (
<ShadTooltip <ShadTooltip
key={getRandomKeyByssmm() + index} key={getRandomKeyByssmm() + index}
content={word.replace(/[{}]/g, "")} content={word.replace(/[{}]/g, "")}
asChild={false} asChild={false}
delayDuration={1500} delayDuration={1500}
>
<Badge
key={index}
variant="gray"
size="md"
className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
> >
<Badge <div className="relative bottom-[1px]">
key={index} <span>
variant="gray" {word.replace(/[{}]/g, "").length > 59
size="md" ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm" : word.replace(/[{}]/g, "")}
> </span>
<div className="relative bottom-[1px]"> </div>
<span> </Badge>
{word.replace(/[{}]/g, "").length > 59 </ShadTooltip>
? word.replace(/[{}]/g, "").slice(0, 56) + "..." ))}
: word.replace(/[{}]/g, "")}
</span>
</div>
</Badge>
</ShadTooltip>
))}
</div>
</div> </div>
</> </div>
</>
)} )}
<DialogFooter> <DialogFooter>
@ -284,7 +284,9 @@ export default function GenericModal({
setModalOpen(false); setModalOpen(false);
break; break;
case 2: case 2:
validatePrompt(false); !inputValue || inputValue == ""
? setModalOpen(false)
: validatePrompt(false);
break; break;
default: default: