diff --git a/src/pages/Questions/BranchingPanel/index.tsx b/src/pages/Questions/BranchingPanel/index.tsx index 254d9edd..95f926aa 100644 --- a/src/pages/Questions/BranchingPanel/index.tsx +++ b/src/pages/Questions/BranchingPanel/index.tsx @@ -1,4 +1,4 @@ -import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material"; +import {Box, Typography, Switch, useTheme, Button, useMediaQuery, SxProps, Theme} from "@mui/material"; import { QuestionsList } from "./QuestionsList"; import { updateOpenBranchingPanel } from "@root/questions/actions"; @@ -6,7 +6,7 @@ import {useQuestionsStore} from "@root/questions/store"; import {useRef} from "react"; -export const BranchingPanel = () => { +export const BranchingPanel = (sx?: SxProps) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const {openBranchingPanel} = useQuestionsStore.getState() @@ -22,12 +22,13 @@ export const BranchingPanel = () => { background: "#fff", borderRadius: "12px", boxShadow: "0px 10px 30px #e7e7e7", + ...sx }} > { - updateOpenBranchingPanel(!value) + updateOpenBranchingPanel(value) }} sx={{ width: 50, @@ -81,21 +82,6 @@ export const BranchingPanel = () => { Настройте связи между вопросами - { openBranchingPanel === true && } diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index 75031c12..253ddd46 100755 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -9,8 +9,8 @@ import { Button, Container, FormControl, - IconButton, - TextField, + IconButton, Switch, + TextField, Typography, useMediaQuery, useTheme, } from "@mui/material"; @@ -29,7 +29,9 @@ import { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import useSWR from "swr"; import { SidebarMobile } from "./Sidebar/SidebarMobile"; -import { cleanQuestions } from "@root/questions/actions"; +import {cleanQuestions, updateOpenBranchingPanel} from "@root/questions/actions"; +import {BranchingPanel} from "../Questions/BranchingPanel"; +import {useQuestionsStore} from "@root/questions/store"; export default function StartPage() { @@ -50,7 +52,7 @@ export default function StartPage() { const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const [mobileSidebar, setMobileSidebar] = useState(false); - + const {openBranchingPanel} = useQuestionsStore.getState() const quizConfig = quiz?.config; useEffect(() => { @@ -228,9 +230,9 @@ export default function StartPage() { + + { + updateOpenBranchingPanel(value) + }} + sx={{ + width: 50, + height: 30, + padding: 0, + "& .MuiSwitch-switchBase": { + padding: 0, + margin: "2px", + transitionDuration: "300ms", + "&.Mui-checked": { + transform: "translateX(20px)", + color: theme.palette.brightPurple.main, + "& + .MuiSwitch-track": { + backgroundColor: "#E8DCF9", + opacity: 1, + border: 0, + }, + "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 }, + }, + "&.Mui-disabled .MuiSwitch-thumb": { + color: + theme.palette.mode === "light" + ? theme.palette.grey[100] + : theme.palette.grey[600], + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: theme.palette.mode === "light" ? 0.7 : 0.3, + }, + }, + "& .MuiSwitch-thumb": { + boxSizing: "border-box", + width: 25, + height: 25, + }, + "& .MuiSwitch-track": { + borderRadius: 13, + backgroundColor: + theme.palette.mode === "light" ? "#E9E9EA" : "#39393D", + opacity: 1, + transition: theme.transitions.create(["background-color"], { + duration: 500, + }), + }, + }} + /> + + + Логика ветвления + + + Настройте связи между вопросами + + +