SQuiz/frontPanel
2
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge branch 'rel' into 'main'

Browse Source 
Rel

See merge request frontend/squiz!101
This commit is contained in:
Nastya 2023-12-30 01:38:45 +00:00
commit e21d96f721
11 changed files with 341 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -5,7 +5,7 @@ import "dayjs/locale/ru";
import SigninDialog from "./pages/auth/Signin"; import SigninDialog from "./pages/auth/Signin";
import SignupDialog from "./pages/auth/Signup"; import SignupDialog from "./pages/auth/Signup";
import { ViewPage } from "./pages/ViewPublicationPage"; 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 { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
import "./index.css"; import "./index.css";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage"; import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";

23
src/pages/DesignPage/ColorRingIcon.tsx Normal file
View File

@ -0,0 +1,23 @@
import {Box} from "@mui/material";
interface Color{
color?: string
}
export default function ColorRingIcon({color = "#333647"}: Color) {
return (
<Box
sx={{
height: "20px",
width: "20px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="16" height="16" rx="8" fill={color} stroke="#9A9AAF"/>
</svg>
</Box>
)
}

118
src/pages/DesignPage/DesignFilling.tsx Normal file
View File

@ -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 (
<Box sx={{width: "100%", padding: "25px"}}>
<Typography variant="h5" sx={{marginBottom: "40px"}}>Дизайн</Typography>
<Paper sx={{
padding: "20px",
maxWidth: "796px",
width: "100%",
display: "flex",
gap: "20px",
borderRadius: "12px",
flexWrap: "wrap"
}}>
<Box
sx={{width: isMobile ? "100%" : "48%", display: "flex", flexDirection: "column", gap: "12px"}}
>
<Typography color={"#9A9AAF"}>Со светлым фоном</Typography>
{ButtonsThemeLight.map((e, i) => (
<ButtonBase
sx={{
maxWidth: "368px",
width: "100%",
padding: "22px 21px",
background: quiz.config.theme == e[1] ? "linear-gradient(0deg, rgba(126, 42, 234, 0.10) 0%, rgba(126, 42, 234, 0.10) 100%)" : "#F2F3F7",
borderRadius: "12px",
justifyContent: "space-between",
border: quiz.config.theme == e[1] ? "1px solid #7E2AEA" : "none"
}}
key={i}
value={e[1]}
onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = e[1]})}
>
<Typography color={"#4D4D4D"}>{e[0]}</Typography>
<Box sx={{display: "flex", gap: "7px",}}>
<ColorRingIcon color={e[2]}/>
<ColorRingIcon/>
<ColorRingIcon color={e[3]}/>
</Box>
</ButtonBase>
))}
</Box>
<Box
sx={{width: isMobile ? "100%" : "48%", display: "flex", flexDirection: "column", gap: "12px"}}
>
<Typography color={"#9A9AAF"}>С тёмным фоном</Typography>
{ButtonsThemeDark.map((e, i) => (
<ButtonBase
sx={{
maxWidth: "368px",
width: "100%",
padding: "22px 21px",
background: quiz.config.theme == e[1] ? "linear-gradient(0deg, rgba(126, 42, 234, 0.10) 0%, rgba(126, 42, 234, 0.10) 100%)" : "#F2F3F7",
borderRadius: "12px",
justifyContent: "space-between",
border: quiz.config.theme == e[1] ? "1px solid #7E2AEA" : "none"
}}
key={i}
value={e[1]}
onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = e[1]})}
>
<Typography color={"#4D4D4D"}>{e[0]}</Typography>
<Box sx={{display: "flex", gap: "7px",}}>
<ColorRingIcon color={e[2]}/>
<ColorRingIcon color={e[3]}/>
<ColorRingIcon />
</Box>
</ButtonBase>
))}
</Box>
</Paper>
<Box sx={{textAlign: "end"}}>
<IconButton
onClick={toggleQuizPreview}
sx={{
pointerEvents: "auto",
marginLeft: "auto",
position: "relative",
zIndex: "999999",
alignItems: "end"
}}
>
<VisibilityIcon sx={{ height: "30px", width: "30px" }} />
</IconButton>
</Box>
</Box>
);
}

28
src/pages/startPage/DesignPage.tsx → src/pages/DesignPage/DesignPage.tsx
View File

