mirror of
https://github.com/C9Glax/tranga-website.git
synced 2025-10-11 13:19:49 +02:00
Styling, descriptions for inputs
This commit is contained in:
@@ -3,7 +3,7 @@ import {SettingsContext, SettingsItem} from './Settings.tsx';
|
|||||||
import {ApiContext} from '../../contexts/ApiContext.tsx';
|
import {ApiContext} from '../../contexts/ApiContext.tsx';
|
||||||
import TButton from "../Inputs/TButton.tsx";
|
import TButton from "../Inputs/TButton.tsx";
|
||||||
import {LibraryRefreshSetting, PatchLibraryRefreshRecord} from "../../api/data-contracts.ts";
|
import {LibraryRefreshSetting, PatchLibraryRefreshRecord} from "../../api/data-contracts.ts";
|
||||||
import {Input, Radio, RadioGroup} from "@mui/joy";
|
import {Input, Radio, RadioGroup, Typography} from "@mui/joy";
|
||||||
|
|
||||||
export default function LibraryRefresh(): ReactNode {
|
export default function LibraryRefresh(): ReactNode {
|
||||||
const settings = useContext(SettingsContext);
|
const settings = useContext(SettingsContext);
|
||||||
@@ -35,11 +35,13 @@ export default function LibraryRefresh(): ReactNode {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsItem title={'Library Refresh'}>
|
<SettingsItem title={'Library Refresh'}>
|
||||||
|
<Typography level={"body-md"}>Refresh after</Typography>
|
||||||
<RadioGroup defaultValue={value.setting} onChange={onSettingChanged}>
|
<RadioGroup defaultValue={value.setting} onChange={onSettingChanged}>
|
||||||
{Object.keys(LibraryRefreshSetting).map(e => (
|
{Object.keys(LibraryRefreshSetting).map(e => (
|
||||||
<Radio value={e}>{e}</Radio>
|
<Radio value={e} label={e} />
|
||||||
))}
|
))}
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
|
<Typography level={"body-md"}>When {LibraryRefreshSetting.WhileDownloading} refresh every x-minutes:</Typography>
|
||||||
<Input defaultValue={value.refreshLibraryWhileDownloadingEveryMinutes??undefined} onChange={onMinutesChanged} type={"number"} />
|
<Input defaultValue={value.refreshLibraryWhileDownloadingEveryMinutes??undefined} onChange={onMinutesChanged} type={"number"} />
|
||||||
<TButton onClick={updateSetting}>Update</TButton>
|
<TButton onClick={updateSetting}>Update</TButton>
|
||||||
</SettingsItem>
|
</SettingsItem>
|
||||||
|
@@ -8,7 +8,7 @@ import {
|
|||||||
DialogContent,
|
DialogContent,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
Modal,
|
Modal,
|
||||||
ModalDialog,
|
ModalDialog, Stack,
|
||||||
} from '@mui/joy';
|
} from '@mui/joy';
|
||||||
import './Settings.css';
|
import './Settings.css';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
@@ -82,7 +82,11 @@ export function SettingsItem({ title, children }: { title: string; children: Rea
|
|||||||
return (
|
return (
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionSummary>{title}</AccordionSummary>
|
<AccordionSummary>{title}</AccordionSummary>
|
||||||
<AccordionDetails>{children}</AccordionDetails>
|
<AccordionDetails>
|
||||||
|
<Stack gap={1} direction="column">
|
||||||
|
{children}
|
||||||
|
</Stack>
|
||||||
|
</AccordionDetails>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user