SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Tablet && Desktop

Browse Source
This commit is contained in:
ArtChaos189 2023-09-25 16:43:15 +03:00
parent cd49b5424d
commit b2213af336
32 changed files with 1217 additions and 1180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/assets/icons/messagIcon.tsx
View File

@ -1,33 +1,15 @@
export default function MessageIcon() { import { FC, SVGProps } from "react";
return (
<svg export const MessageIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
width="30" <svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
height="30" <path
viewBox="0 0 30 30" d="M10.3125 20.4305L7.22812 23.018C7.11886 23.1084 6.9862 23.166 6.84553 23.184C6.70486 23.2021 6.56195 23.1799 6.43338 23.1201C6.30481 23.0602 6.19585 22.9651 6.11914 22.8458C6.04244 22.7265 6.00112 22.5879 6 22.4461V7.55859C6 7.35968 6.07902 7.16892 6.21967 7.02826C6.36032 6.88761 6.55109 6.80859 6.75 6.80859H23.25C23.4489 6.80859 23.6397 6.88761 23.7803 7.02826C23.921 7.16892 24 7.35968 24 7.55859V19.5586C24 19.7575 23.921 19.9483 23.7803 20.0889C23.6397 20.2296 23.4489 20.3086 23.25 20.3086H10.6594L10.3125 20.4305Z"
fill="none" stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5"
> strokeLinecap="round"
<path strokeLinejoin="round"
d="M10.3125 20.4305L7.22812 23.018C7.11886 23.1084 6.9862 23.166 6.84553 23.184C6.70486 23.2021 6.56195 23.1799 6.43338 23.1201C6.30481 23.0602 6.19585 22.9651 6.11914 22.8458C6.04244 22.7265 6.00112 22.5879 6 22.4461V7.55859C6 7.35968 6.07902 7.16892 6.21967 7.02826C6.36032 6.88761 6.55109 6.80859 6.75 6.80859H23.25C23.4489 6.80859 23.6397 6.88761 23.7803 7.02826C23.921 7.16892 24 7.35968 24 7.55859V19.5586C24 19.7575 23.921 19.9483 23.7803 20.0889C23.6397 20.2296 23.4489 20.3086 23.25 20.3086H10.6594L10.3125 20.4305Z" />
stroke="#9A9AAF" <path d="M12 12.0586H18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
strokeWidth="1.5" <path d="M12 15.0586H18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
strokeLinecap="round" </svg>
strokeLinejoin="round" );
/>
<path
d="M12 12.0586H18"
stroke="#9A9AAF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 15.0586H18"
stroke="#9A9AAF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

13
src/assets/icons/questionsPage/ArrowDownIcon.tsx Normal file
View File

@ -0,0 +1,13 @@
import { FC, SVGProps } from "react";
export const ArrowDownIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.5 1.25L9 8.75L1.5 1.25"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

44
src/assets/icons/questionsPage/CopyIcon.tsx
View File

@ -1,26 +1,20 @@
import { Box } from "@mui/material"; import { FC, SVGProps } from "react";
export const CopyIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
interface Props { <svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
color: string; <path
} d="M15.75 15.75H20.25V3.75H8.25V8.25"
stroke="currentColor"
export default function CopyIcon({color}: Props) { strokeWidth="1.5"
strokeLinecap="round"
return ( strokeLinejoin="round"
<Box />
sx={{ <path
height: "30px", d="M15.75 8.25H3.75V20.25H15.75V8.25Z"
width: "30px", stroke="currentColor"
display: "flex", strokeWidth="1.5"
alignItems: "center", strokeLinecap="round"
justifyContent: "center", strokeLinejoin="round"
}} />
> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> );
<path d="M15.75 15.75H20.25V3.75H8.25V8.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M15.75 8.25H3.75V20.25H15.75V8.25Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}

34
src/assets/icons/questionsPage/OneIcon.tsx
View File

@ -1,26 +1,12 @@
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
export const OneIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
// interface Props { <svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
// color: string; <rect width="30" height="30" rx="15" fill="#EEE4FC" />
// } <path
d="M15.864 19.5C15.7707 19.5 15.6913 19.472 15.626 19.416C15.57 19.3507 15.542 19.2713 15.542 19.178V11.338L13.218 13.13C13.1433 13.186 13.064 13.2093 12.98 13.2C12.896 13.1907 12.826 13.1487 12.77 13.074L12.406 12.612C12.35 12.528 12.3267 12.444 12.336 12.36C12.3547 12.276 12.4013 12.206 12.476 12.15L15.528 9.798C15.5933 9.75133 15.654 9.72333 15.71 9.714C15.766 9.70467 15.8267 9.7 15.892 9.7H16.606C16.6993 9.7 16.774 9.73267 16.83 9.798C16.886 9.854 16.914 9.92867 16.914 10.022V19.178C16.914 19.2713 16.886 19.3507 16.83 19.416C16.774 19.472 16.6993 19.5 16.606 19.5H15.864Z"
export default function OneIcon() { fill="#7E2AEA"
/>
return ( </svg>
<Box );
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="#EEE4FC"/>
<path d="M15.864 19.5C15.7707 19.5 15.6913 19.472 15.626 19.416C15.57 19.3507 15.542 19.2713 15.542 19.178V11.338L13.218 13.13C13.1433 13.186 13.064 13.2093 12.98 13.2C12.896 13.1907 12.826 13.1487 12.77 13.074L12.406 12.612C12.35 12.528 12.3267 12.444 12.336 12.36C12.3547 12.276 12.4013 12.206 12.476 12.15L15.528 9.798C15.5933 9.75133 15.654 9.72333 15.71 9.714C15.766 9.70467 15.8267 9.7 15.892 9.7H16.606C16.6993 9.7 16.774 9.73267 16.83 9.798C16.886 9.854 16.914 9.92867 16.914 10.022V19.178C16.914 19.2713 16.886 19.3507 16.83 19.416C16.774 19.472 16.6993 19.5 16.606 19.5H15.864Z" fill="#7E2AEA"/>
</svg>
</Box>
);
}

58
src/assets/icons/questionsPage/PointsIcon.tsx
View File

@ -1,31 +1,31 @@
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
export const PointsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
// interface Props { <svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
// color: string; <path
// } d="M10.5 8C11.3284 8 12 7.32843 12 6.5C12 5.67157 11.3284 5 10.5 5C9.67157 5 9 5.67157 9 6.5C9 7.32843 9.67157 8 10.5 8Z"
fill="currentColor"
export default function PointsIcon() { />
<path
return ( d="M19.5 8C20.3284 8 21 7.32843 21 6.5C21 5.67157 20.3284 5 19.5 5C18.6716 5 18 5.67157 18 6.5C18 7.32843 18.6716 8 19.5 8Z"
<Box fill="currentColor"
sx={{ />
height: "30px", <path
width: "30px", d="M10.5 16.5C11.3284 16.5 12 15.8284 12 15C12 14.1716 11.3284 13.5 10.5 13.5C9.67157 13.5 9 14.1716 9 15C9 15.8284 9.67157 16.5 10.5 16.5Z"
display: "flex", fill="currentColor"
alignItems: "center", />
justifyContent: "center", <path
cursor: "move" d="M19.5 16.5C20.3284 16.5 21 15.8284 21 15C21 14.1716 20.3284 13.5 19.5 13.5C18.6716 13.5 18 14.1716 18 15C18 15.8284 18.6716 16.5 19.5 16.5Z"
}} fill="currentColor"
> />
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path
<path d="M10.5 8C11.3284 8 12 7.32843 12 6.5C12 5.67157 11.3284 5 10.5 5C9.67157 5 9 5.67157 9 6.5C9 7.32843 9.67157 8 10.5 8Z" fill="#4D4D4D"/> d="M10.5 25C11.3284 25 12 24.3284 12 23.5C12 22.6716 11.3284 22 10.5 22C9.67157 22 9 22.6716 9 23.5C9 24.3284 9.67157 25 10.5 25Z"
<path d="M19.5 8C20.3284 8 21 7.32843 21 6.5C21 5.67157 20.3284 5 19.5 5C18.6716 5 18 5.67157 18 6.5C18 7.32843 18.6716 8 19.5 8Z" fill="#4D4D4D"/> fill="currentColor"
<path d="M10.5 16.5C11.3284 16.5 12 15.8284 12 15C12 14.1716 11.3284 13.5 10.5 13.5C9.67157 13.5 9 14.1716 9 15C9 15.8284 9.67157 16.5 10.5 16.5Z" fill="#4D4D4D"/> />
<path d="M19.5 16.5C20.3284 16.5 21 15.8284 21 15C21 14.1716 20.3284 13.5 19.5 13.5C18.6716 13.5 18 14.1716 18 15C18 15.8284 18.6716 16.5 19.5 16.5Z" fill="#4D4D4D"/> <path
<path d="M10.5 25C11.3284 25 12 24.3284 12 23.5C12 22.6716 11.3284 22 10.5 22C9.67157 22 9 22.6716 9 23.5C9 24.3284 9.67157 25 10.5 25Z" fill="#4D4D4D"/> d="M19.5 25C20.3284 25 21 24.3284 21 23.5C21 22.6716 20.3284 22 19.5 22C18.6716 22 18 22.6716 18 23.5C18 24.3284 18.6716 25 19.5 25Z"
<path d="M19.5 25C20.3284 25 21 24.3284 21 23.5C21 22.6716 20.3284 22 19.5 22C18.6716 22 18 22.6716 18 23.5C18 24.3284 18.6716 25 19.5 25Z" fill="#4D4D4D"/> fill="currentColor"
</svg> />
</Box> </svg>
); );
}

83
src/assets/icons/questionsPage/deleteIcon.tsx
View File

