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

Align card list styling with rest of lists

Browse Source
This commit is contained in:
schroda
2025-03-24 23:43:07 +01:00
parent 541eeb0445
commit 2120390e93
3 changed files with 54 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/modules/extension/components/ExtensionCard.tsx
View File

@@ -192,13 +192,7 @@ export function ExtensionCard(props: IProps) {
</Box> </Box>
{isInstalled && ( {isInstalled && (
<CustomTooltip title={t('settings.title')}> <CustomTooltip title={t('settings.title')}>
<IconButton <IconButton onClick={showOptions} color="inherit">
onClick={showOptions}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<SettingsIcon /> <SettingsIcon />
</IconButton> </IconButton>
</CustomTooltip> </CustomTooltip>

86
src/modules/extension/components/ExtensionOptions.tsx
View File

@@ -17,6 +17,7 @@ import { useNavigate } from 'react-router-dom';
import Dialog from '@mui/material/Dialog'; import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import { useMemo } from 'react';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder'; import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder';
@@ -25,9 +26,11 @@ import { getErrorMessage } from '@/lib/HelperFunctions';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip'; import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
import { AppRoutes } from '@/modules/core/AppRoute.constants'; import { AppRoutes } from '@/modules/core/AppRoute.constants';
import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils'; import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils';
import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx';
import { TExtension } from '@/modules/extension/Extensions.types.ts';
interface IExtensionOptions { interface IExtensionOptions {
extensionId: string | undefined; extensionId: TExtension['pkgName'] | undefined;
closeDialog: () => void; closeDialog: () => void;
} }
@@ -46,10 +49,14 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
return <Dialog open={!!extensionId} onClose={closeDialog} />; return <Dialog open={!!extensionId} onClose={closeDialog} />;
} }
const relevantSources = data?.sources.nodes.filter((s) => s.extension.pkgName === extensionId); const relevantSources = useMemo(() => {
if (!extensionId) return [];
return data?.sources.nodes.filter((source) => source.extension.pkgName === extensionId);
}, [data?.sources.nodes, extensionId]);
console.log('@asdf', extensionId, relevantSources);
return ( return (
<Dialog open={!!extensionId} onClose={closeDialog}> <Dialog open={!!extensionId} onClose={closeDialog} maxWidth="md" fullWidth>
<DialogTitle>{t('extension.settings.dialog.title')}</DialogTitle> <DialogTitle>{t('extension.settings.dialog.title')}</DialogTitle>
<DialogContent> <DialogContent>
{isLoading && <LoadingPlaceholder />} {isLoading && <LoadingPlaceholder />}
@@ -61,46 +68,41 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
/> />
)} )}
{!isLoading && !error && ( {!isLoading && !error && (
<Box <Box>
sx={{
pb: 2,
pt: 2,
mx: 2,
}}
>
{relevantSources?.map((source) => ( {relevantSources?.map((source) => (
<Card key={source.id}> <StyledGroupItemWrapper key={source.id} sx={{ px: 0 }}>
<CardContent <Card>
sx={{ <CardContent
display: 'flex', sx={{
alignItems: 'center', display: 'flex',
gap: 1, alignItems: 'center',
p: 1.5, gap: 1,
'&:last-child': { p: 1.5,
paddingBottom: 1.5, '&:last-child': {
}, paddingBottom: 1.5,
}} },
> }}
<Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}> >
{translateExtensionLanguage(source.lang)} <Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
</Typography> {translateExtensionLanguage(source.lang)}
{source.isConfigurable && ( </Typography>
<CustomTooltip title={t('settings.title')}> {source.isConfigurable && (
<IconButton <CustomTooltip title={t('settings.title')}>
onClick={() => <IconButton
navigate(AppRoutes.sources.childRoutes.configure.path(source.id)) onClick={() =>
} navigate(
aria-label="display more actions" AppRoutes.sources.childRoutes.configure.path(source.id),
edge="end" )
color="inherit" }
size="large" color="inherit"
> >
<SettingsIcon /> <SettingsIcon />
</IconButton> </IconButton>
</CustomTooltip> </CustomTooltip>
)} )}
</CardContent> </CardContent>
</Card> </Card>
</StyledGroupItemWrapper>
))} ))}
</Box> </Box>
)} )}

12
src/modules/extension/screens/Extensions.tsx
View File

@@ -36,7 +36,12 @@ import {
isExtensionStateOrLanguage, isExtensionStateOrLanguage,
translateExtensionLanguage, translateExtensionLanguage,
} from '@/modules/extension/Extensions.utils.ts'; } from '@/modules/extension/Extensions.utils.ts';
import { ExtensionAction, ExtensionGroupState, ExtensionState } from '@/modules/extension/Extensions.types.ts'; import {
ExtensionAction,
ExtensionGroupState,
ExtensionState,
TExtension,
} from '@/modules/extension/Extensions.types.ts';
import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/modules/extension/Extensions.constants.ts'; import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/modules/extension/Extensions.constants.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts'; import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts';
@@ -50,9 +55,10 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { setAction } = useNavBarContext(); const { setAction } = useNavBarContext();
const navigate = useNavigate(); const navigate = useNavigate();
const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: string }>(); const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: TExtension['pkgName'] }>();
const selectedExtensionPkg = state?.selectedExtensionPkg; const selectedExtensionPkg = state?.selectedExtensionPkg;
const setSelectedExtensionPkg = (newPkg: string | undefined) => {
const setSelectedExtensionPkg = (newPkg: TExtension['pkgName'] | undefined) => {
navigate(pathname + search, { navigate(pathname + search, {
replace: true, replace: true,
state: { state: {