diff --git a/src/assets/icons/InfoIcon.tsx b/src/assets/icons/InfoIcon.tsx index 7aae8f1a..33248465 100755 --- a/src/assets/icons/InfoIcon.tsx +++ b/src/assets/icons/InfoIcon.tsx @@ -20,13 +20,7 @@ export default function InfoIcon({ sx }: InfoIconProps) { ...sx, }} > - + void; + sx?: SxProps; } -const AddImage: FC = ({ onClick }) => { +const AddImage: FC = ({ onClick, sx }) => { return ( = ({ onClick }) => { cursor: "pointer", }} > - + - + ( + + + + + + + + +); diff --git a/src/assets/icons/questionsPage/addPlusVideo.tsx b/src/assets/icons/questionsPage/addPlusVideo.tsx new file mode 100644 index 00000000..24428cbf --- /dev/null +++ b/src/assets/icons/questionsPage/addPlusVideo.tsx @@ -0,0 +1,20 @@ +import { FC } from "react"; + +export const AddPlusVideo: FC = () => ( + + + + + + + +); diff --git a/src/index.tsx b/src/index.tsx index e2020c30..eb2ac964 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -44,13 +44,7 @@ root.render( {routeslink.map((e, i) => ( - - } - /> + } /> ))} } /> } /> diff --git a/src/pages/ContactFormPage/ButtonSettingForms.tsx b/src/pages/ContactFormPage/ButtonSettingForms.tsx index bf369127..d9570c56 100644 --- a/src/pages/ContactFormPage/ButtonSettingForms.tsx +++ b/src/pages/ContactFormPage/ButtonSettingForms.tsx @@ -2,49 +2,66 @@ import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import React from "react"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import Branching from "../../assets/icons/questionsPage/branching"; -import {Box, useTheme} from "@mui/material"; +import { Box, useTheme } from "@mui/material"; import SupplementIcon from "../../assets/icons/ContactFormIcon/supplementIcon"; interface Props { - switchState: string - SSHC: (data:string) => void + switchState: string; + SSHC: (data: string) => void; } -export default function ButtonSettingForms ({SSHC, switchState}:Props) { - const theme = useTheme(); - const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[ - {icon: , title: 'Настройки', value: 'setting'}, - {icon: , title: 'Ветвление', value: 'branching'}, - {icon: , title: 'Добавить шаг формы', value: 'supplement'}, - ] +export default function ButtonSettingForms({ SSHC, switchState }: Props) { + const theme = useTheme(); + const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [ + { + icon: , + title: "Настройки", + value: "setting", + }, + { + icon: , + title: "Ветвление", + value: "branching", + }, + { + icon: , + title: "Добавить шаг формы", + value: "supplement", + }, + ]; - return ( - - - {buttonSetting.map( (e,i) => ( - {SSHC(e.value)}} - sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent', - color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main, - }} - > - {e.icon} - {e.title} - - ))} - - - ) -} \ No newline at end of file + return ( + + + {buttonSetting.map((e, i) => ( + { + SSHC(e.value); + }} + sx={{ + backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent", + color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main, + }} + > + {e.icon} + {e.title} + + ))} + + + ); +} diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index d0dfc028..389b5bd5 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -1,14 +1,7 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; import { Draggable } from "react-beautiful-dnd"; -import { - Box, - TextField, - FormControl, - InputAdornment, - IconButton, - useTheme, -} from "@mui/material"; +import { Box, TextField, FormControl, InputAdornment, IconButton, useTheme, useMediaQuery } from "@mui/material"; import { questionStore, updateQuestionsList } from "@root/questions"; @@ -30,16 +23,11 @@ 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(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); const [isOpen, setIsOpen] = useState(false); const [anchorEl, setAnchorEl] = useState(null); @@ -109,7 +97,7 @@ export const AnswerItem = ({ key={index} fullWidth variant="standard" - sx={{ padding: "0 0 20px 0" }} + sx={{ padding: isMobile ? " 15px 0 20px 0" : "0 0 20px 0" }} > ) => { - if ( - event.code === "Enter" && - !listQuestions[quizId][totalIndex].content.largeCheck - ) { + if (event.code === "Enter" && !listQuestions[quizId][totalIndex].content.largeCheck) { addNewAnswer(); } }} InputProps={{ startAdornment: ( <> - + {icon && icon} @@ -140,10 +122,7 @@ export const AnswerItem = ({ ), endAdornment: ( - + - ) => event.stopPropagation()} + onKeyDown={(event: KeyboardEvent) => event.stopPropagation()} /> diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index dffd5726..0f8f19cd 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -4,16 +4,11 @@ import React from "react"; 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 } from "@mui/material"; +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 { - questionStore, - resetSomeField, - copyQuestion, - removeQuestion, -} from "@root/questions"; +import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions"; interface Props { switchState: string; @@ -21,11 +16,7 @@ interface Props { totalIndex: number; } -export default function ButtonsOptions({ - SSHC, - switchState, - totalIndex, -}: Props) { +export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) { const quizId = Number(useParams().quizId); const { openedModalSettings } = questionStore(); const openedModal = () => { @@ -33,6 +24,8 @@ export default function ButtonsOptions({ console.log(openedModalSettings); }; const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); const buttonSetting: { icon: JSX.Element; title: string; @@ -40,33 +33,17 @@ export default function ButtonsOptions({ myFunc?: any; }[] = [ { - icon: ( - - ), + icon: , title: "Настройки", value: "setting", }, { - icon: ( - - ), + icon: , title: "Подсказка", value: "help", }, { - icon: ( - - ), + icon: , title: "Ветвление", value: "branching", myFunc: openedModal, @@ -86,6 +63,7 @@ export default function ButtonsOptions({ sx={{ padding: "20px", display: "flex", + flexWrap: isMobile ? "wrap" : "nowrap", gap: "10px", }} > @@ -107,9 +85,7 @@ export default function ButtonsOptions({ > Будет показан при условии - - Название - + Название Условие 1, Условие 2 - - Все условия обязательны - + Все условия обязательны } > @@ -132,18 +106,15 @@ export default function ButtonsOptions({ myFunc(); }} sx={{ - backgroundColor: - switchState === value - ? theme.palette.brightPurple.main - : "transparent", - color: - switchState === value - ? "#ffffff" - : theme.palette.grey3.main, + backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", + color: switchState === value ? "#ffffff" : theme.palette.grey3.main, + minWidth: isMobile ? "30px" : "64px", + height: "30px", }} > {icon} - {title} + + {isMobile ? null : title} ) : ( @@ -154,18 +125,14 @@ export default function ButtonsOptions({ myFunc(); }} sx={{ - backgroundColor: - switchState === value - ? theme.palette.brightPurple.main - : "transparent", - color: - switchState === value - ? "#ffffff" - : theme.palette.grey3.main, + backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", + color: switchState === value ? "#ffffff" : theme.palette.grey3.main, + minWidth: isMobile ? "30px" : "64px", + height: "30px", }} > {icon} - {title} + {isMobile ? null : title} )} @@ -174,21 +141,16 @@ export default function ButtonsOptions({ - copyQuestion(quizId, totalIndex)} - > + copyQuestion(quizId, totalIndex)}> - removeQuestion(quizId, totalIndex)} - > + removeQuestion(quizId, totalIndex)}> diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index 43fd1812..dee2bf24 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx @@ -3,18 +3,13 @@ import React from "react"; 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, useTheme } from "@mui/material"; +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 "./ButtonsOptionsAndPict.css"; @@ -24,14 +19,12 @@ interface Props { totalIndex: number; } -export default function ButtonsOptionsAndPict({ - SSHC, - switchState, - totalIndex, -}: Props) { +export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) { const quizId = Number(useParams().quizId); const { openedModalSettings } = questionStore(); const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isIconMobile = useMediaQuery(theme.breakpoints.down(930)); const openedModal = () => { resetSomeField({ openedModalSettings: "open" }); @@ -50,6 +43,7 @@ export default function ButtonsOptionsAndPict({ sx={{ padding: "20px", display: "flex", + flexWrap: isMobile ? "wrap" : "nowrap", gap: "10px", }} > @@ -58,40 +52,28 @@ export default function ButtonsOptionsAndPict({ SSHC("setting"); }} sx={{ - backgroundColor: - switchState === "setting" - ? theme.palette.brightPurple.main - : "transparent", - color: - switchState === "setting" ? "#ffffff" : theme.palette.grey3.main, + minWidth: isIconMobile ? "30px" : "64px", + height: "30px", + backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent", + color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main, }} > - - Настройки + + {isIconMobile ? null : " Настройки"} { SSHC("help"); }} sx={{ - backgroundColor: - switchState === "help" - ? theme.palette.brightPurple.main - : "transparent", - color: - switchState === "help" ? "#ffffff" : theme.palette.grey3.main, + minWidth: isIconMobile ? "30px" : "64px", + height: "30px", + backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent", + color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main, }} > - - Помощь + + {isIconMobile ? null : " Помощь"} Будет показан при условии - - Название - + Название Условие 1, Условие 2 - - Все условия обязательны - + Все условия обязательны } > @@ -132,24 +110,14 @@ export default function ButtonsOptionsAndPict({ openedModal(); }} sx={{ - backgroundColor: - switchState === "branching" - ? theme.palette.brightPurple.main - : "transparent", - color: - switchState === "branching" - ? "#ffffff" - : theme.palette.grey3.main, + height: "30px", + minWidth: isIconMobile ? "30px" : "64px", + backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent", + color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main, }} > - - Ветвление + + {isIconMobile ? null : "Ветвление"} - - Изображение + + {isIconMobile ? null : "Изображение"} - copyQuestion(quizId, totalIndex)} - > + copyQuestion(quizId, totalIndex)}> - removeQuestion(quizId, totalIndex)} - > + removeQuestion(quizId, totalIndex)}> diff --git a/src/pages/Questions/DataOptions/DataOptions.tsx b/src/pages/Questions/DataOptions/DataOptions.tsx index f76d3059..5f27acf3 100644 --- a/src/pages/Questions/DataOptions/DataOptions.tsx +++ b/src/pages/Questions/DataOptions/DataOptions.tsx @@ -1,5 +1,5 @@ import { useParams } from "react-router-dom"; -import { Box, Typography, useTheme } from "@mui/material"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import SwitchData from "./switchData"; import { useState, useEffect } from "react"; @@ -16,6 +16,7 @@ export default function DataOptions({ totalIndex }: Props) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); const SSHC = (data: string) => { setSwitchState(data); @@ -33,36 +34,34 @@ export default function DataOptions({ totalIndex }: Props) { <> - + { const clonContent = listQuestions[quizId][totalIndex].content; clonContent.type = "calendar"; updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} + sx={{ maxWidth: "257px", height: "48px", whiteSpace: "nowrap" }} > Использовать календарь { const clonContent = listQuestions[quizId][totalIndex].content; clonContent.type = "mask"; updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} + sx={{ maxWidth: "211px", height: "48px", whiteSpace: "nowrap" }} > Использовать маску @@ -81,11 +80,7 @@ export default function DataOptions({ totalIndex }: Props) { - + ); diff --git a/src/pages/Questions/DataOptions/settingData.tsx b/src/pages/Questions/DataOptions/settingData.tsx index 001b25cb..e53879ad 100644 --- a/src/pages/Questions/DataOptions/settingData.tsx +++ b/src/pages/Questions/DataOptions/settingData.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"; import InfoIcon from "../../../assets/icons/InfoIcon"; @@ -12,9 +12,11 @@ type SettingsDataProps = { export default function SettingsData({ totalIndex }: SettingsDataProps) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const theme = useTheme(); + const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); return ( - + Настройки календаря { @@ -36,7 +39,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { }} /> - + Настройки вопросов { switch (switchState) { case "variant": - return ( - - ); + return ; case "images": - return ( - - ); + return ; case "varimg": - return ( - - ); + return ; case "emoji": - return ( - - ); + return ; case "text": - return ( - - ); + return ; case "select": - return ( - - ); + return ; case "date": - return ( - - ); + return ; case "number": - return ( - - ); + return ; case "file": - return ( - - ); + return ; case "page": - return ( - - ); + return ; case "rating": - return ( - - ); + return ; default: return <>; } }; -export default function QuestionsPageCard({ - totalIndex, - draggableProps, - isDragging, -}: Props) { +export default function QuestionsPageCard({ totalIndex, draggableProps, isDragging }: Props) { const [plusVisible, setPlusVisible] = useState(false); const quizId = Number(useParams().quizId); const theme = useTheme(); + 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]; return ( <> @@ -159,17 +96,19 @@ export default function QuestionsPageCard({ > - + { @@ -179,18 +118,12 @@ export default function QuestionsPageCard({ console.log(listQuestions[quizId][totalIndex].title); }} InputProps={{ - startAdornment: ( - - {IconAndrom(isExpanded, switchState)} - - ), + startAdornment: {IconAndrom(isExpanded, switchState)}, }} 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": { @@ -208,53 +141,50 @@ export default function QuestionsPageCard({ }} /> - - - updateQuestionsList(quizId, totalIndex, { expanded: !isExpanded }) - } - > - {isExpanded ? ( - - ) : ( - - )} - - {isExpanded ? ( - <> - ) : ( - - } - checkedIcon={} + + + updateQuestionsList(quizId, totalIndex, { expanded: !isExpanded })}> + {isExpanded ? : } + + {isExpanded ? ( + <> + ) : ( + + } checkedIcon={} />} + label={""} + sx={{ + color: theme.palette.grey2.main, + ml: "-9px", + mr: 0, + userSelect: "none", + }} /> - } - label={""} - sx={{ - color: theme.palette.grey2.main, - ml: "-9px", - mr: 0, - userSelect: "none", - }} - /> - copyQuestion(quizId, totalIndex)}> - - - removeQuestion(quizId, totalIndex)} - > - - - - )} + copyQuestion(quizId, totalIndex)}> + + + removeQuestion(quizId, totalIndex)} + > + + + + )} - - - - + + + + + + {isExpanded && ( diff --git a/src/pages/Questions/DraggableList/index.tsx b/src/pages/Questions/DraggableList/index.tsx index 8db7887e..4eeb5631 100644 --- a/src/pages/Questions/DraggableList/index.tsx +++ b/src/pages/Questions/DraggableList/index.tsx @@ -17,11 +17,7 @@ export const DraggableList = () => { const onDragEnd = ({ destination, source }: DropResult) => { if (destination) { - const newItems = reorder( - listQuestions[quizId], - source.index, - destination.index - ); + const newItems = reorder(listQuestions[quizId], source.index, destination.index); updateQuestionsListDragAndDrop(quizId, newItems); } @@ -33,11 +29,7 @@ export const DraggableList = () => { {(provided, snapshot) => ( {listQuestions[quizId]?.map((_, index) => ( - + ))} {provided.placeholder} diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx index 1fcc9027..ef9c7ecf 100644 --- a/src/pages/Questions/DropDown/DropDown.tsx +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; -import { Box, Typography, Link, useTheme } from "@mui/material"; +import { Box, Typography, Link, useTheme, useMediaQuery } from "@mui/material"; import { AnswerDraggableList } from "../AnswerDraggableList"; import { questionStore, updateQuestionsList } from "@root/questions"; @@ -18,6 +18,7 @@ export default function DropDown({ totalIndex }: Props) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); const variants = listQuestions[quizId][totalIndex].content.variants; const SSHC = (data: string) => { @@ -38,7 +39,7 @@ export default function DropDown({ totalIndex }: Props) { return ( <> - + {variants.length === 0 ? ( Добавьте ответ - - или нажмите Enter - - + {isMobile ? null : ( + <> + + или нажмите Enter + + + + )} - + ); diff --git a/src/pages/Questions/DropDown/settingDropDown.tsx b/src/pages/Questions/DropDown/settingDropDown.tsx index ae121649..d6dc8636 100644 --- a/src/pages/Questions/DropDown/settingDropDown.tsx +++ b/src/pages/Questions/DropDown/settingDropDown.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"; @@ -15,15 +15,23 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + return ( <> - - - Настройки ответов - + + Настройки ответов - - Текст в выпадающем списке - - { - const clonContent = listQuestions[quizId][totalIndex].content; - clonContent.default = target.value; - updateQuestionsList(quizId, totalIndex, { content: clonContent }); - }} - /> + + Текст в выпадающем списке + { + const clonContent = listQuestions[quizId][totalIndex].content; + clonContent.default = target.value; + updateQuestionsList(quizId, totalIndex, { content: clonContent }); + }} + /> + - - Настройки вопросов - + Настройки вопросов - + {" "} - + /> + + + + Текст в выпадающем списке + { + const clonContent = listQuestions[quizId][totalIndex].content; + clonContent.default = target.value; + updateQuestionsList(quizId, totalIndex, { content: clonContent }); + }} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( { setSwitchState(data); @@ -39,8 +40,7 @@ export default function Emoji({ totalIndex }: Props) { variant="body2" sx={{ color: theme.palette.brightPurple.main }} onClick={() => { - const answerNew = - listQuestions[quizId][totalIndex].content.variants.slice(); + const answerNew = listQuestions[quizId][totalIndex].content.variants.slice(); answerNew.push({ answer: "", hints: "" }); updateQuestionsList(quizId, totalIndex, { @@ -53,24 +53,24 @@ export default function Emoji({ totalIndex }: Props) { > Добавьте ответ - - или нажмите Enter - - + {isMobile ? null : ( + <> + + или нажмите Enter + + + + )} - + ); diff --git a/src/pages/Questions/Emoji/settingEmoji.tsx b/src/pages/Questions/Emoji/settingEmoji.tsx index 847931ed..3f989f35 100644 --- a/src/pages/Questions/Emoji/settingEmoji.tsx +++ b/src/pages/Questions/Emoji/settingEmoji.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"; import InfoIcon from "../../../assets/icons/InfoIcon"; @@ -12,9 +12,12 @@ type SettingEmojiProps = { export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const theme = useTheme(); + const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); return ( - + Настройки ответов - + Настройки вопросов { setSwitchState(data); }; @@ -24,53 +26,48 @@ export default function OptionsAndPicture({ totalIndex }: Props) { <> - {listQuestions[quizId][totalIndex].content.variants.map( - (_, index) => ( - ( + + - ) - )} + Добавьте ответ + + + ))} Добавьте ответ - - или нажмите Enter - - + {isMobile ? null : ( + <> + + или нажмите Enter + + + + )} - + ); diff --git a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx index 19d569df..f141d6a4 100644 --- a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx +++ b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.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"; import InfoIcon from "../../../assets/icons/InfoIcon"; @@ -10,21 +10,25 @@ 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 isMobile = useMediaQuery(theme.breakpoints.down(680)); return ( <> - - - Настройки ответов - + + Настройки ответов - - Текст-заглушка на картинке - + Текст-заглушка на картинке { @@ -53,10 +56,13 @@ export default function SettingOptionsAndPict({ }} /> - - - Настройки вопросов - + + Настройки вопросов {" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index e82adb05..3ae34c1a 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; -import { Box, Link, Typography, Button, useTheme } from "@mui/material"; +import { Box, Link, Typography, Button, useTheme, useMediaQuery } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import { questionStore, updateQuestionsList } from "@root/questions"; @@ -17,6 +17,8 @@ interface Props { export default function OptionsPicture({ totalIndex }: Props) { const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); const quizId = Number(useParams().quizId); const [switchState, setSwitchState] = useState("setting"); const { listQuestions } = questionStore(); @@ -38,9 +40,7 @@ export default function OptionsPicture({ totalIndex }: Props) { return ( <> - + - - + + ); } diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index b843daf2..7678ca3d 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -1,6 +1,6 @@ import { useEffect } from "react"; import { useParams } from "react-router-dom"; -import { Box, Button, Typography, useTheme } from "@mui/material"; +import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -31,26 +31,17 @@ const PROPORTIONS = [ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) { const theme = useTheme(); + return ( - } + startIcon={} 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", minWidth: 0, @@ -60,20 +51,19 @@ 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 isMobile = useMediaQuery(theme.breakpoints.down(790)); useEffect(() => { if (!listQuestions[quizId][totalIndex].content.xy) { @@ -93,6 +83,7 @@ export default function SettingOpytionsPict({ sx={{ display: "flex", justifyContent: "space-between", + flexDirection: isTablet ? "column" : null, marginRight: "30px", }} > @@ -109,16 +100,13 @@ export default function SettingOpytionsPict({ updateProportions(value)} - isActive={ - listQuestions[quizId][totalIndex].content.xy === value - } + isActive={listQuestions[quizId][totalIndex].content.xy === value} Icon={icon} /> ))} - - Настройки ответов - + + Настройки ответов @@ -146,6 +135,7 @@ export default function SettingOpytionsPict({ } /> @@ -158,7 +148,7 @@ export default function SettingOpytionsPict({ } /> - + Форма - - Настройки вопросов - + Настройки вопросов - + ); diff --git a/src/pages/Questions/OwnTextField/settingTextField.tsx b/src/pages/Questions/OwnTextField/settingTextField.tsx index e9505e97..214f2d2e 100644 --- a/src/pages/Questions/OwnTextField/settingTextField.tsx +++ b/src/pages/Questions/OwnTextField/settingTextField.tsx @@ -6,6 +6,7 @@ import { Radio, RadioGroup, Typography, + useMediaQuery, useTheme, } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; @@ -32,18 +33,19 @@ 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)); return ( @@ -53,9 +55,7 @@ export default function SettingTextField({ listQuestions[quizId][totalIndex].content[value] - )} + value={ANSWER_TYPES.findIndex(({ value }) => listQuestions[quizId][totalIndex].content[value])} onChange={({ target }: React.ChangeEvent) => { const clonContent = { ...listQuestions[quizId][totalIndex].content, @@ -76,9 +76,7 @@ export default function SettingTextField({ "& .MuiRadio-root": { padding: "8px 9px" }, }} value={index} - control={ - } checkedIcon={} /> - } + control={} checkedIcon={} />} label={name} /> ))} diff --git a/src/pages/Questions/PageOptions/PageOptions.tsx b/src/pages/Questions/PageOptions/PageOptions.tsx index 41a90413..b3bb106a 100644 --- a/src/pages/Questions/PageOptions/PageOptions.tsx +++ b/src/pages/Questions/PageOptions/PageOptions.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; -import { Box, Typography, useTheme } from "@mui/material"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import CustomTextField from "@ui_kit/CustomTextField"; import AddImage from "../../../assets/icons/questionsPage/addImage"; @@ -9,6 +9,8 @@ import SwitchPageOptions from "./switchPageOptions"; import { questionStore, updateQuestionsList } from "@root/questions"; import { UploadImageModal } from "../UploadImage/UploadImageModal"; import { UploadVideoModal } from "../UploadVideoModal"; +import { AddPlusImage } from "@icons/questionsPage/addPlusImage"; +import { AddPlusVideo } from "@icons/questionsPage/addPlusVideo"; type Props = { disableInput?: boolean; @@ -22,6 +24,8 @@ export default function PageOptions({ disableInput, totalIndex }: Props) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(980)); + const isMobile = useMediaQuery(theme.breakpoints.down(780)); const SSHC = (data: string) => { setSwitchState(data); @@ -31,7 +35,7 @@ export default function PageOptions({ disableInput, totalIndex }: Props) { <> - + setOpenImageModal(true)} sx={{ @@ -60,9 +66,11 @@ export default function PageOptions({ disableInput, totalIndex }: Props) { gap: "10px", }} > - + {isMobile ? : } + - + {isMobile ? : } + - + ); diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 9ee5b4bd..5fca60dd 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -1,13 +1,9 @@ -import { Box, Button, IconButton, Typography, useTheme } from "@mui/material"; +import { Box, Button, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material"; import AddPlus from "../../assets/icons/questionsPage/addPlus"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import { quizStore } from "@root/quizes"; import { useParams } from "react-router-dom"; -import { - questionStore, - createQuestion, - updateQuestionsList, -} from "@root/questions"; +import { questionStore, createQuestion, updateQuestionsList } from "@root/questions"; import { DraggableList } from "./DraggableList"; export default function QuestionsPage() { @@ -30,9 +26,11 @@ export default function QuestionsPage() { }; const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.up(1000)); + return ( <> - {/**/} + {/* */} - - - - + {/*хедер*/} + + + + handleBack()}> + + + + + + + {isTablet ? ( + + + + ) : ( + <> + - - - - - + + + + + - - ) -} \ No newline at end of file + + } + sx={{ + color: theme.palette.brightPurple.main, + fontSize: "14px", + lineHeight: "18px", + height: "34px", + "& .MuiButton-startIcon": { + mr: "3px", + }, + }} + > + Предпросмотр + + + + + + )} + + + + + + + + + + + ); +} diff --git a/src/ui_kit/CustomCheckbox.tsx b/src/ui_kit/CustomCheckbox.tsx index 8c3bb8eb..6f0ecafd 100755 --- a/src/ui_kit/CustomCheckbox.tsx +++ b/src/ui_kit/CustomCheckbox.tsx @@ -3,69 +3,65 @@ import React from "react"; import type { SxProps } from "@mui/material"; - interface Props { - label: string; - handleChange?: (event: React.ChangeEvent) => void; - checked?: boolean; - sx?: SxProps; + label: string; + handleChange?: (event: React.ChangeEvent) => void; + checked?: boolean; + sx?: SxProps; } -export default function CustomCheckbox({ label, handleChange, checked, sx}: Props) { - const theme = useTheme(); +export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) { + const theme = useTheme(); - return ( - } - checkedIcon={} - onChange={handleChange} - checked={checked} - />} - label={label} - sx={{ - color: theme.palette.grey2.main, - ml: "-9px", - userSelect: "none", - ...sx, - }} - - /> - ); + return ( + } checkedIcon={} onChange={handleChange} checked={checked} />} + label={label} + sx={{ + color: theme.palette.grey2.main, + ml: "-9px", + userSelect: "none", + ...sx, + }} + /> + ); } function Icon() { - const theme = useTheme(); + const theme = useTheme(); - return ( - - ); + return ( + + ); } function CheckedIcon() { - const theme = useTheme(); + const theme = useTheme(); - return ( - - - - - - ); -} \ No newline at end of file + return ( + + + + + + ); +} diff --git a/src/ui_kit/Header/Header.tsx b/src/ui_kit/Header/Header.tsx index 252d4115..d04805bd 100755 --- a/src/ui_kit/Header/Header.tsx +++ b/src/ui_kit/Header/Header.tsx @@ -1,131 +1,138 @@ -import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material"; +import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material"; import BackArrowIcon from "@icons/BackArrowIcon"; import EyeIcon from "@icons/EyeIcon"; import CustomAvatar from "./Avatar"; import NavMenuItem from "./NavMenuItem"; import PenaLogo from "../PenaLogo"; -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 Header() { + const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore(); + const params = Number(useParams().quizId); + const activeStep = listQuizes[params].step; + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); -export default function Header() { - const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); - const params = Number(useParams().quizId); - const theme = useTheme(); + const handleNext = () => { + updateQuizesList(params, { step: listQuizes[params].step + 1 }); + }; - const handleNext = () => { - updateQuizesList(params, {step: listQuizes[params].step + 1}) - } + const handleBack = () => { + let result = listQuizes[params].step - 1; + updateQuizesList(params, { step: result ? result : 0 }); + }; - const handleBack = () => { - let result = listQuizes[params].step - 1 - updateQuizesList(params, {step: result ? result : 0}) - }; - - return ( - + + + handleBack()}> + + + + - - + + + + {isTablet ? null : ( + <> + + + + + + + + + } + sx={{ + color: theme.palette.brightPurple.main, + fontSize: "14px", + lineHeight: "18px", + height: "34px", + "& .MuiButton-startIcon": { + mr: "3px", + }, + }} > - handleBack()} - > - - - - - - - + - - } - sx={{ - color: theme.palette.brightPurple.main, - fontSize: "14px", - lineHeight: "18px", - height: "34px", - "& .MuiButton-startIcon": { - mr: "3px", - } - }} - >Предпросмотр - - - - - ); -} \ No newline at end of file + Опубликовать + + + + + )} + + ); +} diff --git a/src/ui_kit/QuestionsMiniButton.tsx b/src/ui_kit/QuestionsMiniButton.tsx index c3ef95a0..870bbca0 100755 --- a/src/ui_kit/QuestionsMiniButton.tsx +++ b/src/ui_kit/QuestionsMiniButton.tsx @@ -1,42 +1,46 @@ -import {Button, Typography, useTheme} from "@mui/material"; +import { Button, Typography, useTheme } from "@mui/material"; import Answer from "../assets/icons/questionsPage/answer"; import React from "react"; import { ReactNode } from "react"; interface QuestionsMiniButtonProps { - icon: ReactNode; - text: string; - onClick: () => void; + icon: ReactNode; + text: string; + onClick: () => void; } export default function QuestionsMiniButton({ icon, text, onClick }: QuestionsMiniButtonProps) { - const theme = useTheme(); + const theme = useTheme(); - return ( - <> - - - ); -} \ No newline at end of file + return ( + <> + + + ); +} diff --git a/src/ui_kit/Stepper.tsx b/src/ui_kit/Stepper.tsx index fb73fdb2..c3491f1e 100755 --- a/src/ui_kit/Stepper.tsx +++ b/src/ui_kit/Stepper.tsx @@ -1,55 +1,59 @@ -import * as React from 'react'; -import MobileStepper from '@mui/material/MobileStepper'; -import {Box, Typography} from "@mui/material"; +import * as React from "react"; +import MobileStepper from "@mui/material/MobileStepper"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; interface Props { - desc?: string; - activeStep?: number; - steps?: number; + desc?: string; + activeStep?: number; + steps?: number; } -export default function ProgressMobileStepper({desc, activeStep = 1, steps = 7}:Props) { +export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 7 }: Props) { + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); return ( - - } - backButton={<>} - /> - - Шаг {activeStep} из {steps-1} - {desc} - + + } + backButton={<>} + /> + + + {" "} + Шаг {activeStep} из {steps - 1} + + {desc} + ); -} \ No newline at end of file +} diff --git a/src/ui_kit/switchStepPages.tsx b/src/ui_kit/switchStepPages.tsx index dd03d029..4358f802 100755 --- a/src/ui_kit/switchStepPages.tsx +++ b/src/ui_kit/switchStepPages.tsx @@ -1,38 +1,37 @@ -import * as React from 'react'; +import * as React from "react"; import StepOne from "../pages/startPage/stepOne"; import Steptwo from "../pages/startPage/steptwo"; import StartPageSettings from "../pages/startPage/StartPageSettings"; import QuestionsPage from "../pages/Questions/QuestionsPage"; import ContactFormPage from "../pages/ContactFormPage/ContactFormPage"; import InstallQuiz from "../pages/InstallQuiz/InstallQuiz"; -import {Result} from "../pages/Result/Result"; -import {Setting} from "../pages/Result/Setting"; +import { Result } from "../pages/Result/Result"; +import { Setting } from "../pages/Result/Setting"; interface Props { - activeStep: number, - handleNext: () => void + activeStep: number; + handleNext: () => void; } -export default function SwitchStepPages({activeStep = 1, handleNext }: Props) { - - switch (activeStep) { - case 1: - return (); - case 2: - return (); - case 3: - return (); - case 4: - return (); - case 5: - return (); - case 6: - return (); - case 7: - return (); - case 8: - return (); - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchStepPages({ activeStep = 1, handleNext }: Props) { + switch (activeStep) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + case 5: + return ; + case 6: + return ; + case 7: + return ; + case 8: + return ; + default: + return <>; + } +}