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() {
return (
<svg
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
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"
strokeWidth="1.5"
strokeLinecap="round"
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>
);
}
import { FC, SVGProps } from "react";
export const MessageIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M12 12.0586H18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M12 15.0586H18" stroke="currentColor" 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";
interface Props {
color: string;
}
export default function CopyIcon({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<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>
);
}
export const CopyIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" 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="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.75 8.25H3.75V20.25H15.75V8.25Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

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

@ -1,26 +1,12 @@
import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
// interface Props {
// color: string;
// }
export default function OneIcon() {
return (
<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>
);
}
export const OneIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" 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>
);

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

@ -1,31 +1,31 @@
import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
// interface Props {
// color: string;
// }
export default function PointsIcon() {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "move"
}}
>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
<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"/>
<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 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"/>
<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"/>
</svg>
</Box>
);
}
export const PointsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"
/>
<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="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="currentColor"
/>
<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="currentColor"
/>
<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="currentColor"
/>
<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="currentColor"
/>
</svg>
);

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

@ -1,63 +1,24 @@
import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
interface Props {
color: string;
}
export default function DeleteIcon({ color = "#4D4D4D" }: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
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>
);
}
export const DeleteIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<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" />
<path d="M14.25 9.75V15.75" stroke="currentColor" 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="currentColor"
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="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

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 {
// color: string;
// }
export default function EnterIcon() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.5 9.75V12.75H7.5"
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>
);
}
export const EnterIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<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"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.75 10.5L7.5 12.75L9.75 15"
stroke="currentColor"
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="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

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

@ -1,27 +1,27 @@
import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
interface Props {
color: string;
}
export default function HideIcon({color}: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
<path d="M24 16L19.5 20L15 16" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
<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"/>
</svg>
</Box>
);
}
export const HideIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M24 16L19.5 20L15 16"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<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="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

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

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

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

