diff --git a/src/App.tsx b/src/App.tsx index 79a3a345..257a1892 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import "dayjs/locale/ru"; import SigninDialog from "./pages/auth/Signin"; import SignupDialog from "./pages/auth/Signup"; import { ViewPage } from "./pages/ViewPublicationPage"; -import { DesignPage } from "./pages/startPage/DesignPage"; +import { DesignPage } from "./pages/DesignPage/DesignPage"; import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom"; import "./index.css"; import ContactFormPage from "./pages/ContactFormPage/ContactFormPage"; diff --git a/src/pages/DesignPage/ColorRingIcon.tsx b/src/pages/DesignPage/ColorRingIcon.tsx new file mode 100644 index 00000000..2aa926f4 --- /dev/null +++ b/src/pages/DesignPage/ColorRingIcon.tsx @@ -0,0 +1,23 @@ +import {Box} from "@mui/material"; + +interface Color{ + color?: string +} +export default function ColorRingIcon({color = "#333647"}: Color) { + + return ( + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/DesignPage/DesignFilling.tsx b/src/pages/DesignPage/DesignFilling.tsx new file mode 100644 index 00000000..6715d3a8 --- /dev/null +++ b/src/pages/DesignPage/DesignFilling.tsx @@ -0,0 +1,118 @@ +import {Box, ButtonBase, IconButton, Paper, Typography, useMediaQuery, useTheme} from "@mui/material"; +import ColorRingIcon from "./ColorRingIcon"; +import {updateQuiz} from "@root/quizes/actions"; +import {useCurrentQuiz} from "@root/quizes/hooks"; +import {toggleQuizPreview} from "@root/quizPreview"; +import VisibilityIcon from "@mui/icons-material/Visibility"; +import React from "react"; + +export const DesignFilling = () => { + const quiz = useCurrentQuiz(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(830)); + const ButtonsThemeLight = [ + ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"], + ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"], + ["Оливковый", "OliveTheme", "#758E4F", "#F9FBF1"], + ["Фиолетовый", "PurpleTheme", "#7E2AEA", "#FBF8FF"], + ["Желтый", "YellowTheme", "#F2B133", "#FFFCF6"], + ["Голубой", "BlueTheme", "#4964ED", "#F5F7FF"], + ["Розовый", "PinkTheme", "#D34085", "#FFF9FC"] + ] + const ButtonsThemeDark = [ + ["Стандартный", "StandardDarkTheme", "#7E2AEA", "#FFFFFF"], + ["Золотой", "GoldDarkTheme", "#E6AA37", "#FFFFFF"], + ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"], + ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"], + ] + return ( + + Дизайн + + + Со светлым фоном + + {ButtonsThemeLight.map((e, i) => ( + updateQuiz(quiz.id, (quiz) => { + quiz.config.theme = e[1]})} + > + {e[0]} + + + + + + + ))} + + + + С тёмным фоном + {ButtonsThemeDark.map((e, i) => ( + updateQuiz(quiz.id, (quiz) => { + quiz.config.theme = e[1]})} + > + {e[0]} + + + + + + + ))} + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/pages/startPage/DesignPage.tsx b/src/pages/DesignPage/DesignPage.tsx similarity index 74% rename from src/pages/startPage/DesignPage.tsx rename to src/pages/DesignPage/DesignPage.tsx index 96d2fb83..e983eade 100644 --- a/src/pages/startPage/DesignPage.tsx +++ b/src/pages/DesignPage/DesignPage.tsx @@ -1,5 +1,5 @@ import { quizApi } from "@api/quiz"; -import { Box, useMediaQuery, useTheme } from "@mui/material"; +import {Box, IconButton, useMediaQuery, useTheme} from "@mui/material"; import { resetEditConfig, setQuizes, @@ -10,10 +10,10 @@ import { useCurrentQuiz } from "@root/quizes/hooks"; import { useQuizStore } from "@root/quizes/store"; import Sidebar from "@ui_kit/Sidebar"; import { enqueueSnackbar } from "notistack"; -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useDebouncedCallback } from "use-debounce"; -import { SidebarMobile } from "./Sidebar/SidebarMobile"; +import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile"; import { cleanQuestions, createResult, @@ -33,10 +33,15 @@ import { clearUserData } from "@root/user"; import { clearAuthToken } from "@frontend/kitui"; import { logout } from "@api/auth"; import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; -import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate"; -import { ConfirmLeaveModal } from "./ConfirmLeaveModal"; +import { ModalInfoWhyCantCreate } from "../startPage/ModalInfoWhyCantCreate"; +import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal"; import { checkQuestionHint } from "@utils/checkQuestionHint"; -import { Header } from "./Header"; +import { Header } from "../startPage/Header"; +import {DesignFilling} from "./DesignFilling"; +import {toggleQuizPreview} from "@root/quizPreview"; +import VisibilityIcon from "@mui/icons-material/Visibility"; +import {createPortal} from "react-dom"; +import QuizPreview from "@ui_kit/QuizPreview/QuizPreview"; export const DesignPage = () => { const quiz = useCurrentQuiz(); @@ -47,7 +52,10 @@ export const DesignPage = () => { const getData = async () => { const quizes = await quizApi.getList(); setQuizes(quizes); - + if (editQuizId) { + const questions = await questionApi.getList({ quiz_id: editQuizId }); + setQuestions(questions); + } }; getData(); }, []); @@ -71,6 +79,7 @@ export const DesignPage = () => { useEffect(() => { if (editQuizId === null) navigate("/list"); + }, [navigate, editQuizId]); const followNewPage = () => { @@ -95,13 +104,14 @@ export const DesignPage = () => { return ( <>
- + {isMobile ? ( ) : ( )} - Страница дизайна + + {createPortal(, document.body)} = ({ - - - Или выберите на фотостоке - - - - path": { stroke: "#9A9AAF" }, - }} - > - - - ), - }} - /> + {/* */} + {/* */} + {/* Или выберите на фотостоке*/} + {/* */} + {/* */} + {/* */} + {/* path": { stroke: "#9A9AAF" },*/} + {/* }}*/} + {/* >*/} + {/* */} + {/* */} + {/* ),*/} + {/* }}*/} + {/* />*/} diff --git a/src/pages/Questions/answerOptions/responseSettings.tsx b/src/pages/Questions/answerOptions/responseSettings.tsx index ee534c73..b5740d94 100644 --- a/src/pages/Questions/answerOptions/responseSettings.tsx +++ b/src/pages/Questions/answerOptions/responseSettings.tsx @@ -36,65 +36,65 @@ export default function ResponseSettings({ question }: Props) { marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px", }} > - - - Настройки ответов - - {/* { - updateQuestion(question.id, (question) => { - if (!("largeCheck" in question.content)) return; - - question.content.largeCheck = target.checked; - }); - }} - /> */} - { - updateQuestion(question.id, (question) => { - if (!("multi" in question.content)) return; - - question.content.multi = target.checked; - }); - }} - /> - {/* { - updateQuestion(question.id, (question) => { - if (!("own" in question.content)) return; - - question.content.own = target.checked; - }); - }} - /> */} - + {/**/} + {/* */} + {/* Настройки ответов*/} + {/* */} + {/* {*/} + {/* updateQuestion(question.id, (question) => {*/} + {/* if (!("largeCheck" in question.content)) return;*/} + {/* */} + {/* question.content.largeCheck = target.checked;*/} + {/* });*/} + {/* }}*/} + {/* />*/} + {/* {*/} + {/* updateQuestion(question.id, (question) => {*/} + {/* if (!("multi" in question.content)) return;*/} + {/* */} + {/* question.content.multi = target.checked;*/} + {/* });*/} + {/* }}*/} + {/* />*/} + {/* {*/} + {/* updateQuestion(question.id, (question) => {*/} + {/* if (!("own" in question.content)) return;*/} + {/* */} + {/* question.content.own = target.checked;*/} + {/* });*/} + {/* }}*/} + {/* /> */} + {/**/} { ) : ( )} - - - - - - - - - - - - - diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx index b0b462e3..d585c308 100644 --- a/src/pages/ViewPublicationPage/questions/Number.tsx +++ b/src/pages/ViewPublicationPage/questions/Number.tsx @@ -73,7 +73,7 @@ export const Number = ({ currentQuestion }: NumberProps) => { width: "100%", marginTop: "20px", gap: "30px", - paddingRight: isMobile ? "10px" : undefined + paddingRight: "10px" }} > = ({ open, changePage }) => { - const [openModal, setOpenModal] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + + const handleClick = (event) => { + setAnchorEl(anchorEl ? null : event.currentTarget); + }; + + const openPopper = Boolean(anchorEl); + const id = openPopper ? 'simple-popper' : undefined; - const onClose = () => { - setOpenModal(false); - }; return ( = ({ open, changePage }) => { - {quizSetupSteps.map(({ sidebarIcon }, index) => ( - changePage(index)} - sx={{ - cursor: "pointer", - width: "44px", - height: "44px", - background: "#262835", - display: "flex", - justifyContent: "center", - alignItems: "center", - borderRadius: "8px", - }} - > - {sidebarIcon} - - ))} + {/*{quizSetupSteps.map(({ sidebarIcon }, index) => (*/} + {/* changePage(index)}*/} + {/* sx={{*/} + {/* cursor: "pointer",*/} + {/* width: "44px",*/} + {/* height: "44px",*/} + {/* background: "#262835",*/} + {/* display: "flex",*/} + {/* justifyContent: "center",*/} + {/* alignItems: "center",*/} + {/* borderRadius: "8px",*/} + {/* }}*/} + {/* >*/} + {/* {sidebarIcon}*/} + {/* */} + {/*))}*/} setOpenModal(true)} + aria-describedby={id} + onClick={handleClick} sx={{ px: "10px", width: "70px", @@ -121,7 +127,7 @@ export const SidebarMobile: FC = ({ open, changePage }) => { - + ); }; diff --git a/src/pages/startPage/Sidebar/SidebarModal/index.tsx b/src/pages/startPage/Sidebar/SidebarModal/index.tsx index 7325981b..4affa938 100644 --- a/src/pages/startPage/Sidebar/SidebarModal/index.tsx +++ b/src/pages/startPage/Sidebar/SidebarModal/index.tsx @@ -1,39 +1,39 @@ -import { Box, Modal } from "@mui/material"; +import {Box, Modal, Popper} from "@mui/material"; import Sidebar from "@ui_kit/Sidebar"; type SidebarModalProps = { open: boolean; - onClose: () => void; + handleClick: () => void; changePage: (step: number) => void; + anchorEl: HTMLElement; + id: string; }; export const SidebarModal = ({ open, - onClose, + handleClick, changePage, + id, + anchorEl }: SidebarModalProps) => { return ( - - - - - + + + + + ); }; diff --git a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx index c1d5e8e8..6eab4c6f 100644 --- a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx +++ b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx @@ -5,10 +5,13 @@ import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; import { notReachable } from "../../utils/notReachable"; import { useUADevice } from "../../utils/hooks/useUADevice"; import {useEffect, useRef, useState} from "react"; +import {NameplateLogo} from "@icons/NameplateLogo"; +import {modes} from "@utils/themes/Publication/themePublication"; export default function QuizPreviewLayout() { const theme = useTheme(); const quiz = useCurrentQuiz(); + const mode = modes; const { isMobileDevice } = useUADevice(); if (!quiz) return null; @@ -124,6 +127,18 @@ export default function QuizPreviewLayout() { )} {quiz.config.info.law} + + + + Сделано на PenaQuiz + + } backgroundBlock={background}