From 3f854a88aeca0124f6abc422ac367321968ffa26 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 23 May 2023 16:31:20 -0300 Subject: [PATCH 1/2] hot fix for dinamic size of font for buttonBox component --- .../modals/importModal/buttonBox/index.tsx | 89 +++++++++---------- 1 file changed, 41 insertions(+), 48 deletions(-) diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx index 2e8978597..2f120d30b 100644 --- a/src/frontend/src/modals/importModal/buttonBox/index.tsx +++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx @@ -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 { classNames } from "../../../utils"; import Tooltip from "../../../components/TooltipComponent"; @@ -24,7 +24,7 @@ export default function ButtonBox({ }) { let bigCircle: string; let smallCircle: string; - let titleFontSize: string; + let titleFontSize: number; let descriptionFontSize: string; let padding: string; let marginTop: string; @@ -36,19 +36,19 @@ export default function ButtonBox({ case "small": bigCircle = "h-12 w-12"; smallCircle = "h-8 w-8"; - titleFontSize = "text-sm"; + titleFontSize = 14; descriptionFontSize = "text-xs"; padding = "p-2 py-3"; marginTop = "mt-2"; height = "h-36"; textHeight = 70; - textWidth = 80; + textWidth = 40; width = "w-32"; break; case "medium": bigCircle = "h-16 w-16"; smallCircle = "h-12 w-12"; - titleFontSize = "text-base"; + titleFontSize = 16; descriptionFontSize = "text-sm"; padding = "p-4 py-5"; marginTop = "mt-3"; @@ -60,7 +60,7 @@ export default function ButtonBox({ case "big": bigCircle = "h-20 w-20"; smallCircle = "h-16 w-16"; - titleFontSize = "text-lg"; + titleFontSize = 18; descriptionFontSize = "text-sm"; padding = "p-8 py-10"; marginTop = "mt-6"; @@ -70,7 +70,7 @@ export default function ButtonBox({ default: bigCircle = "h-20 w-20"; smallCircle = "h-16 w-16"; - titleFontSize = "text-lg"; + titleFontSize = 18; descriptionFontSize = "text-sm"; padding = "p-8 py-10"; marginTop = "mt-6"; @@ -79,43 +79,36 @@ export default function ButtonBox({ break; } - const titleRef = React.useRef(null); + const [fontSize, setFontSize] = useState(16); // Initial font size value + + const titleRef = useRef(null); + const parentDivRef = useRef(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); - }; - }, []); + 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) { + let newFontSize = fontSize; + + while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) { + newFontSize -= 1; + textElement.style.fontSize = `${newFontSize}px`; + textElementHeight = textElement.scrollHeight; + textElementWidth = textElement.scrollWidth; + } + + setFontSize(newFontSize); + } + }, [title, size, fontSize]); + return ( ); From f7cf6a378f86a2ffed0aa06731b4a94766d6b5d3 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 23 May 2023 19:28:27 -0300 Subject: [PATCH 2/2] create min font size with truncate for buttonBox component --- .../modals/importModal/buttonBox/index.tsx | 27 +++++++++++-------- src/frontend/src/modals/importModal/index.tsx | 2 +- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx index 2f120d30b..d0e22611e 100644 --- a/src/frontend/src/modals/importModal/buttonBox/index.tsx +++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx @@ -24,7 +24,7 @@ export default function ButtonBox({ }) { let bigCircle: string; let smallCircle: string; - let titleFontSize: number; + let minTitleFontSize: number; let descriptionFontSize: string; let padding: string; let marginTop: string; @@ -32,11 +32,12 @@ export default function ButtonBox({ let width: string; let textHeight: number; let textWidth: number; + const [truncate, setTruncate] = useState(false); switch (size) { case "small": bigCircle = "h-12 w-12"; smallCircle = "h-8 w-8"; - titleFontSize = 14; + minTitleFontSize =9; descriptionFontSize = "text-xs"; padding = "p-2 py-3"; marginTop = "mt-2"; @@ -48,7 +49,7 @@ export default function ButtonBox({ case "medium": bigCircle = "h-16 w-16"; smallCircle = "h-12 w-12"; - titleFontSize = 16; + minTitleFontSize = 11; descriptionFontSize = "text-sm"; padding = "p-4 py-5"; marginTop = "mt-3"; @@ -60,7 +61,7 @@ export default function ButtonBox({ case "big": bigCircle = "h-20 w-20"; smallCircle = "h-16 w-16"; - titleFontSize = 18; + minTitleFontSize = 12; descriptionFontSize = "text-sm"; padding = "p-8 py-10"; marginTop = "mt-6"; @@ -70,7 +71,7 @@ export default function ButtonBox({ default: bigCircle = "h-20 w-20"; smallCircle = "h-16 w-16"; - titleFontSize = 18; + minTitleFontSize = 12; descriptionFontSize = "text-sm"; padding = "p-8 py-10"; marginTop = "mt-6"; @@ -95,7 +96,7 @@ export default function ButtonBox({ let textElementHeight = textElement.scrollHeight; let textElementWidth = textElement.scrollWidth; - if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) { + if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth && fontSize > minTitleFontSize) { let newFontSize = fontSize; while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) { @@ -104,8 +105,13 @@ export default function ButtonBox({ textElementHeight = textElement.scrollHeight; textElementWidth = textElement.scrollWidth; } - - setFontSize(newFontSize); + if(newFontSize <= minTitleFontSize){ + setTruncate(true); + setFontSize(minTitleFontSize); + } + else{ + setFontSize(newFontSize); + } } }, [title, size, fontSize]); @@ -133,10 +139,9 @@ export default function ButtonBox({
+ )} > {title}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index ba7136bd1..2d983a685 100644 --- a/src/frontend/src/modals/importModal/index.tsx +++ b/src/frontend/src/modals/importModal/index.tsx @@ -180,7 +180,7 @@ export default function ImportModal() {
{" "}