плашка с переключателем с ветвления на вопросы на панели в мобилке
This commit is contained in:
Tamara
parent
7573f7a3e3
commit
5ce160f14f
@ -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<Theme>) => {
|
||||
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
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
value={openBranchingPanel}
|
||||
onChange={(_, value) => {
|
||||
updateOpenBranchingPanel(!value)
|
||||
updateOpenBranchingPanel(value)
|
||||
}}
|
||||
sx={{
|
||||
width: 50,
|
||||
@ -81,21 +82,6 @@ export const BranchingPanel = () => {
|
||||
Настройте связи между вопросами
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
onClick={() => {
|
||||
ref.current?.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
}
|
||||
)}}
|
||||
sx={{
|
||||
display: isMobile ? "flex" : "none",
|
||||
position: "fixed",
|
||||
right: isMobile ? "60px" : "400px",
|
||||
top: "156px",
|
||||
}}
|
||||
>
|
||||
вниз
|
||||
</Button>
|
||||
</Box>
|
||||
{ openBranchingPanel === true && <QuestionsList /> }
|
||||
</Box>
|
||||
|
||||
@ -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<boolean>(false);
|
||||
|
||||
const {openBranchingPanel} = useQuestionsStore.getState()
|
||||
const quizConfig = quiz?.config;
|
||||
|
||||
useEffect(() => {
|
||||
@ -228,9 +230,9 @@ export default function StartPage() {
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: isMobile ? 0 : "230px",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
width: isMobile ? "100%" : "calc(100% - 230px)",
|
||||
width: "100%",
|
||||
padding: "20px 40px",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
@ -238,6 +240,75 @@ export default function StartPage() {
|
||||
background: "#FFF",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: openBranchingPanel ? "none" : "display",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
padding: "18px",
|
||||
background: "#fff",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0px 10px 30px #e7e7e7",
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
value={openBranchingPanel}
|
||||
onChange={(_, value) => {
|
||||
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,
|
||||
}),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Box>
|
||||
<Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
|
||||
Логика ветвления
|
||||
</Typography>
|
||||
<Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
|
||||
Настройте связи между вопросами
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
|
||||
@ -46,6 +46,7 @@ export default function Sidebar() {
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
boxSizing: "border-box",
|
||||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
|
||||
Loading…
Reference in New Issue
Block a user