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>
{isInstalled && (
<CustomTooltip title={t('settings.title')}>
<IconButton
onClick={showOptions}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<IconButton onClick={showOptions} color="inherit">
<SettingsIcon />
</IconButton>
</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 DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import { useMemo } from 'react';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
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 { AppRoutes } from '@/modules/core/AppRoute.constants';
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 {
extensionId: string | undefined;
extensionId: TExtension['pkgName'] | undefined;
closeDialog: () => void;
}
@@ -46,10 +49,14 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
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 (
<Dialog open={!!extensionId} onClose={closeDialog}>
<Dialog open={!!extensionId} onClose={closeDialog} maxWidth="md" fullWidth>
<DialogTitle>{t('extension.settings.dialog.title')}</DialogTitle>
<DialogContent>
{isLoading && <LoadingPlaceholder />}
@@ -61,46 +68,41 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
/>
)}
{!isLoading && !error && (
<Box
sx={{
pb: 2,
pt: 2,
mx: 2,
}}
>
<Box>
{relevantSources?.map((source) => (
<Card key={source.id}>
<CardContent
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
p: 1.5,
'&:last-child': {
paddingBottom: 1.5,
},
}}
>
<Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
{translateExtensionLanguage(source.lang)}
</Typography>
{source.isConfigurable && (
<CustomTooltip title={t('settings.title')}>
<IconButton
onClick={() =>
navigate(AppRoutes.sources.childRoutes.configure.path(source.id))
}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<SettingsIcon />
</IconButton>
</CustomTooltip>
)}
</CardContent>
</Card>
<StyledGroupItemWrapper key={source.id} sx={{ px: 0 }}>
<Card>
<CardContent
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
p: 1.5,
'&:last-child': {
paddingBottom: 1.5,
},
}}
>
<Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
{translateExtensionLanguage(source.lang)}
</Typography>
{source.isConfigurable && (
<CustomTooltip title={t('settings.title')}>
<IconButton
onClick={() =>
navigate(
AppRoutes.sources.childRoutes.configure.path(source.id),
)
}
color="inherit"
>
<SettingsIcon />
</IconButton>
</CustomTooltip>
)}
</CardContent>
</Card>
</StyledGroupItemWrapper>
))}
</Box>
)}

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

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