@ -1,63 +1,24 @@
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
interface Props { export const DeleteIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
color: string; <svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
} <path d="M20.25 5.25H3.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.75 9.75V15.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
export default function DeleteIcon({ color = "#4D4D4D" }: Props) { <path d="M14.25 9.75V15.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
return ( <path
<Box d="M18.75 5.25V19.5C18.75 19.6989 18.671 19.8897 18.5303 20.0303C18.3897 20.171 18.1989 20.25 18 20.25H6C5.80109 20.25 5.61032 20.171 5.46967 20.0303C5.32902 19.8897 5.25 19.6989 5.25 19.5V5.25"
sx={{ stroke="currentColor"
height: "30px", strokeWidth="1.5"
width: "30px", strokeLinecap="round"
display: "flex", strokeLinejoin="round"
alignItems: "center", />
justifyContent: "center", <path
}} d="M15.75 5.25V3.75C15.75 3.35218 15.592 2.97064 15.3107 2.68934C15.0294 2.40804 14.6478 2.25 14.25 2.25H9.75C9.35218 2.25 8.97064 2.40804 8.68934 2.68934C8.40804 2.97064 8.25 3.35218 8.25 3.75V5.25"
> stroke="currentColor"
<svg strokeWidth="1.5"
width="24" strokeLinecap="round"
height="24" strokeLinejoin="round"
viewBox="0 0 24 24" />
fill="none" </svg>
xmlns="http://www.w3.org/2000/svg" );
>
<path
d="M20.25 5.25H3.75"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.75 9.75V15.75"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.25 9.75V15.75"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.75 5.25V19.5C18.75 19.6989 18.671 19.8897 18.5303 20.0303C18.3897 20.171 18.1989 20.25 18 20.25H6C5.80109 20.25 5.61032 20.171 5.46967 20.0303C5.32902 19.8897 5.25 19.6989 5.25 19.5V5.25"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.75 5.25V3.75C15.75 3.35218 15.592 2.97064 15.3107 2.68934C15.0294 2.40804 14.6478 2.25 14.25 2.25H9.75C9.35218 2.25 8.97064 2.40804 8.68934 2.68934C8.40804 2.97064 8.25 3.35218 8.25 3.75V5.25"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

74
src/assets/icons/questionsPage/enterIcon.tsx
View File

@ -1,49 +1,27 @@
import { Box } from "@mui/material"; import { FC, SVGProps } from "react";
// interface Props { export const EnterIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
// color: string; <svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
// } <path
d="M16.5 9.75V12.75H7.5"
export default function EnterIcon() { stroke="currentColor"
return ( strokeWidth="1.5"
<Box strokeLinecap="round"
sx={{ strokeLinejoin="round"
height: "38px", />
width: "45px", <path
display: "flex", d="M9.75 10.5L7.5 12.75L9.75 15"
alignItems: "center", stroke="currentColor"
justifyContent: "center", strokeWidth="1.5"
}} strokeLinecap="round"
> strokeLinejoin="round"
<svg />
width="24" <path
height="24" d="M20.25 4.5H3.75C3.33579 4.5 3 4.83579 3 5.25V18.75C3 19.1642 3.33579 19.5 3.75 19.5H20.25C20.6642 19.5 21 19.1642 21 18.75V5.25C21 4.83579 20.6642 4.5 20.25 4.5Z"
viewBox="0 0 24 24" stroke="currentColor"
fill="none" strokeWidth="1.5"
xmlns="http://www.w3.org/2000/svg" strokeLinecap="round"
> strokeLinejoin="round"
<path />
d="M16.5 9.75V12.75H7.5" </svg>
stroke="#7E2AEA" );
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.75 10.5L7.5 12.75L9.75 15"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M20.25 4.5H3.75C3.33579 4.5 3 4.83579 3 5.25V18.75C3 19.1642 3.33579 19.5 3.75 19.5H20.25C20.6642 19.5 21 19.1642 21 18.75V5.25C21 4.83579 20.6642 4.5 20.25 4.5Z"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

52
src/assets/icons/questionsPage/hideIcon.tsx
View File

@ -1,27 +1,27 @@
import { Box } from "@mui/material"; import { FC, SVGProps } from "react";
export const HideIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
interface Props { <svg {...props} height="1em" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
color: string; <path
} d="M14.7218 18.4322C13.8897 18.6339 12.9835 18.75 12 18.75C4.5 18.75 1.5 12 1.5 12C1.5 12 4.5 5.25 12 5.25C19.5 5.25 22.5 12 22.5 12C22.5 12 21.7941 14.0139 19 16"
stroke="currentColor"
export default function HideIcon({color}: Props) { strokeWidth="1.5"
strokeLinecap="round"
return ( strokeLinejoin="round"
<Box />
sx={{ <path
height: "30px", d="M24 16L19.5 20L15 16"
width: "30px", stroke="currentColor"
display: "flex", strokeWidth="1.5"
alignItems: "center", strokeLinecap="round"
justifyContent: "center", strokeLinejoin="round"
}} />
> <path
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z"
<path d="M14.7218 18.4322C13.8897 18.6339 12.9835 18.75 12 18.75C4.5 18.75 1.5 12 1.5 12C1.5 12 4.5 5.25 12 5.25C19.5 5.25 22.5 12 22.5 12C22.5 12 21.7941 14.0139 19 16" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> stroke="currentColor"
<path d="M24 16L19.5 20L15 16" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> strokeWidth="1.5"
<path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> strokeLinecap="round"
</svg> strokeLinejoin="round"
</Box> />
); </svg>
} );

346
src/pages/ContactFormPage/ContactFormPage.tsx
View File

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import Stepper from '@ui_kit/Stepper'; import Stepper from "@ui_kit/Stepper";
import {Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField} from '@mui/material'; import { Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField } from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "../../assets/icons/questionsPage/OneIcon"; import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
import AddPlus from "../../assets/icons/questionsPage/addPlus"; import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import InfoIcon from "../../assets/icons/InfoIcon"; import InfoIcon from "../../assets/icons/InfoIcon";
@ -12,171 +12,203 @@ import SwitchContactForm from "./switchContactForm";
import DrawerNewField from "./DrawerParent"; import DrawerNewField from "./DrawerParent";
import WindowNewField from "./NewField/WindowNewField"; import WindowNewField from "./NewField/WindowNewField";
import WindowMessengers from "./Massengers/WindowMessengers"; import WindowMessengers from "./Massengers/WindowMessengers";
import {quizStore} from "@root/quizes"; import { quizStore } from "@root/quizes";
import {useParams} from "react-router-dom"; import { useParams } from "react-router-dom";
export default function ContactFormPage() { export default function ContactFormPage() {
const {listQuizes, updateQuizesList} = quizStore(); const { listQuizes, updateQuizesList } = quizStore();
const params = Number(useParams().quizId); const params = Number(useParams().quizId);
const handleNext = () => { const handleNext = () => {
updateQuizesList(params, {step: listQuizes[params].step + 1}) updateQuizesList(params, { step: listQuizes[params].step + 1 });
} };
const [activeStep, setActiveStep] = React.useState(4); const [activeStep, setActiveStep] = React.useState(4);
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleBack = () => { const [drawerNewField, setDrawerNewField] = React.useState(false);
setActiveStep((prevActiveStep) => prevActiveStep - 1); const [drawerMessenger, setDrawerMessenger] = React.useState(false);
};
const [drawerNewField, setDrawerNewField] = React.useState(false); const drawerNewFieldHC = (bool: boolean) => {
const [drawerMessenger, setDrawerMessenger] = React.useState(false); setDrawerNewField(bool);
};
const drawerMessengerHC = (bool: boolean) => {
setDrawerMessenger(bool);
};
const drawerNewFieldHC = (bool:boolean) => {setDrawerNewField(bool)} const theme = useTheme();
const drawerMessengerHC = (bool:boolean) => {setDrawerMessenger(bool)} return (
<>
<Stepper activeStep={activeStep} desc={"Настройте форму контактов"} />
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Link
sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
>
Как собрать данные посетителя
</Link>{" "}
<InfoIcon />
</Box>
<ContactFormParent>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
<OneIcon />
<IconButton>
{" "}
<ExpandMoreIcon />{" "}
</IconButton>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px", padding: "10px 20px" }}>
<Typography>Имя*</Typography>
<CustomTextField placeholder="Дмитрий" text={""} />
<Typography>E-mail*</Typography>
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
<Typography>Телефон*</Typography>
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
<Button
onClick={() => drawerNewFieldHC(true)}
variant="contained"
sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
>
Добавить поле +
</Button>
<DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}>
<WindowNewField />
</DrawerNewField>
<Link
component="button"
onClick={() => drawerMessengerHC(true)}
sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
textAlign: "left",
}}
>
Добавить мессенджеры
</Link>
<DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
<WindowMessengers />
</DrawerNewField>
const theme = useTheme(); <Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
return ( Название кнопки
<> </Button>
<Stepper activeStep={activeStep} desc={"Настройте форму контактов"}/> </Box>
<Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}> </ContactFormParent>
<Link sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main
}}>Как собрать данные посетителя</Link> <InfoIcon/>
</Box>
<ContactFormParent>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
<OneIcon/>
<IconButton> <ExpandMoreIcon /> </IconButton>
</Box>
<Box sx={{display: 'flex', flexDirection: 'column', gap: '20px', padding: '10px 20px'}}>
<Typography>Имя*</Typography>
<CustomTextField placeholder="Дмитрий" text={""} />
<Typography>E-mail*</Typography>
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
<Typography>Телефон*</Typography>
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
<Button onClick={() => drawerNewFieldHC(true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
Добавить поле +
</Button>
<DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}><WindowNewField/></DrawerNewField>
<Link
component='button'
onClick={() => drawerMessengerHC(true)}
sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
textAlign: 'left'
}}>Добавить мессенджеры</Link>
<DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
<WindowMessengers/> <ContactFormParent>
</DrawerNewField> <Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
<OneIcon />
<Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}> <IconButton>
Название кнопки {" "}
</Button> <ExpandMoreIcon />{" "}
</IconButton>
</Box> </Box>
</ContactFormParent> <Button variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
Добавить поле +
</Button>
<ContactFormParent> <Box sx={{ display: "flex" }}>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}> <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
<OneIcon/> <InfoIcon />
<IconButton> <ExpandMoreIcon /> </IconButton> </Box>
</Box> <Link
<Button variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}> sx={{
Добавить поле + mt: "20px",
</Button> fontSize: "16px",
<Box sx={{display: 'flex'}}> lineHeight: "19px",
<Typography sx={{color: theme.palette.orange.main}}>Будут показаны поля по умолчанию</Typography> color: theme.palette.brightPurple.main,
<InfoIcon/> textDecorationColor: theme.palette.brightPurple.main,
</Box> }}
<Link sx={{ >
mt: "20px", Добавить мессенджеры
fontSize: "16px", </Link>
lineHeight: "19px", <Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
color: theme.palette.brightPurple.main, Название кнопки
textDecorationColor: theme.palette.brightPurple.main </Button>
}}>Добавить мессенджеры</Link> </ContactFormParent>
<Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}> <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
Название кнопки <IconButton>
</Button> <AddPlus />
</ContactFormParent> </IconButton>
<Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}> <Box sx={{ display: "flex", gap: "8px" }}>
<IconButton> <Button variant="outlined">
<AddPlus/> <ArrowLeft />
</IconButton> </Button>
<Box sx={{display: 'flex', gap: '8px'}}> <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={handleNext}>
<Button variant='outlined'> Установка квиза
<ArrowLeft/> </Button>
</Button> </Box>
<Button variant='contained' sx={{padding: '10px 20px'}} onClick={handleNext}> </Box>
Установка квиза </>
</Button> );
</Box>
</Box>
</>
)
} }
interface Props { interface Props {
outerContainerSx?: SxProps<Theme>; outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode; children?: React.ReactNode;
} }
function ContactFormParent({outerContainerSx: sx, children }: Props) { function ContactFormParent({ outerContainerSx: sx, children }: Props) {
const theme = useTheme(); const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting'); const [switchState, setSwitchState] = React.useState("setting");
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data) setSwitchState(data);
} };
return( return (
<Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex', flexDirection: 'column'}}> <Paper
<Box sx={{width: '100%', display: 'flex'}} > sx={{
<Box maxWidth: "796px",
sx={{ width: "100%",
borderRight: `1px solid ${theme.palette.grey2.main}`, borderRadius: "12px",
maxWidth: '386px', margin: "20px 0",
width: '100%', display: "flex",
padding: '113px 20px 20px 20px', flexDirection: "column",
display: 'flex', }}
flexDirection: 'column', >
gap: '20px' <Box sx={{ width: "100%", display: "flex" }}>
}}> <Box
<CustomTextField placeholder="Заголовок формы" text={""}/> sx={{
<TextField borderRight: `1px solid ${theme.palette.grey2.main}`,
id="outlined-multiline-static" maxWidth: "386px",
multiline width: "100%",
rows={8} padding: "113px 20px 20px 20px",
placeholder="Дополнительный текст формы" display: "flex",
sx={{ flexDirection: "column",
backgroundColor: theme.palette.background.default, gap: "20px",
}}
>
<CustomTextField placeholder="Заголовок формы" text={""} />
<TextField
id="outlined-multiline-static"
multiline
rows={8}
placeholder="Дополнительный текст формы"
sx={{
backgroundColor: theme.palette.background.default,
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
borderRadius: "10px", borderRadius: "10px",
alignItems: 'start', alignItems: "start",
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
}, },
}} }}
/> />
</Box> </Box>
<Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%', gap: '20px'}}> <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
{children} {children}
</Box> </Box>
</Box> </Box>
<Box> <Box>
<ButtonSettingForms switchState={switchState} SSHC={SSHC}/> <ButtonSettingForms switchState={switchState} SSHC={SSHC} />
<SwitchContactForm switchState={switchState}/> <SwitchContactForm switchState={switchState} />
</Box> </Box>
</Paper> </Paper>
) );
} }

60
src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

