diff --git a/src/assets/icons/BackButtonIcon.tsx b/src/assets/icons/BackButtonIcon.tsx new file mode 100644 index 00000000..c0fc7065 --- /dev/null +++ b/src/assets/icons/BackButtonIcon.tsx @@ -0,0 +1,11 @@ +export const BackButtonIcon = () => ( + + + +); diff --git a/src/assets/icons/CrossedEyeIcon.tsx b/src/assets/icons/CrossedEyeIcon.tsx index c9021ca9..1d433122 100644 --- a/src/assets/icons/CrossedEyeIcon.tsx +++ b/src/assets/icons/CrossedEyeIcon.tsx @@ -2,14 +2,7 @@ import { FC, SVGProps } from "react"; export const CrossedEyeIcon: FC> = (props) => { return ( - + - - - - - - ); -} \ No newline at end of file + return ( + + + + + + + ); +} diff --git a/src/assets/icons/LinkSimple.tsx b/src/assets/icons/LinkSimple.tsx new file mode 100644 index 00000000..193b7acb --- /dev/null +++ b/src/assets/icons/LinkSimple.tsx @@ -0,0 +1,27 @@ +import { FC, SVGProps } from "react"; + +export const LinkSimple: FC> = (props) => ( + + + + + +); diff --git a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx index d5d4663d..6def0204 100644 --- a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx @@ -12,21 +12,24 @@ import Page from "@icons/questionsPage/page"; import RatingIcon from "@icons/questionsPage/rating"; import Slider from "@icons/questionsPage/slider"; import { - Box, Checkbox, - FormControl, - FormControlLabel, - IconButton, - InputAdornment, - Paper, TextField, - useMediaQuery, - useTheme + Box, + Checkbox, + FormControl, + FormControlLabel, + IconButton, + InputAdornment, + Paper, + TextField, + useMediaQuery, + useTheme, } from "@mui/material"; import { - copyQuestion, - deleteQuestion, deleteQuestionWithTimeout, - toggleExpandQuestion, - updateQuestion, - updateUntypedQuestion + copyQuestion, + deleteQuestion, + deleteQuestionWithTimeout, + toggleExpandQuestion, + updateQuestion, + updateUntypedQuestion, } from "@root/questions/actions"; import CustomTextField from "@ui_kit/CustomTextField"; import { useRef, useState } from "react"; @@ -66,246 +69,236 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr }); }, 200); - return ( - <> - + + + + - - - - setTitle(target.value)} - sx={{ - width: "100%", - margin: isMobile ? "10px 0" : 0, - "& .MuiInputBase-root": { - color: "#000000", - backgroundColor: question.expanded - ? theme.palette.background.default - : "transparent", - height: "48px", - borderRadius: "10px", - ".MuiOutlinedInput-notchedOutline": { - borderWidth: "1px !important", - border: !question.expanded ? "none" : null, - }, - "& .MuiInputBase-input::placeholder": { - color: "#4D4D4D", - opacity: 0.8, - }, - }, - }} - InputProps={{ - startAdornment: ( - - setOpen((isOpened) => !isOpened)} - > - {IconAndrom(question.type)} - - setOpen(false)} - anchorRef={anchorRef} - question={question} - questionType={question.type} - /> - - ), - }} - /> - - - - toggleExpandQuestion(question.id)} - > - {question.expanded ? ( - - ) : ( - - )} - - - {question.expanded ? ( - <> - ) : ( - - - } - checkedIcon={} - /> - } - label={""} - sx={{ - color: theme.palette.grey2.main, - ml: "-9px", - mr: 0, - userSelect: "none", - }} - /> - copyQuestion(question.id, question.quizId)} - > - - - { - deleteQuestionWithTimeout(question.id, () => deleteQuestion(question.id)); - - }} - > - - - - )} - - - {questionIndex + 1} - - - - - - - + setTitle(target.value)} + sx={{ + width: "100%", + margin: isMobile ? "10px 0" : 0, + "& .MuiInputBase-root": { + color: "#000000", + backgroundColor: question.expanded ? theme.palette.background.default : "transparent", + height: "48px", + borderRadius: "10px", + ".MuiOutlinedInput-notchedOutline": { + borderWidth: "1px !important", + border: !question.expanded ? "none" : null, + }, + "& .MuiInputBase-input::placeholder": { + color: "#4D4D4D", + opacity: 0.8, + }, + }, + }} + InputProps={{ + startAdornment: ( + + setOpen((isOpened) => !isOpened)} + > + {IconAndrom(question.type)} + + setOpen(false)} + anchorRef={anchorRef} + question={question} + questionType={question.type} + /> - {question.expanded && ( - <> - {question.type === null ? ( - - ) : ( - - )} - - )} + ), + }} + /> + + + + toggleExpandQuestion(question.id)} + > + {question.expanded ? ( + + ) : ( + + )} + + + {question.expanded ? ( + <> + ) : ( + + + } + checkedIcon={} + /> + } + label={""} + sx={{ + color: theme.palette.grey2.main, + ml: "-9px", + mr: 0, + userSelect: "none", + }} + /> + copyQuestion(question.id, question.quizId)}> + + + { + deleteQuestionWithTimeout(question.id, () => deleteQuestion(question.id)); + }} + > + + + + )} + + + {questionIndex + 1} - - - ); + + + + + + + + {question.expanded && ( + <> + {question.type === null ? ( + + ) : ( + + )} + + )} + + + + ); } const IconAndrom = (questionType: QuestionType | null) => { diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 5c7d6288..a414177e 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -4,6 +4,8 @@ import BackArrowIcon from "@icons/BackArrowIcon"; import { Burger } from "@icons/Burger"; import EyeIcon from "@icons/EyeIcon"; import { PenaLogoIcon } from "@icons/PenaLogoIcon"; +import VisibilityIcon from "@mui/icons-material/Visibility"; + import { Box, Button, @@ -54,6 +56,9 @@ import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate"; import { ConfirmLeaveModal } from "./ConfirmLeaveModal"; import { checkQuestionHint } from "@utils/checkQuestionHint"; import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; +import { toggleQuizPreview } from "@root/quizPreview"; +import { LinkSimple } from "@icons/LinkSimple"; +import { BackButtonIcon } from "@icons/BackButtonIcon"; let init: () => void; export default function EditPage() { @@ -93,6 +98,7 @@ export default function EditPage() { const currentStep = useQuizStore((state) => state.currentStep); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(660)); + const isMobileSm = useMediaQuery(theme.breakpoints.down(370)); const [mobileSidebar, setMobileSidebar] = useState(false); const [nextStep, setNextStep] = useState(0); const quizConfig = quiz?.config; @@ -156,6 +162,27 @@ export default function EditPage() { if (!quizConfig) return <>; const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form"; + + const [buttonText, setButtonText] = useState("Опубликовать"); + + const handleClickStatusQuiz = () => { + if (Object.keys(whyCantCreatePublic).length === 0) { + setButtonText("Опубликовано"); + + setTimeout(() => { + setButtonText("Отозвать"); + }, 3000); + + updateQuiz(quiz?.id, (state) => { + state.status = quiz?.status === "start" ? "stop" : "start"; + }); + } else { + updateModalInfoWhyCantCreate(true); + } + }; + + console.log(buttonText); + return ( <> {/*хедер*/} @@ -289,14 +316,14 @@ export default function EditPage() { sx={{ background: theme.palette.background.default, width: "100%", + overflow: "hidden", }} > @@ -320,7 +347,8 @@ export default function EditPage() { width: "100%", padding: isMobile ? "20px 16px" : "20px 20px", display: "flex", - justifyContent: "flex-start", + justifyContent: isMobile ? (isMobileSm ? "center" : "flex-end") : "flex-start", + flexDirection: isMobile ? "row-reverse" : "-moz-initial", alignItems: "center", gap: "15px", background: "#FFF", @@ -387,64 +415,64 @@ export default function EditPage() { )} - {!canCreatePublic && quiz.config.type !== "form" ? ( - - ) : ( - + + {!canCreatePublic && quiz.config.type !== "form" ? ( - - )} + ) : ( + + + + )} + {quiz?.status === "start" && ( )} + + {isMobile ? ( + + ) : ( + + + + )} + + {isMobile && quiz?.status === "start" && ( + + + + )} diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx index 3fa01fe8..342d2f52 100644 --- a/src/ui_kit/QuizPreview/QuizPreview.tsx +++ b/src/ui_kit/QuizPreview/QuizPreview.tsx @@ -1,4 +1,3 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; import { Box, IconButton } from "@mui/material"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; import { useLayoutEffect, useRef } from "react"; @@ -34,13 +33,7 @@ export default function QuizPreview() { function stickPreviewToBottomRight() { const rnd = rndRef.current; const rndSelfElement = rnd?.getSelfElement(); - if ( - !rnd || - !rndSelfElement || - !rndParentRef.current || - !isFirstShowRef.current - ) - return; + if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return; const rndParentRect = rndParentRef.current.getBoundingClientRect(); const rndRect = rndSelfElement.getBoundingClientRect(); @@ -118,18 +111,6 @@ export default function QuizPreview() { )} - - - ); } diff --git a/src/ui_kit/StartPagePreview/index.tsx b/src/ui_kit/StartPagePreview/index.tsx index 97442480..6e4b782e 100644 --- a/src/ui_kit/StartPagePreview/index.tsx +++ b/src/ui_kit/StartPagePreview/index.tsx @@ -1,4 +1,3 @@ -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"; @@ -35,13 +34,7 @@ export const StartPagePreview = () => { function stickPreviewToBottomRight() { const rnd = rndRef.current; const rndSelfElement = rnd?.getSelfElement(); - if ( - !rnd || - !rndSelfElement || - !rndParentRef.current || - !isFirstShowRef.current - ) - return; + if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return; const rndParentRect = rndParentRef.current.getBoundingClientRect(); const rndRect = rndSelfElement.getBoundingClientRect(); @@ -119,17 +112,6 @@ export const StartPagePreview = () => { )} - - - ); };