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

Update mui dependencies

Browse Source
This commit is contained in:
schroda
2024-09-03 17:15:47 +02:00
parent 161a2bb657
commit d1d37c8516
37 changed files with 349 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ExtensionCard.tsx
View File

@@ -194,16 +194,32 @@ export function ExtensionCard(props: IProps) {
<Typography variant="h6" component="h3">
{name}
</Typography>
<Typography variant="caption" display="block">
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{langPress} {versionName}
{isNsfw && (
<Typography variant="caption" display="inline" color="error">
<Typography
variant="caption"
color="error"
sx={{
display: 'inline',
}}
>
{' 18+'}
</Typography>
)}
</Typography>
{showSourceRepo && (
<Typography variant="caption" display="block">
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{repo}
</Typography>
)}

8
src/components/MigrateDialog.tsx
View File

@@ -100,7 +100,13 @@ export const MigrateDialog = ({ mangaIdToMigrateTo, onClose }: { mangaIdToMigrat
</FormGroup>
</DialogContent>
<DialogActions>
<Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between">
<Stack
direction="row"
sx={{
justifyContent: 'space-between',
width: '100%',
}}
>
<Button disabled={isMigrationInProcess} component={Link} to={`/manga/${mangaIdToMigrateTo}`}>
{t('migrate.dialog.action.button.show_entry')}
</Button>

7
src/components/MigrationCard.tsx
View File

@@ -57,7 +57,12 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab
<Typography variant="h6" component="h3">
{name}
</Typography>
<Typography variant="caption" display="block">
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{translateExtensionLanguage(lang)}
</Typography>
</Box>

22
src/components/SourceCard.tsx
View File

@@ -97,15 +97,31 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
{name}
</Typography>
{id !== '0' && (
<Typography variant="caption" display="block">
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{translateExtensionLanguage(lang)}
{isNsfw && (
<Typography variant="caption" display="inline" color="error">
<Typography
variant="caption"
color="error"
sx={{
display: 'inline',
}}
>
{' 18+'}
</Typography>
)}
{showSourceRepo && (
<Typography variant="caption" display="block">
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{repo}
</Typography>
)}

10
src/components/atoms/CustomIconButton.tsx
View File

@@ -16,7 +16,15 @@ export const CustomIconButton = forwardRef(
ref: ForwardedRef<HTMLButtonElement | null>,
) => (
<Button ref={ref} {...props}>
<Stack direction="row" alignItems="center" justifyContent="center" gap={1} flexWrap="wrap">
<Stack
direction="row"
sx={{
alignItems: 'center',
justifyContent: 'center',
gap: 1,
flexWrap: 'wrap',
}}
>
{children}
</Stack>
</Button>

8
src/components/atoms/Metadata.tsx
View File

@@ -26,7 +26,13 @@ export const Metadata = ({
{...stackProps}
sx={{ flexDirection: 'row', columnGap: 1, flexWrap: 'wrap', alignItems: 'baseline', ...stackProps?.sx }}
>
<Typography color="text.secondary" {...titleProps}>
<Typography
{...titleProps}
sx={{
color: 'text.secondary',
...titleProps?.sx,
}}
>
{title}
</Typography>
<Typography {...valueProps}>{value}</Typography>

26
src/components/atoms/PasswordTextField.tsx
View File

@@ -26,18 +26,20 @@ export const PasswordTextField = (props: TextFieldProps) => {
name="password"
label={t('global.label.password')}
type={showPassword ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="start">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
slotProps={{
input: {
endAdornment: (
<InputAdornment position="start">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
},
}}
{...props}
/>

20
src/components/atoms/SearchTextField.tsx
View File

@@ -14,15 +14,17 @@ import CancelIcon from '@mui/icons-material/Cancel';
export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => (
<TextField
{...textFieldProps}
InputProps={{
...textFieldProps.InputProps,
endAdornment: textFieldProps.InputProps?.endAdornment ?? (
<InputAdornment position="end">
<IconButton onClick={() => onCancel()}>
<CancelIcon />
</IconButton>
</InputAdornment>
),
slotProps={{
input: {
...textFieldProps.InputProps,
endAdornment: textFieldProps.InputProps?.endAdornment ?? (
<InputAdornment position="end">
<IconButton onClick={() => onCancel()}>
<CancelIcon />
</IconButton>
</InputAdornment>
),
},
}}
/>
);

7
src/components/chapter/ChapterCard.tsx
View File

@@ -120,7 +120,12 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
'&:last-child': { pb: 1.5 },
}}
>
<Stack direction="column" flex={1}>
<Stack
direction="column"
sx={{
flex: 1,
}}
>
<Stack
sx={{
flexDirection: 'row',

8
src/components/manga/MangaGridCard.tsx
View File

@@ -125,10 +125,10 @@ export const MangaGridCard = ({
}}
/>
<Stack
alignItems="start"
justifyContent="space-between"
direction="row"
sx={{
alignItems: 'start',
justifyContent: 'space-between',
position: 'absolute',
top: (theme) => theme.spacing(1),
left: (theme) => theme.spacing(1),
@@ -153,9 +153,9 @@ export const MangaGridCard = ({
)}
<Stack
direction="row"
justifyContent={gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end'}
alignItems="end"
sx={{
justifyContent: gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end',
alignItems: 'end',
position: 'absolute',
bottom: 0,
width: '100%',

8
src/components/manga/MangaListCard.tsx
View File

@@ -108,7 +108,13 @@ export const MangaListCard = ({
</TypographyMaxLines>
</Tooltip>
</Box>
<Stack direction="row" alignItems="center" gap={0.5}>
<Stack
direction="row"
sx={{
alignItems: 'center',
gap: 0.5,
}}
>
{mangaBadges}
{continueReadingButton}
<MangaOptionButton

6
src/components/molecules/ConfirmDialog.tsx
View File

@@ -77,9 +77,11 @@ export const ConfirmDialog = ({
</DialogContent>
<DialogActions>
<Stack
sx={{ width: '100%' }}
direction="row"
justifyContent={actions.extra.show ? 'space-between' : 'end'}
sx={{
justifyContent: actions.extra.show ? 'space-between' : 'end',
width: '100%',
}}
>
{actions.extra.show && (
<Button onClick={onExtra} variant={actions.extra.contain ? 'contained' : undefined}>

8
src/components/molecules/DownloadStateIndicator.tsx
View File

@@ -46,7 +46,13 @@ export const DownloadStateIndicator = ({ download }: { download: ChapterDownload
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" color="text.secondary">
<Typography
variant="caption"
component="div"
sx={{
color: 'text.secondary',
}}
>
<>
{download.progress !== 0 && `${Math.round(download.progress * 100)}%`}
{download.progress === 0 && t(DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP[download.state])}

10
src/components/navbar/DefaultNavBar.tsx
View File

@@ -164,7 +164,15 @@ export function DefaultNavBar() {
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
)}
<Typography variant="h5" component="h1" sx={{ flexGrow: 1 }} noWrap textOverflow="ellipsis">
<Typography
variant="h5"
component="h1"
noWrap
sx={{
textOverflow: 'ellipsis',
flexGrow: 1,
}}
>
{title}
</Typography>
{action}

9
src/components/navbar/ReaderNavBar.tsx
View File

@@ -226,9 +226,12 @@ export function ReaderNavBar(props: IProps) {
<Typography
variant="h6"
component="h1"
textOverflow="ellipsis"
overflow="hidden"
sx={{ py: 1, flexGrow: 1 }}
sx={{
textOverflow: 'ellipsis',
overflow: 'hidden',
py: 1,
flexGrow: 1,
}}
>
{chapter.name}
</Typography>

9
src/components/navbar/action/CategorySelect.tsx
View File

@@ -223,7 +223,14 @@ export function CategorySelect(props: CategorySelectProps) {
onChange={(e) => setDoNotShowAddToLibraryDialogAgain(e.target.checked)}
/>
)}
<Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between" alignItems="end">
<Stack
direction="row"
sx={{
justifyContent: 'space-between',
alignItems: 'end',
width: '100%',
}}
>
<Button component={Link} to="/settings/categories">
{t(allCategories.length ? 'global.button.edit' : 'global.button.create')}
</Button>

9
src/components/settings/DateSetting.tsx
View File

@@ -100,7 +100,14 @@ export const DateSetting = ({
</LocalizationProvider>
</DialogContent>
<DialogActions>
<Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between" alignItems="end">
<Stack
direction="row"
sx={{
justifyContent: 'space-between',
alignItems: 'end',
width: '100%',
}}
>
<Stack>
{defaultValue !== undefined && (
<Button

15
src/components/settings/MutableListSetting.tsx
View File

@@ -167,7 +167,12 @@ export const MutableListSetting = ({
</Typography>
)}
{dialogDisclaimer && (
<Stack direction="row" alignItems="center">
<Stack
direction="row"
sx={{
alignItems: 'center',
}}
>
<InfoIcon color="warning" />
<Typography
variant="body1"
@@ -200,7 +205,13 @@ export const MutableListSetting = ({
</List>
</DialogContent>
<DialogActions>
<Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between">
<Stack
direction="row"
sx={{
justifyContent: 'space-between',
width: '100%',
}}
>
<Button onClick={() => setIsAddItemDialogOpen(true)}>
{addItemButtonTitle ?? t('global.button.add')}
</Button>

17
src/components/settings/NumberSetting.tsx
View File

@@ -139,7 +139,12 @@ export const NumberSetting = ({
</Typography>
)}
{dialogDisclaimer && (
<Stack direction="row" alignItems="center">
<Stack
direction="row"
sx={{
alignItems: 'center',
}}
>
<InfoIcon color="warning" />
<Typography
variant="body1"
@@ -160,10 +165,6 @@ export const NumberSetting = ({
width: '100%',
margin: 'auto',
}}
InputProps={{
inputProps: { min: minValue, max: maxValue, step: stepSize },
endAdornment: <InputAdornment position="end">{valueUnit}</InputAdornment>,
}}
autoFocus
value={dialogValue}
type="number"
@@ -171,6 +172,12 @@ export const NumberSetting = ({
const newValue = Number(e.target.value);
updateValue(newValue, false);
}}
slotProps={{
input: {
inputProps: { min: minValue, max: maxValue, step: stepSize },
endAdornment: <InputAdornment position="end">{valueUnit}</InputAdornment>,
},
}}
/>
{showSlider ? (
<Slider

7
src/components/settings/SelectSetting.tsx
View File

@@ -105,7 +105,12 @@ export const SelectSetting = <SettingValue extends string | number>({
</Typography>
)}
{dialogValueDisplayInfo.disclaimer && (
<Stack direction="row" alignItems="center">
<Stack
direction="row"
sx={{
alignItems: 'center',
}}
>
<InfoIcon color="warning" />
<Typography
variant="body1"

2
src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx
View File

@@ -56,7 +56,7 @@ export const WebUIUpdateIntervalSetting = ({
return (
<List>
<ListItem disabled={disabled}>
<ListItem>
<ListItemText primary={t('settings.webui.auto_update.label.title')} />
<Switch
disabled={disabled}

4
src/components/source/SourceOptions.tsx
View File

@@ -209,9 +209,11 @@ export function SourceOptions({
<DialogContent>
<TextField
sx={{ width: '100%' }}
inputProps={{ maxLength: 50 }}
value={newSavedSearch}
onChange={(e) => setNewSavedSearch(e.target.value as string)}
slotProps={{
htmlInput: { maxLength: 50 },
}}
/>
</DialogContent>
<DialogActions>

14
src/components/tracker/TrackerActiveCard.tsx
View File

@@ -153,7 +153,13 @@ const TrackerActiveHeader = ({
const { t } = useTranslation();
return (
<Stack direction="row" alignItems="stretch" sx={{ paddingBottom: 2 }}>
<Stack
direction="row"
sx={{
alignItems: 'stretch',
paddingBottom: 2,
}}
>
<TrackerActiveLink url={trackRecord.remoteUrl}>
<Avatar
alt={`${tracker.name}`}
@@ -170,7 +176,11 @@ const TrackerActiveHeader = ({
</TypographyMaxLines>
</Tooltip>
</ListItemButton>
<Stack justifyContent="center">
<Stack
sx={{
justifyContent: 'center',
}}
>
<PopupState variant="popover" popupId={`tracker-active-menu-popup-${tracker.id}`}>
{(popupState) => (
<>

16
src/components/tracker/TrackerMangaCard.tsx
View File

@@ -29,7 +29,13 @@ import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { TTrackerManga } from '@/lib/data/Trackers.ts';
const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
<Stack direction="row" gap="5px" justifyContent="space-between">
<Stack
direction="row"
sx={{
gap: '5px',
justifyContent: 'space-between',
}}
>
<Tooltip title={title}>
<TypographyMaxLines variant="h5" component="h1">
{title}
@@ -125,7 +131,13 @@ export const TrackerMangaCard = ({
borderColor: selected ? 'primary.main' : 'transparent',
}}
>
<Stack direction="row" gap={2} marginBottom={2}>
<Stack
direction="row"
sx={{
gap: 2,
marginBottom: 2,
}}
>
<CardMedia
sx={{
aspectRatio: '225/350',

10
src/components/tracker/TrackerSearch.tsx
View File

@@ -92,7 +92,13 @@ export const TrackerSearch = ({
return (
<>
<DialogTitle sx={{ padding: DIALOG_PADDING }}>
<Stack direction="row" gap="10px" alignItems="center">
<Stack
direction="row"
sx={{
gap: '10px',
alignItems: 'center',
}}
>
<IconButton onClick={closeSearchMode}>
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
@@ -164,8 +170,8 @@ export const TrackerSearch = ({
{showTrackButton && (
<Stack
direction="row"
justifyContent="center"
sx={{
justifyContent: 'center',
position: 'absolute',
left: 0,
right: 0,

7
src/components/tracker/TrackerUntrackedCard.tsx
View File

@@ -28,7 +28,12 @@ export const TrackerUntrackedCard = ({
return (
<Card sx={CARD_STYLING}>
<CardContent sx={{ padding: '0' }}>
<Stack direction="row" gap={3}>
<Stack
direction="row"
sx={{
gap: 3,
}}
>
<Avatar
alt={`${tracker.name}`}
src={requestManager.getValidImgUrlFor(tracker.icon)}

6
src/components/util/Progress.tsx
View File

@@ -15,7 +15,11 @@ export const Progress = ({ progress, showText = true }: { progress: number; show
<CircularProgress variant="determinate" value={progress} />
{showText && (
<Box sx={{ position: 'absolute' }}>
<Typography fontSize="0.8rem">{`${Math.round(progress)}%`}</Typography>
<Typography
sx={{
fontSize: '0.8rem',
}}
>{`${Math.round(progress)}%`}</Typography>
</Box>
)}
</Box>

19
src/components/util/SpinnerImage.tsx
View File

@@ -104,7 +104,13 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
<>
{(isLoading || hasError) && (
<Box sx={spinnerStyle}>
<Stack height="100%" alignItems="center" justifyContent="center">
<Stack
sx={{
height: '100%',
alignItems: 'center',
justifyContent: 'center',
}}
>
{isLoading && <CircularProgress thickness={5} />}
{hasError && isLoading === false && (
<>
@@ -128,10 +134,13 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
{showMissingImageIcon ? (
<Stack
height="100%"
alignItems="center"
justifyContent="center"
sx={{ background: (theme) => theme.palette.background.default, ...spinnerStyle }}
sx={{
height: '100%',
alignItems: 'center',
justifyContent: 'center',
background: (theme) => theme.palette.background.default,
...spinnerStyle,
}}
>
<ImageIcon fontSize="large" />
</Stack>

8
src/components/util/VersionUpdateInfoDialog.tsx
View File

@@ -63,7 +63,13 @@ export const VersionUpdateInfoDialog = ({
<DialogContentText>{info}</DialogContentText>
</DialogContent>
<DialogActions>
<Stack sx={{ width: '100%' }} direction="row" justifyContent={changelogUrl ? 'space-between' : 'end'}>
<Stack
direction="row"
sx={{
justifyContent: changelogUrl ? 'space-between' : 'end',
width: '100%',
}}
>
{changelogUrl && (
<Button href={changelogUrl} target="_blank" rel="noreferrer">
{t('global.button.changelog')}