@ -1,5 +1,5 @@
import { quizApi } from "@api/quiz"; import { quizApi } from "@api/quiz";
import { Box, useMediaQuery, useTheme } from "@mui/material"; import {Box, IconButton, useMediaQuery, useTheme} from "@mui/material";
import { import {
resetEditConfig, resetEditConfig,
setQuizes, setQuizes,
@ -10,10 +10,10 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store"; import { useQuizStore } from "@root/quizes/store";
import Sidebar from "@ui_kit/Sidebar"; import Sidebar from "@ui_kit/Sidebar";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import { SidebarMobile } from "./Sidebar/SidebarMobile"; import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile";
import { import {
cleanQuestions, cleanQuestions,
createResult, createResult,
@ -33,10 +33,15 @@ import { clearUserData } from "@root/user";
import { clearAuthToken } from "@frontend/kitui"; import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth"; import { logout } from "@api/auth";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate"; import { ModalInfoWhyCantCreate } from "../startPage/ModalInfoWhyCantCreate";
import { ConfirmLeaveModal } from "./ConfirmLeaveModal"; import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal";
import { checkQuestionHint } from "@utils/checkQuestionHint"; 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 = () => { export const DesignPage = () => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
@ -47,7 +52,10 @@ export const DesignPage = () => {
const getData = async () => { const getData = async () => {
const quizes = await quizApi.getList(); const quizes = await quizApi.getList();
setQuizes(quizes); setQuizes(quizes);
if (editQuizId) {
const questions = await questionApi.getList({ quiz_id: editQuizId });
setQuestions(questions);
}
}; };
getData(); getData();
}, []); }, []);
@ -71,6 +79,7 @@ export const DesignPage = () => {
useEffect(() => { useEffect(() => {
if (editQuizId === null) navigate("/list"); if (editQuizId === null) navigate("/list");
}, [navigate, editQuizId]); }, [navigate, editQuizId]);
const followNewPage = () => { const followNewPage = () => {
@ -95,13 +104,14 @@ export const DesignPage = () => {
return ( return (
<> <>
<Header setMobileSidebar={setMobileSidebar} /> <Header setMobileSidebar={setMobileSidebar} />
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
{isMobile ? ( {isMobile ? (
<SidebarMobile open={mobileSidebar} changePage={changePage} /> <SidebarMobile open={mobileSidebar} changePage={changePage} />
) : ( ) : (
<Sidebar changePage={changePage} /> <Sidebar changePage={changePage} />
)} )}
<Box>Страница дизайна</Box> <DesignFilling/>
{createPortal(<QuizPreview />, document.body)}
</Box> </Box>
<ModalInfoWhyCantCreate /> <ModalInfoWhyCantCreate />
<ConfirmLeaveModal <ConfirmLeaveModal

98
src/pages/Questions/UploadImage/UploadImageModal.tsx
View File

@ -111,55 +111,55 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
</Box> </Box>
</Box> </Box>
</ButtonBase> </ButtonBase>
<Box {/* <Box*/}
sx={{ {/* sx={{*/}
display: "flex", {/* display: "flex",*/}
justifyContent: "space-between", {/* justifyContent: "space-between",*/}
margin: "20px 0", {/* margin: "20px 0",*/}
}} {/* }}*/}
> {/* >*/}
<Typography {/* <Typography*/}
sx={{ {/* sx={{*/}
fontWeight: "bold", {/* fontWeight: "bold",*/}
color: "#4D4D4D", {/* color: "#4D4D4D",*/}
}} {/* }}*/}
> {/* >*/}
Или выберите на фотостоке {/* Или выберите на фотостоке*/}
</Typography> {/* </Typography>*/}
<img src={UnsplashIcon} alt="" /> {/* <img src={UnsplashIcon} alt="" />*/}
</Box> {/* </Box>*/}
<TextField {/* <TextField*/}
id="search-in-unsplash" {/* id="search-in-unsplash"*/}
placeholder="Ищите изображения на английском языка" {/* placeholder="Ищите изображения на английском языка"*/}
sx={{ {/* sx={{*/}
"& .MuiInputBase-input": { {/* "& .MuiInputBase-input": {*/}
height: "48px", {/* height: "48px",*/}
padding: "0 10px 0 0", {/* padding: "0 10px 0 0",*/}
}, {/* },*/}
"& .MuiOutlinedInput-notchedOutline": { {/* "& .MuiOutlinedInput-notchedOutline": {*/}
borderRadius: "8px", {/* borderRadius: "8px",*/}
}, {/* },*/}
"& .Mui-focused .MuiOutlinedInput-notchedOutline": { {/* "& .Mui-focused .MuiOutlinedInput-notchedOutline": {*/}
border: "1px solid rgba(0, 0, 0, 0.23)", {/* border: "1px solid rgba(0, 0, 0, 0.23)",*/}
}, {/* },*/}
"& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { {/* "& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {*/}
borderColor: "rgba(0, 0, 0, 0.23)", {/* borderColor: "rgba(0, 0, 0, 0.23)",*/}
}, {/* },*/}
}} {/* }}*/}
InputProps={{ {/* InputProps={{*/}
startAdornment: ( {/* startAdornment: (*/}
<InputAdornment {/* <InputAdornment*/}
position="start" {/* position="start"*/}
sx={{ {/* sx={{*/}
outline: "none", {/* outline: "none",*/}
"& svg > path": { stroke: "#9A9AAF" }, {/* "& svg > path": { stroke: "#9A9AAF" },*/}
}} {/* }}*/}
> {/* >*/}
<SearchIcon /> {/* <SearchIcon />*/}
</InputAdornment> {/* </InputAdornment>*/}
), {/* ),*/}
}} {/* }}*/}
/> {/* />*/}
</Box> </Box>
</Box> </Box>
</Modal> </Modal>

118
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -36,65 +36,65 @@ export default function ResponseSettings({ question }: Props) {
marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px", marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
}} }}
> >
<Box {/*<Box*/}
sx={{ {/* sx={{*/}
pt: isMobile ? "25px" : "20px", {/* pt: isMobile ? "25px" : "20px",*/}
pb: isMobile ? "25px" : "20px", {/* pb: isMobile ? "25px" : "20px",*/}
pl: "20px", {/* pl: "20px",*/}
display: "flex", {/* display: "flex",*/}
flexDirection: "column", {/* flexDirection: "column",*/}
gap: "14px", {/* gap: "14px",*/}
width: "100%", {/* width: "100%",*/}
}} {/* }}*/}
> {/*>*/}
<Typography {/* <Typography*/}
sx={{ {/* sx={{*/}
height: isMobile ? "18px" : "auto", {/* height: isMobile ? "18px" : "auto",*/}
fontWeight: "500", {/* fontWeight: "500",*/}
fontSize: "18px", {/* fontSize: "18px",*/}
color: " #4D4D4D", {/* color: " #4D4D4D",*/}
}} {/* }}*/}
> {/* >*/}
Настройки ответов {/* Настройки ответов*/}
</Typography> {/* </Typography>*/}
{/* <CustomCheckbox {/* <CustomCheckbox*/}
sx={{ mr: isMobile ? "0px" : "16px" }} {/* sx={{ mr: isMobile ? "0px" : "16px" }}*/}
label={"Длинный текстовый ответ"} {/* label={"Длинный текстовый ответ"}*/}
checked={question.content.largeCheck} {/* checked={question.content.largeCheck}*/}
handleChange={({ target }) => { {/* handleChange={({ target }) => {*/}
updateQuestion(question.id, (question) => { {/* updateQuestion(question.id, (question) => {*/}
if (!("largeCheck" in question.content)) return; {/* if (!("largeCheck" in question.content)) return;*/}
{/* */}
question.content.largeCheck = target.checked; {/* question.content.largeCheck = target.checked;*/}
}); {/* });*/}
}} {/* }}*/}
/> */} {/* />*/}
<CustomCheckbox {/* <CustomCheckbox*/}
sx={{ mr: isMobile ? "0px" : "16px" }} {/* sx={{ mr: isMobile ? "0px" : "16px" }}*/}
label={"Можно несколько"} {/* label={"Можно несколько"}*/}
checked={question.content.multi} {/* checked={question.content.multi}*/}
dataCy="multiple-answers-checkbox" {/* dataCy="multiple-answers-checkbox"*/}
handleChange={({ target }) => { {/* handleChange={({ target }) => {*/}
updateQuestion(question.id, (question) => { {/* updateQuestion(question.id, (question) => {*/}
if (!("multi" in question.content)) return; {/* if (!("multi" in question.content)) return;*/}
{/* */}
question.content.multi = target.checked; {/* question.content.multi = target.checked;*/}
}); {/* });*/}
}} {/* }}*/}
/> {/* />*/}
{/* <CustomCheckbox {/* <CustomCheckbox*/}
sx={{ mr: isMobile ? "0px" : "16px" }} {/* sx={{ mr: isMobile ? "0px" : "16px" }}*/}
label={'Вариант "свой ответ"'} {/* label={'Вариант "свой ответ"'}*/}
checked={question.content.own} {/* checked={question.content.own}*/}
handleChange={({ target }) => { {/* handleChange={({ target }) => {*/}
updateQuestion(question.id, (question) => { {/* updateQuestion(question.id, (question) => {*/}
if (!("own" in question.content)) return; {/* if (!("own" in question.content)) return;*/}
{/* */}
question.content.own = target.checked; {/* question.content.own = target.checked;*/}
}); {/* });*/}
}} {/* }}*/}
/> */} {/* /> */}
</Box> {/*</Box>*/}
<Box <Box
sx={{ sx={{
boxSizing: "border-box", boxSizing: "border-box",

35
src/pages/ViewPublicationPage/index.tsx
View File

@ -64,41 +64,6 @@ export const ViewPage = () => {
) : ( ) : (
<Question questions={filteredQuestions} /> <Question questions={filteredQuestions} />
)} )}
<Box>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "StandardTheme"
})}>Standard</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "PinkTheme"
})}>Pink</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "BlackWhiteTheme"
})}>BlackWhite</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "OliveTheme"
})}>Olive</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "YellowTheme"
})}>Yellow</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "PurpleTheme"
})}>Purple</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "BlueTheme"
})}>Blue</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "StandardDarkTheme"
})}>StandardDark</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "PinkDarkTheme"
})}>PinkDark</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "GoldDarkTheme"
})}>GoldDark</Button>
<Button onClick={() => updateQuiz(quiz.id, (quiz) => {
quiz.config.theme = "BlueDarkTheme"
})}>BlueDark</Button>
</Box>
</Box> </Box>
</ThemeProvider> </ThemeProvider>

