From f0a880b95a7127cf44b399e190639e2a88325ca6 Mon Sep 17 00:00:00 2001 From: Der_Googler <54764558+DerGoogler@users.noreply.github.com> Date: Sun, 19 May 2024 11:41:31 +0200 Subject: [PATCH] . --- Website/src/components/AntifeaturesButton.tsx | 12 +- .../src/components/module/DeviceModule.tsx | 13 +- .../src/components/module/ExploreModule.tsx | 111 ++++++++---------- 3 files changed, 68 insertions(+), 68 deletions(-) diff --git a/Website/src/components/AntifeaturesButton.tsx b/Website/src/components/AntifeaturesButton.tsx index 66f4c5a6..47bbd8d7 100644 --- a/Website/src/components/AntifeaturesButton.tsx +++ b/Website/src/components/AntifeaturesButton.tsx @@ -4,6 +4,7 @@ import WarningAmberIcon from "@mui/icons-material/WarningAmber"; import React from "react"; import { useStrings } from "@Hooks/useStrings"; import AntiFeatureListItem from "./AntiFeatureListItem"; +import { GestureDetector } from "./onsenui/GestureDetector"; type Props = { sx?: SxProps; @@ -15,7 +16,8 @@ export const AntifeatureButton = (props: Props) => { const { strings } = useStrings(); - const handleClickOpen = () => { + const handleClickOpen = (e: any) => { + e.preventDefault(); setOpen(true); }; @@ -25,9 +27,11 @@ export const AntifeatureButton = (props: Props) => { return ( <> - <Button onClick={handleClickOpen} sx={props.sx} variant="contained" color="error" startIcon={<WarningAmberIcon />}> - {strings("antifeatures")} - </Button> + <GestureDetector onHold={handleClickOpen}> + <Button sx={props.sx} variant="contained" color="error" size="small"> + <WarningAmberIcon /> + </Button> + </GestureDetector> <Dialog open={open} onClose={handleClose} scroll="paper"> <DialogTitle>{strings("antifeatures")}</DialogTitle> <DialogContent dividers> diff --git a/Website/src/components/module/DeviceModule.tsx b/Website/src/components/module/DeviceModule.tsx index 78d88ee2..b56b1ab5 100644 --- a/Website/src/components/module/DeviceModule.tsx +++ b/Website/src/components/module/DeviceModule.tsx @@ -25,6 +25,7 @@ import Switch from "@mui/material/Switch"; import { Image } from "@Components/dapi/Image"; import { blacklistedModules } from "@Util/blacklisted-modules"; import { AntifeatureButton } from "@Components/AntifeaturesButton"; +import Box from "@mui/material/Box"; interface Props { module: Module; @@ -66,7 +67,13 @@ const DeviceModule = React.memo<Props>((props) => { }, [id]); return ( - <Card sx={{ position: "relative", p: 2, width: "100%" }}> + <Card + sx={{ + position: "relative", + p: 2, + width: "100%", + }} + > <Stack sx={{ position: "relative", zIndex: 1 }} direction="column" justifyContent="center" spacing={1}> {cover && ( <Image @@ -174,9 +181,7 @@ const DeviceModule = React.memo<Props>((props) => { <Divider variant="middle" /> <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}> {findHardCodedAntifeature && findHardCodedAntifeature.length !== 0 && ( - <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}> - <AntifeatureButton antifeatures={findHardCodedAntifeature} /> - </Stack> + <AntifeatureButton antifeatures={findHardCodedAntifeature} /> )} <Button onClick={() => { diff --git a/Website/src/components/module/ExploreModule.tsx b/Website/src/components/module/ExploreModule.tsx index 0b0caa21..b52fd949 100644 --- a/Website/src/components/module/ExploreModule.tsx +++ b/Website/src/components/module/ExploreModule.tsx @@ -44,73 +44,64 @@ const ExploreModule = React.memo<Props>((props) => { }; return ( - <Box> - <Card - onTap={handleOpenModule} - component={GestureDetector} - sx={{ - ...(track.antifeatures && { - borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px ${theme.shape.borderRadius}px`, - }), - p: 2, - ":hover": { - opacity: ".8", - cursor: "pointer", - }, - width: "100%", - }} - > - <Stack direction="column" justifyContent="center" spacing={1}> - {track.cover && ( - <Image - sx={{ - height: "100%", - objectFit: "cover", - width: "100%", - }} - src={track.cover} - alt={name} - noOpen - /> - )} - - <Stack direction="column" justifyContent="center" alignItems="flex-start"> - <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={0.5}> - <Typography variant="h6">{name}</Typography> - <VerifiedIcon isVerified={track.verified} /> - </Stack> + <Card + onTap={handleOpenModule} + component={GestureDetector} + sx={{ + p: 2, + ":hover": { + opacity: ".8", + cursor: "pointer", + }, + width: "100%", + }} + > + <Stack direction="column" justifyContent="center" spacing={1}> + {track.cover && ( + <Image + sx={{ + height: "100%", + objectFit: "cover", + width: "100%", + }} + src={track.cover} + alt={name} + noOpen + /> + )} - <Typography color="text.secondary" variant="caption"> - {version} ({versionCode}) / {author} - </Typography> + <Stack direction="column" justifyContent="center" alignItems="flex-start"> + <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={0.5}> + <Typography variant="h6">{name}</Typography> + <VerifiedIcon isVerified={track.verified} /> </Stack> - <Typography color="text.secondary" variant="body2" display="block"> - {description} + + <Typography color="text.secondary" variant="caption"> + {version} ({versionCode}) / {author} </Typography> - <Stack direction="column" justifyContent="center" spacing={1.2}> - <Divider variant="middle" /> - <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}> - <Chip - sx={{ - bgColor: "secondary.dark", - }} - label={formatLastUpdate} - /> + </Stack> + <Typography color="text.secondary" variant="body2" display="block"> + {description} + </Typography> + <Stack direction="column" justifyContent="center" spacing={1.2}> + <Divider variant="middle" /> + <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}> + <Chip + sx={{ + bgColor: "secondary.dark", + }} + label={formatLastUpdate} + /> - <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}></Stack> + <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}> + {findHardCodedAntifeature && findHardCodedAntifeature.length !== 0 && ( + <AntifeatureButton antifeatures={findHardCodedAntifeature} /> + )} </Stack> </Stack> </Stack> - </Card> - {findHardCodedAntifeature && findHardCodedAntifeature.length !== 0 && ( - <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}> - <AntifeatureButton - antifeatures={findHardCodedAntifeature} - sx={{ borderRadius: `0px 0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }} - /> - </Stack> - )} - </Box> + </Stack> + </Card> ); });