zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

add active style, and fix duplicated download style when download same version as steam

Browse Source
This commit is contained in:
MathieuG-P
2022-05-30 21:52:50 +02:00
parent 1f8061d48e
commit 266fdc6607
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/nav-bar/bs-version-item.component.tsx
+15 -9
View File
@@ -1,5 +1,5 @@
import { BSVersion } from "main/services/bs-version-manager.service";
import { Link } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import { BsNoteFill } from "../svgs/bs-note-fill.component";
import { SteamIcon } from "../svgs/steam-icon.component";
import { BsDownloaderService } from "renderer/services/bs-downloader.service";
@@ -8,34 +8,40 @@ import { combineLatest } from "rxjs";
export default function BsVersionItem(props: {version: BSVersion}) {
const { state } = useLocation() as { state: BSVersion};
const [downloading, setDownloading] = useState(false);
const [downloadPercent, setDownloadPercent] = useState(0);
const downloaderService = BsDownloaderService.getInstance();
const isActive = (): boolean => {
return props.version?.BSVersion === state?.BSVersion && props?.version.steam === state?.steam;
}
useEffect(() => {
combineLatest([downloaderService.currentBsVersionDownload$, downloaderService.downloadProgress$]).subscribe(vals => {
if(vals[0]?.BSVersion === props.version.BSVersion){
setDownloading(true);
if(vals[0]?.BSVersion === props.version.BSVersion && vals[0]?.steam === props.version.steam){
setDownloading(true);
setDownloadPercent(vals[1]);
}
else{
setDownloading(false);
else{
setDownloading(false);
setDownloadPercent(0);
}
})
}, [])
return (
<div className={`relative p-[1px] overflow-hidden rounded-full flex justify-center content-center items-center mb-1 ${downloading && "nav-item-download"}`}>
<div className="test absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`}}></div>
<Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className={`z-[1] flex cursor-pointer w-full justify-center content-center rounded-full items-center p-[3px] pl-2 pr-2 ${downloading ? 'bg-black' : 'bg-main-color-1'}`}>
<div className="absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`}}></div>
<Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className={`z-[1] flex cursor-pointer w-full justify-center content-center rounded-full items-center p-[3px] pl-2 pr-2 ${downloading && 'bg-black'} ${(isActive() && !downloading) && "bg-main-color-3"}`}>
{props.version.steam && <SteamIcon className="w-[19px] h-[19px] mr-1"/>}
{!props.version.steam && <BsNoteFill className="w-[19px] h-[19px] mr-1 text-red-600"/>}
<span className="flex items-center justify-center content-center shrink-0 grow text-lg text-gray-200 font-bold min-w-0">{props.version.BSVersion}</span>
</Link>
</div>
)
}