mirror of
https://github.com/Zagrios/bs-manager.git
synced 2026-07-03 14:08:25 +02:00
settings page fully translated
This commit is contained in:
MathieuG-P
@@ -1,18 +1,43 @@
|
||||
{
|
||||
"pages":{
|
||||
"settings":{
|
||||
"languages":{
|
||||
"en-EN": "English, UK",
|
||||
"en-US": "English, US",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Español",
|
||||
"translated":{
|
||||
"en-EN": "English, United Kingdom",
|
||||
"en-US": "English, USA",
|
||||
"fr-FR": "French",
|
||||
"es-ES": "Spanish"
|
||||
}
|
||||
"pages":{
|
||||
"settings":{
|
||||
"steam":{
|
||||
"title":"Steam",
|
||||
"description":"If you log out of Steam, you will have to log back in to download a new version of Beat Saber.",
|
||||
"logout":"Log out"
|
||||
},
|
||||
"appearance":{
|
||||
"title":"Appearance",
|
||||
"description":"Choose the two main colours of BSManager.",
|
||||
"reset":"Reset",
|
||||
"sub-title":"Theme",
|
||||
"themes":{
|
||||
"dark":"Dark",
|
||||
"light": "Light",
|
||||
"os": "Sync with computer"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"installation-folder":{
|
||||
"title":"Installation folder",
|
||||
"description":"Change the default folder for Beat Saber versions and other upcoming features.",
|
||||
"choose-folder":"Choose folder"
|
||||
},
|
||||
"language":{
|
||||
"title":"Language",
|
||||
"description":"Select a language.",
|
||||
"languages":{
|
||||
"en-EN": "English, UK",
|
||||
"en-US": "English, US",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Español",
|
||||
"translated":{
|
||||
"en-EN": "English, United Kingdom",
|
||||
"en-US": "English, USA",
|
||||
"fr-FR": "French",
|
||||
"es-ES": "Spanish"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,43 @@
|
||||
{
|
||||
"pages":{
|
||||
"settings":{
|
||||
"languages":{
|
||||
"en-EN": "English, UK",
|
||||
"en-US": "English, US",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Español",
|
||||
"translated":{
|
||||
"en-EN": "English, United Kingdom",
|
||||
"en-US": "English, United States",
|
||||
"fr-FR": "French",
|
||||
"es-ES": "Spanish"
|
||||
}
|
||||
"pages":{
|
||||
"settings":{
|
||||
"steam":{
|
||||
"title":"Steam",
|
||||
"description":"If you log out of Steam, you will have to log back in to download a new version of Beat Saber.",
|
||||
"logout":"Log out"
|
||||
},
|
||||
"appearance":{
|
||||
"title":"Appearance",
|
||||
"description":"Choose the two main colors of BSManager.",
|
||||
"reset":"Reset",
|
||||
"sub-title":"Theme",
|
||||
"themes":{
|
||||
"dark":"Dark",
|
||||
"light": "Light",
|
||||
"os": "Sync with computer"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"installation-folder":{
|
||||
"title":"Installation folder",
|
||||
"description":"Change the default folder for Beat Saber versions and other upcoming features.",
|
||||
"choose-folder":"Choose folder"
|
||||
},
|
||||
"language":{
|
||||
"title":"Language",
|
||||
"description":"Selects a language.",
|
||||
"languages":{
|
||||
"en-EN": "English, UK",
|
||||
"en-US": "English, US",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Español",
|
||||
"translated":{
|
||||
"en-EN": "English, United Kingdom",
|
||||
"en-US": "English, United States",
|
||||
"fr-FR": "French",
|
||||
"es-ES": "Spanish"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,43 @@
|
||||
{
|
||||
"pages":{
|
||||
"settings":{
|
||||
"languages":{
|
||||
"en-EN": "English, UK",
|
||||
"en-US": "English, US",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Español",
|
||||
"translated":{
|
||||
"en-EN": "Inglés, Reino Unido",
|
||||
"en-US": "Inglés, Estados Unidos",
|
||||
"fr-FR": "Francés",
|
||||
"es-ES": "Español"
|
||||
}
|
||||
"pages":{
|
||||
"settings":{
|
||||
"steam":{
|
||||
"title":"Steam",
|
||||
"description":"Si sales de Steam, tendrás que volver a entrar para descargar una nueva versión de Beat Saber.",
|
||||
"logout":"Desconectar"
|
||||
},
|
||||
"appearance":{
|
||||
"title":"Apariencia",
|
||||
"description":"Elija los dos colores principales de BSManager.",
|
||||
"reset":"Reiniciar",
|
||||
"sub-title":"Tema",
|
||||
"themes":{
|
||||
"dark":"Oscuro",
|
||||
"light": "Claro",
|
||||
"os": "Sincronizar con ordenador"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"installation-folder":{
|
||||
"title":"Carpeta de instalación",
|
||||
"description":"Cambia la carpeta por defecto para las versiones de Beat Saber y otras características próximas.",
|
||||
"choose-folder":"Elija la carpeta"
|
||||
},
|
||||
"language":{
|
||||
"title":"Idioma",
|
||||
"description":"Selecciona un idioma.",
|
||||
"languages":{
|
||||
"en-EN": "English, UK",
|
||||
"en-US": "English, US",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Español",
|
||||
"translated":{
|
||||
"en-EN": "Inglés, Reino Unido",
|
||||
"en-US": "Inglés, Estados Unidos",
|
||||
"fr-FR": "Francés",
|
||||
"es-ES": "Español"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,43 @@
|
||||
{
|
||||
"pages":{
|
||||
"settings":{
|
||||
"languages":{
|
||||
"en-EN": "English, UK",
|
||||
"en-US": "English, US",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Español",
|
||||
"translated":{
|
||||
"en-EN": "Anglais, Royaume-Uni",
|
||||
"en-US": "Anglais, États-Unis",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Espagnol"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
"pages":{
|
||||
"settings":{
|
||||
"steam":{
|
||||
"title":"Steam",
|
||||
"description":"Si tu te déconnectes de Steam, tu devras te reconnecter pour télécharger une nouvelle version de Beat Saber.",
|
||||
"logout":"Déconnexion"
|
||||
},
|
||||
"appearance":{
|
||||
"title":"Apparence",
|
||||
"description":"Choisi les deux couleurs principales de BSManager.",
|
||||
"reset":"Réinitialiser",
|
||||
"sub-title":"Thème",
|
||||
"themes":{
|
||||
"dark":"Sombre",
|
||||
"light": "Clair",
|
||||
"os": "Synchroniser avec l'ordinateur"
|
||||
}
|
||||
},
|
||||
"installation-folder":{
|
||||
"title":"Dossier d'installation",
|
||||
"description":"Change le dossier par défaut pour les versions de Beat Saber et d'autres fonctionnalités à venir.",
|
||||
"choose-folder":"Choisir un dossier"
|
||||
},
|
||||
"language":{
|
||||
"title":"Langage",
|
||||
"description":"Sélectionne un langage.",
|
||||
"languages":{
|
||||
"en-EN": "English, UK",
|
||||
"en-US": "English, US",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Español",
|
||||
"translated":{
|
||||
"en-EN": "Anglais, Royaume-Uni",
|
||||
"en-US": "Anglais, États-Unis",
|
||||
"fr-FR": "Français",
|
||||
"es-ES": "Espagnol"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
import { ReactNode } from "react";
|
||||
import { useTranslation } from "renderer/hooks/use-translation.hook";
|
||||
|
||||
export function SettingContainer({className, title, minorTitle, description, children}: {className?: string, title?: string, minorTitle?: string, description?: string, children?: ReactNode}) {
|
||||
|
||||
const t = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={className || "relative mb-5"}>
|
||||
{ title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{title}</h1> }
|
||||
{ minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-600 dark:text-gray-400">{minorTitle}</h2> }
|
||||
{ description && <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{description}</p> }
|
||||
{ title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{t(title)}</h1> }
|
||||
{ minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-600 dark:text-gray-400">{t(minorTitle)}</h2> }
|
||||
{ description && <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{t(description)}</p> }
|
||||
{ children }
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { useTranslation } from "renderer/hooks/use-translation.hook"
|
||||
import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
|
||||
|
||||
export function SettingRadioArray({items, selectedItem = items[0].id, onItemSelected}: {items: RadioItem[], selectedItem?: number, onItemSelected?: (id: number) => void}) {
|
||||
|
||||
const t = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{ items.map(i => (
|
||||
@@ -11,11 +14,11 @@ export function SettingRadioArray({items, selectedItem = items[0].id, onItemSele
|
||||
<div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
|
||||
<motion.span initial={{scale: 0}} animate={{scale: i.id === selectedItem ? 1 : 0}} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full"/>
|
||||
</div>
|
||||
<h2 className="font-extrabold">{i.text}</h2>
|
||||
<h2 className="font-extrabold">{t(i.text)}</h2>
|
||||
</div>
|
||||
{i.icon && (
|
||||
<div className="flex items-center">
|
||||
{i.textIcon && <span className="text-sm">{i.textIcon}</span>}
|
||||
{i.textIcon && <span className="text-sm">{t(i.textIcon)}</span>}
|
||||
<BsmIcon icon={i.icon} className="max-h-5 w-fit ml-2"/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -2,14 +2,18 @@ import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
|
||||
import OutsideClickHandler from 'react-outside-click-handler';
|
||||
import React from "react";
|
||||
import { BsmImage } from "./bsm-image.component";
|
||||
import { useTranslation } from "renderer/hooks/use-translation.hook";
|
||||
|
||||
export function BsmButton({className, style, imgClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick}: {className?: string, style?: React.CSSProperties, imgClassName?: string, icon?: BsmIconType, image?: string, text?: string, type?: string, active?: boolean, withBar?: boolean, disabled?: boolean, onClickOutside?: (e: MouseEvent) => void, onClick?: (e: React.MouseEvent) => void}) {
|
||||
|
||||
const t = useTranslation();
|
||||
|
||||
return (
|
||||
<OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
|
||||
<div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${disabled && "brightness-75 cursor-not-allowed"}`} style={style}>
|
||||
{ image && <BsmImage image={image} className={imgClassName}/> }
|
||||
{ icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
|
||||
{text && (type === "submit" ? <button className="w-full h-full">{text}</button> : <span>{text}</span>)}
|
||||
{text && (type === "submit" ? <button className="w-full h-full">{t(text)}</button> : <span>{t(text)}</span>)}
|
||||
{ withBar && (
|
||||
<div className="absolute bottom-0 left-0 w-full h-1 bg-red-500">
|
||||
<div className="absolute top-0 left-0 h-full w-full bg-inherit brightness-50"/>
|
||||
@@ -18,6 +22,6 @@ export function BsmButton({className, style, imgClassName, icon, image, text, ty
|
||||
)}
|
||||
</div>
|
||||
</OutsideClickHandler>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
@@ -32,16 +32,15 @@ export function SettingsPage() {
|
||||
const firstColor = useObservable(configService.watch<string>("first-color"));
|
||||
const secondColor = useObservable(configService.watch<string>("second-color"));
|
||||
const sessionExist = useObservable(authService.sessionExist$);
|
||||
const t = useTranslation();
|
||||
|
||||
const themeItem: RadioItem[] = [
|
||||
{id: 0, text: "Dark", value: "dark" as ThemeConfig},
|
||||
{id: 1, text: "Light", value: "light" as ThemeConfig},
|
||||
{id: 3, text: "Operating System", value: "os" as ThemeConfig}
|
||||
{id: 0, text: "pages.settings.appearance.themes.dark", value: "dark" as ThemeConfig},
|
||||
{id: 1, text: "pages.settings.appearance.themes.light", value: "light" as ThemeConfig},
|
||||
{id: 3, text: "pages.settings.appearance.themes.os", value: "os" as ThemeConfig}
|
||||
];
|
||||
|
||||
const languagesItems: RadioItem[] = i18nService.getSupportedLanguages().map((l, index) => {
|
||||
return {id: index, text: t(`pages.settings.languages.${l}`), value: l, textIcon:t(`pages.settings.languages.translated.${l}`), icon: `${l}-flag` as BsmIconType};
|
||||
return {id: index, text: `pages.settings.language.languages.${l}`, value: l, textIcon:`pages.settings.language.languages.translated.${l}`, icon: `${l}-flag` as BsmIconType};
|
||||
}).sort((a, b) => a.text.localeCompare(b.text));
|
||||
|
||||
const[themeIdSelected, setThemeIdSelected]= useState(themeItem.find(e => e.value === themeService.getTheme()).id);
|
||||
@@ -106,33 +105,33 @@ export function SettingsPage() {
|
||||
return (
|
||||
<div className="w-full h-full flex justify-center overflow-y-scroll pb-12 scrollbar-thin scrollbar-thumb-neutral-900 text-gray-800 dark:text-gray-200">
|
||||
|
||||
<div className="w-fit max-w-full mt-10">
|
||||
<div className="max-w-2xl w-full mt-10">
|
||||
|
||||
<SettingContainer title="Steam" description="If you logout of your Steam account, you must reconect for download a new BS instance">
|
||||
<BsmButton onClick={deleteSteamSession} className={`bg-red-500 w-fit px-3 py-[2px] text-white rounded-md`} withBar={false} text="Logout of Steam" disabled={!sessionExist}/>
|
||||
<SettingContainer title="pages.settings.steam.title" description="pages.settings.steam.description">
|
||||
<BsmButton onClick={deleteSteamSession} className={`bg-red-500 w-fit px-3 py-[2px] text-white rounded-md`} withBar={false} text="pages.settings.steam.logout" disabled={!sessionExist}/>
|
||||
</SettingContainer>
|
||||
|
||||
<SettingContainer title="Appearance" description="Choose the two primary colors of BSManager">
|
||||
<SettingContainer title="pages.settings.appearance.title" description="pages.settings.appearance.description">
|
||||
<div className="relative w-full h-8 bg-light-main-color-1 dark:bg-main-color-1 flex justify-center rounded-md py-1">
|
||||
<SettingColorChooser color={firstColor} onChange={setFirstColorSetting}/>
|
||||
<SettingColorChooser color={secondColor} onChange={setSecondColorSetting}/>
|
||||
<div className="absolute right-2 top-0 h-full flex items-center">
|
||||
<BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="Reset" withBar={false}/>
|
||||
<BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="pages.settings.appearance.reset" withBar={false}/>
|
||||
</div>
|
||||
</div>
|
||||
<SettingContainer minorTitle="Theme" className="mt-3">
|
||||
<SettingContainer minorTitle="pages.settings.appearance.sub-title" className="mt-3">
|
||||
<SettingRadioArray items={themeItem} selectedItem={themeIdSelected} onItemSelected={handleChangeTheme}/>
|
||||
</SettingContainer>
|
||||
</SettingContainer>
|
||||
|
||||
<SettingContainer title="Installation Folder" description="Change the default installation directory for Beat Saber instances, and other upcoming features.">
|
||||
<SettingContainer title="pages.settings.installation-folder.title" description="pages.settings.installation-folder.description">
|
||||
<div className="relative flex items-center justify-between w-full h-8 bg-light-main-color-1 dark:bg-main-color-1 rounded-md pl-2 py-1">
|
||||
<span className="block text-ellipsis overflow-hidden min-w-0" title={installationFolder}>{installationFolder}</span>
|
||||
<BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="Choose Folder" withBar={false}/>
|
||||
<BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="pages.settings.installation-folder.choose-folder" withBar={false}/>
|
||||
</div>
|
||||
</SettingContainer>
|
||||
|
||||
<SettingContainer title="Language" description="Select a language">
|
||||
<SettingContainer title="pages.settings.language.title" description="pages.settings.language.description">
|
||||
<SettingRadioArray items={languagesItems} selectedItem={languageSelected} onItemSelected={handleChangeLanguage}/>
|
||||
</SettingContainer>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user