2
src/pages/ViewPublicationPage/questions/Number.tsx
View File

@ -73,7 +73,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
width: "100%", width: "100%",
marginTop: "20px", marginTop: "20px",
gap: "30px", gap: "30px",
paddingRight: isMobile ? "10px" : undefined paddingRight: "10px"
}} }}
> >
<CustomSlider <CustomSlider

56
src/pages/startPage/Sidebar/SidebarMobile.tsx
View File

@ -1,5 +1,5 @@
import { FC, useState } from "react"; import { FC, useState } from "react";
import { Box, Typography } from "@mui/material"; import {Box, Popper, Typography} from "@mui/material";
import { People } from "@mui/icons-material"; import { People } from "@mui/icons-material";
import { SidebarModal } from "./SidebarModal"; import { SidebarModal } from "./SidebarModal";
@ -11,6 +11,7 @@ import { Question } from "./icons/Question";
import { Settings } from "./icons/Settings"; import { Settings } from "./icons/Settings";
import { Pencil } from "./icons/Pencil"; import { Pencil } from "./icons/Pencil";
import { ArrowDown } from "./icons/ArrowDown"; import { ArrowDown } from "./icons/ArrowDown";
import Sidebar from "@ui_kit/Sidebar";
interface Iprops { interface Iprops {
open: boolean; open: boolean;
@ -30,11 +31,15 @@ const quizSetupSteps = [
] as const; ] as const;
export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => { export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
const [openModal, setOpenModal] = useState<boolean>(false); const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const openPopper = Boolean(anchorEl);
const id = openPopper ? 'simple-popper' : undefined;
const onClose = () => {
setOpenModal(false);
};
return ( return (
<Box <Box
@ -76,32 +81,33 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
justifyContent: "center", justifyContent: "end",
display: "flex", display: "flex",
marginTop: "20px", marginTop: "20px",
flexWrap: "wrap", flexWrap: "wrap",
gap: "5px", gap: "5px",
}} }}
> >
{quizSetupSteps.map(({ sidebarIcon }, index) => ( {/*{quizSetupSteps.map(({ sidebarIcon }, index) => (*/}
<Box {/* <Box*/}
onClick={() => changePage(index)} {/* onClick={() => changePage(index)}*/}
sx={{ {/* sx={{*/}
cursor: "pointer", {/* cursor: "pointer",*/}
width: "44px", {/* width: "44px",*/}
height: "44px", {/* height: "44px",*/}
background: "#262835", {/* background: "#262835",*/}
display: "flex", {/* display: "flex",*/}
justifyContent: "center", {/* justifyContent: "center",*/}
alignItems: "center", {/* alignItems: "center",*/}
borderRadius: "8px", {/* borderRadius: "8px",*/}
}} {/* }}*/}
> {/* >*/}
{sidebarIcon} {/* {sidebarIcon}*/}
</Box> {/* </Box>*/}
))} {/*))}*/}
<Box <Box
onClick={() => setOpenModal(true)} aria-describedby={id}
onClick={handleClick}
sx={{ sx={{
px: "10px", px: "10px",
width: "70px", width: "70px",
@ -121,7 +127,7 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
<ArrowDown style={{ color: "#F2F3F7" }} /> <ArrowDown style={{ color: "#F2F3F7" }} />
</Box> </Box>
</Box> </Box>
<SidebarModal open={openModal} onClose={onClose} changePage={changePage} /> <SidebarModal open={openPopper} anchorEl={anchorEl} handleClick={handleClick} id={id} changePage={changePage} />
</Box> </Box>
); );
}; };

