SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: designs

Browse Source
This commit is contained in:
IlyaDoronin 2024-03-05 17:29:52 +03:00
parent 2a02773c46
commit 593059f2e2
11 changed files with 462 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/components/ViewPublicationPage/Question.tsx
View File

@ -88,7 +88,9 @@ export const Question = ({
<Box <Box
sx={{ sx={{
background: settings.cfg.design background: settings.cfg.design
? "linear-gradient(90deg,#272626, transparent)" ? quizThemes[settings.cfg.theme].isLight
? "transparent"
: "linear-gradient(90deg,#272626, transparent)"
: theme.palette.background.default, : theme.palette.background.default,
}} }}
> >

15
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -267,7 +267,10 @@ export const StartPageViewPublication = () => {
<Typography <Typography
sx={{ sx={{
fontSize: "16px", fontSize: "16px",
color: theme.palette.text.primary, color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}} }}
> >
{settings.cfg.info.phonenumber} {settings.cfg.info.phonenumber}
@ -278,7 +281,10 @@ export const StartPageViewPublication = () => {
<Typography <Typography
sx={{ sx={{
fontSize: "16px", fontSize: "16px",
color: theme.palette.text.primary, color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}} }}
> >
{settings.cfg.info.phonenumber} {settings.cfg.info.phonenumber}
@ -290,7 +296,10 @@ export const StartPageViewPublication = () => {
sx={{ sx={{
fontSize: "16px", fontSize: "16px",
marginTop: "5px", marginTop: "5px",
color: theme.palette.text.primary, color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}} }}
> >
{settings.cfg.info.phonenumber} {settings.cfg.info.phonenumber}

4
lib/components/ViewPublicationPage/questions/Date.tsx
View File

@ -88,7 +88,9 @@ export const Date = ({ currentQuestion }: DateProps) => {
sx={{ sx={{
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
backgroundColor: settings.cfg.design backgroundColor: settings.cfg.design
? "rgba(154,154,175, 0.2)" ? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight : quizThemes[settings.cfg.theme].isLight
? "white" ? "white"
: theme.palette.background.default, : theme.palette.background.default,

340
lib/components/ViewPublicationPage/questions/Emoji.tsx
View File

@ -1,11 +1,11 @@
import { import {
Box, Box,
FormControl, FormControl,
FormControlLabel, FormControlLabel,
Radio, Radio,
RadioGroup, RadioGroup,
Typography, Typography,
useTheme useTheme,
} from "@mui/material"; } from "@mui/material";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView"; import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@ -19,169 +19,189 @@ import { enqueueSnackbar } from "notistack";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji"; import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill"; import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
import { quizThemes } from "@utils/themes/Publication/themePublication";
polyfillCountryFlagEmojis(); polyfillCountryFlagEmojis();
import { useState } from "react"; import { useState } from "react";
type EmojiProps = { type EmojiProps = {
currentQuestion: QuizQuestionEmoji; currentQuestion: QuizQuestionEmoji;
}; };
export const Emoji = ({ currentQuestion }: EmojiProps) => { export const Emoji = ({ currentQuestion }: EmojiProps) => {
const theme = useTheme(); const theme = useTheme();
const { quizId } = useQuizData(); const { quizId, settings } = useQuizData();
const { answers } = useQuizViewStore(); const { answers } = useQuizViewStore();
const { answer } = const { answer } =
answers.find( answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
({ questionId }) => questionId === currentQuestion.id const [isSending, setIsSending] = useState<boolean>(false);
) ?? {};
const [isSending, setIsSending] = useState<boolean>(false);
return ( return (
<Box> <Box>
<Typography <Typography
variant="h5" variant="h5"
color={theme.palette.text.primary} color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }} sx={{ wordBreak: "break-word" }}
>{currentQuestion.title}</Typography> >
<RadioGroup {currentQuestion.title}
name={currentQuestion.id} </Typography>
value={currentQuestion.content.variants.findIndex( <RadioGroup
({ id }) => answer === id name={currentQuestion.id}
)} value={currentQuestion.content.variants.findIndex(
onChange={({ target }) => { ({ id }) => answer === id
updateAnswer( )}
currentQuestion.id, onChange={({ target }) => {
currentQuestion.content.variants[Number(target.value)].answer, updateAnswer(
currentQuestion.content.variants[Number(target.value)].points || 0 currentQuestion.id,
); currentQuestion.content.variants[Number(target.value)].answer,
} currentQuestion.content.variants[Number(target.value)].points || 0
} );
sx={{ }}
display: "flex", sx={{
flexWrap: "wrap", display: "flex",
flexDirection: "row", flexWrap: "wrap",
justifyContent: "space-between", flexDirection: "row",
marginTop: "20px", justifyContent: "space-between",
}} marginTop: "20px",
}}
>
<Box
sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}
>
{currentQuestion.content.variants.map((variant, index) => (
<FormControl
key={variant.id}
disabled={isSending}
sx={{
borderRadius: "12px",
border: `1px solid`,
borderColor:
answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
overflow: "hidden",
maxWidth: "317px",
width: "100%",
height: "255px",
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
}}
> >
<Box sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}> <Box
{currentQuestion.content.variants.map((variant, index) => ( sx={{
<FormControl display: "flex",
key={variant.id} alignItems: "center",
disabled={isSending} height: "193px",
sx={{ background: "#ffffff",
borderRadius: "12px", }}
border: `1px solid`, >
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF", <Box
overflow: "hidden", sx={{
maxWidth: "317px", width: "100%",
width: "100%", display: "flex",
height: "255px", justifyContent: "center",
}} }}
> >
<Box {variant.extendedText && (
sx={{ <Typography fontSize={"100px"}>
display: "flex", {variant.extendedText}
alignItems: "center", </Typography>
height: "193px", )}
background: "#ffffff",
}}
>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
{variant.extendedText && (
<Typography fontSize={"100px"}>
{variant.extendedText}
</Typography>
)}
</Box>
</Box>
<FormControlLabel
key={variant.id}
sx={{
margin: 0,
padding: "15px",
color: theme.palette.text.primary,
display: "flex",
gap: "10px",
alignItems:
variant.answer.length <= 60 ? "center" : "flex-start",
position: "relative",
height: "80px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
paddingLeft: "45px",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
}
},
}}
value={index}
onClick={async (event) => {
event.preventDefault();
if (isSending) return;
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
qid: quizId,
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
setIsSending(false);
}}
control={
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
}
label={
<Box sx={{ display: "flex", gap: "10px" }}>
<Typography sx={{
wordBreak: "break-word",
lineHeight: "normal",
}}>{variant.answer}</Typography>
</Box>
}
/>
</FormControl>
))}
</Box> </Box>
</RadioGroup> </Box>
<FormControlLabel
key={variant.id}
sx={{
margin: 0,
padding: "15px",
color: theme.palette.text.primary,
display: "flex",
gap: "10px",
alignItems:
variant.answer.length <= 60 ? "center" : "flex-start",
position: "relative",
height: "80px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
paddingLeft: "45px",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
},
}}
value={index}
onClick={async (event) => {
event.preventDefault();
if (isSending) return;
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body:
currentQuestion.content.variants[index].extendedText +
" " +
currentQuestion.content.variants[index].answer,
qid: quizId,
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
setIsSending(false);
}}
control={
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
/>
}
label={
<Box sx={{ display: "flex", gap: "10px" }}>
<Typography
sx={{
wordBreak: "break-word",
lineHeight: "normal",
}}
>
{variant.answer}
</Typography>
</Box>
}
/>
</FormControl>
))}
</Box> </Box>
); </RadioGroup>
</Box>
);
}; };

305
lib/components/ViewPublicationPage/questions/Images.tsx
View File

@ -1,10 +1,10 @@
import { import {
Box, Box,
FormControlLabel, FormControlLabel,
Radio, Radio,
RadioGroup, RadioGroup,
Typography, Typography,
useTheme useTheme,
} from "@mui/material"; } from "@mui/material";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView"; import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@ -17,149 +17,172 @@ import { useRootContainerSize } from "../../../contexts/RootContainerWidthContex
import type { QuizQuestionImages } from "../../../model/questionTypes/images"; import type { QuizQuestionImages } from "../../../model/questionTypes/images";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react"; import { useState } from "react";
import { quizThemes } from "@utils/themes/Publication/themePublication";
type ImagesProps = { type ImagesProps = {
currentQuestion: QuizQuestionImages; currentQuestion: QuizQuestionImages;
}; };
export const Images = ({ currentQuestion }: ImagesProps) => { export const Images = ({ currentQuestion }: ImagesProps) => {
const { quizId } = useQuizData(); const { quizId } = useQuizData();
const { answers } = useQuizViewStore(); const { answers } = useQuizViewStore();
const theme = useTheme(); const theme = useTheme();
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer; const answer = answers.find(
const [isSending, setIsSending] = useState<boolean>(false); ({ questionId }) => questionId === currentQuestion.id
const isTablet = useRootContainerSize() < 1000; )?.answer;
const isMobile = useRootContainerSize() < 500; const { settings } = useQuizData();
const [isSending, setIsSending] = useState<boolean>(false);
const isTablet = useRootContainerSize() < 1000;
const isMobile = useRootContainerSize() < 500;
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography> <Typography
<RadioGroup variant="h5"
name={currentQuestion.id} color={theme.palette.text.primary}
value={currentQuestion.content.variants.findIndex( sx={{ wordBreak: "break-word" }}
({ id }) => answer === id >
)} {currentQuestion.title}
sx={{ </Typography>
display: "flex", <RadioGroup
flexWrap: "wrap", name={currentQuestion.id}
flexDirection: "row", value={currentQuestion.content.variants.findIndex(
justifyContent: "space-between", ({ id }) => answer === id
marginTop: "20px", )}
}} sx={{
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "space-between",
marginTop: "20px",
}}
>
<Box
sx={{
display: "grid",
gap: "15px",
gridTemplateColumns: isTablet
? isMobile
? "repeat(1, 1fr)"
: "repeat(2, 1fr)"
: "repeat(3, 1fr)",
width: "100%",
}}
>
{currentQuestion.content.variants.map((variant, index) => (
<Box
key={index}
sx={{
cursor: "pointer",
borderRadius: "5px",
border: `1px solid`,
borderColor:
answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "rgba(154,154,175, 0.2)"
: "transparent",
transition: "opacity 0.5s ease",
opacity: isSending ? 0.5 : 1,
pointerEvents: isSending ? "none" : "auto",
}}
onClick={async (event) => {
event.preventDefault();
if (isSending) return;
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
qid: quizId,
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
setIsSending(false);
}}
> >
<Box <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
sx={{ <Box sx={{ width: "100%", height: "300px" }}>
display: "grid", {variant.extendedText && (
gap: "15px", <img
gridTemplateColumns: isTablet src={variant.extendedText}
? isMobile alt=""
? "repeat(1, 1fr)" style={{
: "repeat(2, 1fr)" display: "block",
: "repeat(3, 1fr)",
width: "100%", width: "100%",
}} height: "100%",
> objectFit: "cover",
{currentQuestion.content.variants.map((variant, index) => ( }}
<Box />
key={index} )}
sx={{
cursor: "pointer",
borderRadius: "5px",
border: `1px solid`,
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
transition: "opacity 0.5s ease",
opacity: isSending ? 0.5 : 1,
pointerEvents: isSending ? "none" : "auto",
}}
onClick={async (event) => {
event.preventDefault();
if (isSending) return;
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
qid: quizId,
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
setIsSending(false);
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box sx={{ width: "100%", height: "300px" }}>
{variant.extendedText && (
<img
src={variant.extendedText}
alt=""
style={{
display: "block",
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
)}
</Box>
</Box>
<FormControlLabel
key={variant.id}
sx={{
textAlign: "center",
color: theme.palette.text.primary,
marginTop: "10px",
marginLeft: 0,
padding: "10px",
display: "flex",
alignItems:
variant.answer.length <= 60 ? "center" : "flex-start",
position: "relative",
height: "80px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
lineHeight: "normal",
paddingLeft: "45px",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
}
},
}}
value={index}
control={
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
}
label={variant.answer}
/>
</Box>
))}
</Box> </Box>
</RadioGroup> </Box>
<FormControlLabel
key={variant.id}
sx={{
textAlign: "center",
color: theme.palette.text.primary,
marginTop: "10px",
marginLeft: 0,
padding: "10px",
display: "flex",
alignItems:
variant.answer.length <= 60 ? "center" : "flex-start",
position: "relative",
height: "80px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
lineHeight: "normal",
paddingLeft: "45px",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
},
}}
value={index}
control={
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
/>
}
label={variant.answer}
/>
</Box>
))}
</Box> </Box>
); </RadioGroup>
</Box>
);
}; };

13
lib/components/ViewPublicationPage/questions/Number.tsx
View File

@ -411,9 +411,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
"& .MuiOutlinedInput-root": { background: "transparent" }, "& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 }, "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
backgroundColor: settings.cfg.design backgroundColor: quizThemes[settings.cfg.theme].isLight
? "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white" ? "white"
: theme.palette.background.default, : theme.palette.background.default,
}, },
@ -440,9 +438,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
"& .MuiOutlinedInput-root": { background: "transparent" }, "& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 }, "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
backgroundColor: settings.cfg.design backgroundColor: quizThemes[settings.cfg.theme].isLight
? "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white" ? "white"
: theme.palette.background.default, : theme.palette.background.default,
}, },
@ -455,13 +451,10 @@ export const Number = ({ currentQuestion }: NumberProps) => {
onChange={onMaxInputChange} onChange={onMaxInputChange}
sx={{ sx={{
maxWidth: "80px", maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiOutlinedInput-root": { background: "transparent" }, "& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 }, "& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
backgroundColor: settings.cfg.design backgroundColor: quizThemes[settings.cfg.theme].isLight
? "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white" ? "white"
: theme.palette.background.default, : theme.palette.background.default,
}, },

135
lib/components/ViewPublicationPage/questions/Select.tsx
View File

@ -9,74 +9,87 @@ import { enqueueSnackbar } from "notistack";
import type { QuizQuestionSelect } from "../../../model/questionTypes/select"; import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react"; import { useState } from "react";
import { quizThemes } from "@utils/themes/Publication/themePublication";
type SelectProps = { type SelectProps = {
currentQuestion: QuizQuestionSelect; currentQuestion: QuizQuestionSelect;
}; };
export const Select = ({ currentQuestion }: SelectProps) => { export const Select = ({ currentQuestion }: SelectProps) => {
const theme = useTheme(); const theme = useTheme();
const { quizId } = useQuizData(); const { quizId, settings } = useQuizData();
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
const { answers } = useQuizViewStore(); const { answers } = useQuizViewStore();
const { answer } = const { answer } =
answers.find( answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
({ questionId }) => questionId === currentQuestion.id
) ?? {};
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography> <Typography
<Box variant="h5"
sx={{ color={theme.palette.text.primary}
display: "flex", sx={{ wordBreak: "break-word" }}
flexDirection: "column", >
width: "100%", {currentQuestion.title}
marginTop: "20px", </Typography>
}} <Box
> sx={{
<SelectComponent display: "flex",
disabled={isSending} flexDirection: "column",
placeholder={currentQuestion.content.default} width: "100%",
activeItemIndex={answer ? Number(answer) : -1} marginTop: "20px",
items={currentQuestion.content.variants.map(({ answer }) => answer)} }}
colorMain={theme.palette.primary.main} >
onChange={async (_, value) => { <SelectComponent
setIsSending(true); disabled={isSending}
if (value < 0) { placeholder={currentQuestion.content.default}
deleteAnswer(currentQuestion.id); activeItemIndex={answer ? Number(answer) : -1}
try { items={currentQuestion.content.variants.map(({ answer }) => answer)}
colorMain={theme.palette.primary.main}
sx={{
"& .MuiSelect-select.MuiSelect-outlined": { zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": {
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
},
}}
onChange={async (_, value) => {
setIsSending(true);
if (value < 0) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
return setIsSending(false);
}
await sendAnswer({ try {
questionId: currentQuestion.id, await sendAnswer({
body: "", questionId: currentQuestion.id,
qid: quizId, body: String(
}); currentQuestion.content.variants[Number(value)].answer
),
qid: quizId,
});
} catch (e) { updateAnswer(currentQuestion.id, String(value), 0);
enqueueSnackbar("ответ не был засчитан"); } catch (e) {
} enqueueSnackbar("ответ не был засчитан");
return setIsSending(false); }
}
try { setIsSending(false);
}}
await sendAnswer({ />
questionId: currentQuestion.id, </Box>
body: String(currentQuestion.content.variants[Number(value)].answer), </Box>
qid: quizId, );
});
updateAnswer(currentQuestion.id, String(value), 0);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
setIsSending(false);
}}
/>
</Box>
</Box>
);
}; };