@ -1,22 +1,14 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Draggable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd";
import { import { Box, TextField, FormControl, InputAdornment, IconButton, useTheme, useMediaQuery } from "@mui/material";
Box,
TextField,
FormControl,
InputAdornment,
IconButton,
useTheme,
useMediaQuery,
} from "@mui/material";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
import PointsIcon from "@icons/questionsPage/PointsIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import MessageIcon from "@icons/messagIcon"; import { MessageIcon } from "@icons/messagIcon";
import Popover from "@mui/material/Popover"; import Popover from "@mui/material/Popover";
import TextareaAutosize from "@mui/base/TextareaAutosize"; import TextareaAutosize from "@mui/base/TextareaAutosize";
@ -32,13 +24,7 @@ type AnswerItemProps = {
icon?: ReactNode; icon?: ReactNode;
}; };
export const AnswerItem = ({ export const AnswerItem = ({ index, totalIndex, variants, variant, icon }: AnswerItemProps) => {
index,
totalIndex,
variants,
variant,
icon,
}: AnswerItemProps) => {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
@ -111,7 +97,7 @@ export const AnswerItem = ({
key={index} key={index}
fullWidth fullWidth
variant="standard" variant="standard"
sx={{ padding: isMobile ? " 15px 0 20px 0" : "0 0 20px 0" }} sx={{ padding: isMobile ? " 20px 0 20px 0" : "0 0 18px 0" }}
> >
<TextField <TextField
defaultValue={variant.answer} defaultValue={variant.answer}
@ -121,32 +107,23 @@ export const AnswerItem = ({
multiline={listQuestions[quizId][totalIndex].content.largeCheck} multiline={listQuestions[quizId][totalIndex].content.largeCheck}
onChange={({ target }) => debounced(target.value)} onChange={({ target }) => debounced(target.value)}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if ( if (event.code === "Enter" && !listQuestions[quizId][totalIndex].content.largeCheck) {
event.code === "Enter" &&
!listQuestions[quizId][totalIndex].content.largeCheck
) {
addNewAnswer(); addNewAnswer();
} }
}} }}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<> <>
<InputAdornment <InputAdornment {...provided.dragHandleProps} position="start">
{...provided.dragHandleProps} <PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
position="start"
>
<PointsIcon />
</InputAdornment> </InputAdornment>
{icon && icon} {icon && icon}
</> </>
), ),
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton <IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id" onClick={handleClick}>
aria-describedby="my-popover-id" <MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
onClick={handleClick}
>
<MessageIcon />
</IconButton> </IconButton>
<Popover <Popover
id="my-popover-id" id="my-popover-id"
@ -160,26 +137,25 @@ export const AnswerItem = ({
placeholder="Подсказка для этого ответа" placeholder="Подсказка для этого ответа"
value={variant.hints} value={variant.hints}
onChange={changeAnswerHint} onChange={changeAnswerHint}
onKeyDown={( onKeyDown={(event: KeyboardEvent<HTMLTextAreaElement>) => event.stopPropagation()}
event: KeyboardEvent<HTMLTextAreaElement>
) => event.stopPropagation()}
/> />
</Popover> </Popover>
<IconButton onClick={deleteAnswer}> <IconButton sx={{ padding: "0" }} onClick={deleteAnswer}>
<DeleteIcon color={theme.palette.grey2.main} /> <DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
), ),
}} }}
sx={{ sx={{
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
padding: icon ? "5px 13.5px" : "13.5px", padding: icon ? "5px 13.5px" : "13.5px 13.5px 13.5px 9px",
borderRadius: "10px", borderRadius: "8px",
height: "48px",
background: "#ffffff", background: "#ffffff",
}, },
}} }}
inputProps={{ inputProps={{
sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
}} }}
/> />
</FormControl> </FormControl>

22
src/pages/Questions/ButtonsOptions.tsx
View File

@ -5,13 +5,14 @@ import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Clue from "../../assets/icons/questionsPage/clue"; import Clue from "../../assets/icons/questionsPage/clue";
import Branching from "../../assets/icons/questionsPage/branching"; import Branching from "../../assets/icons/questionsPage/branching";
import { Box, Typography, Tooltip, IconButton, useTheme, useMediaQuery } from "@mui/material"; import { Box, Typography, Tooltip, IconButton, useTheme, useMediaQuery } from "@mui/material";
import HideIcon from "../../assets/icons/questionsPage/hideIcon"; import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
import CopyIcon from "../../assets/icons/questionsPage/CopyIcon"; import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions"; import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions";
import { DoubleTick } from "@icons/questionsPage/DoubleTick"; import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight"; import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions"; import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
interface Props { interface Props {
switchState: string; switchState: string;
@ -61,17 +62,19 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
width: "100%", width: "100%",
background: "#F2F3F7", background: "#f2f3f7",
height: isMobile ? "92px" : "70px",
}} }}
> >
<Box <Box
sx={{ sx={{
padding: "20px", padding: isMobile ? " 3px 12px 11px" : "20px",
display: "flex", display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap", flexWrap: isMobile ? "wrap" : "nowrap",
gap: "10px", gap: "6px",
}} }}
> >
{buttonSetting.map(({ icon, title, value, myFunc }) => ( {buttonSetting.map(({ icon, title, value, myFunc }) => (
@ -175,7 +178,6 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
> >
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} /> <VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting> </MiniButtonSetting>
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -184,13 +186,13 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
}} }}
> >
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"} /> <HideIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => copyQuestion(quizId, totalIndex)}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => copyQuestion(quizId, totalIndex)}>
<CopyIcon color={"#4D4D4D"} /> <CopyIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(quizId, totalIndex)}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(quizId, totalIndex)}>
<DeleteIcon color={"#4D4D4D"} /> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>

111
src/pages/Questions/ButtonsOptionsAndPict.tsx
View File

@ -3,31 +3,18 @@ import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Clue from "../../assets/icons/questionsPage/clue"; import Clue from "../../assets/icons/questionsPage/clue";
import Branching from "../../assets/icons/questionsPage/branching"; import Branching from "../../assets/icons/questionsPage/branching";
import { import { Box, IconButton, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
IconButton, import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
Tooltip, import { DeleteIcon } from "../../assets/icons/questionsPage/deleteIcon";
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import HideIcon from "../../assets/icons/questionsPage/hideIcon";
import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import ImgIcon from "../../assets/icons/questionsPage/imgIcon"; import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import { questionStore, copyQuestion, removeQuestion, resetSomeField } from "@root/questions";
questionStore,
copyQuestion,
removeQuestion,
resetSomeField,
} from "@root/questions";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight"; import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { DoubleTick } from "@icons/questionsPage/DoubleTick"; import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions"; import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal"; import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
import "./ButtonsOptionsAndPict.css"; import "./ButtonsOptionsAndPict.css";
interface Props { interface Props {
@ -36,11 +23,7 @@ interface Props {
totalIndex: number; totalIndex: number;
} }
export default function ButtonsOptionsAndPict({ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
SSHC,
switchState,
totalIndex,
}: Props) {
const [buttonHover, setButtonHover] = useState<string>(""); const [buttonHover, setButtonHover] = useState<string>("");
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { openedModalSettings } = questionStore(); const { openedModalSettings } = questionStore();
@ -57,17 +40,19 @@ export default function ButtonsOptionsAndPict({
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
width: "100%", width: "100%",
background: "#f2f3f7", background: "#f2f3f7",
height: isMobile ? "92px" : "70px",
}} }}
> >
<Box <Box
sx={{ sx={{
padding: "20px", padding: isMobile ? " 3px 12px 11px" : "20px",
display: "flex", display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap", flexWrap: isMobile ? "wrap" : "nowrap",
gap: "10px", gap: "6px",
}} }}
> >
<MiniButtonSetting <MiniButtonSetting
@ -77,17 +62,13 @@ export default function ButtonsOptionsAndPict({
SSHC("setting"); SSHC("setting");
}} }}
sx={{ sx={{
maxWidth: "104px",
minWidth: isIconMobile ? "30px" : "64px", minWidth: isIconMobile ? "30px" : "64px",
height: "30px", height: "30px",
backgroundColor: backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent",
switchState === "setting" color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": { "&:hover": {
color: color: switchState === "setting" ? theme.palette.grey3.main : null,
switchState === "setting" ? theme.palette.grey3.main : null,
}, },
}} }}
> >
@ -100,7 +81,7 @@ export default function ButtonsOptionsAndPict({
: theme.palette.grey3.main : theme.palette.grey3.main
} }
/> />
{isIconMobile ? null : " Настройки"} {isIconMobile ? null : "Настройки"}
</MiniButtonSetting> </MiniButtonSetting>
<MiniButtonSetting <MiniButtonSetting
onMouseEnter={() => setButtonHover("help")} onMouseEnter={() => setButtonHover("help")}
@ -110,13 +91,10 @@ export default function ButtonsOptionsAndPict({
}} }}
sx={{ sx={{
minWidth: isIconMobile ? "30px" : "64px", minWidth: isIconMobile ? "30px" : "64px",
maxWidth: "102px",
height: "30px", height: "30px",
backgroundColor: backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent",
switchState === "help" color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": { "&:hover": {
color: switchState === "help" ? theme.palette.grey3.main : null, color: switchState === "help" ? theme.palette.grey3.main : null,
}, },
@ -131,7 +109,7 @@ export default function ButtonsOptionsAndPict({
: theme.palette.grey3.main : theme.palette.grey3.main
} }
/> />
{isIconMobile ? null : " Помощь"} {isIconMobile ? null : "Подсказка"}
</MiniButtonSetting> </MiniButtonSetting>
<Tooltip <Tooltip
arrow arrow
@ -148,9 +126,7 @@ export default function ButtonsOptionsAndPict({
> >
Будет показан при условии Будет показан при условии
</Typography> </Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}> <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>Название</Typography>
Название
</Typography>
<Typography <Typography
sx={{ sx={{
fontWeight: "bold", fontWeight: "bold",
@ -160,9 +136,7 @@ export default function ButtonsOptionsAndPict({
> >
Условие 1, Условие 2 Условие 1, Условие 2
</Typography> </Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}> <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>Все условия обязательны</Typography>
Все условия обязательны
</Typography>
</Box> </Box>
} }
> >
@ -175,18 +149,12 @@ export default function ButtonsOptionsAndPict({
}} }}
sx={{ sx={{
height: "30px", height: "30px",
maxWidth: "103px",
minWidth: isIconMobile ? "30px" : "64px", minWidth: isIconMobile ? "30px" : "64px",
backgroundColor: backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent",
switchState === "branching" color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main,
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main,
"&:hover": { "&:hover": {
color: color: switchState === "branching" ? theme.palette.grey3.main : null,
switchState === "branching" ? theme.palette.grey3.main : null,
}, },
}} }}
> >
@ -210,13 +178,10 @@ export default function ButtonsOptionsAndPict({
}} }}
sx={{ sx={{
height: "30px", height: "30px",
maxWidth: "123px",
minWidth: isIconMobile ? "30px" : "64px", minWidth: isIconMobile ? "30px" : "64px",
backgroundColor: backgroundColor: switchState === "image" ? theme.palette.brightPurple.main : "transparent",
switchState === "image" color: switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": { "&:hover": {
color: switchState === "image" ? theme.palette.grey3.main : null, color: switchState === "image" ? theme.palette.grey3.main : null,
}, },
@ -264,30 +229,26 @@ export default function ButtonsOptionsAndPict({
> >
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} /> <VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting> </MiniButtonSetting>
</Box> </Box>
<Box <Box
sx={{ sx={{
padding: "20px", padding: "20px",
}} }}
> >
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "0px 2px" }}>
<HideIcon color={"#4D4D4D"} /> <HideIcon style={{ color: "#4D4D4D" }} />
</IconButton>
<IconButton sx={{ borderRadius: "6px" }} onClick={() => copyQuestion(quizId, totalIndex)}>
<CopyIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<IconButton <IconButton
sx={{ borderRadius: "6px", padding: "2px" }} sx={{ borderRadius: "6px", padding: " 0px 2px" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<CopyIcon color={"#4D4D4D"} />
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => removeQuestion(quizId, totalIndex)} onClick={() => removeQuestion(quizId, totalIndex)}
> >
<DeleteIcon color={"#4D4D4D"} /> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
</Box> </Box>
<ReallyChangingModal opened={openedReallyChangingModal} onClose={() => setOpenedReallyChangingModal(false)} /> <ReallyChangingModal opened={openedReallyChangingModal} onClose={() => setOpenedReallyChangingModal(false)} />
</Box> </Box>
); );
} }