50
src/pages/startPage/Sidebar/SidebarModal/index.tsx
View File

@ -1,39 +1,39 @@
import { Box, Modal } from "@mui/material"; import {Box, Modal, Popper} from "@mui/material";
import Sidebar from "@ui_kit/Sidebar"; import Sidebar from "@ui_kit/Sidebar";
type SidebarModalProps = { type SidebarModalProps = {
open: boolean; open: boolean;
onClose: () => void; handleClick: () => void;
changePage: (step: number) => void; changePage: (step: number) => void;
anchorEl: HTMLElement;
id: string;
}; };
export const SidebarModal = ({ export const SidebarModal = ({
open, open,
onClose, handleClick,
changePage, changePage,
id,
anchorEl
}: SidebarModalProps) => { }: SidebarModalProps) => {
return ( return (
<Modal open={open} onClose={onClose}> <Popper open={open} id={id} anchorEl={anchorEl}>
<Box <Box
onClick={onClose} onClick={handleClick}
sx={{ sx={{
outline: "none", outline: "none",
position: "absolute", overflow: "hidden",
overflow: "hidden", maxWidth: "230px",
top: "50%", maxHeight: "400px",
left: "50%", width: "100%",
transform: "translate(-50%, -50%)", bgcolor: "background.paper",
maxWidth: "230px", borderRadius: "5px",
maxHeight: "400px", boxShadow: 24,
width: "100%", p: 0,
bgcolor: "background.paper", }}
borderRadius: "5px", >
boxShadow: 24, <Sidebar changePage={changePage} disableCollapse />
p: 0, </Box>
}} </Popper>
>
<Sidebar changePage={changePage} disableCollapse />
</Box>
</Modal>
); );
}; };