18
lib/components/ViewPublicationPage/questions/Text.tsx
View File

@ -16,6 +16,7 @@ import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { ChangeEvent, FC, useEffect, useState } from "react"; import { ChangeEvent, FC, useEffect, useState } from "react";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { QuizQuestionText } from "../../../model/questionTypes/text"; import type { QuizQuestionText } from "../../../model/questionTypes/text";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590) const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@ -151,9 +152,11 @@ const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
}} }}
sx={{ sx={{
"& .MuiOutlinedInput-root": { "& .MuiOutlinedInput-root": {
backgroundColor: settings.cfg.design background: settings.cfg.design
? "rgba(154,154,175, 0.2)" ? quizThemes[settings.cfg.theme].isLight
: "#FFFFFF", ? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
}, },
"&:focus-visible": { borderColor: theme.palette.primary.main }, "&:focus-visible": { borderColor: theme.palette.primary.main },
}} }}
@ -240,7 +243,14 @@ const TextSpecial = ({
updateAnswer(currentQuestion.id, target.value, 0); updateAnswer(currentQuestion.id, target.value, 0);
inputHC(target.value); inputHC(target.value);
}} }}
inputProps={{ maxLength: 400 }} inputProps={{
maxLength: 400,
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
}}
sx={{ sx={{
width: "100%", width: "100%",
"& .MuiOutlinedInput-root": { "& .MuiOutlinedInput-root": {

4
lib/components/ViewPublicationPage/questions/Variant.tsx
View File

@ -176,7 +176,9 @@ const VariantItem = ({
borderColor: borderColor:
answer === variant.id ? theme.palette.primary.main : "#9A9AAF", answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
backgroundColor: settings.cfg.design backgroundColor: settings.cfg.design
? "rgba(154,154,175, 0.2)" ? quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight : quizThemes[settings.cfg.theme].isLight
? "white" ? "white"
: theme.palette.background.default, : theme.palette.background.default,

6
lib/components/ViewPublicationPage/questions/Varimg.tsx
View File

@ -87,7 +87,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
padding: "15px", padding: "15px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
backgroundColor: settings.cfg.design backgroundColor: settings.cfg.design
? "rgba(154,154,175, 0.2)" ? quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight : quizThemes[settings.cfg.theme].isLight
? "white" ? "white"
: theme.palette.background.default, : theme.palette.background.default,
@ -174,7 +176,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
backgroundColor: "#9A9AAF12", backgroundColor: "#9A9AAF12",
color: "#9A9AAF", color: theme.palette.text.primary,
textAlign: "center", textAlign: "center",
}} }}
> >

4
lib/utils/themes/Publication/themePublication.ts
View File

@ -274,12 +274,12 @@ const Design3 = createTheme({
main: "#252734", main: "#252734",
}, },
text: { text: {
primary: "#333647", primary: "#252734",
secondary: "#4B6A99", secondary: "#4B6A99",
}, },
background: { background: {
default: "#FFFFFF", default: "#F5F7FF",
}, },
}, },
}); });