diff --git a/src/assets/LandingPict/calendarIcon.tsx b/src/assets/LandingPict/calendarIcon.tsx index 19653871..8e94dc97 100644 --- a/src/assets/LandingPict/calendarIcon.tsx +++ b/src/assets/LandingPict/calendarIcon.tsx @@ -1,35 +1,81 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function CalendarIcon({color}:Props) { - - return ( - - - - - - - - - - - - - - - - ); -} \ No newline at end of file +export default function CalendarIcon({ color }: Props) { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/src/assets/LandingPict/notebook.tsx b/src/assets/LandingPict/notebook.tsx index 10083733..1e925a61 100644 --- a/src/assets/LandingPict/notebook.tsx +++ b/src/assets/LandingPict/notebook.tsx @@ -1,192 +1,535 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function Notebook({color}:Props) { - - return ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/assets/LandingPict/youtobeIcon.tsx b/src/assets/LandingPict/youtobeIcon.tsx index 4419cb3d..3ed6def5 100644 --- a/src/assets/LandingPict/youtobeIcon.tsx +++ b/src/assets/LandingPict/youtobeIcon.tsx @@ -1,57 +1,109 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; - width?: string; + color?: string; + width?: string; } -export default function YoutobeIcon({color, width}:Props) { - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} \ No newline at end of file +export default function YoutobeIcon({ color, width }: Props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/assets/icons/ContactFormIcon/NameIcon.tsx b/src/assets/icons/ContactFormIcon/NameIcon.tsx index d209df2a..8fafed27 100644 --- a/src/assets/icons/ContactFormIcon/NameIcon.tsx +++ b/src/assets/icons/ContactFormIcon/NameIcon.tsx @@ -25,7 +25,7 @@ export default function NameIcon({ color }: Props) { diff --git a/src/assets/icons/PenaLogoIcon.tsx b/src/assets/icons/PenaLogoIcon.tsx index 0641f00f..a52a052a 100644 --- a/src/assets/icons/PenaLogoIcon.tsx +++ b/src/assets/icons/PenaLogoIcon.tsx @@ -1,16 +1,34 @@ import { FC, SVGProps } from "react"; export const PenaLogoIcon: FC> = (props) => ( - - + + - - + + ; +} + +export default function ResizeIcon({ sx }: Props) { + return ( + + + + + + ); +} diff --git a/src/assets/icons/VkIcon.tsx b/src/assets/icons/VkIcon.tsx index f078cdfe..c6fdebc9 100644 --- a/src/assets/icons/VkIcon.tsx +++ b/src/assets/icons/VkIcon.tsx @@ -31,7 +31,7 @@ export default function VkIcon({ color, bgcolor }: Props) { d="M19.9324 24.087V20.4741C22.3592 20.8441 23.1264 22.7539 24.6716 24.087H28.611C27.6261 21.8882 26.1566 19.9406 24.3125 18.3901C25.7272 16.4422 27.229 14.6085 27.9635 11.8281H24.3833C22.9794 13.9556 22.2395 16.4476 19.9324 18.0909V11.8281H14.7361L15.9767 13.3625V18.8309C13.9635 18.5969 12.6032 14.9132 11.1287 11.8281H7.39062C8.75091 15.996 11.6129 25.1426 19.9324 24.087Z" stroke={color} strokeWidth="1.5" - stroke-miterlimit="10" + strokeMiterlimit="10" /> diff --git a/src/assets/icons/questionsPage/addEmoji.tsx b/src/assets/icons/questionsPage/addEmoji.tsx index cc8bc4d4..4d88f669 100644 --- a/src/assets/icons/questionsPage/addEmoji.tsx +++ b/src/assets/icons/questionsPage/addEmoji.tsx @@ -37,9 +37,9 @@ export default function AddEmoji() { diff --git a/src/assets/icons/questionsPage/answerGroup.tsx b/src/assets/icons/questionsPage/answerGroup.tsx index 4b17fcb9..d23247b2 100644 --- a/src/assets/icons/questionsPage/answerGroup.tsx +++ b/src/assets/icons/questionsPage/answerGroup.tsx @@ -20,22 +20,22 @@ export default function AnswerGroup({ color, sx }: Props) { diff --git a/src/assets/icons/questionsPage/image.tsx b/src/assets/icons/questionsPage/image.tsx index cccdcfd7..536b9437 100644 --- a/src/assets/icons/questionsPage/image.tsx +++ b/src/assets/icons/questionsPage/image.tsx @@ -30,16 +30,16 @@ const Image: FC = ({ onClick, sx }) => { diff --git a/src/constants/base.ts b/src/constants/base.ts index 63e491e0..2660041c 100644 --- a/src/constants/base.ts +++ b/src/constants/base.ts @@ -4,6 +4,7 @@ export const QUIZ_QUESTION_BASE: Omit = { title: "", type: "nonselected", expanded: true, + openedModalSettings: false, required: false, deleted: false, deleteTimeoutId: 0, diff --git a/src/model/questionTypes/shared.ts b/src/model/questionTypes/shared.ts index c5fd91a5..b3761dbb 100644 --- a/src/model/questionTypes/shared.ts +++ b/src/model/questionTypes/shared.ts @@ -48,6 +48,7 @@ export interface QuizQuestionBase { title: string; type: string; expanded: boolean; + openedModalSettings: boolean; required: boolean; deleted: boolean; deleteTimeoutId: number; diff --git a/src/pages/Landing/FooterLanding.tsx b/src/pages/Landing/FooterLanding.tsx index 2ee291aa..9d478029 100644 --- a/src/pages/Landing/FooterLanding.tsx +++ b/src/pages/Landing/FooterLanding.tsx @@ -1,83 +1,134 @@ -import React from 'react'; +import React from "react"; import Box from "@mui/material/Box"; -import Typography from '@mui/material/Typography'; +import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import PenaLogo from "../../ui_kit/PenaLogo"; -import SectionStyled from './SectionStyled'; -import {styled} from "@mui/material/styles"; -import {useMediaQuery, useTheme} from "@mui/material"; - +import SectionStyled from "./SectionStyled"; +import { styled } from "@mui/material/styles"; +import { useMediaQuery, useTheme } from "@mui/material"; export default function Component() { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); - const isTablet = useMediaQuery(theme.breakpoints.down(1000)) - return( - - - - - - - - - - - - - - - - ООО Пена © 2023 - + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + return ( + + + + + + + + + + + + + + + + + ООО Пена © 2023 + + - - - - - - - - ) -} \ No newline at end of file + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/DoneIcon.tsx b/src/pages/Landing/images/icons/DoneIcon.tsx index 6e94c039..ea8c05d7 100644 --- a/src/pages/Landing/images/icons/DoneIcon.tsx +++ b/src/pages/Landing/images/icons/DoneIcon.tsx @@ -1,34 +1,47 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - - ) -}; \ No newline at end of file +export default function ({ color }: Props) { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group133.tsx b/src/pages/Landing/images/icons/Group133.tsx index b84ed037..5f8830d0 100644 --- a/src/pages/Landing/images/icons/Group133.tsx +++ b/src/pages/Landing/images/icons/Group133.tsx @@ -1,32 +1,53 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group134.tsx b/src/pages/Landing/images/icons/Group134.tsx index 1961fd6f..38675b54 100644 --- a/src/pages/Landing/images/icons/Group134.tsx +++ b/src/pages/Landing/images/icons/Group134.tsx @@ -1,30 +1,45 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group135.tsx b/src/pages/Landing/images/icons/Group135.tsx index 7435c774..ddfbafcb 100644 --- a/src/pages/Landing/images/icons/Group135.tsx +++ b/src/pages/Landing/images/icons/Group135.tsx @@ -1,34 +1,61 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group136.tsx b/src/pages/Landing/images/icons/Group136.tsx index d38d2c5a..98a89dcf 100644 --- a/src/pages/Landing/images/icons/Group136.tsx +++ b/src/pages/Landing/images/icons/Group136.tsx @@ -1,30 +1,51 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group137.tsx b/src/pages/Landing/images/icons/Group137.tsx index 941cc17e..9e8c079a 100644 --- a/src/pages/Landing/images/icons/Group137.tsx +++ b/src/pages/Landing/images/icons/Group137.tsx @@ -1,29 +1,50 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group138.tsx b/src/pages/Landing/images/icons/Group138.tsx index f83660ac..04027c8b 100644 --- a/src/pages/Landing/images/icons/Group138.tsx +++ b/src/pages/Landing/images/icons/Group138.tsx @@ -1,33 +1,78 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group139.tsx b/src/pages/Landing/images/icons/Group139.tsx index fd779af7..405666f9 100644 --- a/src/pages/Landing/images/icons/Group139.tsx +++ b/src/pages/Landing/images/icons/Group139.tsx @@ -1,39 +1,120 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group140.tsx b/src/pages/Landing/images/icons/Group140.tsx index e7b81255..154f9786 100644 --- a/src/pages/Landing/images/icons/Group140.tsx +++ b/src/pages/Landing/images/icons/Group140.tsx @@ -1,30 +1,54 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group141.tsx b/src/pages/Landing/images/icons/Group141.tsx index 0c71ac1a..1b6f215c 100644 --- a/src/pages/Landing/images/icons/Group141.tsx +++ b/src/pages/Landing/images/icons/Group141.tsx @@ -1,28 +1,45 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group142.tsx b/src/pages/Landing/images/icons/Group142.tsx index 0306cdba..244bd14b 100644 --- a/src/pages/Landing/images/icons/Group142.tsx +++ b/src/pages/Landing/images/icons/Group142.tsx @@ -1,32 +1,72 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group147.tsx b/src/pages/Landing/images/icons/Group147.tsx index 88c16038..b87ea422 100644 --- a/src/pages/Landing/images/icons/Group147.tsx +++ b/src/pages/Landing/images/icons/Group147.tsx @@ -1,30 +1,64 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group148.tsx b/src/pages/Landing/images/icons/Group148.tsx index 97d67678..192c8244 100644 --- a/src/pages/Landing/images/icons/Group148.tsx +++ b/src/pages/Landing/images/icons/Group148.tsx @@ -1,31 +1,71 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group151.tsx b/src/pages/Landing/images/icons/Group151.tsx index 893241fe..6f142aba 100644 --- a/src/pages/Landing/images/icons/Group151.tsx +++ b/src/pages/Landing/images/icons/Group151.tsx @@ -1,27 +1,42 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group152.tsx b/src/pages/Landing/images/icons/Group152.tsx index 924a0fd6..99029159 100644 --- a/src/pages/Landing/images/icons/Group152.tsx +++ b/src/pages/Landing/images/icons/Group152.tsx @@ -1,28 +1,50 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group153.tsx b/src/pages/Landing/images/icons/Group153.tsx index a4fe8ee6..c4d8fd5c 100644 --- a/src/pages/Landing/images/icons/Group153.tsx +++ b/src/pages/Landing/images/icons/Group153.tsx @@ -1,27 +1,41 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Group154.tsx b/src/pages/Landing/images/icons/Group154.tsx index a279b745..6024dbbd 100644 --- a/src/pages/Landing/images/icons/Group154.tsx +++ b/src/pages/Landing/images/icons/Group154.tsx @@ -1,28 +1,52 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Handshake.tsx b/src/pages/Landing/images/icons/Handshake.tsx index 803acd42..46f90cf2 100644 --- a/src/pages/Landing/images/icons/Handshake.tsx +++ b/src/pages/Landing/images/icons/Handshake.tsx @@ -1,35 +1,80 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - - - ) -}; \ No newline at end of file +export default function ({ color }: Props) { + return ( + + + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/IconNumber2.tsx b/src/pages/Landing/images/icons/IconNumber2.tsx index d3f8c645..6a9fa878 100644 --- a/src/pages/Landing/images/icons/IconNumber2.tsx +++ b/src/pages/Landing/images/icons/IconNumber2.tsx @@ -1,27 +1,42 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function OneIconBorder({color}:Props) { - - return ( - - - - - - - - ); -} \ No newline at end of file +export default function OneIconBorder({ color }: Props) { + return ( + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/IconNumber3.tsx b/src/pages/Landing/images/icons/IconNumber3.tsx index 94c1e531..afc7a355 100644 --- a/src/pages/Landing/images/icons/IconNumber3.tsx +++ b/src/pages/Landing/images/icons/IconNumber3.tsx @@ -1,28 +1,42 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function OneIconBorder({color}:Props) { - - return ( - - - - - - - - - ); -} \ No newline at end of file +export default function OneIconBorder({ color }: Props) { + return ( + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/IconNumber4.tsx b/src/pages/Landing/images/icons/IconNumber4.tsx index 4c4ba2f2..d8cef30e 100644 --- a/src/pages/Landing/images/icons/IconNumber4.tsx +++ b/src/pages/Landing/images/icons/IconNumber4.tsx @@ -1,29 +1,49 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function OneIconBorder({color}:Props) { - - return ( - - - - - - - - - - ); -} \ No newline at end of file +export default function OneIconBorder({ color }: Props) { + return ( + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/Network.tsx b/src/pages/Landing/images/icons/Network.tsx index 120aeff7..843cde16 100644 --- a/src/pages/Landing/images/icons/Network.tsx +++ b/src/pages/Landing/images/icons/Network.tsx @@ -1,28 +1,55 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - ) -}; \ No newline at end of file +export default function ({ color }: Props) { + return ( + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/PenaLogoOnly.tsx b/src/pages/Landing/images/icons/PenaLogoOnly.tsx index fdc4066d..c99dd5a9 100644 --- a/src/pages/Landing/images/icons/PenaLogoOnly.tsx +++ b/src/pages/Landing/images/icons/PenaLogoOnly.tsx @@ -1,23 +1,57 @@ import { useTheme } from "@mui/material"; - interface Props { - width: number; + width: number; } export default function PenaLogoOnly({ width }: Props) { - const theme = useTheme(); + const theme = useTheme(); - return ( - - - - - - - - + return ( + + + + + + + + - -); -} \ No newline at end of file + ); +} diff --git a/src/pages/Landing/images/icons/QuizLogo.tsx b/src/pages/Landing/images/icons/QuizLogo.tsx index 459a5e89..0c12503d 100644 --- a/src/pages/Landing/images/icons/QuizLogo.tsx +++ b/src/pages/Landing/images/icons/QuizLogo.tsx @@ -1,30 +1,55 @@ import { useTheme } from "@mui/material"; - interface Props { - width: number; + width: number; } export default function QuizLogo({ width }: Props) { - const theme = useTheme(); + const theme = useTheme(); - return ( - - - - - - - - - - - - - - - - - - ); -} \ No newline at end of file + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/UserCircle.tsx b/src/pages/Landing/images/icons/UserCircle.tsx index 3a9fc31e..b0da91b4 100644 --- a/src/pages/Landing/images/icons/UserCircle.tsx +++ b/src/pages/Landing/images/icons/UserCircle.tsx @@ -1,34 +1,60 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - - - - - - ) -}; \ No newline at end of file +export default function ({ color }: Props) { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/clipIcon.tsx b/src/pages/Landing/images/icons/clipIcon.tsx index d82c0d41..792ea995 100644 --- a/src/pages/Landing/images/icons/clipIcon.tsx +++ b/src/pages/Landing/images/icons/clipIcon.tsx @@ -1,27 +1,36 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - ) -}; \ No newline at end of file +export default function ({ color }: Props) { + return ( + + + + + + + ); +} diff --git a/src/pages/Landing/images/icons/tiktokIcon.tsx b/src/pages/Landing/images/icons/tiktokIcon.tsx index 2d84455a..7ae28bfa 100644 --- a/src/pages/Landing/images/icons/tiktokIcon.tsx +++ b/src/pages/Landing/images/icons/tiktokIcon.tsx @@ -1,27 +1,36 @@ import { Box } from "@mui/material"; - interface Props { - color?: string; + color?: string; } -export default function ({color}:Props) { - - return ( - - - - - - - - ) -}; +export default function ({ color }: Props) { + return ( + + + + + + + ); +} diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index f83973a1..46d53a1f 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -17,7 +17,6 @@ import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon"; import { questionStore, - resetSomeField, copyQuestion, removeQuestionForce, updateQuestionsList, @@ -45,7 +44,7 @@ export default function ButtonsOptions({ totalIndex, }: Props) { const quizId = Number(useParams().quizId); - const { openedModalSettings, listQuestions } = questionStore(); + const { listQuestions } = questionStore(); const { listQuizes } = quizStore(); const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState(false); @@ -59,7 +58,9 @@ export default function ButtonsOptions({ }, [listQuestions]); const openedModal = () => { - resetSomeField({ openedModalSettings: "open" }); + updateQuestionsList(quizId, totalIndex, { + openedModalSettings: true, + }); }; const theme = useTheme(); diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index fc59b983..b636101b 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx @@ -21,7 +21,6 @@ import { questionStore, copyQuestion, removeQuestion, - resetSomeField, removeQuestionForce, updateQuestionsList, } from "@root/questions"; @@ -62,7 +61,9 @@ export default function ButtonsOptionsAndPict({ }, [listQuestions]); const openedModal = () => { - resetSomeField({ openedModalSettings: "open" }); + updateQuestionsList(quizId, totalIndex, { + openedModalSettings: true, + }); }; return ( diff --git a/src/pages/Questions/Form/FormQuestionsPage.tsx b/src/pages/Questions/Form/FormQuestionsPage.tsx index 4481dceb..98973346 100644 --- a/src/pages/Questions/Form/FormQuestionsPage.tsx +++ b/src/pages/Questions/Form/FormQuestionsPage.tsx @@ -128,8 +128,8 @@ export default function FormQuestionsPage() { > Следующий шаг - {createPortal(, document.body)} + {createPortal(, document.body)} ); } diff --git a/src/pages/Questions/branchingQuestions.tsx b/src/pages/Questions/branchingQuestions.tsx index 7578d2a2..4283523f 100644 --- a/src/pages/Questions/branchingQuestions.tsx +++ b/src/pages/Questions/branchingQuestions.tsx @@ -15,11 +15,7 @@ import { Typography, useTheme, } from "@mui/material"; -import { - questionStore, - resetSomeField, - updateQuestionsList, -} from "@root/questions"; +import { questionStore, updateQuestionsList } from "@root/questions"; import { Select } from "./Select"; import RadioCheck from "@ui_kit/RadioCheck"; @@ -48,7 +44,7 @@ export default function BranchingQuestions({ const [title, setTitle] = useState(""); const [titleInputWidth, setTitleInputWidth] = useState(0); const quizId = Number(useParams().quizId); - const { openedModalSettings, listQuestions } = questionStore(); + const { listQuestions } = questionStore(); const titleRef = useRef(null); const question = listQuestions[quizId][totalIndex] as QuizQuestionBase; @@ -57,20 +53,17 @@ export default function BranchingQuestions({ }, [title]); const handleClose = () => { - resetSomeField({ openedModalSettings: "" }); + updateQuestionsList(quizId, totalIndex, { + openedModalSettings: false, + }); }; return ( <> - + - {Object.values(listQuizes).map((e, i) => ( + {Object.values(listQuizes).map(({ id, name }) => ( { - removeQuiz(e.id); + removeQuiz(id); }} - onClickEdit={() => navigate(`/setting/${e.id}`)} + onClickEdit={() => navigate(`/setting/${id}`)} /> ))} diff --git a/src/pages/startPage/ModalSizeImage.tsx b/src/pages/startPage/ModalSizeImage.tsx index 84a391ab..3b95af67 100644 --- a/src/pages/startPage/ModalSizeImage.tsx +++ b/src/pages/startPage/ModalSizeImage.tsx @@ -109,8 +109,9 @@ export default function ModalSizeImage() { - {rows.map((row) => ( + {rows.map(({ name, size }, index) => ( - {row.name} + {name} - {row.size} + {size} ))} @@ -146,8 +147,9 @@ export default function ModalSizeImage() { Размеры изображений в квизе - {rows2.map((row) => ( + {rows2.map(({ name, size }, index) => ( - {row.name} + {name} - {row.size} + {size} ))} diff --git a/src/pages/startPage/Sidebar/icons/ReturnTime.tsx b/src/pages/startPage/Sidebar/icons/ReturnTime.tsx index 3724be6e..55a96754 100644 --- a/src/pages/startPage/Sidebar/icons/ReturnTime.tsx +++ b/src/pages/startPage/Sidebar/icons/ReturnTime.tsx @@ -1,13 +1,19 @@ import { FC, SVGProps } from "react"; export const ReturnTime: FC> = (props) => ( - + ); diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index 580341a4..848ce363 100755 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -223,6 +223,47 @@ export default function StartPage() { createResult={listQuizes[params].createResult} /> + {isTablet && activeStep === 1 && ( + + } + sx={{ + color: theme.palette.brightPurple.main, + fontSize: "14px", + lineHeight: "18px", + height: "34px", + "& .MuiButton-startIcon": { + mr: "3px", + }, + }} + > + Предпросмотр + + + + )} ); diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index fdee9a98..cd4b47c7 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -1,3 +1,4 @@ +import { ChangeEvent, useState } from "react"; import { Box, Button, @@ -12,30 +13,31 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { ChangeEvent, useState } from "react"; +import { createPortal } from "react-dom"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; -import AlignLeftIcon from "../../assets/icons/AlignLeftIcon"; -import AlignRightIcon from "../../assets/icons/AlignRightIcon"; -import ArrowDown from "../../assets/icons/ArrowDownIcon"; -import InfoIcon from "../../assets/icons/InfoIcon"; -import LayoutCenteredIcon from "../../assets/icons/LayoutCenteredIcon"; -import LayoutExpandedIcon from "../../assets/icons/LayoutExpandedIcon"; -import LayoutStandartIcon from "../../assets/icons/LayoutStandartIcon"; -import MobilePhoneIcon from "../../assets/icons/MobilePhoneIcon"; +import AlignLeftIcon from "@icons/AlignLeftIcon"; +import AlignRightIcon from "@icons/AlignRightIcon"; +import ArrowDown from "@icons/ArrowDownIcon"; +import InfoIcon from "@icons/InfoIcon"; +import LayoutCenteredIcon from "@icons/LayoutCenteredIcon"; +import LayoutExpandedIcon from "@icons/LayoutExpandedIcon"; +import LayoutStandartIcon from "@icons/LayoutStandartIcon"; +import MobilePhoneIcon from "@icons/MobilePhoneIcon"; import UploadIcon from "../../assets/icons/UploadIcon"; import SelectableButton from "@ui_kit/SelectableButton"; import SelectableIconButton from "./SelectableIconButton"; import UploadBox from "@ui_kit/UploadBox"; import CustomTextField from "@ui_kit/CustomTextField"; import { quizStore } from "@root/quizes"; -import { useNavigate, useParams } from "react-router-dom"; +import { useParams } from "react-router-dom"; import * as React from "react"; import ModalSizeImage from "./ModalSizeImage"; -import DropZone from "./dropZone"; +import { DropZone } from "./dropZone"; import Extra from "./extra"; import AlignCenterIcon from "@icons/AlignCenterIcon"; import DropFav from "./dropfavicon"; import { createQuestion } from "@root/questions"; +import { StartPagePreview } from "@ui_kit/StartPagePreview"; const designTypes = [ [ @@ -793,14 +795,53 @@ export default function StartPageSettings() { )} + {isSmallMonitor && ( + + {formState === "content" && ( + + )} + {formState === "design" && ( + + )} + + )} + {createPortal(, document.body)} ); } diff --git a/src/pages/startPage/dropZone.tsx b/src/pages/startPage/dropZone.tsx index d354b077..a9036853 100644 --- a/src/pages/startPage/dropZone.tsx +++ b/src/pages/startPage/dropZone.tsx @@ -1,8 +1,19 @@ import { useState } from "react"; -import { Box, ButtonBase, useTheme, Typography, SxProps, Theme } from "@mui/material"; -import UploadIcon from "../../assets/icons/UploadIcon"; +import { useParams } from "react-router-dom"; +import { + Box, + ButtonBase, + useTheme, + Typography, + SxProps, + Theme, +} from "@mui/material"; import { SnackbarProvider, enqueueSnackbar } from "notistack"; +import { quizStore } from "@root/quizes"; + +import UploadIcon from "@icons/UploadIcon"; + interface Props { text?: string; sx?: SxProps; @@ -11,21 +22,35 @@ interface Props { } //Научи функцию принимать данные для валидации -export default ({ text, sx, heightImg, widthImg }: Props) => { +export const DropZone = ({ text, sx, heightImg, widthImg }: Props) => { + const quizId = Number(useParams().quizId); + const { listQuizes, updateQuizesList } = quizStore(); + const [ready, setReady] = useState(false); const theme = useTheme(); + const quiz = listQuizes[quizId]; + console.log(quiz.config.startpage.background.desktop); const imgHC = (imgInp: HTMLInputElement) => { const file = imgInp.files?.[0]; if (file) { if (file.size < 5242880) { - setData(URL.createObjectURL(file)); + updateQuizesList(quizId, { + config: { + ...quiz.config, + startpage: { + ...quiz.config.startpage, + background: { + ...quiz.config.startpage.background, + desktop: URL.createObjectURL(file), + }, + }, + }, + }); } else { enqueueSnackbar("Размер картинки слишком велик"); } } }; - const [data, setData] = useState(""); - const [ready, setReady] = useState(false); const dragenterHC = () => { setReady(true); @@ -41,7 +66,18 @@ export default ({ text, sx, heightImg, widthImg }: Props) => { const file = event.dataTransfer.files[0]; if (file.size < 5242880) { - setData(URL.createObjectURL(file)); + updateQuizesList(quizId, { + config: { + ...quiz.config, + startpage: { + ...quiz.config.startpage, + background: { + ...quiz.config.startpage.background, + desktop: URL.createObjectURL(file), + }, + }, + }, + }); } else { enqueueSnackbar("Размер картинки слишком велик"); } @@ -53,7 +89,13 @@ export default ({ text, sx, heightImg, widthImg }: Props) => { return ( - img - ) : null} + )} ); diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 84d6937c..d758b386 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -24,7 +24,6 @@ setAutoFreeze(false); interface QuestionStore { listQuestions: Record; - openedModalSettings: string; } let isFirstPartialize = true; @@ -34,7 +33,6 @@ export const questionStore = create()( devtools( () => ({ listQuestions: {}, - openedModalSettings: "", }), { name: "Question", @@ -341,10 +339,6 @@ export const removeQuestion = (quizId: number, index: number) => { questionStore.setState({ listQuestions: questionListClone }); }; -export const resetSomeField = (data: Record) => { - questionStore.setState(data); -}; - export const findQuestionById = (quizId: number) => { let found = null; questionStore diff --git a/src/stores/quizes.ts b/src/stores/quizes.ts index 152702fd..40246bef 100644 --- a/src/stores/quizes.ts +++ b/src/stores/quizes.ts @@ -133,9 +133,9 @@ export const quizStore = create()( "position": "ltr", // ltr или rtl. отображение элементов поверх фона "background": { "type": "image", //image или video - "desktop": "hub.pena.digital/img/back/full.png", - "mobile": "hub.pena.digital/img/back/mobile.png", - "video":"hub.pena.digital/vid/back/vi1.mp4", + "desktop": "", + "mobile": "", + "video":"", "cycle": true //зацикливать видео или нет }, }, diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx index e7f8e942..00d0a04f 100644 --- a/src/ui_kit/QuizPreview/QuizPreview.tsx +++ b/src/ui_kit/QuizPreview/QuizPreview.tsx @@ -5,7 +5,7 @@ import { useLayoutEffect, useRef } from "react"; import { Rnd } from "react-rnd"; import { useWindowSize } from "../../utils/hooks/useWindowSize"; import QuizPreviewLayout from "./QuizPreviewLayout"; -import ResizeIcon from "./ResizeIcon"; +import ResizeIcon from "@icons/ResizeIcon"; const DRAG_PARENT_MARGIN = 0; const NAVBAR_HEIGHT = 0; diff --git a/src/ui_kit/QuizPreview/ResizeIcon.tsx b/src/ui_kit/QuizPreview/ResizeIcon.tsx deleted file mode 100644 index 3d5895d6..00000000 --- a/src/ui_kit/QuizPreview/ResizeIcon.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Box, SxProps, Theme } from "@mui/material"; - - -interface Props { - sx?: SxProps; -} - -export default function ResizeIcon({ sx }: Props) { - - return ( - - - - - - ); -} diff --git a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx new file mode 100644 index 00000000..d3cd60ea --- /dev/null +++ b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx @@ -0,0 +1,139 @@ +import { + Box, + Button, + Paper, + Typography, + useTheme, + useMediaQuery, +} from "@mui/material"; +import { useParams } from "react-router-dom"; + +import { quizStore } from "@root/quizes"; + +export default function QuizPreviewLayout() { + const quizId = Number(useParams().quizId); + const { listQuizes } = quizStore(); + const question = listQuizes[quizId]; + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(630)); + const isMediaFileExist = + (question.config.startpage.background.type === "image" && + question.config.startpage.background.desktop) || + (question.config.startpage.background.type === "video" && + question.config.startpage.background.video); + + return ( + + + + + {question.config.startpage.background.type === "image" && + question.config.startpage.background.desktop && ( + + )} + + {question.config.info.orgname} + + + + {question.name} + + {question.config.startpage.description} + + + {question.config.startpage.button && ( + + )} + + + + + {question.config.info.phonenumber} + + + {question.config.info.law} + + + + {!isTablet && isMediaFileExist && ( + + {question.config.startpage.background.type === "image" && + question.config.startpage.background.desktop && ( + + )} + {question.config.startpage.background.type === "video" && + question.config.startpage.background.video && ( + + )} + + + ); +} diff --git a/src/ui_kit/StartPagePreview/index.tsx b/src/ui_kit/StartPagePreview/index.tsx new file mode 100644 index 00000000..17c0c23f --- /dev/null +++ b/src/ui_kit/StartPagePreview/index.tsx @@ -0,0 +1,134 @@ +import VisibilityIcon from "@mui/icons-material/Visibility"; +import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material"; +import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; +import { useLayoutEffect, useRef } from "react"; +import { Rnd } from "react-rnd"; +import QuizPreviewLayout from "./QuizPreviewLayout"; +import ResizeIcon from "@icons/ResizeIcon"; + +const DRAG_PARENT_MARGIN = 0; +const NAVBAR_HEIGHT = 0; +const DRAG_PARENT_BOTTOM_MARGIN = 0; + +interface RndPositionAndSize { + x: number; + y: number; + width: string; + height: string; +} + +export const StartPagePreview = () => { + const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown); + const rndParentRef = useRef(null); + const rndRef = useRef(null); + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(630)); + const rndPositionAndSizeRef = useRef({ + x: 0, + y: 0, + width: isTablet ? "350" : "600", + height: "330", + }); + const isFirstShowRef = useRef(true); + + useLayoutEffect( + function stickPreviewToBottomRight() { + const rnd = rndRef.current; + const rndSelfElement = rnd?.getSelfElement(); + if ( + !rnd || + !rndSelfElement || + !rndParentRef.current || + !isFirstShowRef.current + ) + return; + + const rndParentRect = rndParentRef.current.getBoundingClientRect(); + const rndRect = rndSelfElement.getBoundingClientRect(); + + const x = rndParentRect.width - rndRect.width; + const y = rndParentRect.height - rndRect.height; + + rnd.updatePosition({ x, y }); + rndPositionAndSizeRef.current.x = x; + rndPositionAndSizeRef.current.y = y; + + isFirstShowRef.current = false; + }, + [isPreviewShown] + ); + + return ( + + {isPreviewShown && ( + { + rndPositionAndSizeRef.current.x = position.x; + rndPositionAndSizeRef.current.y = position.y; + rndPositionAndSizeRef.current.width = ref.style.width; + rndPositionAndSizeRef.current.height = ref.style.height; + }} + onDragStop={(e, d) => { + rndPositionAndSizeRef.current.x = d.x; + rndPositionAndSizeRef.current.y = d.y; + }} + onDragStart={(e, d) => { + e.preventDefault(); + }} + enableResizing={{ + topLeft: isPreviewShown, + }} + resizeHandleComponent={{ + topLeft: , + }} + resizeHandleStyles={{ + topLeft: { + top: "-1px", + left: "-1px", + }, + }} + style={{ + overflow: "hidden", + pointerEvents: "auto", + borderRadius: "5px", + }} + > + + + )} + + + + + ); +};