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

modals rework

Browse Source
This commit is contained in:
MathieuG-P
2022-06-25 03:49:08 +02:00
parent e2c232002f
commit 9fcd63d177
4 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/modal/modal-types/guard-modal.component.tsx
+1 -2
View File
@@ -14,8 +14,7 @@ export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
}
return (
<form className="relative p-4 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2" onSubmit={(e) => {e.preventDefault(); login();}}>
<span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
<form onSubmit={(e) => {e.preventDefault(); login();}}>
<h1 className="text-3xl uppercase tracking-wide w-full text-center">Steam Guard</h1>
<BsmImage className="mx-auto h-24" image={BeatConflict}/>
<div className="mb-4">
src/renderer/components/modal/modal-types/login-modal.component.tsx
+1 -2
View File
@@ -16,8 +16,7 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
}
return (
<form className="relative p-4 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2" onSubmit={(e) => {e.preventDefault(); loggin();}}>
<span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
<form onSubmit={(e) => {e.preventDefault(); loggin();}}>
<h1 className="text-3xl uppercase tracking-wide w-full text-center">Steam Login</h1>
<BsmImage className="mx-auto h-20" image={BeatImpatient} />
<div className="mb-2">
src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
+1 -2
View File
@@ -9,8 +9,7 @@ export function UninstallModal({resolver}: {resolver: (x: ModalResponse) => void
const version = ModalService.getInsance().getModalData<BSVersion>();
return (
<form className="relative p-4 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2" onSubmit={(e) => {e.preventDefault(); resolver({exitCode: ModalExitCode.COMPLETED})}}>
<span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
<form onSubmit={(e) => {e.preventDefault(); resolver({exitCode: ModalExitCode.COMPLETED})}}>
<h1 className="text-3xl uppercase tracking-wide w-full text-center">Uninstall</h1>
<BsmImage className="mx-auto h-24" image={BeatConflict}/>
<p className="max-w-sm">Are you sure you want to uninstall BeatSaber {version.BSVersion} ? You will have to re-download it to play it.</p>
src/renderer/components/modal/modal.component.tsx
+28 -10
View File
@@ -1,32 +1,50 @@
import { ModalExitCode, ModalService, ModalType } from "renderer/services/modale.service";
import { useEffect, useState } from "react"
import { AnimatePresence, motion } from "framer-motion";
import { LoginModal } from "./modal-types/login-modal.component";
import { GuardModal } from "./modal-types/guard-modal.component";
import { UninstallModal } from "./modal-types/uninstall-modal.component";
import { InstallationFolderModal } from "./modal-types/installation-folder-modal.component";
export function Modal() {
const [modalType, setModalType] = useState(null as ModalType);
const [modalYOut, setModalYOut] = useState(window.innerHeight);
const modalSevice = ModalService.getInsance();
const handleResize = () => setModalYOut(window.innerHeight);
useEffect(() => {
modalSevice.modalType$.subscribe(type => {
setModalType(type);
})
});
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
}
}, [])
return (
<div className={`absolute w-screen h-screen flex content-center items-center justify-center z-50 ${modalType ? "top-0" : "top-[calc(100%+50px)]"}`}>
<span onClick={() => modalSevice.resolve({exitCode: ModalExitCode.NO_CHOICE})} className={`absolute top-0 bottom-0 right-0 left-0 transition-opacity bg-black ${modalType ? "opacity-60" : "opacity-0"}`}></span>
<div className={`absolute transition-transform duration-200 ${modalType ? "translate-y-0" : "translate-y-[200%]"}`}>
{modalType === ModalType.STEAM_LOGIN && <LoginModal resolver={modalSevice.getResolver()}/>}
{modalType === ModalType.GUARD_CODE && <GuardModal resolver={modalSevice.getResolver()}/>}
{modalType === ModalType.UNINSTALL && <UninstallModal resolver={modalSevice.getResolver()}/>}
return (
<AnimatePresence>
{modalType && (
<div className="top-0 absolute w-screen h-screen flex content-center items-center justify-center z-50">
<motion.span key="modal-overlay" onClick={() => modalSevice.resolve({exitCode: ModalExitCode.NO_CHOICE})} className="absolute top-0 bottom-0 right-0 left-0 bg-black" initial={{opacity: 0}} animate={{opacity: modalType && .60}} exit={{opacity: 0}} transition={{duration: .2}}/>
<motion.div key="modal" initial={{y: modalYOut}} animate={{y: 0}} exit={{y: modalYOut}}>
<div className="relative p-4 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2">
<span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
{modalType === ModalType.STEAM_LOGIN && <LoginModal resolver={modalSevice.getResolver()}/>}
{modalType === ModalType.GUARD_CODE && <GuardModal resolver={modalSevice.getResolver()}/>}
{modalType === ModalType.UNINSTALL && <UninstallModal resolver={modalSevice.getResolver()}/>}
{modalType === ModalType.INSTALLATION_FOLDER && <InstallationFolderModal resolver={modalSevice.getResolver()}/>}
</div>
</motion.div>
</div>
</div>
)}
</AnimatePresence>
)
}