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

Add ShadTooltip component and update styling in exampleComponent and MainPage

Browse source
This commit is contained in:
anovazzi1 2024-03-05 21:34:36 -03:00
commit 6af16272fd
2 changed files with 22 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/frontend/src/components/exampleComponent/index.tsx
View file

@ -53,7 +53,9 @@ export default function CollectionCardComponent({
</CardTitle> </CardTitle>
</div> </div>
<CardDescription className="pb-2 pt-2"> <CardDescription className="pb-2 pt-2">
<div className="truncate-doubleline">{flow.description}</div> <ShadTooltip side="bottom" styleClasses="z-50" content={flow.description}>
<div className="truncate-doubleline">{flow.description}</div>
</ShadTooltip>
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
</div> </div>
@ -61,25 +63,25 @@ export default function CollectionCardComponent({
<CardFooter> <CardFooter>
<div className="flex w-full items-center justify-between gap-2"> <div className="flex w-full items-center justify-between gap-2">
<div className="flex w-full justify-end flex-wrap gap-2"> <div className="flex w-full justify-end flex-wrap gap-2">
<Button <Button
onClick={() => { onClick={() => {
updateIds(flow.data!) updateIds(flow.data!)
addFlow(true, flow).then((id) => { addFlow(true, flow).then((id) => {
navigate("/flow/" + id); navigate("/flow/" + id);
}); });
}} }}
tabIndex={-1} tabIndex={-1}
variant="outline" variant="outline"
size="sm" size="sm"
className="whitespace-nowrap " className="whitespace-nowrap "
> >
<IconComponent <IconComponent
name="ExternalLink" name="ExternalLink"
className="main-page-nav-button select-none" className="main-page-nav-button select-none"
/> />
Select Flow Select Flow
</Button> </Button>
</div> </div>
</div> </div>
</CardFooter> </CardFooter>

2
src/frontend/src/pages/MainPage/index.tsx
View file

@ -128,7 +128,7 @@ export default function HomePage(): JSX.Element {
/> />
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content>
<div className="flex flex-wrap w-full h-full p-4 gap-3"> <div className="flex flex-wrap w-full h-full p-4 gap-3 overflow-auto custom-scroll">
{examples.map((example, idx) => { {examples.map((example, idx) => {
return( return(
<ExampleCardComponent key={idx} flow={example} />) <ExampleCardComponent key={idx} flow={example} />)