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

set back button and high of the example element

Browse source
This commit is contained in:
anovazzi1 2023-04-17 23:18:45 -03:00
commit 1049275715
2 changed files with 111 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,8 @@ export default function ButtonBox({
icon,
bgColor,
textColor,
deactivate
deactivate,
size
}: {
onClick: () => void;
title: string;
@ -18,27 +19,80 @@ export default function ButtonBox({
bgColor: string;
textColor: string;
deactivate?:boolean;
size:"small"|"medium"|"big";
}) {
let bigCircle:string;
let smallCircle:string;
let titleFontSize:string;
let descriptionFontSize:string;
let padding:string;
let marginTop:string;
let height:string;
let widht:string;
switch(size){
case "small":
bigCircle="h-12 w-12";
smallCircle ="h-8 w-8";
titleFontSize="text-sm";
descriptionFontSize="text-xs";
padding="p-2";
marginTop="mt-2";
height="h-36";
widht="w-28";
break;
case "medium":
bigCircle="h-16 w-16";
smallCircle ="h-12 w-12";
titleFontSize="text-base";
descriptionFontSize="text-sm";
padding="p-4";
marginTop="mt-3";
height="h-44";
widht="w-36";
break;
case "big":
bigCircle="h-20 w-20";
smallCircle ="h-16 w-16";
titleFontSize="text-lg";
descriptionFontSize="text-sm";
padding="p-8";
marginTop="mt-6";
height="h-56";
widht="w-44";
break;
default:
bigCircle="h-20 w-20";
smallCircle ="h-16 w-16";
titleFontSize="text-lg";
descriptionFontSize="text-sm";
padding="p-8";
marginTop="mt-6";
height="h-56";
widht="w-44";
break;
}
return (
<button disabled={deactivate} onClick={onClick}>
<div
className={classNames(
"col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow border border-gray-300 hover:shadow-lg transform hover:scale-105",
bgColor
bgColor,
height,
widht
)}
>
<div className="flex flex-1 flex-col p-8">
<div className="mx-auto flex items-center justify-center h-20 w-20 bg-white/30 rounded-full">
<div className="mx-auto flex items-center justify-center h-16 w-16 bg-white rounded-full">
<div className={`flex flex-1 flex-col ${padding}`}>
<div className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}>
<div className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}>
<div className={textColor}>
{icon}
</div>
</div>
</div>
<h3 className="mt-6 text-lg font-semibold text-white">{title}</h3>
<h3 className={classNames("font-semibold text-white",titleFontSize,marginTop)}>{title}</h3>
<div className="mt-1 flex flex-grow flex-col justify-between">
<dt className="sr-only">{title}</dt>
<dd className="text-sm text-gray-100">{deactivate? "Coming soon":description}</dd>
<dd className={classNames("text-gray-100",descriptionFontSize)}>{deactivate? "Coming soon":description}</dd>
</div>
</div>
</div>

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

@ -5,6 +5,7 @@ import {
DocumentDuplicateIcon,
ComputerDesktopIcon,
ArrowUpTrayIcon,
ArrowLeftIcon,
} from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
@ -15,6 +16,7 @@ import { error } from "console";
import { alertContext } from "../../contexts/alertContext";
import LoadingComponent from "../../components/loadingComponent";
import { FlowType } from "../../types/flow";
import { classNames } from "../../utils";
export default function ImportModal() {
const [open, setOpen] = useState(true);
@ -49,6 +51,7 @@ export default function ImportModal() {
);
}
return (
<Transition.Root show={open} appear={true} as={Fragment}>
<Dialog
@ -93,6 +96,20 @@ export default function ImportModal() {
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
{showExamples && (
<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
<button
type="button"
className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
onClick={() => {
setShowExamples(false);
}}
>
<span className="sr-only">Close</span>
<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
)}
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
@ -110,16 +127,24 @@ export default function ImportModal() {
</Dialog.Title>
</div>
</div>
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div
className={classNames(
"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4",
showExamples && !loadingExamples
? "flex flex-row start justify-start items-start p-9"
: "flex flex-row justify-center items-center p-4"
)}
>
{!showExamples && (
<div className="flex h-full w-full justify-evenly items-center">
<ButtonBox
size="big"
bgColor="bg-emerald-500"
description="Prebuilt Examples"
icon={
<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
}
onClick={() =>{
onClick={() => {
setShowExamples(true);
handleExamples();
}}
@ -127,6 +152,7 @@ export default function ImportModal() {
title="Examples"
></ButtonBox>
<ButtonBox
size="big"
bgColor="bg-blue-500"
description="Import from Local"
icon={
@ -146,13 +172,28 @@ export default function ImportModal() {
<LoadingComponent remSize={30} />
</div>
)}
{showExamples && !loadingExamples && (
<div>
{examples.map((example, index) => {
return <div id="index">{example.name}</div>;
})}
</div>
)}
{showExamples &&
!loadingExamples &&
examples.map((example, index) => {
return (
<div id="index">
{" "}
<ButtonBox
size="small"
bgColor="bg-slate-300"
description="Prebuilt Examples"
icon={
<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
}
onClick={() => {
console.log("click");
}}
textColor="text-slate-400"
title={example.name}
></ButtonBox>
</div>
);
})}
</div>
</div>
</Dialog.Panel>