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

create min font size with truncate for buttonBox component

Browse source
This commit is contained in:
anovazzi1 2023-05-23 19:28:27 -03:00
commit f7cf6a378f
2 changed files with 17 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,7 @@ export default function ButtonBox({
}) { }) {
let bigCircle: string; let bigCircle: string;
let smallCircle: string; let smallCircle: string;
let titleFontSize: number; let minTitleFontSize: number;
let descriptionFontSize: string; let descriptionFontSize: string;
let padding: string; let padding: string;
let marginTop: string; let marginTop: string;
@ -32,11 +32,12 @@ export default function ButtonBox({
let width: string; let width: string;
let textHeight: number; let textHeight: number;
let textWidth: number; let textWidth: number;
const [truncate, setTruncate] = useState<boolean>(false);
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 = 14; minTitleFontSize =9;
descriptionFontSize = "text-xs"; descriptionFontSize = "text-xs";
padding = "p-2 py-3"; padding = "p-2 py-3";
marginTop = "mt-2"; marginTop = "mt-2";
@ -48,7 +49,7 @@ export default function ButtonBox({
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 = 16; minTitleFontSize = 11;
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-4 py-5"; padding = "p-4 py-5";
marginTop = "mt-3"; marginTop = "mt-3";
@ -60,7 +61,7 @@ export default function ButtonBox({
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 = 18; minTitleFontSize = 12;
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-8 py-10"; padding = "p-8 py-10";
marginTop = "mt-6"; marginTop = "mt-6";
@ -70,7 +71,7 @@ export default function ButtonBox({
default: default:
bigCircle = "h-20 w-20"; bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16"; smallCircle = "h-16 w-16";
titleFontSize = 18; minTitleFontSize = 12;
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-8 py-10"; padding = "p-8 py-10";
marginTop = "mt-6"; marginTop = "mt-6";
@ -95,7 +96,7 @@ export default function ButtonBox({
let textElementHeight = textElement.scrollHeight; let textElementHeight = textElement.scrollHeight;
let textElementWidth = textElement.scrollWidth; let textElementWidth = textElement.scrollWidth;
if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) { if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth && fontSize > minTitleFontSize) {
let newFontSize = fontSize; let newFontSize = fontSize;
while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) { while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
@ -104,9 +105,14 @@ export default function ButtonBox({
textElementHeight = textElement.scrollHeight; textElementHeight = textElement.scrollHeight;
textElementWidth = textElement.scrollWidth; textElementWidth = textElement.scrollWidth;
} }
if(newFontSize <= minTitleFontSize){
setTruncate(true);
setFontSize(minTitleFontSize);
}
else{
setFontSize(newFontSize); setFontSize(newFontSize);
} }
}
}, [title, size, fontSize]); }, [title, size, fontSize]);
@ -133,10 +139,9 @@ export default function ButtonBox({
<div ref={parentDivRef} className="w-full h-1/2 mt-auto"> <div ref={parentDivRef} className="w-full h-1/2 mt-auto">
<div <div
ref={titleRef} ref={titleRef}
className={classNames( className={classNames(truncate?"truncate":"",
" font-semibold text-white h-full dark:text-white/80", " font-semibold text-white h-full dark:text-white/80",
)} )} >
>
{title} {title}
</div> </div>
</div> </div>

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

@ -180,7 +180,7 @@ export default function ImportModal() {
<div id="index"> <div id="index">
{" "} {" "}
<ButtonBox <ButtonBox
size="small" size="big"
bgColor="bg-emerald-500 dark:bg-emerald-500/75" bgColor="bg-emerald-500 dark:bg-emerald-500/75"
description={ description={
example.description ?? "Prebuilt Examples" example.description ?? "Prebuilt Examples"