151
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -18,22 +18,15 @@ import { ChooseAnswerModal } from "./ChooseAnswerModal";
import TypeQuestions from "../TypeQuestions"; import TypeQuestions from "../TypeQuestions";
import SwitchQuestionsPage from "../SwitchQuestionsPage"; import SwitchQuestionsPage from "../SwitchQuestionsPage";
import { import { questionStore, updateQuestionsList, createQuestion, copyQuestion, removeQuestion } from "@root/questions";
questionStore,
updateQuestionsList,
createQuestion,
copyQuestion,
removeQuestion,
} from "@root/questions";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess"; import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import OneIcon from "@icons/questionsPage/OneIcon"; import { OneIcon } from "@icons/questionsPage/OneIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon"; import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import CrossedEyeIcon from "@icons/CrossedEyeIcon"; import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import HideIcon from "@icons/questionsPage/hideIcon"; import { HideIcon } from "@icons/questionsPage/hideIcon";
import Answer from "@icons/questionsPage/answer"; import Answer from "@icons/questionsPage/answer";
import OptionsPict from "@icons/questionsPage/options_pict"; import OptionsPict from "@icons/questionsPage/options_pict";
import OptionsAndPict from "@icons/questionsPage/options_and_pict"; import OptionsAndPict from "@icons/questionsPage/options_and_pict";
@ -48,6 +41,7 @@ import RatingIcon from "@icons/questionsPage/rating";
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg"; import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd"; import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
interface Props { interface Props {
totalIndex: number; totalIndex: number;
@ -58,91 +52,32 @@ interface Props {
const IconAndrom = (isExpanded: boolean, switchState: string) => { const IconAndrom = (isExpanded: boolean, switchState: string) => {
switch (switchState) { switch (switchState) {
case "variant": case "variant":
return ( return <Answer color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Answer
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "images": case "images":
return ( return <OptionsPict color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<OptionsPict
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "varimg": case "varimg":
return ( return <OptionsAndPict color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<OptionsAndPict
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "emoji": case "emoji":
return ( return <Emoji color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Emoji
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "text": case "text":
return ( return <Input color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Input
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "select": case "select":
return ( return <DropDown color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<DropDown
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "date": case "date":
return ( return <Date color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Date
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "number": case "number":
return ( return <Slider color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Slider
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "file": case "file":
return ( return <Download color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Download
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "page": case "page":
return ( return <Page color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<Page
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
case "rating": case "rating":
return ( return <RatingIcon color={isExpanded ? "#9A9AAF" : "white"} sx={{ height: "22px", width: "20px" }} />;
<RatingIcon
color={isExpanded ? "#9A9AAF" : "white"}
sx={{ height: "22px", width: "20px" }}
/>
);
default: default:
return <></>; return <></>;
} }
}; };
export default function QuestionsPageCard({ export default function QuestionsPageCard({ totalIndex, draggableProps, isDragging }: Props) {
totalIndex,
draggableProps,
isDragging,
}: Props) {
const [plusVisible, setPlusVisible] = useState<boolean>(false); const [plusVisible, setPlusVisible] = useState<boolean>(false);
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
@ -150,8 +85,7 @@ export default function QuestionsPageCard({
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const { type: switchState, expanded: isExpanded } = const { type: switchState, expanded: isExpanded } = listQuestions[quizId][totalIndex];
listQuestions[quizId][totalIndex];
const anchorRef = useRef(null); const anchorRef = useRef(null);
const debounced = useDebouncedCallback((title) => { const debounced = useDebouncedCallback((title) => {
updateQuestionsList(quizId, totalIndex, { title }); updateQuestionsList(quizId, totalIndex, { title });
@ -164,17 +98,16 @@ export default function QuestionsPageCard({
sx={{ sx={{
maxWidth: "796px", maxWidth: "796px",
width: "100%", width: "100%",
borderRadius: "12px", borderRadius: "8px",
backgroundColor: isExpanded ? "white" : "#333647", backgroundColor: isExpanded ? "white" : "#333647",
}} }}
> >
<Box <Box
sx={{ sx={{
maxWidth: isTablet ? "665px" : "760px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: isTablet ? "4px" : "10px", justifyContent: "space-between",
padding: isMobile ? "20px 20px 0px 20px" : "20px 20px 20px 20px ", padding: isTablet ? (isMobile ? "20px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px",
flexDirection: isMobile ? "column-reverse" : null, flexDirection: isMobile ? "column-reverse" : null,
}} }}
> >
@ -182,7 +115,7 @@ export default function QuestionsPageCard({
variant="standard" variant="standard"
sx={{ sx={{
p: 0, p: 0,
maxWidth: isTablet ? (isMobile ? "100%" : "640px") : "100%", maxWidth: isTablet ? "549px" : "640px",
width: "100%", width: "100%",
}} }}
> >
@ -213,9 +146,7 @@ export default function QuestionsPageCard({
sx={{ sx={{
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
color: isExpanded ? "#9A9AAF" : "white", color: isExpanded ? "#9A9AAF" : "white",
backgroundColor: isExpanded backgroundColor: isExpanded ? theme.palette.background.default : "transparent",
? theme.palette.background.default
: "transparent",
height: "48px", height: "48px",
borderRadius: "10px", borderRadius: "10px",
".MuiOutlinedInput-notchedOutline": { ".MuiOutlinedInput-notchedOutline": {
@ -236,9 +167,11 @@ export default function QuestionsPageCard({
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "flex-start",
width: isMobile ? "100%" : "auto", width: isMobile ? "100%" : "auto",
position: "relative", position: "relative",
height: "30px",
marginBottom: "10px",
}} }}
> >
<Box <Box
@ -248,6 +181,8 @@ export default function QuestionsPageCard({
}} }}
> >
<IconButton <IconButton
sx={{ paddingBottom: isMobile ? "0" : "" }}
disableRipple
onClick={() => onClick={() =>
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
expanded: !isExpanded, expanded: !isExpanded,
@ -255,7 +190,13 @@ export default function QuestionsPageCard({
} }
> >
{isExpanded ? ( {isExpanded ? (
<ExpandMoreIcon /> <ArrowDownIcon
style={{
width: "18px",
marginLeft: isMobile ? "0px" : "16.1px",
color: "#4D4D4D",
}}
/>
) : ( ) : (
<ExpandLessIcon fill="#7E2AEA" /> <ExpandLessIcon fill="#7E2AEA" />
)} )}
@ -266,10 +207,7 @@ export default function QuestionsPageCard({
<Box sx={{ display: "flex", borderRight: "solid 1px white" }}> <Box sx={{ display: "flex", borderRight: "solid 1px white" }}>
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox icon={<HideIcon style={{ color: "#7E2AEA" }} />} checkedIcon={<CrossedEyeIcon />} />
icon={<HideIcon color={"#7E2AEA"} />}
checkedIcon={<CrossedEyeIcon />}
/>
} }
label={""} label={""}
sx={{ sx={{
@ -280,7 +218,7 @@ export default function QuestionsPageCard({
}} }}
/> />
<IconButton onClick={() => copyQuestion(quizId, totalIndex)}> <IconButton onClick={() => copyQuestion(quizId, totalIndex)}>
<CopyIcon color={"white"} /> <CopyIcon style={{ color: "white" }} />
</IconButton> </IconButton>
<IconButton <IconButton
sx={{ sx={{
@ -290,22 +228,24 @@ export default function QuestionsPageCard({
}} }}
onClick={() => removeQuestion(quizId, totalIndex)} onClick={() => removeQuestion(quizId, totalIndex)}
> >
<DeleteIcon color={"white"} /> <DeleteIcon style={{ color: "white" }} />
</IconButton> </IconButton>
</Box> </Box>
)} )}
<OneIcon /> <OneIcon style={{ fontSize: "30px", marginLeft: "1.5px" }} />
</Box> </Box>
<IconButton <IconButton
disableRipple
sx={{ sx={{
padding: isMobile ? "0" : "5px 8px 8px 8px",
position: isMobile ? "absolute" : "relative", position: isMobile ? "absolute" : "relative",
right: isMobile ? "0" : null, right: isMobile ? "0" : null,
bottom: isMobile ? "0" : null, bottom: isMobile ? "0" : null,
}} }}
{...draggableProps} {...draggableProps}
> >
<PointsIcon /> <PointsIcon style={{ color: "#4D4D4D", fontSize: "30px", marginLeft: "-px" }} />
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>
@ -354,8 +294,7 @@ export default function QuestionsPageCard({
backgroundPosition: "bottom", backgroundPosition: "bottom",
backgroundRepeat: "repeat-x", backgroundRepeat: "repeat-x",
backgroundSize: "20px 1px", backgroundSize: "20px 1px",
backgroundImage: backgroundImage: "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
}} }}
/> />
<PlusIcon /> <PlusIcon />

4
src/pages/Questions/DropDown/DropDown.tsx
View File

@ -5,7 +5,7 @@ import { AnswerDraggableList } from "../AnswerDraggableList";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import SwitchDropDown from "./switchDropDown"; import SwitchDropDown from "./switchDropDown";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
@ -76,7 +76,7 @@ export default function DropDown({ totalIndex }: Props) {
> >
или нажмите Enter или нажмите Enter
</Typography> </Typography>
<EnterIcon /> <EnterIcon color="#7E2AEA" />
</> </>
)} )}
</Box> </Box>

80
src/pages/Questions/Emoji/Emoji.tsx
View File

@ -1,6 +1,17 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Link, Typography, useMediaQuery, useTheme, IconButton, InputAdornment, Popover, TextField, TextareaAutosize} from "@mui/material"; import {
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; Box,
Link,
Typography,
useMediaQuery,
useTheme,
IconButton,
InputAdornment,
Popover,
TextField,
TextareaAutosize,
} from "@mui/material";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchEmoji from "./switchEmoji"; import SwitchEmoji from "./switchEmoji";
import React from "react"; import React from "react";
@ -8,9 +19,9 @@ import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
import { AnswerDraggableList } from "../AnswerDraggableList"; import { AnswerDraggableList } from "../AnswerDraggableList";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
import PointsIcon from "@icons/questionsPage/PointsIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import MessageIcon from "@icons/messagIcon"; import { MessageIcon } from "@icons/messagIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { ImageAddIcons } from "@icons/ImageAddIcons"; import { ImageAddIcons } from "@icons/ImageAddIcons";
import { EmojiIcons } from "@icons/EmojiIocns"; import { EmojiIcons } from "@icons/EmojiIocns";
@ -23,8 +34,7 @@ export default function Emoji({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
@ -32,12 +42,13 @@ export default function Emoji({ totalIndex }: Props) {
return ( return (
<> <>
<Box sx={{ padding: "20px" }}> <Box sx={{ padding: "0 20px 0px 20px" }}>
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
border: "1px solid #9A9AAF", border: "1px solid #9A9AAF",
borderRadius: "8px", borderRadius: "8px",
marginBottom: isMobile ? "15px" : "20px",
}} }}
> >
<TextField <TextField
@ -49,21 +60,51 @@ export default function Emoji({ totalIndex }: Props) {
startAdornment: ( startAdornment: (
<> <>
<InputAdornment position="start"> <InputAdornment position="start">
<PointsIcon /> <PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
</InputAdornment> </InputAdornment>
{!isMobile && <AddEmoji />} {!isMobile && (
<Box
sx={{
width: "60px",
height: "40px",
background: "#EEE4FC",
display: "flex",
justifyContent: "space-between",
marginRight: "20px",
marginLeft: "12px",
}}
>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "40px" }}>
<EmojiIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#7E2AEA",
height: "100%",
width: "20px",
color: "white",
fontSize: "15px",
}}
>
+
</span>
</Box>
)}
</> </>
), ),
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton aria-describedby="my-popover-id"> <IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
<MessageIcon /> <MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
</IconButton> </IconButton>
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}> <Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" /> <TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
</Popover> </Popover>
<IconButton> <IconButton sx={{ padding: "0" }}>
<DeleteIcon color={theme.palette.grey2.main} /> <DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
), ),
@ -73,6 +114,7 @@ export default function Emoji({ totalIndex }: Props) {
padding: "13.5px", padding: "13.5px",
borderRadius: "10px", borderRadius: "10px",
background: "#ffffff", background: "#ffffff",
height: "48px",
}, },
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
border: "none", border: "none",
@ -86,7 +128,7 @@ export default function Emoji({ totalIndex }: Props) {
{isMobile && ( {isMobile && (
<Box sx={{ display: "flex", alignItems: "center", m: "8px", position: "relative" }}> <Box sx={{ display: "flex", alignItems: "center", m: "8px", position: "relative" }}>
<Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} /> <Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} />
<EmojiIcons <ImageAddIcons
style={{ position: "absolute", color: "#7E2AEA", fontSize: "20px", left: "45%", right: "55%" }} style={{ position: "absolute", color: "#7E2AEA", fontSize: "20px", left: "45%", right: "55%" }}
/> />
<Box <Box
@ -106,7 +148,7 @@ export default function Emoji({ totalIndex }: Props) {
</Box> </Box>
)} )}
</Box> </Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}> <Box sx={{ display: "flex", alignItems: "center", marginBottom: "17px" }}>
<Link <Link
component="button" component="button"
variant="body2" variant="body2"
@ -130,14 +172,14 @@ export default function Emoji({ totalIndex }: Props) {
<Typography <Typography
sx={{ sx={{
fontWeight: 400, fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px", lineHeight: "21.33px",
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
fontSize: "16px",
}} }}
> >
или нажмите Enter или нажмите Enter
</Typography> </Typography>
<EnterIcon /> <EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
</> </>
)} )}
</Box> </Box>

52
src/pages/Questions/Emoji/settingEmoji.tsx
View File

@ -1,11 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
@ -21,6 +15,9 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isTablet = useMediaQuery(theme.breakpoints.down(985));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const debounced = useDebouncedCallback((value) => { const debounced = useDebouncedCallback((value) => {
let clonContent = listQuestions[quizId][totalIndex].content; let clonContent = listQuestions[quizId][totalIndex].content;
@ -33,11 +30,24 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: isWrappColumn ? "column" : null, flexDirection: isWrappColumn ? "column" : "none",
}} }}
> >
<Box sx={{ pt: "20px", pl: "20px", pb: "20px" }}> <Box
<Typography>Настройки ответов</Typography> sx={{
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pl: "20px",
pr: isFigmaTablte ? (isMobile ? "20px" : "0px") : "28px",
display: "flex",
flexDirection: "column",
gap: "14px",
width: "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки ответов
</Typography>
<CustomCheckbox <CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }} sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Можно несколько"} label={"Можно несколько"}
@ -61,14 +71,19 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
</Box> </Box>
<Box <Box
sx={{ sx={{
padding: isWrappColumn pt: isMobile ? "0px" : "20px",
? "0px 20px 20px 20px " pb: "20px",
: "20px 20px 20px 20px ", pl: isTablet ? "20px" : "",
minWidth: isWrappColumn ? null : "350px", pr: isFigmaTablte ? "30px" : "20px",
marginRight: "30px", display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
width: "100%",
}} }}
> >
<Typography>Настройки вопросов</Typography> <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки вопросов
</Typography>
<CustomCheckbox <CustomCheckbox
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required} checked={!listQuestions[quizId][totalIndex].required}
@ -93,10 +108,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
updateQuestionsList(quizId, totalIndex, { content: clonContent }); updateQuestionsList(quizId, totalIndex, { content: clonContent });
}} }}
/> />
<Tooltip <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box> <Box>
<InfoIcon /> <InfoIcon />
</Box> </Box>

158
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -1,16 +1,27 @@
import {Box, Link, Typography, ButtonBase, useTheme, useMediaQuery, InputAdornment, IconButton, Popover, TextareaAutosize, TextField} from "@mui/material"; import {
Box,
Link,
Typography,
ButtonBase,
useTheme,
useMediaQuery,
InputAdornment,
IconButton,
Popover,
TextareaAutosize,
TextField,
} from "@mui/material";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import AddImage from "../../../assets/icons/questionsPage/addImage"; import AddImage from "../../../assets/icons/questionsPage/addImage";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import SwitchOptionsAndPict from "./switchOptionsAndPict"; import SwitchOptionsAndPict from "./switchOptionsAndPict";
import React from "react"; import React from "react";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
import { ImageAddIcons } from "@icons/ImageAddIcons"; import { ImageAddIcons } from "@icons/ImageAddIcons";
import PointsIcon from "@icons/questionsPage/PointsIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import MessageIcon from "@icons/messagIcon"; import { MessageIcon } from "@icons/messagIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
interface Props { interface Props {
totalIndex: number; totalIndex: number;
@ -30,8 +41,17 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
return ( return (
<> <>
<Box sx={{ padding: "20px" }}> <Box sx={{ pl: "20px", pr: "20px" }}>
<Box sx={{ paddingBottom: "25px" }}> <Box
sx={{
display: "flex",
alignItems: "center",
paddingBottom: isMobile ? "15px" : "24px",
marginTop: isMobile ? "15px" : "4px",
height: isMobile ? "auto" : "40px",
marginLeft: isTablet ? "0px" : "60px",
}}
>
{listQuestions[quizId][totalIndex].content.variants.map((_, index) => ( {listQuestions[quizId][totalIndex].content.variants.map((_, index) => (
<ButtonBase <ButtonBase
component="label" component="label"
@ -40,7 +60,6 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
cursor: "pointer", cursor: "pointer",
alignItems: "center", alignItems: "center",
justifyContent: "flex-start", justifyContent: "flex-start",
marginBottom: "15px",
}} }}
> >
<input <input
@ -60,18 +79,47 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
multiple multiple
type="file" type="file"
/> />
<AddImage /> <Box sx={{ display: isTablet ? "none" : "flex", alignItems: "center" }}>
<Typography <Box
sx={{ sx={{
padding: "0 0 0 20px", width: "60px",
fontWeight: 400, height: "40px",
fontSize: "18px", background: "#EEE4FC",
lineHeight: "21.33px", display: "flex",
color: theme.palette.grey2.main, justifyContent: "space-between",
}} }}
> >
Добавьте ответ <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
</Typography> <ImageAddIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#7E2AEA",
height: "100%",
width: "25px",
color: "white",
fontSize: "15px",
}}
>
+
</span>
</Box>
<Typography
sx={{
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
</Box>
</ButtonBase> </ButtonBase>
))} ))}
<Box <Box
@ -91,21 +139,51 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
startAdornment: ( startAdornment: (
<> <>
<InputAdornment position="start"> <InputAdornment position="start">
<PointsIcon /> <PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
</InputAdornment> </InputAdornment>
{!isMobile && <AddImage sx={{ h: "100%", margin: "0px 20px" }} />} {!isMobile && (
<Box
sx={{
width: "60px",
height: "40px",
background: "#EEE4FC",
display: "flex",
justifyContent: "space-between",
marginRight: "20px",
marginLeft: "12px",
}}
>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#7E2AEA",
height: "100%",
width: "25px",
color: "white",
fontSize: "15px",
}}
>
+
</span>
</Box>
)}
</> </>
), ),
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton aria-describedby="my-popover-id"> <IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
<MessageIcon /> <MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
</IconButton> </IconButton>
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}> <Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" /> <TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
</Popover> </Popover>
<IconButton> <IconButton sx={{ padding: "0" }}>
<DeleteIcon color={theme.palette.grey2.main} /> <DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
), ),
@ -115,6 +193,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
padding: "13.5px", padding: "13.5px",
borderRadius: "10px", borderRadius: "10px",
background: "#ffffff", background: "#ffffff",
height: "48px",
}, },
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
border: "none", border: "none",
@ -148,18 +227,23 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
</Box> </Box>
)} )}
</Box> </Box>
</Box> </Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}> <Box
sx={{
display: "flex",
alignItems: "center",
marginBottom: "17px",
}}
>
<Link <Link
component="button" component="button"
variant="body2" variant="body2"
sx={{ color: theme.palette.brightPurple.main }} sx={{
onClick={() => { color: theme.palette.brightPurple.main,
const clonContent = listQuestions[quizId][totalIndex].content; fontWeight: "400",
clonContent.variants.push({ answer: "", hints: "" }); fontSize: "16px",
mr: "4px",
updateQuestionsList(quizId, totalIndex, { content: clonContent }); height: "19px",
}} }}
> >
Добавьте ответ Добавьте ответ
@ -169,14 +253,14 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
<Typography <Typography
sx={{ sx={{
fontWeight: 400, fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px", lineHeight: "21.33px",
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
fontSize: "16px",
}} }}
> >
или нажмите Enter или нажмите Enter
</Typography> </Typography>
<EnterIcon /> <EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
</> </>
)} )}
</Box> </Box>

