Merge branch 'main' into deploy

DRincs-Productions · Jul 21, 2024 · 62ca378 · 62ca378
2 parents 883c489 + 8b42e53
commit 62ca378
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 33 deletions.
diff --git 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"
         >
             <Grid
                 container
@@ -124,25 +138,7 @@ export default function ChoicesMenu(props: IProps) {
                     width: '100%',
                 }}
                 component={motion.div}
-                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
-                        }
-                    }
-                }}
+                variants={gridVariants}
             >
                 {menu?.map((item, index) => {
                     return (

diff --git 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() {
             >
                 <VisibilityOffIcon
                     sx={{
-                        pointerEvents: hideInterface ? "auto" : "none",
                         color: useTheme().palette.neutral[500],
                     }}
                 />

diff --git 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 (
         <>
             <Drawer
-                size={lgScreen ? 'lg' : 'md'}
+                // size={'lg'}
                 variant="plain"
                 open={open}
                 onClose={() => 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)}
                                     >
-                                        <HdrAutoIcon />
+                                        <VisibilityOffIcon />
                                         <Typography level="title-md">{t("hide_interface")}</Typography>
                                         <Typography
                                             sx={{
@@ -255,7 +262,7 @@ export default function Settings() {
                                 {t("auto_forward_time")}
                             </FormLabel>
                             <FormHelperText sx={{ typography: 'body-sm' }}>
-                                {t("auto_forward_time_description")}
+                                {t("auto_forward_time_description", { autoName: t("auto_forward_time_restricted") })}
                             </FormHelperText>
                         </Box>
                         <Box
@@ -280,6 +287,8 @@ export default function Settings() {
                                 valueLabelDisplay="on"
                                 max={10}
                                 min={1}
+                                disabled={!auto}
+                                valueLabelFormat={(index) => 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
@@ -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"
 	}
 }