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

fix stepper css

Browse Source
This commit is contained in:
Nastya 2023-12-29 17:04:42 +03:00
commit 848e80a61f
21 changed files with 553 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/icons/questionsPage/arrowLeft.tsx
View File

@ -1,11 +1,11 @@
import { Box } from "@mui/material"; import { Box } from "@mui/material";
// interface Props { interface Props {
// color: string; color: string;
// } }
export default function ArrowLeft() { export default function ArrowLeft({color = "#7E2AEA"}: Props) {
return ( return (
<Box <Box
@ -16,8 +16,8 @@ export default function ArrowLeft() {
}} }}
> >
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.75 12H4.25" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> <path d="M20.75 12H4.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M11 5.25L4.25 12L11 18.75" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> <path d="M11 5.25L4.25 12L11 18.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg> </svg>
</Box> </Box>

5
src/pages/Questions/Select.tsx
View File

@ -32,7 +32,7 @@ export const Select = ({
placeholder = "", placeholder = "",
colorMain = "#7E2AEA", colorMain = "#7E2AEA",
colorPlaceholder = "#9A9AAF", colorPlaceholder = "#9A9AAF",
color color,
}: SelectProps) => { }: SelectProps) => {
const [activeItem, setActiveItem] = useState<number>( const [activeItem, setActiveItem] = useState<number>(
empty ? -1 : activeItemIndex empty ? -1 : activeItemIndex
@ -94,6 +94,7 @@ export const Select = ({
mt: "8px", mt: "8px",
p: "4px", p: "4px",
borderRadius: "8px", borderRadius: "8px",
backgroundColor: theme.palette.background.default,
border: "1px solid #EEE4FC", border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
}, },
@ -120,7 +121,7 @@ export const Select = ({
gap: "20px", gap: "20px",
}, },
}} }}
IconComponent={(props) => <ArrowDown {...props } color={color}/>} IconComponent={(props) => <ArrowDown {...props } />}
> >
{items.map((item, index) => ( {items.map((item, index) => (
<MenuItem <MenuItem

2
src/pages/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -429,6 +429,8 @@ function QuizPreviewLayoutByType({
sx={{ sx={{
width: "60%", width: "60%",
overflow: "hidden", overflow: "hidden",
display: "flex",
justifyContent: "center"
}} }}
> >
{backgroundBlock} {backgroundBlock}

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

@ -41,7 +41,7 @@ export const Page = ({ currentQuestion }: PageProps) => {
</Box> </Box>
) : ( ) : (
<YoutubeEmbedIframe <YoutubeEmbedIframe
containerSX={{ width: "100%", height: "100%", maxHeight: "80vh", objectFit: "contain" }} containerSX={{ width: "100%", height: "calc( 100vh - 270px)", maxHeight: "80vh", objectFit: "contain" }}
videoUrl={currentQuestion.content.video} videoUrl={currentQuestion.content.video}
/> />
)} )}

21
src/pages/ViewPublicationPage/questions/Rating.tsx
View File

@ -73,15 +73,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
alignItems: "center", alignItems: "center",
gap: "20px", gap: "20px",
marginTop: "20px", marginTop: "20px",
flexDirection: "column",
width: isMobile ? "100%" : undefined width: isMobile ? "100%" : undefined
}} }}
> >
<Typography sx={{
color: "#9A9AAF"
// color: theme.palette.grey2.main
}}>
{currentQuestion.content.ratingNegativeDescription}
</Typography>
<Box <Box
sx={{ sx={{
display: "inline-block", display: "inline-block",
@ -103,9 +98,17 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
emptyIcon={form?.icon("#9A9AAF")} emptyIcon={form?.icon("#9A9AAF")}
/> />
</Box> </Box>
<Typography sx={{ color: "#9A9AAF" }}> <Box
{currentQuestion.content.ratingPositiveDescription} sx={{
</Typography> display: "flex",
justifyContent: "space-between",
gap: 2,
width: "100%"
}}
>
<Typography sx={{ color: "#9A9AAF" }}>{currentQuestion.content.ratingNegativeDescription}</Typography>
<Typography sx={{ color: "#9A9AAF" }}>{currentQuestion.content.ratingPositiveDescription}</Typography>
</Box>
</Box> </Box>
</Box> </Box>
); );

12
src/ui_kit/LabeledDatePicker.tsx
View File

@ -7,11 +7,13 @@ import { Dayjs } from "dayjs";
interface Props { interface Props {
label?: string; label?: string;
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
sxIcon?: SxProps<Theme>;
sxDate?: SxProps<Theme>;
value?: Dayjs | null; value?: Dayjs | null;
onChange?: (value: Dayjs | null) => void; onChange?: (value: Dayjs | null) => void;
} }
export default function LabeledDatePicker({ label, value, onChange, sx }: Props) { export default function LabeledDatePicker({ label, value, onChange, sx, sxIcon, sxDate }: Props) {
const theme = useTheme(); const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("md")); const upLg = useMediaQuery(theme.breakpoints.up("md"));
@ -38,7 +40,7 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props)
value={value} value={value}
onChange={onChange} onChange={onChange}
slots={{ slots={{
openPickerIcon: () => <CalendarIcon />, openPickerIcon: () => <CalendarIcon sx={sxIcon}/>,
}} }}
slotProps={{ slotProps={{
openPickerButton: { openPickerButton: {
@ -47,6 +49,9 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props)
}, },
"data-cy": "open-datepicker", "data-cy": "open-datepicker",
}, },
layout: {
sx: {backgroundColor: theme.palette.background.default,}
}
}} }}
sx={{ sx={{
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
@ -55,13 +60,14 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props)
pr: "22px", pr: "22px",
"& input": { "& input": {
py: "11px", py: "11px",
pl: upLg ? "20px" : "13px", pl: "20px",
lineHeight: "19px", lineHeight: "19px",
}, },
"& fieldset": { "& fieldset": {
borderColor: "#9A9AAF", borderColor: "#9A9AAF",
}, },
}, },
...sxDate
}} }}
/> />
</Box> </Box>