65
src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
View File

@ -1,11 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
@ -17,13 +11,13 @@ type SettingOptionsAndPictProps = {
totalIndex: number; totalIndex: number;
}; };
export default function SettingOptionsAndPict({ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndPictProps) {
totalIndex,
}: SettingOptionsAndPictProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(680)); const isMobile = useMediaQuery(theme.breakpoints.down(680));
const debounced = useDebouncedCallback((replText) => { const debounced = useDebouncedCallback((replText) => {
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
@ -46,13 +40,25 @@ export default function SettingOptionsAndPict({
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
width: "100%",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: isWrappColumn ? "column" : null, flexDirection: isWrappColumn ? "column" : "none",
marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
}} }}
> >
<Box sx={{ pt: "20px", pb: "20px", pl: "20px", width: isMobile ? "85%" : "100%" }}> <Box
<Typography sx={{ marginBottom: "15px" }}> sx={{
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pl: "20px",
display: "flex",
flexDirection: "column",
gap: "14px",
width: "100%",
}}
>
<Typography
sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
>
Настройки ответов Настройки ответов
</Typography> </Typography>
<CustomCheckbox <CustomCheckbox
@ -70,7 +76,9 @@ export default function SettingOptionsAndPict({
/> />
{!isWrappColumn && ( {!isWrappColumn && (
<> <>
<Typography sx={{ marginBottom: "15px" }}> <Typography
sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
>
Текст-заглушка на картинке Текст-заглушка на картинке
</Typography> </Typography>
<CustomTextField <CustomTextField
@ -84,17 +92,23 @@ export default function SettingOptionsAndPict({
</Box> </Box>
<Box <Box
sx={{ sx={{
padding: isWrappColumn pt: isMobile ? "0px" : "20px",
? "0px 20px 20px 20px" pb: "20px",
: "20px 20px 20px 20px", pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
width: isWrappColumn ? "auto" : "100%", pr: isFigmaTablte ? "19px" : "20px",
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
width: "100%",
}} }}
> >
<Typography sx={{ marginBottom: "15px" }}> <Typography
sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
>
Настройки вопросов Настройки вопросов
</Typography> </Typography>
<CustomCheckbox <CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }} sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
checked={listQuestions[quizId][totalIndex].content.required} checked={listQuestions[quizId][totalIndex].content.required}
handleChange={({ target }) => { handleChange={({ target }) => {
@ -121,10 +135,7 @@ export default function SettingOptionsAndPict({
}); });
}} }}
/> />
<Tooltip <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box> <Box>
<InfoIcon /> <InfoIcon />
</Box> </Box>
@ -139,7 +150,9 @@ export default function SettingOptionsAndPict({
)} )}
{isWrappColumn && ( {isWrappColumn && (
<> <>
<Typography sx={{ marginBottom: "15px" }}> <Typography
sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
>
Текст-заглушка на картинке Текст-заглушка на картинке
</Typography> </Typography>
<CustomTextField <CustomTextField

139
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -1,22 +1,32 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Link, Typography, Button, useTheme, useMediaQuery, InputAdornment, IconButton, TextareaAutosize, Popover, TextField } from "@mui/material"; import {
Box,
Link,
Typography,
Button,
useTheme,
useMediaQuery,
InputAdornment,
IconButton,
TextareaAutosize,
Popover,
TextField,
} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import { questionStore, updateQuestionsList } from "@root/questions"; import { questionStore, updateQuestionsList } from "@root/questions";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import AddImage from "../../../assets/icons/questionsPage/addImage"; import AddImage from "../../../assets/icons/questionsPage/addImage";
import SwitchAnswerOptionsPict from "./switchOptionsPict"; import SwitchAnswerOptionsPict from "./switchOptionsPict";
import type { ChangeEvent } from "react"; import type { ChangeEvent } from "react";
import PointsIcon from "@icons/questionsPage/PointsIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import MessageIcon from "@icons/messagIcon"; import { MessageIcon } from "@icons/messagIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { ImageAddIcons } from "@icons/ImageAddIcons"; import { ImageAddIcons } from "@icons/ImageAddIcons";
interface Props { interface Props {
totalIndex: number; totalIndex: number;
} }
@ -45,13 +55,47 @@ export default function OptionsPicture({ totalIndex }: Props) {
return ( return (
<> <>
<Box sx={{ padding: "20px" }}> <Box sx={{ pl: "20px", pr: "20px" }}>
<Box sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}> <Box
<input type="file" hidden onChange={addImage} /> sx={{
<Box sx={{ display: isTablet ? "none" : "block" }}> display: "flex",
<Button component="label" sx={{ padding: "0px" }}> alignItems: "center",
<AddImage /> paddingBottom: isMobile ? "15px" : "20px",
</Button> marginTop: isMobile ? "15px" : "4px",
height: isMobile ? "auto" : "40px",
marginLeft: isTablet ? "0px" : "60px",
}}
>
<input type="file" hidden onChange={addImage} />
<Box sx={{ display: isTablet ? "none" : "flex", alignItems: "center" }}>
<Box
sx={{
width: "60px",
height: "40px",
background: "#EEE4FC",
display: "flex",
justifyContent: "space-between",
}}
>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#7E2AEA",
height: "100%",
width: "25px",
color: "white",
fontSize: "15px",
}}
>
+
</span>
</Box>
<Typography <Typography
sx={{ sx={{
padding: "0 0 0 20px", padding: "0 0 0 20px",
@ -82,21 +126,51 @@ export default function OptionsPicture({ totalIndex }: Props) {
startAdornment: ( startAdornment: (
<> <>
<InputAdornment position="start"> <InputAdornment position="start">
<PointsIcon /> <PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
</InputAdornment> </InputAdornment>
{!isMobile && <AddImage sx={{ h: "100%", margin: "0px 20px" }} />} {!isMobile && (
<Box
sx={{
width: "60px",
height: "40px",
background: "#EEE4FC",
display: "flex",
justifyContent: "space-between",
marginRight: "20px",
marginLeft: "12px",
}}
>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
</Box>
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#7E2AEA",
height: "100%",
width: "25px",
color: "white",
fontSize: "15px",
}}
>
+
</span>
</Box>
)}
</> </>
), ),
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton aria-describedby="my-popover-id"> <IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
<MessageIcon /> <MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
</IconButton> </IconButton>
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}> <Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" /> <TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
</Popover> </Popover>
<IconButton> <IconButton sx={{ padding: "0" }}>
<DeleteIcon color={theme.palette.grey2.main} /> <DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
), ),
@ -106,6 +180,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
padding: "13.5px", padding: "13.5px",
borderRadius: "10px", borderRadius: "10px",
background: "#ffffff", background: "#ffffff",
height: "48px",
}, },
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
border: "none", border: "none",
@ -139,17 +214,25 @@ export default function OptionsPicture({ totalIndex }: Props) {
</Box> </Box>
)} )}
</Box> </Box>
</Box> </Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}> <Box
sx={{
display: "flex",
alignItems: "center",
marginBottom: "17px",
}}
>
<Link <Link
component="button" component="button"
variant="body2" variant="body2"
sx={{ color: theme.palette.brightPurple.main }} sx={{
// onClick={() => { color: theme.palette.brightPurple.main,
// console.info("I'm a button."); fontWeight: "400",
// }} fontSize: "16px",
mr: "4px",
height: "19px",
}}
> >
Добавьте ответ Добавьте ответ
</Link> </Link>
@ -158,14 +241,14 @@ export default function OptionsPicture({ totalIndex }: Props) {
<Typography <Typography
sx={{ sx={{
fontWeight: 400, fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px", lineHeight: "21.33px",
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
fontSize: "16px",
}} }}
> >
или нажмите Enter или нажмите Enter
</Typography> </Typography>
<EnterIcon /> <EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
</> </>
)} )}
</Box> </Box>

