Merge pull request #42 from Zagrios/feature/improve-custom-version-design/9

feature/improve-custom-version-nav-bar-ui/9

package-lock.json

@@ -6835,11 +6835,6 @@
         "locate-path": "^3.0.0"
       }
     },
-    "fitty": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/fitty/-/fitty-2.3.6.tgz",
-      "integrity": "sha512-ENp/+MqqYmXBGHC0dlltCX75+5zL5m0uiIGCgYdoThao99BrJpNYzEh3xrvhiy4b7O5X82CQT7dPTiB53H6stw=="
-    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -11674,14 +11669,6 @@
         "scheduler": "^0.23.0"
       }
     },
-    "react-fitty": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/react-fitty/-/react-fitty-1.0.1.tgz",
-      "integrity": "sha512-mO+Sbon+bO8Kazv38qu3uwi52vYDdty6P8fla91TkQEc2KwfZjNLT4j31cXix3ZTlBMWmavWAu5SfG6J9SpaFQ==",
-      "requires": {
-        "fitty": "2"
-      }
-    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -11945,6 +11932,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -13546,6 +13538,14 @@
       "resolved": "https://registry.npmjs.org/use-double-click/-/use-double-click-1.0.5.tgz",
       "integrity": "sha512-71LUca6NtzpzHYlcfM/dOdmwvmvpMbzeIVQpN87w+DctpLiMCXtZpsN8FNWPgHpPBtNhvucPUHIDh5al8D8C7w=="
     },
+    "use-fit-text": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/use-fit-text/-/use-fit-text-2.4.0.tgz",
+      "integrity": "sha512-Iy4LMrXcdxWlyZ5phntMpJMgyXGB1p3tV73y2r0QrZ6f/thPh+/QU3ie6RCXmjF8tHMs20FKMPskXeDYIla/Ww==",
+      "requires": {
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "utf8-byte-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",

package.json

@@ -242,7 +242,6 @@
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
-    "react-fitty": "^1.0.1",
     "react-range": "^1.8.14",
     "react-router-dom": "^6.3.0",
     "react-visibility-sensor": "^5.1.1",
@@ -253,7 +252,8 @@
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-scoped-groups": "^2.0.0",
     "use-delayed-state": "^1.2.0",
-    "use-double-click": "^1.0.5"
+    "use-double-click": "^1.0.5",
+    "use-fit-text": "^2.4.0"
   },
   "devEngines": {
     "node": ">=14.x",

src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx

@@ -8,9 +8,10 @@ import { ConfigurationService } from "renderer/services/configuration.service";
 import { BSUninstallerService } from "renderer/services/bs-uninstaller.service";
 import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
 import { BsmIcon } from "../../svgs/bsm-icon.component";
-import { ReactFitty } from "react-fitty";
 import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
 import { NavBarItem } from './nav-bar-item.component';
+import useFitText from 'use-fit-text';
+import Tippy from '@tippyjs/react';
 
 export function BsVersionItem(props: {version: BSVersion}) {
 
@@ -21,6 +22,7 @@ export function BsVersionItem(props: {version: BSVersion}) {
   const bsUninstallerService = BSUninstallerService.getInstance();
 
   const { state } = useLocation() as { state: BSVersion};
+  const { fontSize, ref } = useFitText();
 
   const [downloading, setDownloading] = useState(false);
   const [downloadPercent, setDownloadPercent] = useState(0);
@@ -76,14 +78,29 @@ export function BsVersionItem(props: {version: BSVersion}) {
         return <BsmIcon icon="bsNote" className={classes} style={{color: props.version?.color ?? secondColor}}/>
     }
 
+    const renderVersionText = () => {
+        if(props.version.name){
+            return (
+                <Tippy content={props.version.BSVersion} placement="right-end" arrow={false} className="font-bold !bg-main-color-3" duration={[200, 0]}>
+                    <div className="h-8 flex items-center dark:text-gray-200 text-gray-800 overflow-hidden">
+                        <div ref={ref} className='whitespace-nowrap font-bold tracking-wide w-full text-center' style={{fontSize}}>{props.version.name}</div>
+                    </div>
+                </Tippy>
+            )
+        }
+        return (
+            <div className="h-8 flex items-center text-xl dark:text-gray-200 text-gray-800 font-bold tracking-wide">
+                <span className='pb-[2px] max-w-full text-ellipsis'>{props.version.BSVersion}</span>
+            </div>
+        )
+    }
+
 
     return (
         <NavBarItem onCancel={cancel} progress={downloading ? downloadPercent : 0} isActive={isActive() && !downloading} isDownloading={downloading}>
-            <Link onDoubleClick={handleDoubleClick} to={`/bs-version/${props.version.BSVersion}`} state={props.version} title={props.version.name && `${props.version.BSVersion} - ${props.version.name}`} className="w-full flex items-center justify-start content-center max-w-full">
+            <Link onDoubleClick={handleDoubleClick} to={`/bs-version/${props.version.BSVersion}`} state={props.version} className="w-full flex items-center justify-start content-center max-w-full">
                 {renderIcon()}
-                <div className="overflow-hidden whitespace-nowrap text-xl dark:text-gray-200 text-gray-800 font-bold tracking-wide">
-                    <ReactFitty maxSize={19} minSize={9} className='align-middle pb-[2px] max-w-full overflow-hidden text-ellipsis'>{props.version.name || props.version.BSVersion}</ReactFitty>
-                </div>
+                {renderVersionText()}
             </Link>
         </NavBarItem>
     )