130
src/ui_kit/QuizPreview/QuizPreview.tsx
View File

@ -1,10 +1,12 @@
import { Box, IconButton } from "@mui/material"; import {Box, IconButton, ThemeProvider} from "@mui/material";
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
import { useLayoutEffect, useRef } from "react"; import { useLayoutEffect, useRef } from "react";
import { Rnd } from "react-rnd"; import { Rnd } from "react-rnd";
import { useWindowSize } from "../../utils/hooks/useWindowSize"; import { useWindowSize } from "../../utils/hooks/useWindowSize";
import QuizPreviewLayout from "./QuizPreviewLayout"; import QuizPreviewLayout from "./QuizPreviewLayout";
import ResizeIcon from "@icons/ResizeIcon"; import ResizeIcon from "@icons/ResizeIcon";
import {themesPublication} from "@utils/themes/Publication/themePublication";
import {useCurrentQuiz} from "@root/quizes/hooks";
const DRAG_PARENT_MARGIN = 0; const DRAG_PARENT_MARGIN = 0;
const NAVBAR_HEIGHT = 0; const NAVBAR_HEIGHT = 0;
@ -20,6 +22,7 @@ interface RndPositionAndSize {
export default function QuizPreview() { export default function QuizPreview() {
const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown); const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown);
const rndParentRef = useRef<HTMLDivElement>(null); const rndParentRef = useRef<HTMLDivElement>(null);
const quiz = useCurrentQuiz();
const rndRef = useRef<Rnd | null>(null); const rndRef = useRef<Rnd | null>(null);
const rndPositionAndSizeRef = useRef<RndPositionAndSize>({ const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
x: 0, x: 0,
@ -51,66 +54,69 @@ export default function QuizPreview() {
); );
return ( return (
<Box <ThemeProvider theme={themesPublication?.[quiz?.config.theme]}>
ref={rndParentRef} <Box
data-cy="quiz-preview-container" ref={rndParentRef}
sx={{ data-cy="quiz-preview-container"
position: "fixed", sx={{
top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN, position: "fixed",
left: DRAG_PARENT_MARGIN, top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,
bottom: DRAG_PARENT_BOTTOM_MARGIN, left: DRAG_PARENT_MARGIN,
right: DRAG_PARENT_MARGIN, bottom: DRAG_PARENT_BOTTOM_MARGIN,
// backgroundColor: "rgba(0, 100, 0, 0.2)", right: DRAG_PARENT_MARGIN,
pointerEvents: "none", // backgroundColor: "rgba(0, 100, 0, 0.2)",
zIndex: 100, pointerEvents: "none",
}} zIndex: 100,
> }}
{isPreviewShown && ( >
<Rnd {isPreviewShown && (
minHeight={20} <Rnd
minWidth={20} minHeight={20}
bounds="parent" minWidth={20}
ref={rndRef} bounds="parent"
dragHandleClassName="quiz-preview-draghandle" ref={rndRef}
default={{ dragHandleClassName="quiz-preview-draghandle"
x: rndPositionAndSizeRef.current.x, default={{
y: rndPositionAndSizeRef.current.y, x: rndPositionAndSizeRef.current.x,
width: rndPositionAndSizeRef.current.width, y: rndPositionAndSizeRef.current.y,
height: rndPositionAndSizeRef.current.height, width: rndPositionAndSizeRef.current.width,
}} height: rndPositionAndSizeRef.current.height,
onResizeStop={(e, direction, ref, delta, position) => { }}
rndPositionAndSizeRef.current.x = position.x; onResizeStop={(e, direction, ref, delta, position) => {
rndPositionAndSizeRef.current.y = position.y; rndPositionAndSizeRef.current.x = position.x;
rndPositionAndSizeRef.current.width = ref.style.width; rndPositionAndSizeRef.current.y = position.y;
rndPositionAndSizeRef.current.height = ref.style.height; rndPositionAndSizeRef.current.width = ref.style.width;
}} rndPositionAndSizeRef.current.height = ref.style.height;
onDragStop={(e, d) => { }}
rndPositionAndSizeRef.current.x = d.x; onDragStop={(e, d) => {
rndPositionAndSizeRef.current.y = d.y; rndPositionAndSizeRef.current.x = d.x;
}} rndPositionAndSizeRef.current.y = d.y;
onDragStart={(e, d) => { }}
e.preventDefault(); onDragStart={(e, d) => {
}} e.preventDefault();
enableResizing={{ }}
topLeft: isPreviewShown, enableResizing={{
}} topLeft: isPreviewShown,
resizeHandleComponent={{ }}
topLeft: <ResizeIcon />, resizeHandleComponent={{
}} topLeft: <ResizeIcon />,
resizeHandleStyles={{ }}
topLeft: { resizeHandleStyles={{
top: "-1px", topLeft: {
left: "-1px", top: "-1px",
}, left: "-1px",
}} },
style={{ }}
overflow: "hidden", style={{
pointerEvents: "auto", overflow: "hidden",
}} pointerEvents: "auto",
> }}
<QuizPreviewLayout /> >
</Rnd> <QuizPreviewLayout />
)} </Rnd>
</Box> )}
</Box>
</ThemeProvider>
); );
} }

66
src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
View File

