From 650ddd7129411ae4a4383a8efcf885fa46ec1524 Mon Sep 17 00:00:00 2001 From: nflnkr Date: Thu, 5 Oct 2023 14:41:54 +0300 Subject: [PATCH] fix preview bugs --- src/pages/Questions/QuestionsPage.tsx | 3 +- src/stores/quizPreview.ts | 14 +++-- src/ui_kit/QuizPreview/QuizPreview.tsx | 55 ++++++++++--------- src/ui_kit/QuizPreview/QuizPreviewContent.tsx | 17 ++++-- src/ui_kit/QuizPreview/ResizeIcon.tsx | 7 ++- 5 files changed, 56 insertions(+), 40 deletions(-) diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 7aab0d11..d2e0b416 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -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() { - + {createPortal(, document.body)} ); } diff --git a/src/stores/quizPreview.ts b/src/stores/quizPreview.ts index dc931463..9a0eaf40 100644 --- a/src/stores/quizPreview.ts +++ b/src/stores/quizPreview.ts @@ -10,7 +10,7 @@ interface QuizPreviewStore { export const useQuizPreviewStore = create()( 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) }) +); diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx index 38d25f49..7627ceea 100644 --- a/src/ui_kit/QuizPreview/QuizPreview.tsx +++ b/src/ui_kit/QuizPreview/QuizPreview.tsx @@ -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: }} + resizeHandleStyles={{ + topLeft: { + top: "-1px", + left: "-1px", + } + }} style={{ pointerEvents: "auto", - display: "flex", - flexDirection: "column", }} > - - - - - - - - + + + + } - + ); diff --git a/src/ui_kit/QuizPreview/QuizPreviewContent.tsx b/src/ui_kit/QuizPreview/QuizPreviewContent.tsx index 833bcf54..13d8cfc3 100644 --- a/src/ui_kit/QuizPreview/QuizPreviewContent.tsx +++ b/src/ui_kit/QuizPreview/QuizPreviewContent.tsx @@ -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 ( - - + Далее - + ); } diff --git a/src/ui_kit/QuizPreview/ResizeIcon.tsx b/src/ui_kit/QuizPreview/ResizeIcon.tsx index de55c923..3d5895d6 100644 --- a/src/ui_kit/QuizPreview/ResizeIcon.tsx +++ b/src/ui_kit/QuizPreview/ResizeIcon.tsx @@ -9,15 +9,16 @@ export default function ResizeIcon({ sx }: Props) { return ( - +