dev
/
sudo-archive
mirror of https://github.com/sussy-code/smov.git
2
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Style and localize the preference section of settings

This commit is contained in:
mrjvs 2024-01-20 13:20:06 +01:00
parent f96a0de373
commit 741a35dee8
4 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/locales/en.json
View File

@ -408,10 +408,13 @@
"urlPlaceholder": "https://" "urlPlaceholder": "https://"
} }
}, },
"locale": { "preferences": {
"language": "Application language", "language": "Application language",
"languageDescription": "Language applied to the entire application.", "languageDescription": "Language applied to the entire application.",
"title": "Locale" "title": "Preferences",
"thumbnail": "Generate thumbnails",
"thumbnailDescription": "Most of the time, videos don't have thumbnails. You can enable this setting to generate them on the fly but they can make your video slower.",
"thumbnailLabel": "Generate thumbnails"
}, },
"reset": "Reset", "reset": "Reset",
"save": "Save", "save": "Save",

2
src/components/buttons/Toggle.tsx
View File

@ -1,6 +1,6 @@
import classNames from "classnames"; import classNames from "classnames";
export function Toggle(props: { onClick: () => void; enabled?: boolean }) { export function Toggle(props: { onClick?: () => void; enabled?: boolean }) {
return ( return (
<button <button
type="button" type="button"

50
src/pages/parts/settings/PreferencesPart.tsx
View File

@ -1,5 +1,6 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Toggle } from "@/components/buttons/Toggle";
import { FlagIcon } from "@/components/FlagIcon"; import { FlagIcon } from "@/components/FlagIcon";
import { Dropdown } from "@/components/form/Dropdown"; import { Dropdown } from "@/components/form/Dropdown";
import { Heading1 } from "@/components/utils/Text"; import { Heading1 } from "@/components/utils/Text";
@ -28,22 +29,39 @@ export function PreferencesPart(props: {
); );
return ( return (
<div> <div className="space-y-12">
<Heading1 border>{t("settings.locale.title")}</Heading1> <Heading1 border>{t("settings.preferences.title")}</Heading1>
<p className="text-white font-bold mb-3"> <div>
{t("settings.locale.language")} <p className="text-white font-bold mb-3">
</p> {t("settings.preferences.language")}
<p className="max-w-[20rem] font-medium"> </p>
{t("settings.locale.languageDescription")} <p className="max-w-[20rem] font-medium">
</p> {t("settings.preferences.languageDescription")}
<Dropdown </p>
options={options} <Dropdown
selectedItem={selected || options[0]} options={options}
setSelectedItem={(opt) => props.setLanguage(opt.id)} selectedItem={selected || options[0]}
/> setSelectedItem={(opt) => props.setLanguage(opt.id)}
<p onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}> />
thumbnails: {props.enableThumbnails.toString()} </div>
</p>
<div>
<p className="text-white font-bold mb-3">
{t("settings.preferences.thumbnail")}
</p>
<p className="max-w-[25rem] font-medium">
{t("settings.preferences.thumbnailDescription")}
</p>
<div
onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}
className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
>
<Toggle enabled={props.enableThumbnails} />
<p className="flex-1 text-white font-bold">
{t("settings.preferences.thumbnailLabel")}
</p>
</div>
</div>
</div> </div>
); );
} }

2
src/pages/parts/settings/SidebarPart.tsx
View File

@ -44,7 +44,7 @@ export function SidebarPart() {
icon: Icons.USER, icon: Icons.USER,
}, },
{ {
textKey: "settings.locale.title", textKey: "settings.preferences.title",
id: "settings-preferences", id: "settings-preferences",
icon: Icons.SETTINGS, icon: Icons.SETTINGS,
}, },