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

settings page fully translated

Browse Source
This commit is contained in:
MathieuG-P
2022-07-11 20:38:41 +02:00
parent 6d79b7fe0a
commit 46e88467de
8 changed files with 194 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/settings/setting-container.component.tsx
+7 -3
View File
@@ -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>
)
src/renderer/components/settings/setting-radio-array.component.tsx
+5 -2
View File
@@ -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>
)}
src/renderer/components/shared/bsm-button.component.tsx
+6 -2
View File
@@ -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>
)
}
src/renderer/pages/settings-page.component.tsx
+13 -14
View File
@@ -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>