189
src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
View File

@ -1,13 +1,6 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import { Box, Button, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
Box,
Button,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
@ -44,24 +37,16 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
<Button <Button
onClick={onClick} onClick={onClick}
variant="outlined" variant="outlined"
startIcon={ startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
<Icon
color={
isActive
? theme.palette.navbarbg.main
: theme.palette.brightPurple.main
}
/>
}
sx={{ sx={{
backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc", backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
borderRadius: 0, borderRadius: 0,
border: "none", border: "none",
color: isActive color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
p: "7px", p: "7px",
width: "auto", width: "40px",
height: "40px",
minWidth: 0, minWidth: 0,
"& .MuiButton-startIcon": { "& .MuiButton-startIcon": {
mr: 0, mr: 0,
@ -69,23 +54,21 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
}, },
"&:hover": { "&:hover": {
border: "none", border: "none",
borderColor: isActive borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
}, },
}} }}
/> />
); );
} }
export default function SettingOpytionsPict({ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictProps) {
totalIndex,
}: SettingOpytionsPictProps) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(985));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const debounced = useDebouncedCallback((value) => { const debounced = useDebouncedCallback((value) => {
let clonContent = listQuestions[quizId][totalIndex].content; let clonContent = listQuestions[quizId][totalIndex].content;
clonContent.innerName = value; clonContent.innerName = value;
@ -113,33 +96,43 @@ export default function SettingOpytionsPict({
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: isTablet ? "column" : null, flexDirection: isTablet ? "column" : null,
marginRight: isMobile ? "0px" : "30px", marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
}} }}
> >
<Box sx={{ pt: "20px", pb: "20px", pl: "20px" }}> <Box
<Typography sx={{ marginBottom: "15px" }}>Пропорции</Typography> sx={{
<Box pt: isMobile ? "25px" : "20px",
sx={{ pb: isMobile ? "25px" : "20px",
display: "flex", pl: "20px",
gap: "10px", pr: isFigmaTablte ? (isMobile ? "20px" : "0px") : "28px",
marginBottom: "20px", display: "flex",
}} flexDirection: "column",
> gap: "14px",
{PROPORTIONS.map(({ value, icon }, index) => ( width: "100%",
<SelectIconButton }}
key={index} >
onClick={() => updateProportions(value)} <Box sx={{ pb: isMobile ? "11px" : "6px" }}>
isActive={ <Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D", mb: isMobile ? "10px" : "14px" }}>
listQuestions[quizId][totalIndex].content.xy === value Пропорции
} </Typography>
Icon={icon} <Box
/> sx={{
))} display: "flex",
gap: "10px",
}}
>
{PROPORTIONS.map(({ value, icon }, index) => (
<SelectIconButton
key={index}
onClick={() => updateProportions(value)}
isActive={listQuestions[quizId][totalIndex].content.xy === value}
Icon={icon}
/>
))}
</Box>
</Box> </Box>
<Typography sx={{ marginBottom: "15px" }}> <Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>Настройки ответов</Typography>
Настройки ответов
</Typography>
<CustomCheckbox <CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }} sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
@ -181,47 +174,56 @@ export default function SettingOpytionsPict({
} }
/> />
</Box> </Box>
<Box sx={{ padding: "20px", minWidth: isMobile ? "100%" : "350px" }}>
<Typography sx={{ marginBottom: "15px" }}>Форма</Typography> <Box
<Box sx={{
sx={{ pt: isMobile ? "0px" : "20px",
display: "flex", pb: "20px",
gap: "10px", pl: isTablet ? "20px" : "",
marginBottom: "20px", pr: isFigmaTablte ? "30px" : "20px",
}} display: "flex",
> flexDirection: "column",
<SelectIconButton gap: isMobile ? "13px" : "14px",
onClick={() => width: "100%",
updateQuestionsList(quizId, totalIndex, { }}
content: { >
...listQuestions[quizId][totalIndex].content, <Box sx={{ pb: isMobile ? "11px" : "6px" }}>
format: "carousel", <Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D", mb: isMobile ? "10px" : "14px" }}>
}, Формат
}) </Typography>
} <Box
isActive={ sx={{
listQuestions[quizId][totalIndex].content.format === "carousel" display: "flex",
} gap: "10px",
Icon={FormatIcon2} }}
/> >
<SelectIconButton <SelectIconButton
onClick={() => onClick={() =>
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: { content: {
...listQuestions[quizId][totalIndex].content, ...listQuestions[quizId][totalIndex].content,
format: "masonry", format: "carousel",
}, },
}) })
} }
isActive={ isActive={listQuestions[quizId][totalIndex].content.format === "carousel"}
listQuestions[quizId][totalIndex].content.format === "masonry" Icon={FormatIcon2}
} />
Icon={FormatIcon1} <SelectIconButton
/> onClick={() =>
updateQuestionsList(quizId, totalIndex, {
content: {
...listQuestions[quizId][totalIndex].content,
format: "masonry",
},
})
}
isActive={listQuestions[quizId][totalIndex].content.format === "masonry"}
Icon={FormatIcon1}
/>
</Box>
</Box> </Box>
<Typography sx={{ marginBottom: "15px" }}> <Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>Настройки вопросов</Typography>
Настройки вопросов
</Typography>
<CustomCheckbox <CustomCheckbox
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
checked={listQuestions[quizId][totalIndex].content.required} checked={listQuestions[quizId][totalIndex].content.required}
@ -248,10 +250,7 @@ export default function SettingOpytionsPict({
}) })
} }
/> />
<Tooltip <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box> <Box>
<InfoIcon /> <InfoIcon />
</Box> </Box>

25
src/pages/Questions/OwnTextField/OwnTextField.tsx
View File

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography, Tooltip, useTheme } from "@mui/material"; import { Box, Typography, Tooltip, useTheme, useMediaQuery } from "@mui/material";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
@ -19,6 +19,9 @@ export default function OwnTextField({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isWrapperColumn = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const debounced = useDebouncedCallback((value) => { const debounced = useDebouncedCallback((value) => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.placeholder = value; clonContent.placeholder = value;
@ -36,15 +39,18 @@ export default function OwnTextField({ totalIndex }: Props) {
width: "auto", width: "auto",
maxWidth: "745px", maxWidth: "745px",
display: "flex", display: "flex",
padding: "20px", pb: "20px",
pl: "20px",
pr: "20px",
flexDirection: "column", flexDirection: "column",
gap: "20px", gap: isMobile ? "18px" : "20px",
}} }}
> >
<CustomTextField <CustomTextField
placeholder={"Пример ответа"} placeholder={"Пример ответа"}
text={listQuestions[quizId][totalIndex].content.placeholder} text={listQuestions[quizId][totalIndex].content.placeholder}
onChange={({ target }) => debounced(target.value)} onChange={({ target }) => debounced(target.value)}
sx={{ maxWidth: "640px", width: "100%" }}
/> />
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}> <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Typography <Typography
@ -55,23 +61,16 @@ export default function OwnTextField({ totalIndex }: Props) {
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
}} }}
> >
Пользователю будет дано поле для ввода значения{" "} Пользователю будет дано поле для ввода значения
</Typography> </Typography>
<Tooltip <Tooltip title="Будет использоваться для ввода значения." placement="top">
title="Будет использоваться для ввода значения."
placement="top"
>
<Box> <Box>
<InfoIcon /> <InfoIcon />
</Box> </Box>
</Tooltip> </Tooltip>
</Box> </Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<SwitchTextField switchState={switchState} totalIndex={totalIndex} /> <SwitchTextField switchState={switchState} totalIndex={totalIndex} />
</> </>
); );

49
src/pages/Questions/OwnTextField/settingTextField.tsx
View File

