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

Fixed visual bug at Import Flows modal cards

Browse source
This commit is contained in:
Lucas Oliveira 2023-05-25 18:20:17 -03:00
commit 41b6a2c6fe
3 changed files with 61 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,7 @@ export default function ButtonBox({
}) {
let bigCircle: string;
let smallCircle: string;
let minTitleFontSize: number;
let titleFontSize: string;
let descriptionFontSize: string;
let padding: string;
let marginTop: string;
@ -32,88 +32,48 @@ export default function ButtonBox({
let width: string;
let textHeight: number;
let textWidth: number;
const [truncate, setTruncate] = useState<boolean>(false);
switch (size) {
case "small":
bigCircle = "h-12 w-12";
smallCircle = "h-8 w-8";
minTitleFontSize =9;
descriptionFontSize = "text-xs";
padding = "p-2 py-3";
marginTop = "mt-2";
height = "h-36";
textHeight = 70;
textWidth = 40;
width = "w-32";
break;
case "medium":
bigCircle = "h-16 w-16";
smallCircle = "h-12 w-12";
minTitleFontSize = 11;
descriptionFontSize = "text-sm";
padding = "p-4 py-5";
marginTop = "mt-3";
textHeight = 112;
textWidth = 162;
height = "h-44";
width = "w-36";
break;
case "big":
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
minTitleFontSize = 12;
descriptionFontSize = "text-sm";
padding = "p-8 py-10";
marginTop = "mt-6";
height = "h-56";
width = "w-44";
break;
default:
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
minTitleFontSize = 12;
descriptionFontSize = "text-sm";
padding = "p-8 py-10";
marginTop = "mt-6";
height = "h-56";
width = "w-44";
break;
}
const [fontSize, setFontSize] = useState<number>(16); // Initial font size value
const titleRef = useRef<HTMLHeadingElement>(null);
const parentDivRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const textElement = titleRef.current;
const parentDivElement = parentDivRef.current;
if (!textElement || !parentDivElement) return;
const parentDivHeight = parentDivElement.offsetHeight;
const parentDivWidth = parentDivElement.offsetWidth;
let textElementHeight = textElement.scrollHeight;
let textElementWidth = textElement.scrollWidth;
if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth && fontSize > minTitleFontSize) {
let newFontSize = fontSize;
while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
newFontSize -= 1;
textElement.style.fontSize = `${newFontSize}px`;
textElementHeight = textElement.scrollHeight;
textElementWidth = textElement.scrollWidth;
}
if(newFontSize <= minTitleFontSize){
setTruncate(true);
setFontSize(minTitleFontSize);
}
else{
setFontSize(newFontSize);
}
case "small":
bigCircle = "h-12 w-12";
smallCircle = "h-8 w-8";
titleFontSize = "text-sm";
descriptionFontSize = "text-xs";
padding = "p-2 py-3";
marginTop = "mt-2";
height = "h-36";
width = "w-32";
break;
case "medium":
bigCircle = "h-16 w-16";
smallCircle = "h-12 w-12";
titleFontSize = "text-base";
descriptionFontSize = "text-sm";
padding = "p-4 py-5";
marginTop = "mt-3";
height = "h-44";
width = "w-36";
break;
case "big":
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
titleFontSize = "text-lg";
descriptionFontSize = "text-sm";
padding = "p-8 py-10";
marginTop = "mt-6";
height = "h-56";
width = "w-44";
break;
default:
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
titleFontSize = "text-lg";
descriptionFontSize = "text-sm";
padding = "p-8 py-10";
marginTop = "mt-6";
height = "h-56";
width = "w-44";
break;
}
}, [title, size, fontSize]);
return (
@ -136,15 +96,17 @@ export default function ButtonBox({
<div className={textColor}>{icon}</div>
</div>
</div>
<div ref={parentDivRef} className="w-full h-1/2 mt-auto">
<div
ref={titleRef}
className={classNames(truncate?"truncate":"",
" font-semibold text-white h-full dark:text-white/80",
)} >
{title}
</div>
</div>
<div className="w-full mt-auto mb-auto">
<h3
className={classNames(
"w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
titleFontSize,
marginTop
)}
>
{title}
</h3>
</div>
</div>
</button>
);

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

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

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

@ -42,6 +42,14 @@ module.exports = {
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": {
"&::-webkit-inner-spin-button": {
"-webkit-appearance": "none",