@ -17,7 +17,7 @@ import {
setCurrentQuestionIndex, setCurrentQuestionIndex,
} from "@root/quizPreview"; } from "@root/quizPreview";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared"; import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared";
import { useEffect } from "react"; import {useEffect, useRef, useState} from "react";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import Date from "./QuizPreviewQuestionTypes/Date"; import Date from "./QuizPreviewQuestionTypes/Date";
import Emoji from "./QuizPreviewQuestionTypes/Emoji"; import Emoji from "./QuizPreviewQuestionTypes/Emoji";
@ -26,7 +26,7 @@ import Images from "./QuizPreviewQuestionTypes/Images";
import Number from "./QuizPreviewQuestionTypes/Number"; import Number from "./QuizPreviewQuestionTypes/Number";
import Page from "./QuizPreviewQuestionTypes/Page"; import Page from "./QuizPreviewQuestionTypes/Page";
import Rating from "./QuizPreviewQuestionTypes/Rating"; import Rating from "./QuizPreviewQuestionTypes/Rating";
import Select from "./QuizPreviewQuestionTypes/Select"; import Select, {ArrowDownTheme} from "./QuizPreviewQuestionTypes/Select";
import Text from "./QuizPreviewQuestionTypes/Text"; import Text from "./QuizPreviewQuestionTypes/Text";
import Variant from "./QuizPreviewQuestionTypes/Variant"; import Variant from "./QuizPreviewQuestionTypes/Variant";
import Varimg from "./QuizPreviewQuestionTypes/Varimg"; import Varimg from "./QuizPreviewQuestionTypes/Varimg";
@ -37,13 +37,14 @@ export default function QuizPreviewLayout() {
const theme = useTheme(); const theme = useTheme();
const questions = useQuestionsStore((state) => state.questions); const questions = useQuestionsStore((state) => state.questions);
const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex); const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex);
const [widthPreview, setWidthPreview] = useState(null)
const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted && question.type !== "result" ); const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted && question.type !== "result" );
const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0; const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100); const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
const PreviewWin = useRef(0);
const currentQuestion = nonDeletedQuizQuestions[currentQuizStep]; const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
useEffect( useEffect(
function resetCurrentQuizStep() { function resetCurrentQuizStep() {
if (currentQuizStep > maxCurrentQuizStep) { if (currentQuizStep > maxCurrentQuizStep) {
@ -53,8 +54,22 @@ export default function QuizPreviewLayout() {
[currentQuizStep, maxCurrentQuizStep] [currentQuizStep, maxCurrentQuizStep]
); );
const observer = useRef(
new ResizeObserver((entries) => {
const { width } = entries[0].contentRect;
setWidthPreview(width)
})
);
useEffect(() => {
observer.current.observe(PreviewWin.current);
},
[PreviewWin, observer]);
console.log('current width state: ', widthPreview);
return ( return (
<Paper <Paper
ref={PreviewWin}
className="quiz-preview-draghandle" className="quiz-preview-draghandle"
data-cy="quiz-preview-layout" data-cy="quiz-preview-layout"
sx={{ sx={{
@ -64,6 +79,7 @@ export default function QuizPreviewLayout() {
flexGrow: 1, flexGrow: 1,
borderRadius: "12px", borderRadius: "12px",
pointerEvents: "auto", pointerEvents: "auto",
backgroundColor: theme.palette.background.default
}} }}
> >
<Box <Box
@ -77,7 +93,7 @@ export default function QuizPreviewLayout() {
scrollbarWidth: "none", scrollbarWidth: "none",
}} }}
> >
<QuestionPreviewComponent question={currentQuestion} /> <QuestionPreviewComponent question={currentQuestion} widthPreview={widthPreview} />
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -98,8 +114,11 @@ export default function QuizPreviewLayout() {
height: "48px", height: "48px",
borderRadius: "8px", borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`, border: `1px solid ${theme.palette.primary.main} !important`,
}, },
"& .MuiSelect-icon": {
color: theme.palette.primary.main
}
}} }}
MenuProps={{ MenuProps={{
PaperProps: { PaperProps: {
@ -109,6 +128,7 @@ export default function QuizPreviewLayout() {
borderRadius: "8px", borderRadius: "8px",
border: "1px solid #EEE4FC", border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
backgroundColor: theme.palette.background.default,
}, },
}, },
MenuListProps: { MenuListProps: {
@ -119,21 +139,21 @@ export default function QuizPreviewLayout() {
gap: "8px", gap: "8px",
"& .Mui-selected": { "& .Mui-selected": {
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main, color: theme.palette.primary.main,
}, },
}, },
}, },
}} }}
inputProps={{ inputProps={{
sx: { sx: {
color: theme.palette.brightPurple.main, color: theme.palette.primary.main,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
px: "9px", px: "9px",
gap: "20px", gap: "20px",
}, },
}} }}
IconComponent={(props) => <ArrowDownIcon {...props} />} IconComponent={ArrowDownTheme}
> >
{Object.values(questions.filter(q=>q.type!=="result")).map(({ id, title }, index) => ( {Object.values(questions.filter(q=>q.type!=="result")).map(({ id, title }, index) => (
<MenuItem <MenuItem
@ -145,7 +165,7 @@ export default function QuizPreviewLayout() {
gap: "20px", gap: "20px",
p: "4px", p: "4px",
borderRadius: "5px", borderRadius: "5px",
color: theme.palette.grey2.main, color: "#9A9AAF",
}} }}
> >
{`${index + 1}. ${title}`} {`${index + 1}. ${title}`}
@ -196,7 +216,7 @@ export default function QuizPreviewLayout() {
disabled={currentQuizStep === 0} disabled={currentQuizStep === 0}
sx={{ px: 1, minWidth: 0 }} sx={{ px: 1, minWidth: 0 }}
> >
<ArrowLeft /> <ArrowLeft color={theme.palette.primary.main}/>
</Button> </Button>
<Button <Button
variant="contained" variant="contained"
@ -212,32 +232,32 @@ export default function QuizPreviewLayout() {
); );
} }
function QuestionPreviewComponent({ question }: { question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined }) { function QuestionPreviewComponent({ question, widthPreview }: { question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined, widthPreview?: number }) {
if (!question || question.type === null) return null; if (!question || question.type === null) return null;
switch (question.type) { switch (question.type) {
case "variant": case "variant":
return <Variant question={question} />; return <Variant question={question} widthPreview={widthPreview}/>;
case "images": case "images":
return <Images question={question} />; return <Images question={question} widthPreview={widthPreview}/>;
case "varimg": case "varimg":
return <Varimg question={question} />; return <Varimg question={question} widthPreview={widthPreview}/>;
case "emoji": case "emoji":
return <Emoji question={question} />; return <Emoji question={question} widthPreview={widthPreview}/>;
case "text": case "text":
return <Text question={question} />; return <Text question={question} widthPreview={widthPreview}/>;
case "select": case "select":
return <Select question={question} />; return <Select question={question} widthPreview={widthPreview}/>;
case "date": case "date":
return <Date question={question} />; return <Date question={question} widthPreview={widthPreview}/>;
case "number": case "number":
return <Number question={question} />; return <Number question={question} widthPreview={widthPreview}/>;
case "file": case "file":
return <File question={question} />; return <File question={question} widthPreview={widthPreview}/>;
case "page": case "page":
return <Page question={question} />; return <Page question={question} widthPreview={widthPreview}/>;
case "rating": case "rating":
return <Rating question={question} />; return <Rating question={question} widthPreview={widthPreview}/>;
default: default:
notReachable(question); notReachable(question);
} }

22
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
View File

@ -1,13 +1,18 @@
import { Box, Typography } from "@mui/material"; import {Box, Typography, useTheme} from "@mui/material";
import LabeledDatePicker from "@ui_kit/LabeledDatePicker"; import LabeledDatePicker from "@ui_kit/LabeledDatePicker";
import type { QuizQuestionDate } from "model/questionTypes/date"; import type { QuizQuestionDate } from "model/questionTypes/date";
import {modes} from "@utils/themes/Publication/themePublication";
import {useCurrentQuiz} from "@root/quizes/hooks";
interface Props { interface Props {
question: QuizQuestionDate; question: QuizQuestionDate;
} }
export default function Date({ question }: Props) { export default function Date({ question }: Props) {
const theme = useTheme();
const mode = modes;
const quiz = useCurrentQuiz();
return ( return (
<Box <Box
sx={{ sx={{
@ -17,7 +22,20 @@ export default function Date({ question }: Props) {
}} }}
> >
<Typography variant="h6" data-cy="question-title">{question.title}</Typography> <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
<LabeledDatePicker /> <LabeledDatePicker sxIcon={{
"& path": {stroke: theme.palette.primary.main},
"& rect": {stroke: theme.palette.primary.main}
}}
sxDate={{
"& .MuiInputBase-root": {
backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default,
borderRadius: "10px",
maxWidth: "250px",
pr: "22px",
}
}}
/>
</Box> </Box>
); );
} }

9
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
View File

@ -44,7 +44,8 @@ export default function Emoji({ question }: Props) {
key={index} key={index}
sx={{ sx={{
borderRadius: "12px", borderRadius: "12px",
border: `1px solid ${theme.palette.grey2.main}`, border: `1px solid`,
borderColor: value === variant.answer ? theme.palette.primary.main : "#9A9AAF",
overflow: "hidden", overflow: "hidden",
maxWidth: "317px", maxWidth: "317px",
width: "100%", width: "100%",
@ -66,17 +67,17 @@ export default function Emoji({ question }: Props) {
sx={{ sx={{
margin: 0, margin: 0,
padding: "15px", padding: "15px",
color: "#4D4D4D", color: theme.palette.text.primary,
display: "flex", display: "flex",
gap: "10px", gap: "10px",
background: "#f2f3f7" background: theme.palette.background.default
}} }}
control={ control={
<Radio <Radio
inputProps={{ inputProps={{
"data-cy": "variant-radio", "data-cy": "variant-radio",
}} }}
checkedIcon={<RadioCheck />} icon={<RadioIcon />} checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />}
/> />
} }

2
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
View File

@ -58,7 +58,7 @@ export default function File({ question }: Props) {
}} }}
/> />
</Button> </Button>
{file && <Typography data-cy="chosen-file-name">Выбран файл: {file.name}</Typography>} {file && <Typography data-cy="chosen-file-name">Вы загрузили: {file.name}</Typography>}
</Box> </Box>
); );
} }

12
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
View File

@ -14,9 +14,10 @@ import type { QuizQuestionImages } from "model/questionTypes/images";
interface Props { interface Props {
question: QuizQuestionImages; question: QuizQuestionImages;
widthPreview: number
} }
export default function Images({ question }: Props) { export default function Images({ question, widthPreview }: Props) {
const theme = useTheme(); const theme = useTheme();
const [selectedVariants, setSelectedVariants] = useState<number[]>([]); const [selectedVariants, setSelectedVariants] = useState<number[]>([]);
@ -47,12 +48,13 @@ export default function Images({ question }: Props) {
gap: 1, gap: 1,
}} }}
> >
<Typography variant="h6">{question.title}</Typography> <Typography variant="h6" color={theme.palette.text.primary}>{question.title}</Typography>
<Box <Box
sx={{ sx={{
display: "grid", display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
gap: 1, gap: "15px",
maxWidth: "1050px"
}} }}
> >
{question.content.variants {question.content.variants
@ -70,8 +72,10 @@ export default function Images({ question }: Props) {
overflow: "hidden", overflow: "hidden",
border: "1px solid", border: "1px solid",
borderColor: selectedVariants.includes(index) borderColor: selectedVariants.includes(index)
? theme.palette.brightPurple.main ? theme.palette.primary.main
: "#E3E3E3", : "#E3E3E3",
maxWidth: "300px",
maxHeight: "340px"
}} }}
> >
{variant.extendedText ? ( {variant.extendedText ? (

69
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
View File

@ -1,9 +1,13 @@
import { useLayoutEffect, useState } from "react"; import { useLayoutEffect, useState } from "react";
import { Box, Typography } from "@mui/material"; import {Box, Typography, useTheme} from "@mui/material";
import { CustomSlider } from "@ui_kit/CustomSlider"; import { CustomSlider } from "@ui_kit/CustomSlider";
import type { QuizQuestionNumber } from "model/questionTypes/number"; import type { QuizQuestionNumber } from "model/questionTypes/number";
import CustomTextField from "@ui_kit/CustomTextField";
import {updateAnswer} from "@root/quizView";
import {modes} from "@utils/themes/Publication/themePublication";
import {useCurrentQuiz} from "@root/quizes/hooks";
interface Props { interface Props {
question: QuizQuestionNumber; question: QuizQuestionNumber;
@ -11,7 +15,9 @@ interface Props {
export default function Number({ question }: Props) { export default function Number({ question }: Props) {
const [sliderValues, setSliderValues] = useState<number | number[]>(0); const [sliderValues, setSliderValues] = useState<number | number[]>(0);
const theme = useTheme();
const mode = modes;
const quiz = useCurrentQuiz();
const start = question.content.start; const start = question.content.start;
const min = parseInt(question.content.range.split("—")[0]); const min = parseInt(question.content.range.split("—")[0]);
const max = parseInt(question.content.range.split("—")[1]); const max = parseInt(question.content.range.split("—")[1]);
@ -50,7 +56,66 @@ export default function Number({ question }: Props) {
defaultValue={start} defaultValue={start}
valueLabelDisplay={"on"} valueLabelDisplay={"on"}
step={question.content.step} step={question.content.step}
sx={{
color: theme.palette.primary.main,
"& .MuiSlider-valueLabel": {
background: theme.palette.primary.main,}
}}
/> />
{!question.content.chooseRange && (
<Box sx={{mt: "30px", maxWidth: "80px",}}>
<CustomTextField
placeholder="0"
value={sliderValues}
sx={{
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default,
},
}}
/>
</Box>
)}
{question.content.chooseRange && (
<Box
sx={{
mt: "30px",
display: "flex",
gap: "15px",
alignItems: "center",
"& .MuiFormControl-root": { width: "auto" },
}}
>
<CustomTextField
placeholder="0"
value={sliderValues[0]}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default,
},
}}
/>
<Typography color={theme.palette.text.primary}>до</Typography>
<CustomTextField
placeholder="0"
value={sliderValues[1]}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default,
},
}}
/>
</Box>
)}
</Box> </Box>
</Box> </Box>
); );

10
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
View File

@ -53,7 +53,7 @@ export default function Rating({ question }: Props) {
gap: 1, gap: 1,
}} }}
> >
<Typography variant="h6" data-cy="question-title">{question.title}</Typography> <Typography variant="h6" data-cy="question-title" color={theme.palette.text.primary} >{question.title}</Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -67,7 +67,7 @@ export default function Rating({ question }: Props) {
data-rating={selectedRating} data-rating={selectedRating}
sx={{ sx={{
display: "flex", display: "flex",
gap: isMobile ? "10px" : "15px", gap: "25px",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -89,11 +89,7 @@ export default function Rating({ question }: Props) {
}} }}
> >
<RatingIconComponent <RatingIconComponent
color={ color={selectedRating > itemNumber ? theme.palette.primary.main : "#9A9AAF"}
selectedRating > itemNumber
? theme.palette.brightPurple.main
: theme.palette.grey2.main
}
/> />
</Box> </Box>
))} ))}

38
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
View File

@ -19,7 +19,7 @@ interface Props {
export default function Text({ question }: Props) { export default function Text({ question }: Props) {
const theme = useTheme(); const theme = useTheme();
const [selectValue, setSelectValue] = useState<string>(""); const [selectValue, setSelectValue] = useState<string>("");
const arrowDown = <ArrowDownIcon color = {"currentColor"}/>
function handleChange(event: SelectChangeEvent<string | null>) { function handleChange(event: SelectChangeEvent<string | null>) {
setSelectValue((event.target as HTMLInputElement).value); setSelectValue((event.target as HTMLInputElement).value);
} }
@ -54,8 +54,11 @@ export default function Text({ question }: Props) {
height: "48px", height: "48px",
borderRadius: "8px", borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`, border: `1px solid ${theme.palette.primary.main} !important`,
}, },
"& .MuiSelect-icon": {
color: theme.palette.primary.main
}
}} }}
MenuProps={{ MenuProps={{
PaperProps: { PaperProps: {
@ -64,6 +67,7 @@ export default function Text({ question }: Props) {
p: "4px", p: "4px",
borderRadius: "8px", borderRadius: "8px",
border: "1px solid #EEE4FC", border: "1px solid #EEE4FC",
backgroundColor: theme.palette.background.default,
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
}, },
}, },
@ -75,19 +79,20 @@ export default function Text({ question }: Props) {
gap: "8px", gap: "8px",
"& .Mui-selected": { "& .Mui-selected": {
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main, color: theme.palette.primary.main,
}, },
}, },
}, },
}} }}
inputProps={{ inputProps={{
sx: { sx: {
color: theme.palette.brightPurple.main, color: theme.palette.primary.main,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
px: "9px", px: "9px",
gap: "20px", gap: "20px",
"& + input": !selectValue && { "& + input": !selectValue && {
backgroundColor: theme.palette.background.default,
border: "none", border: "none",
transform: "translateY(-50%)", transform: "translateY(-50%)",
top: "50%", top: "50%",
@ -96,9 +101,10 @@ export default function Text({ question }: Props) {
color: "#333", color: "#333",
fontSize: "16px", fontSize: "16px",
}, },
}, },
}} }}
IconComponent={(props) => <ArrowDownIcon {...props} />} IconComponent={ArrowDownTheme}
> >
{question.content.variants {question.content.variants
.filter(({ answer }) => answer) .filter(({ answer }) => answer)
@ -113,7 +119,7 @@ export default function Text({ question }: Props) {
gap: "20px", gap: "20px",
p: "4px", p: "4px",
borderRadius: "5px", borderRadius: "5px",
color: theme.palette.grey2.main, color: "#9A9AAF",
}} }}
> >
{variant.answer} {variant.answer}
@ -124,3 +130,23 @@ export default function Text({ question }: Props) {
</Box> </Box>
); );
} }
export function ArrowDownTheme (props: any) {
return (
<Box
{...props}
sx={{
top: "25% !important",
height: "24px",
width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M19.5 9L12 16.5L4.5 9" stroke={"currentColor"} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
)
}

53
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
View File

@ -1,14 +1,14 @@
import { ChangeEvent, useState } from "react"; import { ChangeEvent, useState } from "react";
import { import {
Box, Box,
FormControl, FormControl,
FormControlLabel, FormControlLabel,
FormLabel, FormLabel,
Radio, Radio,
RadioGroup, RadioGroup,
useRadioGroup, useRadioGroup,
Tooltip, Tooltip,
Typography, Typography, useTheme, Checkbox,
} from "@mui/material"; } from "@mui/material";
import InfoIcon from "@icons/InfoIcon"; import InfoIcon from "@icons/InfoIcon";
@ -17,6 +17,9 @@ import type { QuizQuestionVariant } from "model/questionTypes/variant";
import CustomRadio from "@ui_kit/CustomRadio"; import CustomRadio from "@ui_kit/CustomRadio";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
import {modes} from "@utils/themes/Publication/themePublication";
import {useCurrentQuiz} from "@root/quizes/hooks";
import CheckboxIcon from "@icons/Checkbox";
interface Props { interface Props {
question: QuizQuestionVariant; question: QuizQuestionVariant;
@ -24,14 +27,16 @@ interface Props {
export default function Variant({ question }: Props) { export default function Variant({ question }: Props) {
const [value, setValue] = useState<string | null>(null); const [value, setValue] = useState<string | null>(null);
const theme = useTheme();
const mode = modes;
const quiz = useCurrentQuiz();
const handleChange = (event: ChangeEvent<HTMLInputElement>) => { const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setValue((event.target as HTMLInputElement).value); setValue((event.target as HTMLInputElement).value);
}; };
return ( return (
<FormControl fullWidth> <FormControl fullWidth>
<FormLabel id="quiz-question-radio-group" data-cy="question-title" sx={{color: "#000000", marginBottom: "20px", fontSize: "24px", fontWeight: 500}}> <FormLabel id="quiz-question-radio-group" data-cy="question-title" sx={{color: theme.palette.text.primary, marginBottom: "20px", fontSize: "24px", fontWeight: 500}}>
{question.title} {question.title}
</FormLabel> </FormLabel>
<RadioGroup <RadioGroup
@ -52,24 +57,32 @@ export default function Variant({ question }: Props) {
data-cy="variant-answer" data-cy="variant-answer"
labelPlacement="start" labelPlacement="start"
sx={{borderRadius: "12px", sx={{borderRadius: "12px",
border: value === value ? "1px solid #7E2AEA" : "1px solid #9A9AAF", border: value == variant.answer ? `1px solid ${theme.palette.primary.main}` : "1px solid #9A9AAF",
padding: "20px", padding: "20px",
justifyContent: "space-between", justifyContent: "space-between",
maxWidth: "685px", maxWidth: "685px",
backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default,
width: "100%", width: "100%",
margin: 0 margin: 0
}} }}
control={ control={question.content.multi ? (
<Radio <Checkbox
inputProps={{ checkedIcon={<CheckboxIcon checked color={theme.palette.primary.main} />}
"data-cy": "variant-radio", icon={<CheckboxIcon />}
}} />
checkedIcon={<RadioCheck />} icon={<RadioIcon />} ) : (
/> <Radio
inputProps={{
"data-cy": "variant-radio",
}}
checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />}
/>
)
} }
label={ label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography> <Typography color={theme.palette.text.primary}>
{variant.answer} {variant.answer}
</Typography> </Typography>
{variant.hints && ( {variant.hints && (

178
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
View File

@ -7,7 +7,7 @@ import {
Radio, Radio,
RadioGroup, RadioGroup,
Tooltip, Tooltip,
Typography, useTheme, Typography, useMediaQuery, useTheme,
} from "@mui/material"; } from "@mui/material";
import InfoIcon from "@icons/InfoIcon"; import InfoIcon from "@icons/InfoIcon";
@ -16,14 +16,20 @@ import type { QuestionVariant } from "model/questionTypes/shared";
import type { QuizQuestionVarImg } from "model/questionTypes/varimg"; import type { QuizQuestionVarImg } from "model/questionTypes/varimg";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
import {modes} from "@utils/themes/Publication/themePublication";
import {useCurrentQuiz} from "@root/quizes/hooks";
interface Props { interface Props {
question: QuizQuestionVarImg; question: QuizQuestionVarImg;
widthPreview: number;
} }
export default function Varimg({ question }: Props) { export default function Varimg({ question, widthPreview }: Props) {
const [selectedVariantIndex, setSelectedVariantIndex] = useState<number>(-1); const [selectedVariantIndex, setSelectedVariantIndex] = useState<number>(-1);
const theme = useTheme(); const theme = useTheme();
const mode = modes;
const quiz = useCurrentQuiz();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const handleChange = (event: ChangeEvent<HTMLInputElement>) => { const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setSelectedVariantIndex( setSelectedVariantIndex(
question.content.variants.findIndex( question.content.variants.findIndex(
@ -43,93 +49,113 @@ export default function Varimg({ question }: Props) {
gap: "40px", gap: "40px",
}} }}
> >
<FormControl sx={{maxWidth: "900px", <FormControl sx={{
//maxWidth: "900px",
width: "100%", gap: "25px"}}> width: "100%", gap: "25px"}}>
<FormLabel <FormLabel
id="quiz-question-radio-group" id="quiz-question-radio-group"
data-cy="question-title" data-cy="question-title"
sx={{fontSize: "24px", fontWeight: 500}} sx={{fontSize: "24px", fontWeight: 500, color: theme.palette.text.primary}}
> >
{question.title} {question.title}
</FormLabel> </FormLabel>
<RadioGroup <Box sx={{
aria-labelledby="quiz-question-radio-group" display: "flex",
value={currentVariant?.answer ?? ""} alignItems: "center",
onChange={handleChange} flexDirection: widthPreview < 650 ? "column-reverse" : undefined,
sx={{gap: "20px"}} gap: "30px"
> }}>
{question.content.variants <RadioGroup
.filter(({ answer }) => answer) aria-labelledby="quiz-question-radio-group"
.map((variant, index) => ( value={currentVariant?.answer ?? ""}
<FormControlLabel onChange={handleChange}
key={index}
value={variant.answer}
data-cy="variant-answer"
sx={{ sx={{
margin: 0, gap: "20px",
borderRadius: "5px",
padding: "15px",
color: "#4D4D4D",
border: `1px solid ${theme.palette.grey2.main}`,
display: "flex", display: "flex",
width: "100%",
}} }}
control={ >
<Radio {question.content.variants
inputProps={{ .filter(({ answer }) => answer)
"data-cy": "variant-radio", .map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
data-cy="variant-answer"
sx={{
margin: 0,
borderRadius: "5px",
padding: "15px",
color: theme.palette.text.primary,
border: `1px solid`,
borderColor: selectedVariantIndex == index
? theme.palette.primary.main
: "#E3E3E3",
backgroundColor: mode[quiz.config.theme] ? "white" : theme.palette.background.default,
/*display: "flex",*/
}}
control={
<Radio
inputProps={{
"data-cy": "variant-radio",
}}
checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />}
/>
}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
{variant.hints && (
<Tooltip title={variant.hints} placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
)}
</Box>
}
/>
))}
</RadioGroup>
<Box
sx={{
border: "1px solid #E3E3E3",
maxWidth: "400px",
height: "400px",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "12px",
marginTop: widthPreview < 650 ? 0 : "50px",
overflow: "hidden",
}}
>
{currentVariant?.extendedText ? (
<img
src={currentVariant.extendedText}
data-cy="variant-image"
alt="question variant"
style={{
width: "100%",
height: "100%",
display: "block",
flexGrow: 1,
objectFit: "cover"
}} }}
checkedIcon={<RadioCheck />} icon={<RadioIcon />}
/> />
} ) : (
label={ <Typography p={2}>
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> {selectedVariantIndex === -1
<Typography>{variant.answer}</Typography> ? widthPreview < 650 ? "Выберите вариант ниже" : "Выберите вариант"
{variant.hints && ( : "Картинка отсутствует"}
<Tooltip title={variant.hints} placement="right"> </Typography>
<Box> )}
<InfoIcon /> </Box>
</Box> </Box>
</Tooltip>
)}
</Box>
}
/>
))}
</RadioGroup>
</FormControl> </FormControl>
<Box
sx={{
border: "1px solid #E3E3E3",
maxWidth: "400px",
height: "400px",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "12px",
marginTop: "50px",
overflow: "hidden",
}}
>
{currentVariant?.extendedText ? (
<img
src={currentVariant.extendedText}
data-cy="variant-image"
alt="question variant"
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
) : (
<Typography p={2}>
{selectedVariantIndex === -1
? "Выберите вариант"
: "Картинка отсутствует"}
</Typography>
)}
</Box>
</Box> </Box>
); );
} }

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

@ -4,6 +4,7 @@ import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; 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";
export default function QuizPreviewLayout() { export default function QuizPreviewLayout() {
const theme = useTheme(); const theme = useTheme();
@ -36,7 +37,18 @@ export default function QuizPreviewLayout() {
) : null; ) : null;
return ( return (
<Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}> <Paper className="quiz-preview-draghandle"
sx={{
height: "100%",
background:
quiz.config.startpageType === "expanded"
? quiz.config.startpage.position === "left"
? "linear-gradient(90deg,#272626,transparent)"
: quiz.config.startpage.position === "center"
? "linear-gradient(180deg,transparent,#272626)"
: "linear-gradient(270deg,#272626,transparent)"
: theme.palette.background.default,
}}>
<QuizPreviewLayoutByType <QuizPreviewLayoutByType
quizHeaderBlock={ quizHeaderBlock={
<> <>
@ -94,19 +106,19 @@ export default function QuizPreviewLayout() {
{quiz.config.info.clickable ? ( {quiz.config.info.clickable ? (
isMobileDevice ? ( isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}> <Link href={`tel:${quiz.config.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}> <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{quiz.config.info.phonenumber} {quiz.config.info.phonenumber}
</Typography> </Typography>
</Link> </Link>
) : ( ) : (
<ButtonBase onClick={handleCopyNumber}> <ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}> <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{quiz.config.info.phonenumber} {quiz.config.info.phonenumber}
</Typography> </Typography>
</ButtonBase> </ButtonBase>
) )
) : ( ) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}> <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{quiz.config.info.phonenumber} {quiz.config.info.phonenumber}
</Typography> </Typography>
)} )}
@ -138,6 +150,46 @@ function QuizPreviewLayoutByType({
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(630)); const isTablet = useMediaQuery(theme.breakpoints.down(630));
function StartPageMobile() {
return(
<>
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: "80%"
}}
>
{quizHeaderBlock}
<Box
sx={{
height: "80%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
width: "100%"
}}
>
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</>
)
}
switch (startpageType) { switch (startpageType) {
case null: case null:
case "standard": { case "standard": {
@ -191,7 +243,7 @@ function QuizPreviewLayoutByType({
width: "40%", width: "40%",
position: "relative", position: "relative",
padding: "16px", padding: "16px",
zIndex: 2, zIndex: 3,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
@ -208,7 +260,7 @@ function QuizPreviewLayoutByType({
top: 0, top: 0,
height: "100%", height: "100%",
width: "100%", width: "100%",
zIndex: 1, zIndex: -1,
}} }}
> >
{backgroundBlock} {backgroundBlock}
@ -230,7 +282,15 @@ function QuizPreviewLayoutByType({
}} }}
> >
{quizHeaderBlock} {quizHeaderBlock}
{backgroundBlock && <Box>{backgroundBlock}</Box>} {backgroundBlock &&
<Box
sx={{
width: "60%",
overflow: "hidden",
display: "flex",
justifyContent: "center"
}}
>{backgroundBlock}</Box>}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
); );

132
src/ui_kit/StartPagePreview/index.tsx
View File

@ -1,9 +1,11 @@
import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material"; import {Box, IconButton, useTheme, useMediaQuery, ThemeProvider} from "@mui/material";
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview"; import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
import { useLayoutEffect, useRef } from "react"; import {useEffect, useLayoutEffect, useRef, useState} from "react";
import { Rnd } from "react-rnd"; import { Rnd } from "react-rnd";
import QuizPreviewLayout from "./QuizPreviewLayout"; import QuizPreviewLayout from "./QuizPreviewLayout";
import ResizeIcon from "@icons/ResizeIcon"; import ResizeIcon from "@icons/ResizeIcon";
import {themesPublication} from "@utils/themes/Publication/themePublication";
import {useCurrentQuiz} from "@root/quizes/hooks";
const DRAG_PARENT_MARGIN = 0; const DRAG_PARENT_MARGIN = 0;
const NAVBAR_HEIGHT = 0; const NAVBAR_HEIGHT = 0;
@ -21,6 +23,7 @@ export const StartPagePreview = () => {
const rndParentRef = useRef<HTMLDivElement>(null); const rndParentRef = useRef<HTMLDivElement>(null);
const rndRef = useRef<Rnd | null>(null); const rndRef = useRef<Rnd | null>(null);
const theme = useTheme(); const theme = useTheme();
const quiz = useCurrentQuiz();
const isTablet = useMediaQuery(theme.breakpoints.down(630)); const isTablet = useMediaQuery(theme.breakpoints.down(630));
const rndPositionAndSizeRef = useRef<RndPositionAndSize>({ const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
x: 0, x: 0,
@ -52,66 +55,69 @@ export const StartPagePreview = () => {
); );
return ( return (
<Box <ThemeProvider theme={themesPublication?.[quiz?.config.theme]}>
ref={rndParentRef} <Box
sx={{ ref={rndParentRef}
position: "fixed", sx={{
top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN, position: "fixed",
left: DRAG_PARENT_MARGIN, top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,
bottom: DRAG_PARENT_BOTTOM_MARGIN, left: DRAG_PARENT_MARGIN,
right: DRAG_PARENT_MARGIN, bottom: DRAG_PARENT_BOTTOM_MARGIN,
pointerEvents: "none", right: DRAG_PARENT_MARGIN,
zIndex: 100, pointerEvents: "none",
}} zIndex: 100,
> }}
{isPreviewShown && ( >
<Rnd {isPreviewShown && (
minHeight={20} <Rnd
minWidth={20} minHeight={20}
bounds="parent" minWidth={20}
ref={rndRef} bounds="parent"
dragHandleClassName="quiz-preview-draghandle" ref={rndRef}
default={{ dragHandleClassName="quiz-preview-draghandle"
x: rndPositionAndSizeRef.current.x, default={{
y: rndPositionAndSizeRef.current.y, x: rndPositionAndSizeRef.current.x,
width: rndPositionAndSizeRef.current.width, y: rndPositionAndSizeRef.current.y,
height: rndPositionAndSizeRef.current.height, width: rndPositionAndSizeRef.current.width,
}} height: rndPositionAndSizeRef.current.height,
onResizeStop={(e, direction, ref, delta, position) => { }}
rndPositionAndSizeRef.current.x = position.x; onResizeStop={(e, direction, ref, delta, position) => {
rndPositionAndSizeRef.current.y = position.y; rndPositionAndSizeRef.current.x = position.x;
rndPositionAndSizeRef.current.width = ref.style.width; rndPositionAndSizeRef.current.y = position.y;
rndPositionAndSizeRef.current.height = ref.style.height; rndPositionAndSizeRef.current.width = ref.style.width;
}} rndPositionAndSizeRef.current.height = ref.style.height;
onDragStop={(e, d) => { }}
rndPositionAndSizeRef.current.x = d.x; onDragStop={(e, d) => {
rndPositionAndSizeRef.current.y = d.y; rndPositionAndSizeRef.current.x = d.x;
}} rndPositionAndSizeRef.current.y = d.y;
onDragStart={(e, d) => { }}
e.preventDefault(); onDragStart={(e, d) => {
}} e.preventDefault();
enableResizing={{ }}
topLeft: isPreviewShown, enableResizing={{
}} topLeft: isPreviewShown,
resizeHandleComponent={{ }}
topLeft: <ResizeIcon />, resizeHandleComponent={{
}} topLeft: <ResizeIcon />,
resizeHandleStyles={{ }}
topLeft: { resizeHandleStyles={{
top: "-1px", topLeft: {
left: "-1px", top: "-1px",
zIndex: 100, left: "-1px",
}, zIndex: 100,
}} },
style={{ }}
overflow: "hidden", style={{
pointerEvents: "auto", overflow: "hidden",
borderRadius: "5px", pointerEvents: "auto",
}} borderRadius: "5px",
> }}
<QuizPreviewLayout /> >
</Rnd> <QuizPreviewLayout />
)} </Rnd>
</Box> )}
</Box>
</ThemeProvider>
); );
}; };

4
src/ui_kit/Stepper.tsx
View File

@ -35,12 +35,12 @@ export default function ProgressMobileStepper({
width: "100%", width: "100%",
flexGrow: 1, flexGrow: 1,
padding: "8px 0", padding: "8px 0",
"& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress": { "& .MuiLinearProgress-root": {
height: "10px", height: "10px",
background: "#ffffff", background: "#ffffff",
width: "100%", width: "100%",
}, },
"& .css-1v0msyf-MuiLinearProgress-bar1": { "& .MuiLinearProgress-bar": {
background: "#7e2aea", background: "#7e2aea",
}, },
}} }}

9
src/utils/themes/Publication/genericPublication.ts
View File

@ -14,10 +14,6 @@ const themePublic = createTheme({
padding: '13px 20px', padding: '13px 20px',
borderRadius: '8px', borderRadius: '8px',
boxShadow: "none", boxShadow: "none",
// "&:hover": {
// backgroundColor: "#581CA7"
// }
}, },
}, },
{ {
@ -27,11 +23,6 @@ const themePublic = createTheme({
style: { style: {
padding: '10px 20px', padding: '10px 20px',
borderRadius: '8px', borderRadius: '8px',
"&:hover": {
backgroundColor: "#581CA7",
border: '1px solid #581CA7',
}
}, },
}, },
], ],