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

Hotfix for Import Flows modal

Browse source
This commit is contained in:
Lucas Oliveira 2023-05-25 18:29:00 -03:00
commit b53eb683bf
3 changed files with 64 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { ReactNode, useEffect } from "react"; import React, { ReactNode, useEffect, useRef, useState } 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"; import Tooltip from "../../../components/TooltipComponent";
@ -33,89 +33,48 @@ export default function ButtonBox({
let textHeight: number; let textHeight: number;
let textWidth: number; let textWidth: number;
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 py-3"; padding = "p-2 py-3";
marginTop = "mt-2"; marginTop = "mt-2";
height = "h-36"; height = "h-36";
textHeight = 70; width = "w-32";
textWidth = 80; break;
width = "w-32"; case "medium":
break; bigCircle = "h-16 w-16";
case "medium": smallCircle = "h-12 w-12";
bigCircle = "h-16 w-16"; titleFontSize = "text-base";
smallCircle = "h-12 w-12"; descriptionFontSize = "text-sm";
titleFontSize = "text-base"; padding = "p-4 py-5";
descriptionFontSize = "text-sm"; marginTop = "mt-3";
padding = "p-4 py-5"; height = "h-44";
marginTop = "mt-3"; width = "w-36";
textHeight = 112; break;
textWidth = 162; case "big":
height = "h-44"; bigCircle = "h-20 w-20";
width = "w-36"; smallCircle = "h-16 w-16";
break; titleFontSize = "text-lg";
case "big": descriptionFontSize = "text-sm";
bigCircle = "h-20 w-20"; padding = "p-8 py-10";
smallCircle = "h-16 w-16"; marginTop = "mt-6";
titleFontSize = "text-lg"; height = "h-56";
descriptionFontSize = "text-sm"; width = "w-44";
padding = "p-8 py-10"; break;
marginTop = "mt-6"; default:
height = "h-56"; bigCircle = "h-20 w-20";
width = "w-44"; smallCircle = "h-16 w-16";
break; titleFontSize = "text-lg";
default: descriptionFontSize = "text-sm";
bigCircle = "h-20 w-20"; padding = "p-8 py-10";
smallCircle = "h-16 w-16"; marginTop = "mt-6";
titleFontSize = "text-lg"; height = "h-56";
descriptionFontSize = "text-sm"; width = "w-44";
padding = "p-8 py-10"; break;
marginTop = "mt-6"; }
height = "h-56";
width = "w-44";
break;
}
const titleRef = React.useRef<HTMLHeadingElement>(null);
useEffect(() => {
const resizeFont = () => {
const titleElement = titleRef.current;
if (titleElement) {
const containerWidth = titleElement.offsetWidth;
const containerHeight = titleElement.offsetHeight;
const titleComputedStyle = window.getComputedStyle(titleElement);
const titleWidth = titleElement.getBoundingClientRect().width;
const currentFontSize = parseFloat(titleComputedStyle.fontSize);
const desiredWidth = textWidth - 10; // Subtracting the desired padding
// Calculate the desired font size based on the adjusted width
let desiredFontSize = currentFontSize * (desiredWidth / titleWidth);
// Adjust the desired font size to fit within the container height, if needed
const maxHeight = containerHeight - 10; // Subtracting the desired top padding
const maxHeightFontSize = maxHeight * 0.8; // Adjust the scaling factor as needed
desiredFontSize = Math.min(desiredFontSize, maxHeightFontSize);
// Apply the desired font size and padding to the title element
titleElement.style.fontSize = `${desiredFontSize}px`;
titleElement.style.paddingLeft = "5px";
titleElement.style.paddingRight = "5px";
}
};
resizeFont();
window.addEventListener("resize", resizeFont);
return () => {
window.removeEventListener("resize", resizeFont);
};
}, []);
return ( return (
<button disabled={deactivate} onClick={onClick}> <button disabled={deactivate} onClick={onClick}>
@ -129,7 +88,7 @@ export default function ButtonBox({
)} )}
> >
<div <div
className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`} className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full mb-1`}
> >
<div <div
className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`} className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
@ -137,16 +96,17 @@ export default function ButtonBox({
<div className={textColor}>{icon}</div> <div className={textColor}>{icon}</div>
</div> </div>
</div> </div>
<h3 <div className="w-full mt-auto mb-auto">
ref={titleRef} <h3
className={classNames( className={classNames(
" font-semibold text-white dark:text-white/80", "w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
titleFontSize,
marginTop marginTop
)} )}
> >
{title} {title}
</h3> </h3>
</div>
</div> </div>
</button> </button>
); );

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

@ -177,7 +177,7 @@ export default function ImportModal() {
!loadingExamples && !loadingExamples &&
examples.map((example, index) => { examples.map((example, index) => {
return ( return (
<div id="index"> <div key={index}>
{" "} {" "}
<ButtonBox <ButtonBox
size="small" size="small"

8
src/frontend/tailwind.config.js
View file

@ -42,6 +42,14 @@ module.exports = {
display: "none", display: "none",
}, },
}, },
".truncate-multiline": {
"display": "-webkit-box",
"-webkit-line-clamp": "3", /* Change this number to the number of lines you want to show */
"-webkit-box-orient": "vertical",
"overflow": "hidden",
"text-overflow": "ellipsis",
},
".arrow-hide": { ".arrow-hide": {
"&::-webkit-inner-spin-button": { "&::-webkit-inner-spin-button": {
"-webkit-appearance": "none", "-webkit-appearance": "none",