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

version viewer page fully translated

Browse Source
This commit is contained in:
MathieuG-P
2022-07-11 22:36:21 +02:00
parent 59815bd412
commit a7b798349a
7 changed files with 95 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/jsons/translations/en-EN.json
+16 -1
View File
@@ -1,9 +1,24 @@
{
"misc":{
"download": "Download",
"verify": "Verify"
"verify": "Verify",
"launch": "Launch",
"mods": "Mods",
"maps": "Maps"
},
"pages":{
"version-viewer":{
"launch-mods":{
"oculus": "Oculus Mod",
"desktop": "Desktop Mod",
"debug": "Debug Mod"
},
"dropdown":{
"open-folder": "Open folder",
"verify-files": "Verify files",
"uninstall": "Uninstall"
}
},
"available-versions":{
"title": "Select a version"
},
assets/jsons/translations/en-US.json
+16 -1
View File
@@ -1,9 +1,24 @@
{
"misc":{
"download": "Download",
"verify": "Verify"
"verify": "Verify",
"launch": "Launch",
"mods": "Mods",
"maps": "Maps"
},
"pages":{
"version-viewer":{
"launch-mods":{
"oculus": "Oculus Mod",
"desktop": "Desktop Mod",
"debug": "Debug Mod"
},
"dropdown":{
"open-folder": "Open folder",
"verify-files": "Verify files",
"uninstall": "Uninstall"
}
},
"available-versions":{
"title": "Select a version"
},
assets/jsons/translations/es-ES.json
+16 -1
View File
@@ -1,9 +1,24 @@
{
"misc":{
"download": "Descargar",
"verify": "Verificar"
"verify": "Verificar",
"launch": "Lanzar",
"mods": "Mods",
"maps": "Maps"
},
"pages":{
"version-viewer":{
"launch-mods":{
"oculus": "Oculus Mod",
"desktop": "Desktop Mod",
"debug": "Debug Mod"
},
"dropdown":{
"open-folder": "Abrir la carpeta",
"verify-files": "Verificar los archivos",
"uninstall": "Desinstalar"
}
},
"available-versions":{
"title": "Seleccione una versión"
},
assets/jsons/translations/fr-FR.json
+16 -1
View File
@@ -1,9 +1,24 @@
{
"misc":{
"download": "Télécharger",
"verify": "Vérifier"
"verify": "Vérifier",
"launch": "Lancer",
"mods": "Modes",
"maps": "Maps"
},
"pages":{
"version-viewer":{
"launch-mods":{
"oculus": "Mode Oculus",
"desktop": "Mode Bureau",
"debug": "Mode Debug"
},
"dropdown":{
"open-folder": "Ouvrir le dossier",
"verify-files": "Vérifier les fichiers",
"uninstall": "Désinstaller"
}
},
"available-versions":{
"title": "Choisi une version"
},
src/renderer/components/shared/bsm-dropdown-button.component.tsx
+13 -11
View File
@@ -2,24 +2,26 @@ import { useState } from "react"
import { BsmIconType } from "../svgs/bsm-icon.component"
import { BsmButton } from "./bsm-button.component"
import { BsmIcon } from "../svgs/bsm-icon.component"
import { useTranslation } from "renderer/hooks/use-translation.hook"
export interface DropDownItem {id: number, text: string, icon?: BsmIconType}
export function BsmDropdownButton({className, items, align, onItemClick}: {className?: string, items?: DropDownItem[], align?: "left"|"right", onItemClick?: (id: number) => void}) {
const [expanded, setExpanded] = useState(false)
const [expanded, setExpanded] = useState(false)
const t = useTranslation()
return (
<div className={`${className}`}>
<BsmButton onClick={() => setExpanded(!expanded)} className='relative bg-light-main-color-2 dark:bg-main-color-2 z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
<div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-light-main-color-2 dark:bg-main-color-2 text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-transform ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{transform: expanded ? "scale(1)" : "scale(0)"}}>
return (
<div className={`${className}`}>
<BsmButton onClick={() => setExpanded(!expanded)} className='relative bg-light-main-color-2 dark:bg-main-color-2 z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
<div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-light-main-color-2 dark:bg-main-color-2 text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-transform ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{transform: expanded ? "scale(1)" : "scale(0)"}}>
{ items?.map(i =>
<div key={i.id} onClick={() => onItemClick(i.id)} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3">
{i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-gray-800 dark:text-white"></BsmIcon>}
<span className="w-max">{i.text}</span>
</div>
<div key={i.id} onClick={() => onItemClick(i.id)} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3">
{i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-gray-800 dark:text-white"></BsmIcon>}
<span className="w-max">{t(i.text)}</span>
</div>
)}
</div>
</div>
</div>
</div>
)
}
src/renderer/components/shared/tab-nav-bar.component.tsx
+3 -1
View File
@@ -1,10 +1,12 @@
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "renderer/hooks/use-translation.hook";
export function TabNavBar(props: {tabsText: string[], onTabChange: Function, className?: string}) {
const [currentTabIndex, setCurrentTabIndex] = useState(0);
const tabsWrapper = useRef(null);
const [tabsWidth, setTabsWidth] = useState(0);
const t = useTranslation();
const selectYear = (tab: string) => {
const newIndex = props.tabsText.indexOf(tab);
@@ -26,7 +28,7 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
</div>
<div ref={tabsWrapper} className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
{ props.tabsText.map((y, index) =>
<span className="pr-4 pl-4 h-full inline-block bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
<span className="pr-4 pl-4 h-full inline-block bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</span>
)}
</div>
src/renderer/pages/version-viewer.component.tsx
+15 -12
View File
@@ -17,6 +17,7 @@ import DefautVersionImage from "../../../assets/images/default-version-img.jpg";
import { NotificationService } from 'renderer/services/notification.service';
import { BsDownloaderService } from 'renderer/services/bs-downloader.service';
import { ProgressBarService } from 'renderer/services/progress-bar.service';
import { useTranslation } from 'renderer/hooks/use-translation.hook';
export function VersionViewer() {
@@ -60,7 +61,7 @@ export function VersionViewer() {
}
const dropDownActions = async (id: number) => {
if(id === 4){
if(id === 3){
const modalCompleted = await modalService.openModal(ModalType.UNINSTALL, state)
if(modalCompleted.exitCode === ModalExitCode.COMPLETED){
bsUninstallerService.uninstall(state)
@@ -72,7 +73,7 @@ export function VersionViewer() {
.catch((e) => {console.log("*** ", e)})
}
}
else if(id === 2){
else if(id === 1){
window.electron.ipcRenderer.sendMessage("bs-version.open-folder", state);
}
}
@@ -108,16 +109,16 @@ export function VersionViewer() {
<div className="relative flex items-center flex-col w-full h-full text-gray-200 backdrop-blur-lg">
<BsmImage className='relative object-cover h-28' image={BSLogo}/>
<h1 className='relative text-4xl font-bold italic -top-3'>{state.BSVersion}</h1>
<TabNavBar className='mt-3' tabsText={["Launch", "Maps", "Mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
<TabNavBar className='mt-3' tabsText={["misc.launch", "misc.maps", "misc.mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
<div className='mt-2 w-full grow flex transition-transform duration-300 pt-5' style={{transform: `translate(${-(currentTabIndex * 100)}%, 0)`}}>
<div className='w-full shrink-0 items-center relative flex flex-col justify-start -top-2'>
<div className='grid grid-flow-col grid-cols-3 gap-6'>
<ToogleLunchMod icon='oculus' onClick={() => setMode(LaunchMods.OCULUS_MOD, !oculusMode)} active={oculusMode} text="OCULUS MOD"/>
<ToogleLunchMod icon='desktop' onClick={() => setMode(LaunchMods.DESKTOP_MOD, !desktopMode)} active={desktopMode} text="DESKTOP MOD"/>
<ToogleLunchMod icon='terminal' onClick={() => setMode(LaunchMods.DEBUG_MOD, !debugMode)} active={debugMode} text="DEBUG MOD"/>
<ToogleLunchMod icon='oculus' onClick={() => setMode(LaunchMods.OCULUS_MOD, !oculusMode)} active={oculusMode} text="pages.version-viewer.launch-mods.oculus"/>
<ToogleLunchMod icon='desktop' onClick={() => setMode(LaunchMods.DESKTOP_MOD, !desktopMode)} active={desktopMode} text="pages.version-viewer.launch-mods.desktop"/>
<ToogleLunchMod icon='terminal' onClick={() => setMode(LaunchMods.DEBUG_MOD, !debugMode)} active={debugMode} text="pages.version-viewer.launch-mods.debug"/>
</div>
<div className='grow flex justify-center items-center'>
<BsmButton onClick={launchBs} className='relative text-5xl text-gray-800 dark:text-gray-200 bg-light-main-color-2 dark:bg-main-color-2 font-bold tracking-wide pt-1 pb-3 px-7 rounded-lg shadow-md italic shadow-black active:scale-90 transition-transform' text='Launch'/>
<BsmButton onClick={launchBs} className='relative text-5xl text-gray-800 dark:text-gray-200 bg-light-main-color-2 dark:bg-main-color-2 font-bold tracking-wide pt-1 pb-3 px-7 rounded-lg shadow-md italic shadow-black active:scale-90 transition-transform' text="misc.launch"/>
</div>
</div>
<div className='shrink-0 w-full h-full flex justify-center'>
@@ -135,22 +136,24 @@ export function VersionViewer() {
</div>
</div>
<BsmDropdownButton className='absolute top-5 right-5 h-9 w-9' onItemClick={dropDownActions} items={[
{id: 1, text: "Add to favorites (wip)", icon:"favorite"},
{id: 2, text: "Open folder", icon: "folder"},
{id: 3, text: "Verify files (WIP)", icon: "folder"},
{id: 4, text: "Uninstall", icon:"trash"}
{id: 1, text: "pages.version-viewer.dropdown.open-folder", icon: "folder"},
{id: 2, text: "pages.version-viewer.dropdown.verify-files", icon: "folder"},
{id: 3, text: "pages.version-viewer.dropdown.uninstall", icon:"trash"}
]}/>
</>
)
}
function ToogleLunchMod(props: {onClick: Function, active: boolean, text: string, icon: BsmIconType}) {
const t = useTranslation();
return (
<div className={`relative rounded-full cursor-pointer group active:scale-95 transition-transform ${!props.active && "shadow-md shadow-black"}`} onClick={() => props.onClick()}>
<div className={`absolute glow-on-hover rounded-full ${props.active && "opacity-100 blur-[2px]"}`}></div>
<div className='w-full h-full pl-6 pr-6 flex justify-center items-center bg-light-main-color-2 dark:bg-main-color-2 p-3 rounded-full text-gray-800 dark:text-white group-hover:bg-light-main-color-1 dark:group-hover:bg-main-color-1'>
<BsmIcon icon={props.icon} className='mr-1 h-7 text-gray-800 dark:text-white'/>
<span className='w-fit min-w-fit h-full text-lg font-bold uppercase tracking-wide italic'>{props.text}</span>
<span className='w-fit min-w-fit h-full text-lg font-bold uppercase tracking-wide italic'>{t(props.text)}</span>
</div>
</div>
);