@ -35,14 +35,14 @@ const ANSWER_TYPES: Answer[] = [
{ name: "Только числа", value: "number" }, { name: "Только числа", value: "number" },
]; ];
export default function SettingTextField({ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) {
totalIndex,
}: SettingTextFieldProps) {
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const isWrapperColumn = useMediaQuery(theme.breakpoints.down(980)); const isWrapperColumn = useMediaQuery(theme.breakpoints.down(980));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const debounced = useDebouncedCallback((value) => { const debounced = useDebouncedCallback((value) => {
let clonContent = listQuestions[quizId][totalIndex].content; let clonContent = listQuestions[quizId][totalIndex].content;
clonContent.innerName = value; clonContent.innerName = value;
@ -58,15 +58,22 @@ export default function SettingTextField({
marginRight: isMobile ? "0px" : "50px", marginRight: isMobile ? "0px" : "50px",
}} }}
> >
<Box sx={{ padding: "20px" }}> <Box
<Typography>Настройки ответов</Typography> sx={{
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pl: "20px",
}}
>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D", marginBottom: "14px" }}>
Настройки ответов
</Typography>
<FormControl> <FormControl>
<RadioGroup <RadioGroup
sx={{ display: "flex", flexDirection: "column", gap: "14px", width: "100%" }}
aria-labelledby="demo-controlled-radio-buttons-group" aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group" name="controlled-radio-buttons-group"
value={ANSWER_TYPES.findIndex( value={ANSWER_TYPES.findIndex(({ value }) => listQuestions[quizId][totalIndex].content[value])}
({ value }) => listQuestions[quizId][totalIndex].content[value]
)}
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => { onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
const clonContent = { const clonContent = {
...listQuestions[quizId][totalIndex].content, ...listQuestions[quizId][totalIndex].content,
@ -83,21 +90,32 @@ export default function SettingTextField({
<FormControlLabel <FormControlLabel
key={index} key={index}
sx={{ sx={{
height: "26px",
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
"& .MuiRadio-root": { padding: "8px 9px" }, "& .MuiRadio-root": { padding: "8px 9px" },
}} }}
value={index} value={index}
control={ control={<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />}
<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
}
label={name} label={name}
/> />
))} ))}
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Box> </Box>
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}> <Box
<Typography>Настройки вопросов</Typography> sx={{
pt: isMobile ? "0px" : "20px",
pb: "20px",
pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
pr: isFigmaTablte ? "19px" : "20px",
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки вопросов
</Typography>
<CustomCheckbox <CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }} sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Автозаполнение адреса"} label={"Автозаполнение адреса"}
@ -134,10 +152,7 @@ export default function SettingTextField({
updateQuestionsList(quizId, totalIndex, { content: clonContent }); updateQuestionsList(quizId, totalIndex, { content: clonContent });
}} }}
/> />
<Tooltip <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Box> <Box>
<InfoIcon /> <InfoIcon />
</Box> </Box>

19
src/pages/Questions/answerOptions/AnswerOptions.tsx
View File

