ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support descriptions in "CheckboxInput"

Browse Source
This commit is contained in:
schroda
2026-05-17 13:36:41 +02:00
parent 710e7c0deb
commit 6564484540
2 changed files with 47 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/base/components/inputs/CheckboxInput.tsx
View File

@@ -10,12 +10,43 @@ import type { CheckboxProps } from '@mui/material/Checkbox';
import Checkbox from '@mui/material/Checkbox';
import type { FormControlLabelProps } from '@mui/material/FormControlLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
interface IProps extends CheckboxProps {
label?: FormControlLabelProps['label'];
}
type BaseProps = CheckboxProps;
type LabelProps = { label?: FormControlLabelProps['label'] };
type PrimaryTextProps = {
primaryText?: FormControlLabelProps['label'];
secondaryText?: FormControlLabelProps['label'];
};
export const CheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
<FormControlLabel control={<Checkbox {...rest} />} label={label} sx={sx} />
type Props = BaseProps &
((LabelProps & PropertiesNever<PrimaryTextProps>) | (PropertiesNever<LabelProps> & PrimaryTextProps));
export const CheckboxInput = ({ primaryText, secondaryText, sx, ...rest }: Props) => (
<FormControlLabel
control={<Checkbox {...rest} />}
label={
primaryText && !secondaryText ? (
primaryText
) : (
<Stack
sx={{
// Padding comes from the MUI Checkbox component
pt: '9px',
}}
>
{typeof primaryText === 'string' ? <Typography>{primaryText}</Typography> : primaryText}
{typeof secondaryText === 'string' ? (
<Typography variant="body2" color="textSecondary">
{secondaryText}
</Typography>
) : (
secondaryText
)}
</Stack>
)
}
sx={sx}
/>
);

80
src/features/migration/components/MigrationBulkSearchOptionsDialog.tsx
View File

@@ -39,20 +39,8 @@ export const MigrationBulkSearchOptionsDialog = ({
<DialogTitle>{t`Search options`}</DialogTitle>
<DialogContent dividers>
<CheckboxInput
label={
<Stack
sx={{
// Padding comes from the MUI Checkbox component
pt: '9px',
}}
>
<Typography>{t`Ignore matches that are behind in chapters`}</Typography>
<Typography
variant="body2"
color="textSecondary"
>{t`Automatically select matches if they have at least the same latest chapter`}</Typography>
</Stack>
}
primaryText={t`Ignore matches that are behind in chapters`}
secondaryText={t`Automatically select matches if they have at least the same latest chapter`}
sx={{
alignItems: 'start',
}}
@@ -60,20 +48,8 @@ export const MigrationBulkSearchOptionsDialog = ({
onChange={(_, checked) => setIgnoreOutdatedMatches(checked)}
/>
<CheckboxInput
label={
<Stack
sx={{
// Padding comes from the MUI Checkbox component
pt: '9px',
}}
>
<Typography>{t`Ignore matches without newer chapters`}</Typography>
<Typography
variant="body2"
color="textSecondary"
>{t`Automatically select matches if they have additional chapters`}</Typography>
</Stack>
}
primaryText={t`Ignore matches without newer chapters`}
secondaryText={t`Automatically select matches if they have additional chapters`}
sx={{
alignItems: 'start',
}}
@@ -81,20 +57,8 @@ export const MigrationBulkSearchOptionsDialog = ({
onChange={(_, checked) => setRequireAdditionalChapters(checked)}
/>
<CheckboxInput
label={
<Stack
sx={{
// Padding comes from the MUI Checkbox component
pt: '9px',
}}
>
<Typography>{t`Ignore matches with missing chapters`}</Typography>
<Typography
variant="body2"
color="textSecondary"
>{t`Automatically select matches if they have no missing chapters`}</Typography>
</Stack>
}
primaryText={t`Ignore matches with missing chapters`}
secondaryText={t`Automatically select matches if they have no missing chapters`}
sx={{
alignItems: 'start',
}}
@@ -123,20 +87,8 @@ export const MigrationBulkSearchOptionsDialog = ({
</Typography>
</Stack>
<CheckboxInput
label={
<Stack
sx={{
// Padding comes from the MUI Checkbox component
pt: '9px',
}}
>
<Typography>{t`Advanced search mode`}</Typography>
<Typography
variant="body2"
color="textSecondary"
>{t`Breaks down the title into keywords for a wider search`}</Typography>
</Stack>
}
primaryText={t`Advanced search mode`}
secondaryText={t`Breaks down the title into keywords for a wider search`}
sx={{
alignItems: 'start',
}}
@@ -144,20 +96,8 @@ export const MigrationBulkSearchOptionsDialog = ({
onChange={(_, checked) => setPerformAdvancedSearch(checked)}
/>
<CheckboxInput
label={
<Stack
sx={{
// Padding comes from the MUI Checkbox component
pt: '9px',
}}
>
<Typography>{t`Match based on chapter number`}</Typography>
<Typography
variant="body2"
color="textSecondary"
>{t`If enabled, chooses the match furthest ahead.\nOtherwise, picks the first match by source priority.`}</Typography>
</Stack>
}
primaryText={t`Match based on chapter number`}
secondaryText={t`If enabled, chooses the match furthest ahead.\nOtherwise, picks the first match by source priority.`}
sx={{
alignItems: 'start',
}}