Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-25 10:30:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improve UI

Browse Source
This commit is contained in:
Myzel394 2023-02-26 11:56:58 +01:00
parent 7ec6b81b5e
commit 47eee0db4a
No known key found for this signature in database
GPG Key ID: 79CC92F37B3E1A2B
1 changed files with 235 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

487
src/routes/SettingsAliasPreferencesRoute.tsx
View File

@ -17,7 +17,6 @@ import {
InputAdornment, InputAdornment,
MenuItem, MenuItem,
TextField, TextField,
Typography,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material" } from "@mui/material"
@ -31,7 +30,7 @@ import {
IMAGE_PROXY_FORMAT_TYPE_NAME_MAP, IMAGE_PROXY_FORMAT_TYPE_NAME_MAP,
PROXY_USER_AGENT_TYPE_NAME_MAP, PROXY_USER_AGENT_TYPE_NAME_MAP,
} from "~/constants/enum-mappings" } from "~/constants/enum-mappings"
import {AuthContext} from "~/components" import {AuthContext, SimplePageBuilder} from "~/components"
interface Form { interface Form {
removeTrackers: boolean removeTrackers: boolean
@ -121,262 +120,246 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
const isLarge = useMediaQuery(theme.breakpoints.up("md")) const isLarge = useMediaQuery(theme.breakpoints.up("md"))
return ( return (
<form onSubmit={formik.handleSubmit}> <SimplePageBuilder.Page
<Grid container spacing={4} flexDirection="column" alignItems="center"> title={t("routes.SettingsRoute.forms.aliasPreferences.title")}
<Grid item> description={t("routes.SettingsRoute.forms.aliasPreferences.description")}
<Typography variant="h6" component="h3"> >
{t("routes.SettingsRoute.forms.aliasPreferences.title")} <form onSubmit={formik.handleSubmit}>
</Typography> <Grid
</Grid> display="flex"
<Grid item> flexDirection="row"
<Typography variant="body1" component="p"> container
{t("routes.SettingsRoute.forms.aliasPreferences.description")} spacing={4}
</Typography> alignItems="flex-end"
</Grid> >
<Grid item> <Grid item md={6} xs={12}>
<Grid <FormGroup>
display="flex" <FormControlLabel
flexDirection="row" disabled={formik.isSubmitting}
container control={
spacing={4} <Checkbox
alignItems="flex-end" name="removeTrackers"
> id="removeTrackers"
<Grid item md={6} xs={12}> checked={formik.values.removeTrackers}
<FormGroup> onChange={formik.handleChange}
<FormControlLabel onBlur={formik.handleBlur}
disabled={formik.isSubmitting} />
control={ }
<Checkbox labelPlacement="start"
name="removeTrackers" label={t("relations.alias.settings.removeTrackers.label")}
id="removeTrackers" />
checked={formik.values.removeTrackers} <FormHelperText
error={Boolean(
formik.touched.createMailReport &&
formik.errors.createMailReport,
)}
>
{(formik.touched.createMailReport &&
formik.errors.createMailReport) ||
t("relations.alias.settings.removeTrackers.helperText")}
</FormHelperText>
</FormGroup>
</Grid>
<Grid item md={6} xs={12}>
<FormGroup>
<FormControlLabel
disabled={formik.isSubmitting}
control={
<Checkbox
name="createMailReport"
id="createMailReport"
checked={formik.values.createMailReport}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
}
labelPlacement="start"
label={t("relations.alias.settings.createMailReports.label")}
/>
<FormHelperText
error={Boolean(
formik.touched.createMailReport &&
formik.errors.createMailReport,
)}
>
{(formik.touched.createMailReport &&
formik.errors.createMailReport) ||
t("relations.alias.settings.createMailReports.helperText")}
</FormHelperText>
</FormGroup>
</Grid>
<Grid item xs={12}>
<FormGroup>
<FormControlLabel
disabled={formik.isSubmitting}
control={
<Checkbox
name="proxyImages"
id="proxyImages"
checked={formik.values.proxyImages}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
}
labelPlacement="start"
label={t("relations.alias.settings.proxyImages.label")}
/>
<FormHelperText
error={Boolean(
formik.touched.proxyImages && formik.errors.proxyImages,
)}
>
{(formik.touched.proxyImages && formik.errors.proxyImages) ||
t("relations.alias.settings.proxyImages.helperText")}
</FormHelperText>
<Alert
sx={{width: "fit-content", alignSelf: "end", marginTop: 1}}
severity="warning"
>
{t("general.experimentalFeature")}
</Alert>
</FormGroup>
<Collapse in={formik.values.proxyImages}>
<Grid
display="flex"
flexDirection={isLarge ? "row" : "column"}
container
marginY={2}
spacing={4}
alignItems={isLarge ? "flex-start" : "flex-end"}
>
<Grid item md={6} xs={12}>
<FormGroup>
<TextField
fullWidth
select
InputProps={{
startAdornment: (
<InputAdornment position="start">
<MdImage />
</InputAdornment>
),
}}
name="imageProxyFormat"
id="imageProxyFormat"
label={t(
"relations.alias.settings.imageProxyFormat.label",
)}
value={formik.values.imageProxyFormat}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} disabled={formik.isSubmitting}
/> error={
} formik.touched.imageProxyFormat &&
labelPlacement="start" Boolean(formik.errors.imageProxyFormat)
label={t("relations.alias.settings.removeTrackers.label")} }
/> helperText={
<FormHelperText formik.touched.imageProxyFormat &&
error={Boolean( formik.errors.imageProxyFormat
formik.touched.createMailReport && }
formik.errors.createMailReport, >
)} {Object.entries(IMAGE_PROXY_FORMAT_TYPE_NAME_MAP).map(
> ([value, translationString]) => (
{(formik.touched.createMailReport &&
formik.errors.createMailReport) ||
t("relations.alias.settings.removeTrackers.helperText")}
</FormHelperText>
</FormGroup>
</Grid>
<Grid item md={6} xs={12}>
<FormGroup>
<FormControlLabel
disabled={formik.isSubmitting}
control={
<Checkbox
name="createMailReport"
id="createMailReport"
checked={formik.values.createMailReport}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
}
labelPlacement="start"
label={t("relations.alias.settings.createMailReports.label")}
/>
<FormHelperText
error={Boolean(
formik.touched.createMailReport &&
formik.errors.createMailReport,
)}
>
{(formik.touched.createMailReport &&
formik.errors.createMailReport) ||
t("relations.alias.settings.createMailReports.helperText")}
</FormHelperText>
</FormGroup>
</Grid>
<Grid item xs={12}>
<FormGroup>
<FormControlLabel
disabled={formik.isSubmitting}
control={
<Checkbox
name="proxyImages"
id="proxyImages"
checked={formik.values.proxyImages}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
}
labelPlacement="start"
label={t("relations.alias.settings.proxyImages.label")}
/>
<FormHelperText
error={Boolean(
formik.touched.proxyImages && formik.errors.proxyImages,
)}
>
{(formik.touched.proxyImages && formik.errors.proxyImages) ||
t("relations.alias.settings.proxyImages.helperText")}
</FormHelperText>
<Alert
sx={{width: "fit-content", alignSelf: "end", marginTop: 1}}
severity="warning"
>
{t("general.experimentalFeature")}
</Alert>
</FormGroup>
<Collapse in={formik.values.proxyImages}>
<Grid
display="flex"
flexDirection={isLarge ? "row" : "column"}
container
marginY={2}
spacing={4}
alignItems={isLarge ? "flex-start" : "flex-end"}
>
<Grid item md={6} xs={12}>
<FormGroup>
<TextField
fullWidth
select
InputProps={{
startAdornment: (
<InputAdornment position="start">
<MdImage />
</InputAdornment>
),
}}
name="imageProxyFormat"
id="imageProxyFormat"
label={t(
"relations.alias.settings.imageProxyFormat.label",
)}
value={formik.values.imageProxyFormat}
onChange={formik.handleChange}
disabled={formik.isSubmitting}
error={
formik.touched.imageProxyFormat &&
Boolean(formik.errors.imageProxyFormat)
}
helperText={
formik.touched.imageProxyFormat &&
formik.errors.imageProxyFormat
}
>
{Object.entries(
IMAGE_PROXY_FORMAT_TYPE_NAME_MAP,
).map(([value, translationString]) => (
<MenuItem key={value} value={value}> <MenuItem key={value} value={value}>
{t(translationString)} {t(translationString)}
</MenuItem> </MenuItem>
))} ),
</TextField> )}
<FormHelperText </TextField>
error={Boolean( <FormHelperText
formik.touched.imageProxyFormat && error={Boolean(
formik.errors.imageProxyFormat, formik.touched.imageProxyFormat &&
)} formik.errors.imageProxyFormat,
> )}
{formik.touched.imageProxyFormat && >
formik.errors.imageProxyFormat} {formik.touched.imageProxyFormat &&
</FormHelperText> formik.errors.imageProxyFormat}
</FormGroup> </FormHelperText>
</Grid> </FormGroup>
</Grid> </Grid>
</Collapse> </Grid>
</Grid> </Collapse>
<Grid item xs={12}> </Grid>
<FormGroup> <Grid item xs={12}>
<TextField <FormGroup>
fullWidth <TextField
select fullWidth
name="proxyUserAgent" select
id="proxyUserAgent" name="proxyUserAgent"
label={t("relations.alias.settings.proxyUserAgent.label")} id="proxyUserAgent"
value={formik.values.proxyUserAgent} label={t("relations.alias.settings.proxyUserAgent.label")}
onChange={formik.handleChange} value={formik.values.proxyUserAgent}
disabled={formik.isSubmitting} onChange={formik.handleChange}
error={ disabled={formik.isSubmitting}
formik.touched.proxyUserAgent && error={
Boolean(formik.errors.proxyUserAgent) formik.touched.proxyUserAgent &&
} Boolean(formik.errors.proxyUserAgent)
helperText={ }
formik.touched.proxyUserAgent && helperText={
formik.errors.proxyUserAgent formik.touched.proxyUserAgent && formik.errors.proxyUserAgent
} }
> >
{Object.entries(PROXY_USER_AGENT_TYPE_NAME_MAP).map( {Object.entries(PROXY_USER_AGENT_TYPE_NAME_MAP).map(
([value, translationString]) => ( ([value, translationString]) => (
<MenuItem key={value} value={value}> <MenuItem key={value} value={value}>
{t(translationString)} {t(translationString)}
</MenuItem> </MenuItem>
), ),
)} )}
</TextField> </TextField>
<FormHelperText <FormHelperText
error={Boolean( error={Boolean(
formik.touched.proxyUserAgent && formik.touched.proxyUserAgent && formik.errors.proxyUserAgent,
formik.errors.proxyUserAgent, )}
)} >
> {(formik.touched.proxyUserAgent && formik.errors.proxyUserAgent) ||
{(formik.touched.proxyUserAgent && t("relations.alias.settings.proxyUserAgent.helperText")}
formik.errors.proxyUserAgent) || </FormHelperText>
t("relations.alias.settings.proxyUserAgent.helperText")} </FormGroup>
</FormHelperText> </Grid>
</FormGroup> <Grid item xs={12}>
</Grid> <FormGroup>
<Grid item xs={12}> <FormControlLabel
<FormGroup> disabled={formik.isSubmitting}
<FormControlLabel control={
disabled={formik.isSubmitting} <Checkbox
control={ name="expandUrlShorteners"
<Checkbox id="expandUrlShorteners"
name="expandUrlShorteners" checked={formik.values.expandUrlShorteners}
id="expandUrlShorteners" onChange={formik.handleChange}
checked={formik.values.expandUrlShorteners} onBlur={formik.handleBlur}
onChange={formik.handleChange} />
onBlur={formik.handleBlur} }
/> labelPlacement="start"
} label={t("relations.alias.settings.expandUrlShorteners.label")}
labelPlacement="start" />
label={t("relations.alias.settings.expandUrlShorteners.label")} <FormHelperText
/> error={Boolean(
<FormHelperText formik.touched.expandUrlShorteners &&
error={Boolean( formik.errors.expandUrlShorteners,
formik.touched.expandUrlShorteners && )}
formik.errors.expandUrlShorteners, >
)} {(formik.touched.expandUrlShorteners &&
> formik.errors.expandUrlShorteners) ||
{(formik.touched.expandUrlShorteners && t("relations.alias.settings.expandUrlShorteners.helperText")}
formik.errors.expandUrlShorteners) || </FormHelperText>
t( <Alert
"relations.alias.settings.expandUrlShorteners.helperText", sx={{width: "fit-content", alignSelf: "end", marginTop: 1}}
)} severity="warning"
</FormHelperText> >
<Alert {t("general.experimentalFeature")}
sx={{width: "fit-content", alignSelf: "end", marginTop: 1}} </Alert>
severity="warning" </FormGroup>
>
{t("general.experimentalFeature")}
</Alert>
</FormGroup>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item> <LoadingButton
<LoadingButton loading={formik.isSubmitting}
loading={formik.isSubmitting} variant="contained"
variant="contained" type="submit"
type="submit" startIcon={<MdCheckCircle />}
startIcon={<MdCheckCircle />} >
> {t("routes.SettingsRoute.forms.aliasPreferences.saveAction")}
{t("routes.SettingsRoute.forms.aliasPreferences.saveAction")} </LoadingButton>
</LoadingButton> </form>
</Grid> </SimplePageBuilder.Page>
</Grid>
</form>
) )
} }