@ -1,22 +1,14 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import { Draggable } from "react-beautiful-dnd";
import {
Box,
TextField,
FormControl,
InputAdornment,
IconButton,
useTheme,
useMediaQuery,
} from "@mui/material";
import { Box, TextField, FormControl, InputAdornment, IconButton, useTheme, useMediaQuery } from "@mui/material";
import { useDebouncedCallback } from "use-debounce";
import { questionStore, updateQuestionsList } from "@root/questions";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import MessageIcon from "@icons/messagIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { MessageIcon } from "@icons/messagIcon";
import Popover from "@mui/material/Popover";
import TextareaAutosize from "@mui/base/TextareaAutosize";
@ -32,13 +24,7 @@ type AnswerItemProps = {
icon?: ReactNode;
};
export const AnswerItem = ({
index,
totalIndex,
variants,
variant,
icon,
}: AnswerItemProps) => {
export const AnswerItem = ({ index, totalIndex, variants, variant, icon }: AnswerItemProps) => {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
const theme = useTheme();
@ -111,7 +97,7 @@ export const AnswerItem = ({
key={index}
fullWidth
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
defaultValue={variant.answer}
@ -121,32 +107,23 @@ export const AnswerItem = ({
multiline={listQuestions[quizId][totalIndex].content.largeCheck}
onChange={({ target }) => debounced(target.value)}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if (
event.code === "Enter" &&
!listQuestions[quizId][totalIndex].content.largeCheck
) {
if (event.code === "Enter" && !listQuestions[quizId][totalIndex].content.largeCheck) {
addNewAnswer();
}
}}
InputProps={{
startAdornment: (
<>
<InputAdornment
{...provided.dragHandleProps}
position="start"
>
<PointsIcon />
<InputAdornment {...provided.dragHandleProps} position="start">
<PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
</InputAdornment>
{icon && icon}
</>
),
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-describedby="my-popover-id"
onClick={handleClick}
>
<MessageIcon />
<IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id" onClick={handleClick}>
<MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
</IconButton>
<Popover
id="my-popover-id"
@ -160,26 +137,25 @@ export const AnswerItem = ({
placeholder="Подсказка для этого ответа"
value={variant.hints}
onChange={changeAnswerHint}
onKeyDown={(
event: KeyboardEvent<HTMLTextAreaElement>
) => event.stopPropagation()}
onKeyDown={(event: KeyboardEvent<HTMLTextAreaElement>) => event.stopPropagation()}
/>
</Popover>
<IconButton onClick={deleteAnswer}>
<DeleteIcon color={theme.palette.grey2.main} />
<IconButton sx={{ padding: "0" }} onClick={deleteAnswer}>
<DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
</IconButton>
</InputAdornment>
),
}}
sx={{
"& .MuiInputBase-root": {
padding: icon ? "5px 13.5px" : "13.5px",
borderRadius: "10px",
padding: icon ? "5px 13.5px" : "13.5px 13.5px 13.5px 9px",
borderRadius: "8px",
height: "48px",
background: "#ffffff",
},
}}
inputProps={{
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
}}
/>
</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 Branching from "../../assets/icons/questionsPage/branching";
import { Box, Typography, Tooltip, IconButton, useTheme, useMediaQuery } 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 { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions";
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
interface Props {
switchState: string;
@ -61,17 +62,19 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
background: "#F2F3F7",
background: "#f2f3f7",
height: isMobile ? "92px" : "70px",
}}
>
<Box
sx={{
padding: "20px",
padding: isMobile ? " 3px 12px 11px" : "20px",
display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap",
gap: "10px",
gap: "6px",
}}
>
{buttonSetting.map(({ icon, title, value, myFunc }) => (
@ -175,7 +178,6 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
>
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting>
</Box>
<Box
sx={{
@ -184,13 +186,13 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
}}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"} />
<HideIcon style={{ color: "#4D4D4D" }} />
</IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => copyQuestion(quizId, totalIndex)}>
<CopyIcon color={"#4D4D4D"} />
<CopyIcon style={{ color: "#4D4D4D" }} />
</IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(quizId, totalIndex)}>
<DeleteIcon color={"#4D4D4D"} />
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
</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 Clue from "../../assets/icons/questionsPage/clue";
import Branching from "../../assets/icons/questionsPage/branching";
import {
Box,
IconButton,
Tooltip,
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 { Box, IconButton, Tooltip, 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 { useParams } from "react-router-dom";
import {
questionStore,
copyQuestion,
removeQuestion,
resetSomeField,
} from "@root/questions";
import { questionStore, copyQuestion, removeQuestion, resetSomeField } from "@root/questions";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
import "./ButtonsOptionsAndPict.css";
interface Props {
@ -36,11 +23,7 @@ interface Props {
totalIndex: number;
}
export default function ButtonsOptionsAndPict({
SSHC,
switchState,
totalIndex,
}: Props) {
export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
const [buttonHover, setButtonHover] = useState<string>("");
const quizId = Number(useParams().quizId);
const { openedModalSettings } = questionStore();
@ -57,17 +40,19 @@ export default function ButtonsOptionsAndPict({
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
background: "#f2f3f7",
height: isMobile ? "92px" : "70px",
}}
>
<Box
sx={{
padding: "20px",
padding: isMobile ? " 3px 12px 11px" : "20px",
display: "flex",
flexWrap: isMobile ? "wrap" : "nowrap",
gap: "10px",
gap: "6px",
}}
>
<MiniButtonSetting
@ -77,17 +62,13 @@ export default function ButtonsOptionsAndPict({
SSHC("setting");
}}
sx={{
maxWidth: "104px",
minWidth: isIconMobile ? "30px" : "64px",
height: "30px",
backgroundColor:
switchState === "setting"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": {
color:
switchState === "setting" ? theme.palette.grey3.main : null,
color: switchState === "setting" ? theme.palette.grey3.main : null,
},
}}
>
@ -100,7 +81,7 @@ export default function ButtonsOptionsAndPict({
: theme.palette.grey3.main
}
/>
{isIconMobile ? null : " Настройки"}
{isIconMobile ? null : "Настройки"}
</MiniButtonSetting>
<MiniButtonSetting
onMouseEnter={() => setButtonHover("help")}
@ -110,13 +91,10 @@ export default function ButtonsOptionsAndPict({
}}
sx={{
minWidth: isIconMobile ? "30px" : "64px",
maxWidth: "102px",
height: "30px",
backgroundColor:
switchState === "help"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": {
color: switchState === "help" ? theme.palette.grey3.main : null,
},
@ -131,7 +109,7 @@ export default function ButtonsOptionsAndPict({
: theme.palette.grey3.main
}
/>
{isIconMobile ? null : " Помощь"}
{isIconMobile ? null : "Подсказка"}
</MiniButtonSetting>
<Tooltip
arrow
@ -148,9 +126,7 @@ export default function ButtonsOptionsAndPict({
>
Будет показан при условии
</Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
Название
</Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>Название</Typography>
<Typography
sx={{
fontWeight: "bold",
@ -160,9 +136,7 @@ export default function ButtonsOptionsAndPict({
>
Условие 1, Условие 2
</Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
Все условия обязательны
</Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>Все условия обязательны</Typography>
</Box>
}
>
@ -175,18 +149,12 @@ export default function ButtonsOptionsAndPict({
}}
sx={{
height: "30px",
maxWidth: "103px",
minWidth: isIconMobile ? "30px" : "64px",
backgroundColor:
switchState === "branching"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main,
backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": {
color:
switchState === "branching" ? theme.palette.grey3.main : null,
color: switchState === "branching" ? theme.palette.grey3.main : null,
},
}}
>
@ -210,13 +178,10 @@ export default function ButtonsOptionsAndPict({
}}
sx={{
height: "30px",
maxWidth: "123px",
minWidth: isIconMobile ? "30px" : "64px",
backgroundColor:
switchState === "image"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
backgroundColor: switchState === "image" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
"&:hover": {
color: switchState === "image" ? theme.palette.grey3.main : null,
},
@ -264,30 +229,26 @@ export default function ButtonsOptionsAndPict({
>
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting>
</Box>
<Box
sx={{
padding: "20px",
}}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"} />
<IconButton sx={{ borderRadius: "6px", padding: "0px 2px" }}>
<HideIcon style={{ color: "#4D4D4D" }} />
</IconButton>
<IconButton sx={{ borderRadius: "6px" }} onClick={() => copyQuestion(quizId, totalIndex)}>
<CopyIcon style={{ color: "#4D4D4D" }} />
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => copyQuestion(quizId, totalIndex)}
>
<CopyIcon color={"#4D4D4D"} />
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
sx={{ borderRadius: "6px", padding: " 0px 2px" }}
onClick={() => removeQuestion(quizId, totalIndex)}
>
<DeleteIcon color={"#4D4D4D"} />
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
</Box>
<ReallyChangingModal opened={openedReallyChangingModal} onClose={() => setOpenedReallyChangingModal(false)} />
<ReallyChangingModal opened={openedReallyChangingModal} onClose={() => setOpenedReallyChangingModal(false)} />
</Box>
);
}

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

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

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

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

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

@ -1,11 +1,5 @@
import { useParams } from "react-router-dom";
import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
import { useDebouncedCallback } from "use-debounce";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
@ -21,6 +15,9 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
const { listQuestions } = questionStore();
const theme = useTheme();
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 debounced = useDebouncedCallback((value) => {
let clonContent = listQuestions[quizId][totalIndex].content;
@ -33,11 +30,24 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
sx={{
display: "flex",
justifyContent: "space-between",
flexDirection: isWrappColumn ? "column" : null,
flexDirection: isWrappColumn ? "column" : "none",
}}
>
<Box sx={{ pt: "20px", pl: "20px", pb: "20px" }}>
<Typography>Настройки ответов</Typography>
<Box
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
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Можно несколько"}
@ -61,14 +71,19 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
</Box>
<Box
sx={{
padding: isWrappColumn
? "0px 20px 20px 20px "
: "20px 20px 20px 20px ",
minWidth: isWrappColumn ? null : "350px",
marginRight: "30px",
pt: isMobile ? "0px" : "20px",
pb: "20px",
pl: isTablet ? "20px" : "",
pr: isFigmaTablte ? "30px" : "20px",
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
label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required}
@ -93,10 +108,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
<Box>
<InfoIcon />
</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 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 SwitchOptionsAndPict from "./switchOptionsAndPict";
import React from "react";
import { questionStore, updateQuestionsList } from "@root/questions";
import { ImageAddIcons } from "@icons/ImageAddIcons";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import MessageIcon from "@icons/messagIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { MessageIcon } from "@icons/messagIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
interface Props {
totalIndex: number;
@ -30,8 +41,17 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
return (
<>
<Box sx={{ padding: "20px" }}>
<Box sx={{ paddingBottom: "25px" }}>
<Box sx={{ pl: "20px", pr: "20px" }}>
<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) => (
<ButtonBase
component="label"
@ -40,7 +60,6 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
cursor: "pointer",
alignItems: "center",
justifyContent: "flex-start",
marginBottom: "15px",
}}
>
<input
@ -60,18 +79,47 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
multiple
type="file"
/>
<AddImage />
<Typography
sx={{
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
<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
sx={{
padding: "0 0 0 20px",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
}}
>
Добавьте ответ
</Typography>
</Box>
</ButtonBase>
))}
<Box
@ -91,21 +139,51 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
startAdornment: (
<>
<InputAdornment position="start">
<PointsIcon />
<PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
</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: (
<InputAdornment position="end">
<IconButton aria-describedby="my-popover-id">
<MessageIcon />
<IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
<MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
</IconButton>
<Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
<TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
</Popover>
<IconButton>
<DeleteIcon color={theme.palette.grey2.main} />
<IconButton sx={{ padding: "0" }}>
<DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
</IconButton>
</InputAdornment>
),
@ -115,6 +193,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
padding: "13.5px",
borderRadius: "10px",
background: "#ffffff",
height: "48px",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
@ -148,18 +227,23 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
</Box>
)}
</Box>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
marginBottom: "17px",
}}
>
<Link
component="button"
variant="body2"
sx={{ color: theme.palette.brightPurple.main }}
onClick={() => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.variants.push({ answer: "", hints: "" });
updateQuestionsList(quizId, totalIndex, { content: clonContent });
sx={{
color: theme.palette.brightPurple.main,
fontWeight: "400",
fontSize: "16px",
mr: "4px",
height: "19px",
}}
>
Добавьте ответ
@ -169,14 +253,14 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
<Typography
sx={{
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
color: theme.palette.grey2.main,
fontSize: "16px",
}}
>
или нажмите Enter
</Typography>
<EnterIcon />
<EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
</>
)}
</Box>

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import { useState } from "react";
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 CustomTextField from "@ui_kit/CustomTextField";
@ -19,6 +19,9 @@ export default function OwnTextField({ totalIndex }: Props) {
const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore();
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 clonContent = listQuestions[quizId][totalIndex].content;
clonContent.placeholder = value;
@ -36,15 +39,18 @@ export default function OwnTextField({ totalIndex }: Props) {
width: "auto",
maxWidth: "745px",
display: "flex",
padding: "20px",
pb: "20px",
pl: "20px",
pr: "20px",
flexDirection: "column",
gap: "20px",
gap: isMobile ? "18px" : "20px",
}}
>
<CustomTextField
placeholder={"Пример ответа"}
text={listQuestions[quizId][totalIndex].content.placeholder}
onChange={({ target }) => debounced(target.value)}
sx={{ maxWidth: "640px", width: "100%" }}
/>
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Typography
@ -55,23 +61,16 @@ export default function OwnTextField({ totalIndex }: Props) {
color: theme.palette.grey2.main,
}}
>
Пользователю будет дано поле для ввода значения{" "}
Пользователю будет дано поле для ввода значения
</Typography>
<Tooltip
title="Будет использоваться для ввода значения."
placement="top"
>
<Tooltip title="Будет использоваться для ввода значения." placement="top">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
totalIndex={totalIndex}
/>
<ButtonsOptions switchState={switchState} SSHC={SSHC} 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" },
];
export default function SettingTextField({
totalIndex,
}: SettingTextFieldProps) {
export default function SettingTextField({ totalIndex }: SettingTextFieldProps) {
const { listQuestions } = questionStore();
const quizId = Number(useParams().quizId);
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) => {
let clonContent = listQuestions[quizId][totalIndex].content;
clonContent.innerName = value;
@ -58,15 +58,22 @@ export default function SettingTextField({
marginRight: isMobile ? "0px" : "50px",
}}
>
<Box sx={{ padding: "20px" }}>
<Typography>Настройки ответов</Typography>
<Box
sx={{
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pl: "20px",
}}
>
<Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D", marginBottom: "14px" }}>
Настройки ответов
</Typography>
<FormControl>
<RadioGroup
sx={{ display: "flex", flexDirection: "column", gap: "14px", width: "100%" }}
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={ANSWER_TYPES.findIndex(
({ value }) => listQuestions[quizId][totalIndex].content[value]
)}
value={ANSWER_TYPES.findIndex(({ value }) => listQuestions[quizId][totalIndex].content[value])}
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
const clonContent = {
...listQuestions[quizId][totalIndex].content,
@ -83,21 +90,32 @@ export default function SettingTextField({
<FormControlLabel
key={index}
sx={{
height: "26px",
color: theme.palette.grey2.main,
"& .MuiRadio-root": { padding: "8px 9px" },
}}
value={index}
control={
<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
}
control={<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />}
label={name}
/>
))}
</RadioGroup>
</FormControl>
</Box>
<Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
<Typography>Настройки вопросов</Typography>
<Box
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
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Автозаполнение адреса"}
@ -134,10 +152,7 @@ export default function SettingTextField({
updateQuestionsList(quizId, totalIndex, { content: clonContent });
}}
/>
<Tooltip
title="Будет отображаться как заголовок вопроса в приходящих заявках."
placement="top"
>
<Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
<Box>
<InfoIcon />
</Box>

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

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

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

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

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

@ -14,17 +14,13 @@ import {
Typography,
useTheme,
} from "@mui/material";
import {
questionStore,
resetSomeField,
updateQuestionsList,
} from "@root/questions";
import { questionStore, resetSomeField, updateQuestionsList } from "@root/questions";
import { Select } from "./Select";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
type BranchingQuestionsProps = {
totalIndex: number;
@ -33,14 +29,9 @@ type BranchingQuestionsProps = {
const ACTIONS = ["Показать", "Скрыть"];
const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
const CONDITIONS = [
"Все условия обязательны",
"Обязательно хотя бы одно условие",
];
const CONDITIONS = ["Все условия обязательны", "Обязательно хотя бы одно условие"];
export default function BranchingQuestions({
totalIndex,
}: BranchingQuestionsProps) {
export default function BranchingQuestions({ totalIndex }: BranchingQuestionsProps) {
const [title, setTitle] = useState<string>("Заголовок вопроса");
const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
const quizId = Number(useParams().quizId);
@ -138,9 +129,7 @@ export default function BranchingQuestions({
>
<Select
items={ACTIONS}
activeItemIndex={
listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1
}
activeItemIndex={listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1}
sx={{ maxWidth: "140px" }}
onChange={(action) => {
const clonContent = listQuestions[quizId][totalIndex].content;
@ -150,157 +139,126 @@ export default function BranchingQuestions({
});
}}
/>
<Typography sx={{ color: theme.palette.grey2.main }}>
если в ответе на вопрос
</Typography>
<Typography sx={{ color: theme.palette.grey2.main }}>если в ответе на вопрос</Typography>
</Box>
{listQuestions[quizId][totalIndex].content.rule.reqs.map(
(request, index) => (
{listQuestions[quizId][totalIndex].content.rule.reqs.map((request, index) => (
<Box
key={index}
sx={{
padding: "20px",
borderRadius: "8px",
height: "100%",
bgcolor: "#F2F3F7",
}}
>
<Box
key={index}
sx={{
padding: "20px",
borderRadius: "8px",
height: "100%",
bgcolor: "#F2F3F7",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
pb: "5px",
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
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,
};
<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,
});
}}
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>
</>
)}
>
<DeleteIcon style={{ 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,
};
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
sx={{
display: "flex",
@ -327,12 +285,9 @@ export default function BranchingQuestions({
<FormControl>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
value={
listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0
}
value={listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0}
onChange={(_, value) => {
const clonContent =
listQuestions[quizId][totalIndex].content;
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.rule.or = Boolean(Number(value));
updateQuestionsList(quizId, totalIndex, {
content: clonContent,
@ -344,12 +299,7 @@ export default function BranchingQuestions({
key={index}
sx={{ color: theme.palette.grey2.main }}
value={index}
control={
<Radio
checkedIcon={<RadioCheck />}
icon={<RadioIcon />}
/>
}
control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
label={condition}
/>
))}
@ -357,18 +307,10 @@ export default function BranchingQuestions({
</FormControl>
</Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<Button
variant="outlined"
onClick={handleClose}
sx={{ width: "100%", maxWidth: "130px" }}
>
<Button variant="outlined" onClick={handleClose} sx={{ width: "100%", maxWidth: "130px" }}>
Отмена
</Button>
<Button
variant="contained"
sx={{ width: "100%", maxWidth: "130px" }}
onClick={handleClose}
>
<Button variant="contained" sx={{ width: "100%", maxWidth: "130px" }} onClick={handleClose}>
Готово
</Button>
</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 SettingIcon from "@icons/questionsPage/settingIcon";
import Branching from "@icons/questionsPage/branching";
import HideIcon from "@icons/questionsPage/hideIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import { HideIcon } from "@icons/questionsPage/hideIcon";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import StarIconPoints from "./StarIconsPoints";
interface Props {
@ -72,13 +72,13 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
}}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"}/>
<HideIcon style={{ color: "#4D4D4D" }} />
</IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<CopyIcon color={"#4D4D4D"}/>
<CopyIcon style={{ color: "#4D4D4D" }} />
</IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"}/>
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
</Box>
</Box>

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

@ -7,9 +7,9 @@ import ButtonsOptionsForm from "./ButtinsOptionsForm";
import PriceButtons from "./PriceButton";
import DiscountButtons from "./DiscountButtons";
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "@icons/questionsPage/OneIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import { OneIcon } from "@icons/questionsPage/OneIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import Info from "@icons/Info";
import ImageAndVideoButtons from "./ImageAndVideoButtons";
@ -53,14 +53,11 @@ export const DescriptionForm = () => {
<ExpandMoreIcon />
</IconButton>
<OneIcon />
<PointsIcon />
<PointsIcon style={{ color: "#9A9AAF" }} />
</Box>
<Box sx={{ display: "flex" }}>
<PriceButtons
ButtonsActive={buttonsActive}
priceButtonsActive={priceButtonsActive}
/>
<PriceButtons ButtonsActive={buttonsActive} priceButtonsActive={priceButtonsActive} />
<DiscountButtons />
</Box>
@ -88,14 +85,11 @@ export const DescriptionForm = () => {
{priceButtonsType === "smooth" ? (
<Box sx={{ mb: "20px" }}>
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
<Typography
component={"h6"}
sx={{ weight: "500", fontSize: "18px" }}
>
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
Призыв к действию
</Typography>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"} />
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
</Box>
<Box sx={{ display: "flex" }}>
@ -133,17 +127,12 @@ export const DescriptionForm = () => {
</Button>
{forwarding ? (
<Box sx={{ ml: "20px", mt: "-36px" }}>
<Box
sx={{ display: "flex", alignItems: "center", mb: "14xp" }}
>
<Typography
component={"h6"}
sx={{ weight: "500", fontSize: "18px" }}
>
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
Переадресация
</Typography>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"} />
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
<Info />
</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() {
const theme = useTheme();
const theme = useTheme();
return (
<Box sx={{ ml: "40px" }}>
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
@ -10,7 +11,7 @@ export default function DiscountButtons() {
Скидка
</Typography>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"}/>
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
</Box>
<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 DeleteIcon from "@icons/questionsPage/deleteIcon";
import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
{
@ -67,7 +68,7 @@ export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Prop
Стоимость
</Typography>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<DeleteIcon color={"#4D4D4D"}/>
<DeleteIcon style={{ color: "#4D4D4D" }} />
</IconButton>
</Box>
<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 Sidebar from '@ui_kit/Sidebar';
import Box from '@mui/material/Box';
import {useTheme} from "@mui/material";
import Header from "@ui_kit/Header/Header";
import Sidebar from "@ui_kit/Sidebar";
import Box from "@mui/material/Box";
import { useTheme } from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";
interface Props{
sidebar: boolean,
header?: boolean,
page: JSX.Element
interface Props {
sidebar: boolean;
header?: boolean;
page: JSX.Element;
}
export default function Main ({sidebar, header, page}: Props) {
const theme = useTheme();
return (
<>
{header ? <Header/> : <HeaderFull/>}
<Box sx={{
display: 'flex'
}}
>
{sidebar ? <Sidebar/> : <></>}
<Box
sx={{
background: theme.palette.background.default,
width: '100%',
padding: '25px',
height: 'calc(100vh - 80px)',
overflow: 'auto',
boxSizing: "border-box"
}}
>
{page}
</Box>
</Box>
</>
)
}
export default function Main({ sidebar, header, page }: Props) {
const theme = useTheme();
return (
<>
{header ? <Header /> : <HeaderFull />}
<Box
sx={{
display: "flex",
}}
>
{sidebar ? <Sidebar /> : <></>}
<Box
sx={{
background: theme.palette.background.default,
width: "100%",
padding: "25px",
height: "calc(100vh - 80px)",
overflow: "auto",
boxSizing: "border-box",
}}
>
{page}
</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 { SidebarMobile } from "./Sidebar/SidebarMobile";
export default function StartPage() {
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
const params = Number(useParams().quizId);
@ -25,7 +24,6 @@ export default function StartPage() {
const [mobileSidebar, setMobileSidebar] = React.useState<boolean>(false);
const handleNext = () => {
updateQuizesList(params, { step: listQuizes[params].step + 1 });
};
@ -176,7 +174,7 @@ export default function StartPage() {
sx={{
background: theme.palette.background.default,
width: "100%",
padding: "25px",
padding: isMobile ? "16px" : "25px",
height: "calc(100vh - 80px)",
overflow: "auto",
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 type { SxProps } from "@mui/material";
@ -12,15 +12,24 @@ interface Props {
export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<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}
sx={{
color: theme.palette.grey2.main,
ml: "-9px",
userSelect: "none",
height: "26px",
...sx,
}}
/>
@ -33,9 +42,9 @@ function Icon() {
return (
<Box
sx={{
height: "26px",
width: "26px",
borderRadius: "8px",
height: "24px",
width: "24px",
borderRadius: "6px",
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.grey2.main}`,
}}
@ -49,9 +58,9 @@ function CheckedIcon() {
return (
<Box
sx={{
height: "26px",
width: "26px",
borderRadius: "8px",
height: "24px",
width: "24px",
borderRadius: "6px",
display: "flex",
justifyContent: "center",
alignItems: "center",