diff --git a/src/screens/ChoicesMenu.tsx b/src/screens/ChoicesMenu.tsx index bcbb41f..033aeff 100644 --- a/src/screens/ChoicesMenu.tsx +++ b/src/screens/ChoicesMenu.tsx @@ -28,6 +28,25 @@ export default function ChoicesMenu(props: IProps) { const { menu, hidden } = useRecoilValue(choiceMenuState) const notifyReloadInterfaceDataEvent = useSetRecoilState(reloadInterfaceDataEventState); const { enqueueSnackbar } = useSnackbar(); + const gridVariants: Variants = { + open: { + clipPath: "inset(0% 0% 0% 0% round 10px)", + transition: { + type: "spring", + bounce: 0, + duration: 0.7, + staggerChildren: 0.05 + }, + }, + closed: { + clipPath: "inset(10% 50% 90% 50% round 10px)", + transition: { + type: "spring", + bounce: 0, + duration: 0.3 + }, + } + }; const itemVariants: Variants = { open: { opacity: 1, @@ -103,13 +122,8 @@ export default function ChoicesMenu(props: IProps) { left: 0, right: 0, height: fullscreen ? "100%" : `${height}%`, - pointerEvents: "auto", + pointerEvents: hidden ? "none" : "auto", }} - component={motion.div} - initial="closed" - animate={hidden ? "openclosed" : "open"} - exit="closed" - className="menu" > {menu?.map((item, index) => { return ( diff --git a/src/screens/QuickActions.tsx b/src/screens/QuickActions.tsx index f1a9002..c2c8363 100644 --- a/src/screens/QuickActions.tsx +++ b/src/screens/QuickActions.tsx @@ -135,17 +135,18 @@ export default function QuickActions() { position: "absolute", top: 0, right: 0, - pointerEvents: hideInterface ? "auto" : "none", }} component={motion.div} variants={{ open: { opacity: 1, x: 0, + pointerEvents: "auto", }, closed: { opacity: 0, x: 8, + pointerEvents: "none", } }} initial={"closed"} @@ -155,7 +156,6 @@ export default function QuickActions() { > diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx index 758b90e..15a9186 100644 --- a/src/screens/Settings.tsx +++ b/src/screens/Settings.tsx @@ -11,6 +11,7 @@ import HistoryIcon from '@mui/icons-material/History'; import LightModeIcon from '@mui/icons-material/LightMode'; import ModeNightIcon from '@mui/icons-material/ModeNight'; import SaveIcon from '@mui/icons-material/Save'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import WbIncandescentIcon from '@mui/icons-material/WbIncandescent'; import { Box, Button, DialogContent, DialogTitle, Divider, Drawer, FormControl, FormHelperText, FormLabel, IconButton, ModalClose, RadioGroup, Sheet, Slider, Stack, ToggleButtonGroup, Tooltip, Typography, useColorScheme } from "@mui/joy"; import { Theme, useMediaQuery } from '@mui/material'; @@ -54,7 +55,7 @@ export default function Settings() { const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventState); const [quickSave, setQuickSave] = useRecoilState(quickSaveState) const { enqueueSnackbar } = useSnackbar(); - const lgScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg')); + const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm')); useEffect(() => { window.addEventListener('keydown', onkeydown); @@ -94,10 +95,16 @@ export default function Settings() { return ( <> setOpen(false)} + sx={{ + '& .MuiDrawer-content': { + width: smScreen ? '100%' : 600, + maxWidth: '100%', + }, + }} slotProps={{ content: { sx: { @@ -188,7 +195,7 @@ export default function Settings() { checked={hideInterface} onClick={() => setHideInterface((prev) => !prev)} > - + {t("hide_interface")} - {t("auto_forward_time_description")} + {t("auto_forward_time_description", { autoName: t("auto_forward_time_restricted") })} index + "s"} onChange={(_, value) => { if (value) setAutoTime(value as number) @@ -316,6 +325,11 @@ export default function Settings() { valueLabelDisplay="on" max={200} min={0} + valueLabelFormat={(index) => { + if (index === 0) return t('off') + return `${index}ms` + }} + onChange={(_, value) => { setTypewriterDelay(value as number || 0) }} diff --git a/src/values/translations/strings_en.json b/src/values/translations/strings_en.json index 33d5b61..67e1c31 100644 --- a/src/values/translations/strings_en.json +++ b/src/values/translations/strings_en.json @@ -5,7 +5,7 @@ , "dialogues" : "Dialogues" , "auto_forward_time" : "Auto Forward Time" , "auto_forward_time_restricted" : "Auto" - , "auto_forward_time_description" : "Choose the time in seconds before the dialogue auto-forwards." + , "auto_forward_time_description" : "Choose the time in seconds before the dialogue auto-forwards. (You can edit this value if \"{{autoName}}\" is enabled)" , "display" : "Display" , "fullscreen" : "Fullscreen" , "fullscreen_description" : "Toggle fullscreen mode." @@ -36,9 +36,10 @@ , "search" : "Search" , "next" : "Next" , "text_speed" : "Text Speed" - , "text_speed_description" : "Choose the speed of the text." + , "text_speed_description" : "Choose the speed of the typewriter effect. If is set to 0 ( off ) the text will appear instantly." , "hide_interface" : "Hide Interface" , "success_save" : "Save successful" , "success_load" : "Load successful" + , "off" : "Off" } }