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

improve example ui

Browse source
This commit is contained in:
anovazzi1 2023-04-18 15:12:10 -03:00
commit a923cdeccb
2 changed files with 75 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

122
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -1,6 +1,7 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { DocumentDuplicateIcon } from "@heroicons/react/solid"; import { DocumentDuplicateIcon } from "@heroicons/react/solid";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import Tooltip from "../../../components/TooltipComponent";
export default function ButtonBox({ export default function ButtonBox({
onClick, onClick,
@ -10,7 +11,7 @@ export default function ButtonBox({
bgColor, bgColor,
textColor, textColor,
deactivate, deactivate,
size size,
}: { }: {
onClick: () => void; onClick: () => void;
title: string; title: string;
@ -18,57 +19,57 @@ export default function ButtonBox({
icon: ReactNode; icon: ReactNode;
bgColor: string; bgColor: string;
textColor: string; textColor: string;
deactivate?:boolean; deactivate?: boolean;
size:"small"|"medium"|"big"; size: "small" | "medium" | "big";
}) { }) {
let bigCircle:string; let bigCircle: string;
let smallCircle:string; let smallCircle: string;
let titleFontSize:string; let titleFontSize: string;
let descriptionFontSize:string; let descriptionFontSize: string;
let padding:string; let padding: string;
let marginTop:string; let marginTop: string;
let height:string; let height: string;
let widht:string; let widht: string;
switch(size){ switch (size) {
case "small": case "small":
bigCircle="h-12 w-12"; bigCircle = "h-12 w-12";
smallCircle ="h-8 w-8"; smallCircle = "h-8 w-8";
titleFontSize="text-sm"; titleFontSize = "text-sm";
descriptionFontSize="text-xs"; descriptionFontSize = "text-xs";
padding="p-2"; padding = "p-2";
marginTop="mt-2"; marginTop = "mt-2";
height="h-36"; height = "h-36";
widht="w-28"; widht = "w-28";
break; break;
case "medium": case "medium":
bigCircle="h-16 w-16"; bigCircle = "h-16 w-16";
smallCircle ="h-12 w-12"; smallCircle = "h-12 w-12";
titleFontSize="text-base"; titleFontSize = "text-base";
descriptionFontSize="text-sm"; descriptionFontSize = "text-sm";
padding="p-4"; padding = "p-4";
marginTop="mt-3"; marginTop = "mt-3";
height="h-44"; height = "h-44";
widht="w-36"; widht = "w-36";
break; break;
case "big": case "big":
bigCircle="h-20 w-20"; bigCircle = "h-20 w-20";
smallCircle ="h-16 w-16"; smallCircle = "h-16 w-16";
titleFontSize="text-lg"; titleFontSize = "text-lg";
descriptionFontSize="text-sm"; descriptionFontSize = "text-sm";
padding="p-8"; padding = "p-8";
marginTop="mt-6"; marginTop = "mt-6";
height="h-56"; height = "h-56";
widht="w-44"; widht = "w-44";
break; break;
default: default:
bigCircle="h-20 w-20"; bigCircle = "h-20 w-20";
smallCircle ="h-16 w-16"; smallCircle = "h-16 w-16";
titleFontSize="text-lg"; titleFontSize = "text-lg";
descriptionFontSize="text-sm"; descriptionFontSize = "text-sm";
padding="p-8"; padding = "p-8";
marginTop="mt-6"; marginTop = "mt-6";
height="h-56"; height = "h-56";
widht="w-44"; widht = "w-44";
break; break;
} }
return ( return (
@ -82,17 +83,36 @@ export default function ButtonBox({
)} )}
> >
<div className={`flex flex-1 flex-col ${padding}`}> <div className={`flex flex-1 flex-col ${padding}`}>
<div className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}> <div
<div className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}> className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}
<div className={textColor}> >
{icon} <div
</div> className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}
>
<div className={textColor}>{icon}</div>
</div> </div>
</div> </div>
<h3 className={classNames("font-semibold text-white",titleFontSize,marginTop)}>{title}</h3> <h3
className={classNames(
"font-semibold text-white",
titleFontSize,
marginTop
)}
>
{title}
</h3>
<div className="mt-1 flex flex-grow flex-col justify-between"> <div className="mt-1 flex flex-grow flex-col justify-between">
<dt className="sr-only">{title}</dt> <dt className="sr-only">{title}</dt>
<dd className={classNames("text-gray-100",descriptionFontSize)}>{deactivate? "Coming soon":description}</dd> <Tooltip title={description} placement="bottom">
<dd
className={classNames(
"text-gray-100 line-clamp-2",
descriptionFontSize
)}
>
{deactivate ? "Coming soon" : description}
</dd>
</Tooltip>
</div> </div>
</div> </div>
</div> </div>

7
src/frontend/src/modals/importModal/index.tsx
View file

@ -26,7 +26,7 @@ export default function ImportModal() {
const [showExamples, setShowExamples] = useState(false); const [showExamples, setShowExamples] = useState(false);
const [loadingExamples, setLoadingExamples] = useState(false); const [loadingExamples, setLoadingExamples] = useState(false);
const [examples, setExamples] = useState<FlowType[]>([]); const [examples, setExamples] = useState<FlowType[]>([]);
const { uploadFlow } = useContext(TabsContext); const { uploadFlow, addFlow } = useContext(TabsContext);
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
@ -181,12 +181,13 @@ export default function ImportModal() {
<ButtonBox <ButtonBox
size="small" size="small"
bgColor="bg-slate-300" bgColor="bg-slate-300"
description="Prebuilt Examples" description={example.description??"Prebuilt Examples"}
icon={ icon={
<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" /> <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
} }
onClick={() => { onClick={() => {
console.log("click"); addFlow(example)
setModalOpen(false)
}} }}
textColor="text-slate-400" textColor="text-slate-400"
title={example.name} title={example.name}