@ -1,7 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Box, Typography, Link, useTheme, useMediaQuery } from "@mui/material"; import { Box, Typography, Link, useTheme, useMediaQuery } from "@mui/material";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import SwitchAnswerOptions from "./switchAnswerOptions"; import SwitchAnswerOptions from "./switchAnswerOptions";
import { AnswerDraggableList } from "../AnswerDraggableList"; import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
@ -37,7 +37,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
return ( return (
<> <>
<Box sx={{ padding: "0 20px 20px 20px" }}> <Box sx={{ padding: "0 20px 0px 20px" }}>
{variants.length === 0 ? ( {variants.length === 0 ? (
<Typography <Typography
sx={{ sx={{
@ -58,14 +58,19 @@ export default function AnswerOptions({ totalIndex }: Props) {
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "10px", marginBottom: "17px",
marginTop: "10px",
}} }}
> >
<Link <Link
component="button" component="button"
variant="body2" variant="body2"
sx={{ color: theme.palette.brightPurple.main }} sx={{
color: theme.palette.brightPurple.main,
fontWeight: "400",
fontSize: "16px",
mr: "4px",
height: "19px",
}}
onClick={addNewAnswer} onClick={addNewAnswer}
> >
Добавьте ответ Добавьте ответ
@ -75,14 +80,14 @@ export default function AnswerOptions({ totalIndex }: Props) {
<Typography <Typography
sx={{ sx={{
fontWeight: 400, fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px", lineHeight: "21.33px",
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
fontSize: "16px",
}} }}
> >
или нажмите Enter или нажмите Enter
</Typography> </Typography>
<EnterIcon /> <EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
</> </>
)} )}
</Box> </Box>

64
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -1,11 +1,5 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
@ -21,6 +15,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(900)); const isTablet = useMediaQuery(theme.breakpoints.down(900));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const debounced = useDebouncedCallback((value) => { const debounced = useDebouncedCallback((value) => {
let clonContent = listQuestions[quizId][totalIndex].content; let clonContent = listQuestions[quizId][totalIndex].content;
@ -34,11 +29,23 @@ export default function ResponseSettings({ totalIndex }: Props) {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: isTablet ? "column" : "none", flexDirection: isTablet ? "column" : "none",
marginRight: isMobile ? "0" : "30px", marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
}} }}
> >
<Box sx={{ pt: "20px", pb: "20px", pl: "20px", display: "flex", flexDirection: "column" }}> <Box
<Typography>Настройки ответов</Typography> sx={{
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pl: "20px",
display: "flex",
flexDirection: "column",
gap: "14px",
width: "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки ответов
</Typography>
<CustomCheckbox <CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }} sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Длинный текстовый ответ"} label={"Длинный текстовый ответ"}
@ -75,8 +82,21 @@ export default function ResponseSettings({ totalIndex }: Props) {
}} }}
/> />
</Box> </Box>
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}> <Box
<Typography>Настройки вопросов</Typography> sx={{
pt: isMobile ? "0px" : "20px",
pb: "20px",
pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
pr: isFigmaTablte ? "19px" : "20px",
display: "flex",
flexDirection: "column",
gap: isMobile ? "13px" : "14px",
width: "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки вопросов
</Typography>
<CustomCheckbox <CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }} sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
@ -87,9 +107,9 @@ export default function ResponseSettings({ totalIndex }: Props) {
}); });
}} }}
/> />
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}> <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex" }}>
<CustomCheckbox <CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }} sx={{ mr: isMobile ? "0px" : "9px", height: isMobile ? "42px" : "26px", alignItems: "start" }}
label={"Внутреннее название вопроса"} label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck} checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={(e) => { handleChange={(e) => {
@ -105,14 +125,14 @@ export default function ResponseSettings({ totalIndex }: Props) {
}); });
}} }}
/> />
<Tooltip {isMobile ||
title="Будет отображаться как заголовок вопроса в приходящих заявках." (!isFigmaTablte && (
placement="top" <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
> <Box>
<Box> <InfoIcon />
<InfoIcon /> </Box>
</Box> </Tooltip>
</Tooltip> ))}
</Box> </Box>
{listQuestions[quizId][totalIndex].content.innerNameCheck && ( {listQuestions[quizId][totalIndex].content.innerNameCheck && (
<CustomTextField <CustomTextField

296
src/pages/Questions/branchingQuestions.tsx
View File

@ -14,17 +14,13 @@ import {
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { import { questionStore, resetSomeField, updateQuestionsList } from "@root/questions";
questionStore,
resetSomeField,
updateQuestionsList,
} from "@root/questions";
import { Select } from "./Select"; import { Select } from "./Select";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
import InfoIcon from "@icons/Info"; import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
type BranchingQuestionsProps = { type BranchingQuestionsProps = {
totalIndex: number; totalIndex: number;
@ -33,14 +29,9 @@ type BranchingQuestionsProps = {
const ACTIONS = ["Показать", "Скрыть"]; const ACTIONS = ["Показать", "Скрыть"];
const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"]; const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"]; const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
const CONDITIONS = [ const CONDITIONS = ["Все условия обязательны", "Обязательно хотя бы одно условие"];
"Все условия обязательны",
"Обязательно хотя бы одно условие",
];
export default function BranchingQuestions({ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsProps) {
totalIndex,
}: BranchingQuestionsProps) {
const [title, setTitle] = useState<string>("Заголовок вопроса"); const [title, setTitle] = useState<string>("Заголовок вопроса");
const [titleInputWidth, setTitleInputWidth] = useState<number>(0); const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
@ -138,9 +129,7 @@ export default function BranchingQuestions({
> >
<Select <Select
items={ACTIONS} items={ACTIONS}
activeItemIndex={ activeItemIndex={listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1}
listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1
}
sx={{ maxWidth: "140px" }} sx={{ maxWidth: "140px" }}
onChange={(action) => { onChange={(action) => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonContent = listQuestions[quizId][totalIndex].content;
@ -150,157 +139,126 @@ export default function BranchingQuestions({
}); });
}} }}
/> />
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>если в ответе на вопрос</Typography>
если в ответе на вопрос
</Typography>
</Box> </Box>
{listQuestions[quizId][totalIndex].content.rule.reqs.map( {listQuestions[quizId][totalIndex].content.rule.reqs.map((request, index) => (
(request, index) => ( <Box
key={index}
sx={{
padding: "20px",
borderRadius: "8px",
height: "100%",
bgcolor: "#F2F3F7",
}}
>
<Box <Box
key={index}
sx={{ sx={{
padding: "20px", display: "flex",
borderRadius: "8px", justifyContent: "space-between",
height: "100%", alignItems: "center",
bgcolor: "#F2F3F7", pb: "5px",
}} }}
> >
<Box <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Условие 1</Typography>
sx={{ <IconButton
display: "flex", sx={{ borderRadius: "6px", padding: "2px" }}
justifyContent: "space-between", onClick={() => {
alignItems: "center", const clonContent = listQuestions[quizId][totalIndex].content;
pb: "5px",
}}
>
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
Условие 1
</Typography>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
const clonContent =
listQuestions[quizId][totalIndex].content;
clonContent.rule.reqs.splice(index, 1);
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
>
<DeleteIcon color={"#4D4D4D"} />
</IconButton>
</Box>
<Select
empty
activeItemIndex={request.id ? Number(request.id) : -1}
items={STIPULATIONS}
onChange={(stipulation) => {
const clonContent =
listQuestions[quizId][totalIndex].content;
clonContent.rule.reqs[index] = {
id: String(
STIPULATIONS.findIndex((item) =>
item.includes(stipulation)
)
),
vars: request.vars,
};
clonContent.rule.reqs.splice(index, 1);
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
}); });
}} }}
sx={{ marginBottom: "15px" }} >
/> <DeleteIcon style={{ color: "#4D4D4D" }} />
{request.id && ( </IconButton>
<>
<Box
sx={{
display: "flex",
alignItems: "center",
pb: "10px",
}}
>
<Typography
sx={{ color: "#4D4D4D", fontWeight: "500" }}
>
Дан ответ
</Typography>
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
(Укажите один или несколько вариантов)
</Typography>
</Box>
<Select
empty
activeItemIndex={-1}
items={ANSWERS}
onChange={(answer) => {
const clonContent =
listQuestions[quizId][totalIndex].content;
const answerItemIndex = ANSWERS.findIndex(
(answerItem) => answerItem === answer
);
if (
!clonContent.rule.reqs[index].vars.includes(
answerItemIndex
)
) {
listQuestions[quizId][totalIndex].content.rule.reqs[
index
].vars.push(answerItemIndex);
}
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
sx={{
marginBottom: "10px",
".MuiSelect-select.MuiInputBase-input": {
color: "transparent",
},
}}
/>
<Box
sx={{
display: "flex",
gap: "10px",
}}
>
{listQuestions[quizId][totalIndex].content.rule.reqs[
index
].vars.map((item, varIndex) => (
<Chip
key={varIndex}
label={ANSWERS[item]}
variant="outlined"
onDelete={() => {
const clonContent =
listQuestions[quizId][totalIndex].content;
const removedItemIndex = clonContent.rule.reqs[
index
].vars.findIndex((varItem) => varItem === item);
clonContent.rule.reqs[index].vars.splice(
removedItemIndex,
1
);
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
/>
))}
</Box>
</>
)}
</Box> </Box>
) <Select
)} empty
activeItemIndex={request.id ? Number(request.id) : -1}
items={STIPULATIONS}
onChange={(stipulation) => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.rule.reqs[index] = {
id: String(STIPULATIONS.findIndex((item) => item.includes(stipulation))),
vars: request.vars,
};
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
sx={{ marginBottom: "15px" }}
/>
{request.id && (
<>
<Box
sx={{
display: "flex",
alignItems: "center",
pb: "10px",
}}
>
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Дан ответ</Typography>
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
(Укажите один или несколько вариантов)
</Typography>
</Box>
<Select
empty
activeItemIndex={-1}
items={ANSWERS}
onChange={(answer) => {
const clonContent = listQuestions[quizId][totalIndex].content;
const answerItemIndex = ANSWERS.findIndex((answerItem) => answerItem === answer);
if (!clonContent.rule.reqs[index].vars.includes(answerItemIndex)) {
listQuestions[quizId][totalIndex].content.rule.reqs[index].vars.push(answerItemIndex);
}
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
sx={{
marginBottom: "10px",
".MuiSelect-select.MuiInputBase-input": {
color: "transparent",
},
}}
/>
<Box
sx={{
display: "flex",
gap: "10px",
}}
>
{listQuestions[quizId][totalIndex].content.rule.reqs[index].vars.map((item, varIndex) => (
<Chip
key={varIndex}
label={ANSWERS[item]}
variant="outlined"
onDelete={() => {
const clonContent = listQuestions[quizId][totalIndex].content;
const removedItemIndex = clonContent.rule.reqs[index].vars.findIndex(
(varItem) => varItem === item
);
clonContent.rule.reqs[index].vars.splice(removedItemIndex, 1);
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
});
}}
/>
))}
</Box>
</>
)}
</Box>
))}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -327,12 +285,9 @@ export default function BranchingQuestions({
<FormControl> <FormControl>
<RadioGroup <RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group" aria-labelledby="demo-controlled-radio-buttons-group"
value={ value={listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0}
listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0
}
onChange={(_, value) => { onChange={(_, value) => {
const clonContent = const clonContent = listQuestions[quizId][totalIndex].content;
listQuestions[quizId][totalIndex].content;
clonContent.rule.or = Boolean(Number(value)); clonContent.rule.or = Boolean(Number(value));
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonContent,
@ -344,12 +299,7 @@ export default function BranchingQuestions({
key={index} key={index}
sx={{ color: theme.palette.grey2.main }} sx={{ color: theme.palette.grey2.main }}
value={index} value={index}
control={ control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
<Radio
checkedIcon={<RadioCheck />}
icon={<RadioIcon />}
/>
}
label={condition} label={condition}
/> />
))} ))}
@ -357,18 +307,10 @@ export default function BranchingQuestions({
</FormControl> </FormControl>
</Box> </Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}> <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<Button <Button variant="outlined" onClick={handleClose} sx={{ width: "100%", maxWidth: "130px" }}>
variant="outlined"
onClick={handleClose}
sx={{ width: "100%", maxWidth: "130px" }}
>
Отмена Отмена
</Button> </Button>
<Button <Button variant="contained" sx={{ width: "100%", maxWidth: "130px" }} onClick={handleClose}>
variant="contained"
sx={{ width: "100%", maxWidth: "130px" }}
onClick={handleClose}
>
Готово Готово
</Button> </Button>
</Box> </Box>

12
src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx
View File

@ -3,9 +3,9 @@ import { Box, IconButton, useTheme } from "@mui/material";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import SettingIcon from "@icons/questionsPage/settingIcon"; import SettingIcon from "@icons/questionsPage/settingIcon";
import Branching from "@icons/questionsPage/branching"; import Branching from "@icons/questionsPage/branching";
import HideIcon from "@icons/questionsPage/hideIcon"; import { HideIcon } from "@icons/questionsPage/hideIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon"; import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import StarIconPoints from "./StarIconsPoints"; import StarIconPoints from "./StarIconsPoints";
interface Props { interface Props {
@ -72,13 +72,13 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
}} }}
> >
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"}/> <HideIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<CopyIcon color={"#4D4D4D"}/> <CopyIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"}/> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>

31
src/pages/Result/DescriptionForm/DescriptionForm.tsx
View File

@ -7,9 +7,9 @@ import ButtonsOptionsForm from "./ButtinsOptionsForm";
import PriceButtons from "./PriceButton"; import PriceButtons from "./PriceButton";
import DiscountButtons from "./DiscountButtons"; import DiscountButtons from "./DiscountButtons";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "@icons/questionsPage/OneIcon"; import { OneIcon } from "@icons/questionsPage/OneIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import Info from "@icons/Info"; import Info from "@icons/Info";
import ImageAndVideoButtons from "./ImageAndVideoButtons"; import ImageAndVideoButtons from "./ImageAndVideoButtons";
@ -53,14 +53,11 @@ export const DescriptionForm = () => {
<ExpandMoreIcon /> <ExpandMoreIcon />
</IconButton> </IconButton>
<OneIcon /> <OneIcon />
<PointsIcon /> <PointsIcon style={{ color: "#9A9AAF" }} />
</Box> </Box>
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
<PriceButtons <PriceButtons ButtonsActive={buttonsActive} priceButtonsActive={priceButtonsActive} />
ButtonsActive={buttonsActive}
priceButtonsActive={priceButtonsActive}
/>
<DiscountButtons /> <DiscountButtons />
</Box> </Box>
@ -88,14 +85,11 @@ export const DescriptionForm = () => {
{priceButtonsType === "smooth" ? ( {priceButtonsType === "smooth" ? (
<Box sx={{ mb: "20px" }}> <Box sx={{ mb: "20px" }}>
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}> <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
<Typography <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
component={"h6"}
sx={{ weight: "500", fontSize: "18px" }}
>
Призыв к действию Призыв к действию
</Typography> </Typography>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"} /> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
</Box> </Box>
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
@ -133,17 +127,12 @@ export const DescriptionForm = () => {
</Button> </Button>
{forwarding ? ( {forwarding ? (
<Box sx={{ ml: "20px", mt: "-36px" }}> <Box sx={{ ml: "20px", mt: "-36px" }}>
<Box <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
sx={{ display: "flex", alignItems: "center", mb: "14xp" }} <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
>
<Typography
component={"h6"}
sx={{ weight: "500", fontSize: "18px" }}
>
Переадресация Переадресация
</Typography> </Typography>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"} /> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
<Info /> <Info />
</Box> </Box>

9
src/pages/Result/DescriptionForm/DiscountButtons.tsx
View File

@ -1,8 +1,9 @@
import DeleteIcon from "@icons/questionsPage/deleteIcon"; import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
export default function DiscountButtons() { export default function DiscountButtons() {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Box sx={{ ml: "40px" }}> <Box sx={{ ml: "40px" }}>
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}> <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
@ -10,7 +11,7 @@ export default function DiscountButtons() {
Скидка Скидка
</Typography> </Typography>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"}/> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
</Box> </Box>
<Box component="div" sx={{ mb: "20px" }}> <Box component="div" sx={{ mb: "20px" }}>

7
src/pages/Result/DescriptionForm/PriceButton.tsx
View File

@ -1,5 +1,6 @@
import {Box, Button, IconButton, SxProps, Theme, Typography} from "@mui/material"; import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [ const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
{ {
@ -67,7 +68,7 @@ export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Prop
Стоимость Стоимость
</Typography> </Typography>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}> <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"}/> <DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton> </IconButton>
</Box> </Box>
<Box component="div" sx={{ mb: "20px" }}> <Box component="div" sx={{ mb: "20px" }}>

69
src/pages/main.tsx
View File

@ -1,38 +1,39 @@
import Header from '@ui_kit/Header/Header'; import Header from "@ui_kit/Header/Header";
import Sidebar from '@ui_kit/Sidebar'; import Sidebar from "@ui_kit/Sidebar";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import {useTheme} from "@mui/material"; import { useTheme } from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull"; import HeaderFull from "@ui_kit/Header/HeaderFull";
interface Props{ interface Props {
sidebar: boolean, sidebar: boolean;
header?: boolean, header?: boolean;
page: JSX.Element page: JSX.Element;
} }
export default function Main ({sidebar, header, page}: Props) { export default function Main({ sidebar, header, page }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<> <>
{header ? <Header/> : <HeaderFull/>} {header ? <Header /> : <HeaderFull />}
<Box sx={{ <Box
display: 'flex' sx={{
}} display: "flex",
> }}
{sidebar ? <Sidebar/> : <></>} >
<Box {sidebar ? <Sidebar /> : <></>}
sx={{ <Box
background: theme.palette.background.default, sx={{
width: '100%', background: theme.palette.background.default,
padding: '25px', width: "100%",
height: 'calc(100vh - 80px)', padding: "25px",
overflow: 'auto', height: "calc(100vh - 80px)",
boxSizing: "border-box" overflow: "auto",
}} boxSizing: "border-box",
> }}
{page} >
</Box> {page}
</Box> </Box>
</> </Box>
) </>
} );
}

4
src/pages/startPage/StartPage.tsx
View File

@ -14,7 +14,6 @@ import { Burger } from "@icons/Burger";
import { PenaLogoIcon } from "@icons/PenaLogoIcon"; import { PenaLogoIcon } from "@icons/PenaLogoIcon";
import { SidebarMobile } from "./Sidebar/SidebarMobile"; import { SidebarMobile } from "./Sidebar/SidebarMobile";
export default function StartPage() { export default function StartPage() {
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore(); const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
const params = Number(useParams().quizId); const params = Number(useParams().quizId);
@ -25,7 +24,6 @@ export default function StartPage() {
const [mobileSidebar, setMobileSidebar] = React.useState<boolean>(false); const [mobileSidebar, setMobileSidebar] = React.useState<boolean>(false);
const handleNext = () => { const handleNext = () => {
updateQuizesList(params, { step: listQuizes[params].step + 1 }); updateQuizesList(params, { step: listQuizes[params].step + 1 });
}; };
@ -176,7 +174,7 @@ export default function StartPage() {
sx={{ sx={{
background: theme.palette.background.default, background: theme.palette.background.default,
width: "100%", width: "100%",
padding: "25px", padding: isMobile ? "16px" : "25px",
height: "calc(100vh - 80px)", height: "calc(100vh - 80px)",
overflow: "auto", overflow: "auto",
boxSizing: "border-box", boxSizing: "border-box",

29
src/ui_kit/CustomCheckbox.tsx
View File

@ -1,4 +1,4 @@
import { FormControlLabel, Checkbox, useTheme, Box } from "@mui/material"; import { FormControlLabel, Checkbox, useTheme, Box, useMediaQuery } from "@mui/material";
import React from "react"; import React from "react";
import type { SxProps } from "@mui/material"; import type { SxProps } from "@mui/material";
@ -12,15 +12,24 @@ interface Props {
export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) { export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return ( return (
<FormControlLabel <FormControlLabel
control={<Checkbox icon={<Icon />} checkedIcon={<CheckedIcon />} onChange={handleChange} checked={checked} />} control={
<Checkbox
sx={{ padding: "0px 13px 1px 11px" }}
disableRipple
icon={<Icon />}
checkedIcon={<CheckedIcon />}
onChange={handleChange}
checked={checked}
/>
}
label={label} label={label}
sx={{ sx={{
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
ml: "-9px", height: "26px",
userSelect: "none",
...sx, ...sx,
}} }}
/> />
@ -33,9 +42,9 @@ function Icon() {
return ( return (
<Box <Box
sx={{ sx={{
height: "26px", height: "24px",
width: "26px", width: "24px",
borderRadius: "8px", borderRadius: "6px",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.grey2.main}`, border: `1px solid ${theme.palette.grey2.main}`,
}} }}
@ -49,9 +58,9 @@ function CheckedIcon() {
return ( return (
<Box <Box
sx={{ sx={{
height: "26px", height: "24px",
width: "26px", width: "24px",
borderRadius: "8px", borderRadius: "6px",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",