15
src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
View File

@ -5,10 +5,13 @@ import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { notReachable } from "../../utils/notReachable"; import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice"; import { useUADevice } from "../../utils/hooks/useUADevice";
import {useEffect, useRef, useState} from "react"; import {useEffect, useRef, useState} from "react";
import {NameplateLogo} from "@icons/NameplateLogo";
import {modes} from "@utils/themes/Publication/themePublication";
export default function QuizPreviewLayout() { export default function QuizPreviewLayout() {
const theme = useTheme(); const theme = useTheme();
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const mode = modes;
const { isMobileDevice } = useUADevice(); const { isMobileDevice } = useUADevice();
if (!quiz) return null; if (!quiz) return null;
@ -124,6 +127,18 @@ export default function QuizPreviewLayout() {
)} )}
<Typography sx={{ fontSize: "12px" }}>{quiz.config.info.law}</Typography> <Typography sx={{ fontSize: "12px" }}>{quiz.config.info.law}</Typography>
</Box> </Box>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px"
}}
>
<NameplateLogo style={{ fontSize: "30px", color: quiz.config.startpageType === "expanded" ? "#FFFFFF" : (mode[quiz.config.theme] ? "#151515" : "#FFFFFF") }} />
<Typography sx={{ fontSize: "16px", color: quiz.config.startpageType === "expanded" ? "#F5F7FF" : (mode[quiz.config.theme] ? "#4D4D4D" : "#F5F7FF"), whiteSpace: "nowrap", }}>
Сделано на PenaQuiz
</Typography>
</Box>
</> </>
} }
backgroundBlock={background} backgroundBlock={background}