diff --git a/src/assets/icons/BackArrowIcon.tsx b/src/assets/icons/BackArrowIcon.tsx index 9bfcba4f..cbfef395 100755 --- a/src/assets/icons/BackArrowIcon.tsx +++ b/src/assets/icons/BackArrowIcon.tsx @@ -1,22 +1,26 @@ import { Box } from "@mui/material"; - -export default function BackArrowIcon() { - - return ( - - - - - - - ); -} \ No newline at end of file +export default function BackArrowIcon({ color = "black" }: { color?: string }) { + return ( + + + + + + + ); +} diff --git a/src/assets/icons/Burger.tsx b/src/assets/icons/Burger.tsx new file mode 100644 index 00000000..eb247987 --- /dev/null +++ b/src/assets/icons/Burger.tsx @@ -0,0 +1,9 @@ +import { FC, SVGProps } from "react"; + +export const Burger: FC> = (props) => ( + + + + + +); diff --git a/src/assets/icons/ChartPieIcon.tsx b/src/assets/icons/ChartPieIcon.tsx index f9dd4254..6671f740 100755 --- a/src/assets/icons/ChartPieIcon.tsx +++ b/src/assets/icons/ChartPieIcon.tsx @@ -1,30 +1,40 @@ import { Box } from "@mui/material"; - interface Props { - height: string; - width: string; - color: string; + height: string; + width: string; + color: string; } export default function ChartPieIcon({ height, width, color }: Props) { - - return ( - - - - - - - - ); -} \ No newline at end of file + return ( + + + + + + + + ); +} diff --git a/src/assets/icons/EmojiIocns.tsx b/src/assets/icons/EmojiIocns.tsx new file mode 100644 index 00000000..ba654c61 --- /dev/null +++ b/src/assets/icons/EmojiIocns.tsx @@ -0,0 +1,28 @@ +import { FC, SVGProps } from "react"; + +export const EmojiIcons: FC> = (props) => ( + + + + + + +); diff --git a/src/assets/icons/ImageAddIcons.tsx b/src/assets/icons/ImageAddIcons.tsx new file mode 100644 index 00000000..b1664427 --- /dev/null +++ b/src/assets/icons/ImageAddIcons.tsx @@ -0,0 +1,24 @@ +import { FC, SVGProps } from "react"; + +export const ImageAddIcons: FC> = (props) => ( + + + + + +); diff --git a/src/assets/icons/PenaLogoIcon.tsx b/src/assets/icons/PenaLogoIcon.tsx new file mode 100644 index 00000000..0641f00f --- /dev/null +++ b/src/assets/icons/PenaLogoIcon.tsx @@ -0,0 +1,49 @@ +import { FC, SVGProps } from "react"; + +export const PenaLogoIcon: FC> = (props) => ( + + + + + + + + + + + + + + + + + + + +); diff --git a/src/assets/icons/questionsPage/DoubleArrowRight.tsx b/src/assets/icons/questionsPage/DoubleArrowRight.tsx new file mode 100644 index 00000000..a7b73064 --- /dev/null +++ b/src/assets/icons/questionsPage/DoubleArrowRight.tsx @@ -0,0 +1,20 @@ +import { FC, SVGProps } from "react"; + +export const DoubleArrowRight: FC> = (props) => ( + + + + +); diff --git a/src/assets/icons/questionsPage/DoubleTick.tsx b/src/assets/icons/questionsPage/DoubleTick.tsx new file mode 100644 index 00000000..cac66c3e --- /dev/null +++ b/src/assets/icons/questionsPage/DoubleTick.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const DoubleTick: FC> = (props) => ( + + + +); diff --git a/src/assets/icons/questionsPage/VectorQuestions.tsx b/src/assets/icons/questionsPage/VectorQuestions.tsx new file mode 100644 index 00000000..98a28492 --- /dev/null +++ b/src/assets/icons/questionsPage/VectorQuestions.tsx @@ -0,0 +1,20 @@ +import { FC, SVGProps } from "react"; + +export const VectorQuestions: FC> = (props) => ( + + + + +); diff --git a/src/assets/icons/questionsPage/addImage.tsx b/src/assets/icons/questionsPage/addImage.tsx index 25285ee7..3842072d 100644 --- a/src/assets/icons/questionsPage/addImage.tsx +++ b/src/assets/icons/questionsPage/addImage.tsx @@ -17,6 +17,7 @@ const AddImage: FC = ({ onClick, sx }) => { alignItems: "center", justifyContent: "center", cursor: "pointer", + ...sx, }} > diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index 0f8f19cd..d5a203fb 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -1,6 +1,6 @@ import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import { useParams } from "react-router-dom"; -import React from "react"; +import React, { useState } from "react"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import Clue from "../../assets/icons/questionsPage/clue"; import Branching from "../../assets/icons/questionsPage/branching"; @@ -9,6 +9,9 @@ import HideIcon from "../../assets/icons/questionsPage/hideIcon"; import CopyIcon from "../../assets/icons/questionsPage/CopyIcon"; import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; 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"; interface Props { switchState: string; @@ -23,9 +26,12 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) resetSomeField({ openedModalSettings: "open" }); console.log(openedModalSettings); }; + const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState(false); + const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920)); const buttonSetting: { icon: JSX.Element; title: string; @@ -108,13 +114,13 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) sx={{ backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", color: switchState === value ? "#ffffff" : theme.palette.grey3.main, - minWidth: isMobile ? "30px" : "64px", + minWidth: isWrappMiniButtonSetting ? "30px" : "64px", height: "30px", }} > {icon} - {isMobile ? null : title} + {isWrappMiniButtonSetting ? null : title} ) : ( @@ -127,16 +133,46 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) sx={{ backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", color: switchState === value ? "#ffffff" : theme.palette.grey3.main, - minWidth: isMobile ? "30px" : "64px", + minWidth: isWrappMiniButtonSetting ? "30px" : "64px", height: "30px", }} > {icon} - {isMobile ? null : title} + {isWrappMiniButtonSetting ? null : title} )} ))} + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + (false); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const isIconMobile = useMediaQuery(theme.breakpoints.down(930)); + const isIconMobile = useMediaQuery(theme.breakpoints.down(1050)); const openedModal = () => { resetSomeField({ openedModalSettings: "open" }); @@ -134,6 +139,36 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: {isIconMobile ? null : "Изображение"} + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + + setOpenedReallyChangingModal(false)} /> ); } diff --git a/src/pages/Questions/DataOptions/settingData.tsx b/src/pages/Questions/DataOptions/settingData.tsx index e53879ad..4eb4da84 100644 --- a/src/pages/Questions/DataOptions/settingData.tsx +++ b/src/pages/Questions/DataOptions/settingData.tsx @@ -14,12 +14,14 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { const { listQuestions } = questionStore(); const theme = useTheme(); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); return ( - + Настройки календаря { @@ -29,7 +31,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { }} /> { @@ -43,11 +45,12 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { sx={{ padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px", minWidth: isWrappColumn ? null : "350px", - marginRight: "30px", + marginRight: isMobile ? "0px" : "30px", }} > Настройки вопросов { @@ -56,8 +59,9 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { }); }} /> - + { @@ -70,7 +74,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index a5890b96..a4c6ecd7 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -83,6 +83,8 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi const { listQuestions } = questionStore(); const { type: switchState, expanded: isExpanded } = listQuestions[quizId][totalIndex]; + console.log(draggableProps); + return ( <> - + updateQuestionsList(quizId, totalIndex, { expanded: !isExpanded })}> {isExpanded ? : } @@ -175,7 +177,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi { @@ -25,15 +42,79 @@ export default function Emoji({ totalIndex }: Props) { return ( <> - - + + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + - } - /> + )} + - + Настройки ответов { @@ -48,6 +49,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { > Настройки вопросов { @@ -56,8 +58,9 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { }); }} /> - + { @@ -70,7 +73,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index 1185c955..f4d8a734 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -1,4 +1,16 @@ -import { Box, Link, Typography, ButtonBase, useTheme, useMediaQuery } 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"; @@ -6,6 +18,10 @@ 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"; interface Props { totalIndex: number; @@ -16,6 +32,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) { const { listQuestions } = questionStore(); const quizId = Number(useParams().quizId); const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const SSHC = (data: string) => { @@ -31,7 +48,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) { component="label" sx={{ cursor: "pointer", - display: "flex", + display: isTablet ? "none" : "flex", alignItems: "center", justifyContent: "flex-start", marginBottom: "15px", @@ -68,6 +85,80 @@ export default function OptionsAndPicture({ totalIndex }: Props) { ))} + + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + + + )} + - + Настройки ответов { @@ -43,7 +44,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP /> Текст-заглушка на картинке { @@ -64,6 +65,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP > Настройки вопросов { @@ -77,7 +79,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP /> { diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index 3ae34c1a..8fbd1b70 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -1,6 +1,18 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; -import { Box, Link, Typography, Button, useTheme, useMediaQuery } 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"; @@ -10,6 +22,10 @@ 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 { ImageAddIcons } from "@icons/ImageAddIcons"; interface Props { totalIndex: number; @@ -37,25 +53,104 @@ export default function OptionsPicture({ totalIndex }: Props) { } }; + console.log(); + return ( <> - - + + + + Добавьте ответ + + + + - Добавьте ответ - + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + + + )} + diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index 7678ca3d..0abfff18 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -84,10 +84,10 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP display: "flex", justifyContent: "space-between", flexDirection: isTablet ? "column" : null, - marginRight: "30px", + marginRight: isMobile ? "0px" : "30px", }} > - + Пропорции Настройки ответов @@ -122,7 +122,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP } /> @@ -135,7 +135,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP } /> @@ -195,9 +195,8 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP }) } /> - + diff --git a/src/pages/Questions/OwnTextField/settingTextField.tsx b/src/pages/Questions/OwnTextField/settingTextField.tsx index 40069da6..cc12adf1 100644 --- a/src/pages/Questions/OwnTextField/settingTextField.tsx +++ b/src/pages/Questions/OwnTextField/settingTextField.tsx @@ -46,7 +46,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) display: "flex", justifyContent: "space-between", flexDirection: isWrapperColumn ? "column" : null, - marginRight: "50px", + marginRight: isMobile ? "0px" : "50px", }} > @@ -86,6 +86,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) Настройки вопросов { @@ -95,6 +96,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) }} /> { @@ -103,8 +105,9 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) }); }} /> - + { @@ -117,7 +120,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/PageOptions/SettingPageOptions.tsx b/src/pages/Questions/PageOptions/SettingPageOptions.tsx index 034a00ee..e7a0c1d1 100644 --- a/src/pages/Questions/PageOptions/SettingPageOptions.tsx +++ b/src/pages/Questions/PageOptions/SettingPageOptions.tsx @@ -1,5 +1,5 @@ import { useParams } from "react-router-dom"; -import { Box, Typography } from "@mui/material"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -11,17 +11,19 @@ type SettingPageOptionsProps = { totalIndex: number; }; -export default function SettingPageOptions({ - totalIndex, -}: SettingPageOptionsProps) { +export default function SettingPageOptions({ totalIndex }: SettingPageOptionsProps) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + return ( - + Настройки вопроса - + diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx index 343f667f..2ae4acf6 100644 --- a/src/pages/Questions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -34,7 +34,7 @@ export default function RatingOptions({ totalIndex }: Props) { gap: "20px", }} > - + { updateQuestionsList(quizId, totalIndex, { diff --git a/src/pages/Questions/RatingOptions/settingRating.tsx b/src/pages/Questions/RatingOptions/settingRating.tsx index 879ff8ef..39d9a3aa 100644 --- a/src/pages/Questions/RatingOptions/settingRating.tsx +++ b/src/pages/Questions/RatingOptions/settingRating.tsx @@ -45,7 +45,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { return ( - + Настройки рейтинга Настройки вопросов { @@ -116,8 +117,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }); }} /> - + { @@ -130,7 +132,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index d9211b58..3bd1069c 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -36,7 +36,9 @@ export default function SliderOptions({ totalIndex }: Props) { }} > - Выбор значения из диапазона + + Выбор значения из диапазона + - Начальное значение + + Начальное значение + - Шаг + Шаг - + Настройки ползунка { @@ -30,9 +31,10 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }} /> - + Настройки вопросов { @@ -41,8 +43,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }); }} /> - + { @@ -55,7 +58,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/UploadFile/settingUpload.tsx b/src/pages/Questions/UploadFile/settingUpload.tsx index 58bf0820..6f724f15 100644 --- a/src/pages/Questions/UploadFile/settingUpload.tsx +++ b/src/pages/Questions/UploadFile/settingUpload.tsx @@ -1,5 +1,5 @@ import { useParams } from "react-router-dom"; -import { Box, Typography } from "@mui/material"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -14,11 +14,14 @@ type SettingsUploadProps = { export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); return ( - + Настройки вопроса { @@ -28,6 +31,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { }} /> { @@ -36,8 +40,9 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { }); }} /> - + { @@ -50,7 +55,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/answerOptions/responseSettings.tsx b/src/pages/Questions/answerOptions/responseSettings.tsx index 0077534b..9893ad63 100644 --- a/src/pages/Questions/answerOptions/responseSettings.tsx +++ b/src/pages/Questions/answerOptions/responseSettings.tsx @@ -22,12 +22,13 @@ export default function ResponseSettings({ totalIndex }: Props) { display: "flex", justifyContent: "space-between", flexDirection: isTablet ? "column" : "none", - marginRight: "30px", + marginRight: isMobile ? "0" : "30px", }} > - + Настройки ответов { @@ -42,6 +43,7 @@ export default function ResponseSettings({ totalIndex }: Props) { }} /> { @@ -51,6 +53,7 @@ export default function ResponseSettings({ totalIndex }: Props) { }} /> { @@ -63,6 +66,7 @@ export default function ResponseSettings({ totalIndex }: Props) { Настройки вопросов { @@ -71,8 +75,9 @@ export default function ResponseSettings({ totalIndex }: Props) { }); }} /> - + { @@ -90,6 +95,7 @@ export default function ResponseSettings({ totalIndex }: Props) { {listQuestions[quizId][totalIndex].content.innerNameCheck && ( { diff --git a/src/pages/startPage/Sidebar/SidebarMobile.tsx b/src/pages/startPage/Sidebar/SidebarMobile.tsx new file mode 100644 index 00000000..24271895 --- /dev/null +++ b/src/pages/startPage/Sidebar/SidebarMobile.tsx @@ -0,0 +1,137 @@ +import BackArrowIcon from "@icons/BackArrowIcon"; +import { People } from "@mui/icons-material"; +import { Box, Typography } from "@mui/material"; +import { FC } from "react"; +import { ChartLineUp } from "./icons/ChartLineUp"; +import { ReturnTime } from "./icons/ReturnTime"; +import { Question } from "./icons/Question"; +import { Settings } from "./icons/Settings"; +import { Pencil } from "./icons/Pencil"; +import { ArrowDown } from "./icons/ArrowDown"; + +interface Iprops { + open: boolean; +} + +export const SidebarMobile: FC = ({ open }) => ( + + + + + + + Название + Название проекта + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/ArrowDown.tsx b/src/pages/startPage/Sidebar/icons/ArrowDown.tsx new file mode 100644 index 00000000..29ee7918 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ArrowDown.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const ArrowDown: FC> = (props) => ( + + + +); diff --git a/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx b/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx new file mode 100644 index 00000000..acef1b80 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx @@ -0,0 +1,15 @@ +import { FC, SVGProps } from "react"; + +export const ChartLineUp: FC> = (props) => ( + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/Pencil.tsx b/src/pages/startPage/Sidebar/icons/Pencil.tsx new file mode 100644 index 00000000..c2db708d --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Pencil.tsx @@ -0,0 +1,16 @@ +import { FC, SVGProps } from "react"; + +export const Pencil: FC> = (props) => ( + + + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/People.tsx b/src/pages/startPage/Sidebar/icons/People.tsx new file mode 100644 index 00000000..d880126d --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/People.tsx @@ -0,0 +1,10 @@ +import { FC, SVGProps } from "react"; + +export const People: FC> = (props) => ( + + + +); diff --git a/src/pages/startPage/Sidebar/icons/Question.tsx b/src/pages/startPage/Sidebar/icons/Question.tsx new file mode 100644 index 00000000..69989347 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Question.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from "react"; + +export const Question: FC> = (props) => ( + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/ReturnTime.tsx b/src/pages/startPage/Sidebar/icons/ReturnTime.tsx new file mode 100644 index 00000000..3724be6e --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ReturnTime.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const ReturnTime: FC> = (props) => ( + + + +); diff --git a/src/pages/startPage/Sidebar/icons/Settings.tsx b/src/pages/startPage/Sidebar/icons/Settings.tsx new file mode 100644 index 00000000..d96c590b --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Settings.tsx @@ -0,0 +1,24 @@ +import { FC, SVGProps } from "react"; + +export const Settings: FC> = (props) => ( + + + + + +); diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index bca81903..0dd43b12 100755 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -1,6 +1,6 @@ import Stepper from "@ui_kit/Stepper"; import SwitchStepPages from "@ui_kit/switchStepPages"; -import React from "react"; +import React, { useState } from "react"; import PenaLogo from "@ui_kit/PenaLogo"; import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material"; import BackArrowIcon from "@icons/BackArrowIcon"; @@ -10,6 +10,9 @@ import CustomAvatar from "@ui_kit/Header/Avatar"; import Sidebar from "@ui_kit/Sidebar"; import { quizStore } from "@root/quizes"; import { useParams } from "react-router-dom"; +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(); @@ -17,6 +20,9 @@ export default function StartPage() { const activeStep = listQuizes[params].step; const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(660)); + + const [mobileSidebar, setMobileSidebar] = useState(false); const handleNext = () => { updateQuizesList(params, { step: listQuizes[params].step + 1 }); @@ -37,17 +43,18 @@ export default function StartPage() { sx={{ px: "16px", display: "flex", - height: "80px", + height: isMobile ? "51px" : "80px", alignItems: "center", - bgcolor: "white", + bgcolor: isMobile ? "#333647" : "white", borderBottom: "1px solid #E3E3E3", zIndex: theme.zIndex.drawer + 1, }} > - + {isMobile ? : } + - + {isMobile ? ( + setMobileSidebar(!mobileSidebar)} + style={{ fontSize: "30px", color: "white", cursor: "pointer" }} + /> + ) : ( + + )} ) : ( <> @@ -153,10 +167,10 @@ export default function StartPage() { - + {isMobile ? : } void; +} + +const style: CSSObject = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 620, + minHeight: 251, + bgcolor: "background.paper", + borderRadius: "12px", + boxShadow: "24", +}; + +export const ReallyChangingModal: FC = ({ opened, onClose }) => ( + + + + Точно меняем? + + + + + Если поменять формат этого вопроса + на Варианты ответов , заполненные поля в этом вопросе пропадут, а + условия показа вопросов / результатов, зависимые от него, сбросятся. + + + + + + + + + +); diff --git a/src/ui_kit/Sidebar.tsx b/src/ui_kit/Sidebar.tsx index 0664f2e2..c84968b8 100755 --- a/src/ui_kit/Sidebar.tsx +++ b/src/ui_kit/Sidebar.tsx @@ -15,139 +15,143 @@ import LayoutIcon from "../assets/icons/LayoutIcon"; import MenuItem from "./MenuItem"; const createQuizMenuItems = [ - [LayoutIcon, "Стартовая страница"], - [QuestionIcon, "Вопросы"], - [ChartPieIcon, "Результаты"], - [ContactBookIcon, "Форма контактов"], - [FlowArrowIcon, "Установка квиза"], - [MegaphoneIcon, "Запуск рекламы"], + [LayoutIcon, "Стартовая страница"], + [QuestionIcon, "Вопросы"], + [ChartPieIcon, "Результаты"], + [ContactBookIcon, "Форма контактов"], + [FlowArrowIcon, "Установка квиза"], + [MegaphoneIcon, "Запуск рекламы"], ] as const; const quizSettingsMenuItems = [ - [TagIcon, "Дополнения"], - [PencilCircleIcon, "Дизайн"], - [PuzzlePieceIcon, "Интеграции"], - [GearIcon, "Настройки"], + [TagIcon, "Дополнения"], + [PencilCircleIcon, "Дизайн"], + [PuzzlePieceIcon, "Интеграции"], + [GearIcon, "Настройки"], ] as const; - export default function Sidebar() { - const theme = useTheme(); - const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); - const [activeMenuItemIndex, setActiveMenuItemIndex] = useState(0); - const [progress, setProgress] = useState(1 / 6); + const theme = useTheme(); + const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); + const [activeMenuItemIndex, setActiveMenuItemIndex] = useState(0); + const [progress, setProgress] = useState(1 / 6); - const handleMenuCollapseToggle = () => setIsMenuCollapsed(prev => !prev); - return ( - - - - {!isMenuCollapsed && - Создание квиза - } - - - - - - {createQuizMenuItems.map((menuItem, index) => { - const Icon = menuItem[0]; - return ( - setActiveMenuItemIndex(index)} - key={menuItem[1]} - text={menuItem[1]} - isCollapsed={isMenuCollapsed} - isActive={activeMenuItemIndex === index} - icon={} - /> - ); - })} - - {!isMenuCollapsed && - Настройки квиза - } - - {quizSettingsMenuItems.map((menuItem, index) => { - const Icon = menuItem[0]; - const totalIndex = index + createQuizMenuItems.length; - const isActive = activeMenuItemIndex === totalIndex; - return ( - setActiveMenuItemIndex(totalIndex)} - key={menuItem[1]} - text={menuItem[1]} - isActive={isActive} - isCollapsed={isMenuCollapsed} - icon={} - /> - ); - })} - - - - ) -} \ No newline at end of file + const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev); + return ( + + + {!isMenuCollapsed && ( + + Создание квиза + + )} + + + + + + {createQuizMenuItems.map((menuItem, index) => { + const Icon = menuItem[0]; + return ( + setActiveMenuItemIndex(index)} + key={menuItem[1]} + text={menuItem[1]} + isCollapsed={isMenuCollapsed} + isActive={activeMenuItemIndex === index} + icon={ + + } + /> + ); + })} + + {!isMenuCollapsed && ( + + Настройки квиза + + )} + + {quizSettingsMenuItems.map((menuItem, index) => { + const Icon = menuItem[0]; + const totalIndex = index + createQuizMenuItems.length; + const isActive = activeMenuItemIndex === totalIndex; + return ( + setActiveMenuItemIndex(totalIndex)} + key={menuItem[1]} + text={menuItem[1]} + isActive={isActive} + isCollapsed={isMenuCollapsed} + icon={ + + } + /> + ); + })} + + + ); +}