fix preview bugs
This commit is contained in:
nflnkr
parent
45ade56ff0
commit
650ddd7129
@ -17,6 +17,7 @@ import {
|
||||
} from "@root/questions";
|
||||
import { DraggableList } from "./DraggableList";
|
||||
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
export default function QuestionsPage() {
|
||||
const { listQuizes, updateQuizesList } = quizStore();
|
||||
@ -105,7 +106,7 @@ export default function QuestionsPage() {
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<QuizPreview />
|
||||
{createPortal(<QuizPreview />, document.body)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ interface QuizPreviewStore {
|
||||
export const useQuizPreviewStore = create<QuizPreviewStore>()(
|
||||
devtools(
|
||||
(set, get) => ({
|
||||
isPreviewShown: false,
|
||||
isPreviewShown: true,
|
||||
currentQuizStep: 0,
|
||||
}),
|
||||
{
|
||||
@ -24,8 +24,14 @@ export const showQuizPreview = () => useQuizPreviewStore.setState({ isPreviewSho
|
||||
|
||||
export const hideQuizPreview = () => useQuizPreviewStore.setState({ isPreviewShown: false });
|
||||
|
||||
export const toggleQuizPreview = () => useQuizPreviewStore.setState(state => ({ isPreviewShown: !state.isPreviewShown }));
|
||||
export const toggleQuizPreview = () => useQuizPreviewStore.setState(
|
||||
state => ({ isPreviewShown: !state.isPreviewShown })
|
||||
);
|
||||
|
||||
export const incrementCurrentQuizStep = (maxStep: number) => useQuizPreviewStore.setState(state => ({ currentQuizStep: Math.min(state.currentQuizStep + 1, maxStep) }));
|
||||
export const incrementCurrentQuizStep = (maxStep: number) => useQuizPreviewStore.setState(
|
||||
state => ({ currentQuizStep: Math.min(state.currentQuizStep + 1, maxStep) })
|
||||
);
|
||||
|
||||
export const decrementCurrentQuizStep = () => useQuizPreviewStore.setState(state => ({ currentQuizStep: Math.max(state.currentQuizStep - 1, 0) }));
|
||||
export const decrementCurrentQuizStep = () => useQuizPreviewStore.setState(
|
||||
state => ({ currentQuizStep: Math.max(state.currentQuizStep - 1, 0) })
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PointsIcon from "@icons/questionsPage/PointsIcon";
|
||||
import { Box, IconButton, Paper, keyframes } from "@mui/material";
|
||||
import { Box, IconButton } from "@mui/material";
|
||||
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
|
||||
import { useEffect, useLayoutEffect, useRef } from "react";
|
||||
import { useLayoutEffect, useRef } from "react";
|
||||
import { Rnd } from "react-rnd";
|
||||
import QuizPreviewContent from "./QuizPreviewContent";
|
||||
import ResizeIcon from "./ResizeIcon";
|
||||
@ -10,7 +10,7 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
|
||||
const DRAG_PARENT_MARGIN = 25;
|
||||
const NAVBAR_HEIGHT = 81;
|
||||
const DRAG_PARENT_BOTTOM_MARGIN = 25;
|
||||
const DRAG_PARENT_BOTTOM_MARGIN = 65;
|
||||
|
||||
interface RndPositionAndSize {
|
||||
x: number;
|
||||
@ -55,6 +55,7 @@ export default function QuizPreview() {
|
||||
right: DRAG_PARENT_MARGIN,
|
||||
// backgroundColor: "rgba(0, 100, 0, 0.2)",
|
||||
pointerEvents: "none",
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
{isPreviewShown &&
|
||||
@ -80,47 +81,49 @@ export default function QuizPreview() {
|
||||
rndPositionAndSizeRef.current.x = d.x;
|
||||
rndPositionAndSizeRef.current.y = d.y;
|
||||
}}
|
||||
onDragStart={(e, d) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
enableResizing={{
|
||||
topLeft: isPreviewShown,
|
||||
}}
|
||||
resizeHandleComponent={{
|
||||
topLeft: <ResizeIcon />
|
||||
}}
|
||||
resizeHandleStyles={{
|
||||
topLeft: {
|
||||
top: "-1px",
|
||||
left: "-1px",
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
pointerEvents: "auto",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Paper sx={{
|
||||
flexGrow: 1,
|
||||
borderRadius: "12px",
|
||||
mb: 1,
|
||||
}}>
|
||||
<QuizPreviewContent />
|
||||
</Paper>
|
||||
<Box sx={{
|
||||
alignSelf: "end",
|
||||
mt: "auto",
|
||||
mr: "45px",
|
||||
display: "flex",
|
||||
}}>
|
||||
<IconButton className="quiz-preview-draghandle">
|
||||
<PointsIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<QuizPreviewContent />
|
||||
<IconButton
|
||||
className="quiz-preview-draghandle"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: -54,
|
||||
right: 46,
|
||||
cursor: "move",
|
||||
}}
|
||||
>
|
||||
<PointsIcon />
|
||||
</IconButton>
|
||||
</Rnd>
|
||||
}
|
||||
<IconButton
|
||||
onClick={toggleQuizPreview}
|
||||
sx={{
|
||||
pointerEvents: "auto",
|
||||
position: "absolute",
|
||||
right: 4,
|
||||
bottom: 4,
|
||||
right: 0,
|
||||
bottom: -54,
|
||||
pointerEvents: "auto",
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon />
|
||||
<VisibilityIcon sx={{ height: "30px", width: "30px" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Box, Button, LinearProgress } from "@mui/material";
|
||||
import { Box, Button, LinearProgress, Paper } from "@mui/material";
|
||||
import { Question, questionStore } from "@root/questions";
|
||||
import { decrementCurrentQuizStep, incrementCurrentQuizStep, useQuizPreviewStore } from "@root/quizPreview";
|
||||
import { useParams } from "react-router-dom";
|
||||
@ -12,19 +12,24 @@ export default function QuizPreviewContent() {
|
||||
|
||||
const quizQuestions: Question[] | undefined = listQuestions[quizId];
|
||||
const currentProgress = Math.floor((currentQuizStep / quizQuestions.length) * 100);
|
||||
const currentQuestion = quizQuestions[currentQuizStep];
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
<Paper sx={{
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexWrap: "wrap",
|
||||
gap: 1,
|
||||
flexGrow: 1,
|
||||
borderRadius: "12px",
|
||||
pointerEvents: "auto",
|
||||
}}>
|
||||
<Box sx={{
|
||||
p: "16px",
|
||||
whiteSpace: "break-spaces",
|
||||
overflowY: "auto",
|
||||
flexGrow: 1,
|
||||
}}>
|
||||
<Button variant="contained">Button</Button>
|
||||
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mt: "auto",
|
||||
@ -69,6 +74,6 @@ export default function QuizPreviewContent() {
|
||||
>Далее</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -9,15 +9,16 @@ export default function ResizeIcon({ sx }: Props) {
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
height: "30px",
|
||||
width: "30px",
|
||||
height: "20px",
|
||||
width: "20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "nwse-resize",
|
||||
pointerEvents: "auto",
|
||||
...sx,
|
||||
}}>
|
||||
<svg width="30" height="30" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="20" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM19.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM10.5 16.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" fill="#4D4D4D" />
|
||||
</svg>
|
||||
</Box>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user