fix: list

This commit is contained in:
IlyaDoronin 2023-10-12 11:15:19 +03:00
parent 76553d1610
commit dd7f2621ac
4 changed files with 47 additions and 31 deletions

@ -178,11 +178,9 @@ export default function QuestionsPageCard({
overflow: "hidden", overflow: "hidden",
maxWidth: "796px", maxWidth: "796px",
width: "100%", width: "100%",
borderRadius: "12px", backgroundColor: "white",
backgroundColor: question.expanded ? "white" : "#EEE4FC", border: "none",
border: question.expanded ? "none" : "1px solid #9A9AAF", boxShadow: "none",
boxShadow: "0px 10px 30px #e7e7e7",
marginBottom: "40px",
}} }}
> >
<Box <Box

@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { DragDropContext, Droppable } from "react-beautiful-dnd"; import { DragDropContext, Droppable } from "react-beautiful-dnd";
import DraggableListItem from "./FormDraggableListItem"; import FormDraggableListItem from "./FormDraggableListItem";
import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions"; import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions";
@ -32,7 +32,7 @@ export const FormDraggableList = () => {
{(provided, snapshot) => ( {(provided, snapshot) => (
<Box ref={provided.innerRef} {...provided.droppableProps}> <Box ref={provided.innerRef} {...provided.droppableProps}>
{listQuestions[quizId]?.map((question, index) => ( {listQuestions[quizId]?.map((question, index) => (
<DraggableListItem <FormDraggableListItem
key={index} key={index}
index={index} index={index}
isDragging={snapshot.isDraggingOver} isDragging={snapshot.isDraggingOver}

@ -12,8 +12,12 @@ import { quizStore } from "@root/quizes";
import AddPlus from "../../../assets/icons/questionsPage/addPlus"; import AddPlus from "../../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../../assets/icons/questionsPage/arrowLeft"; import ArrowLeft from "../../../assets/icons/questionsPage/arrowLeft";
import AddAnswer from "../../../assets/icons/questionsPage/addAnswer";
import type { AnyQuizQuestion } from "../../../model/questionTypes/shared"; import type {
AnyQuizQuestion,
QuizQuestionBase,
} from "../../../model/questionTypes/shared";
export default function FormQuestionsPage() { export default function FormQuestionsPage() {
const { listQuizes, updateQuizesList } = quizStore(); const { listQuizes, updateQuizesList } = quizStore();
@ -60,7 +64,43 @@ export default function FormQuestionsPage() {
Свернуть всё Свернуть всё
</Button> </Button>
</Box> </Box>
<FormDraggableList /> <Box
sx={{
maxWidth: "796px",
boxShadow: "0px 10px 30px #e7e7e7",
borderRadius: "12px",
marginBottom: "40px",
border: "1px solid transparent",
}}
>
<FormDraggableList />
<Box
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
gap: "15px",
padding: "4px",
margin: "15px",
border: "1px solid transparent",
borderRadius: "8px",
"&:hover": {
border: "1px solid #9A9AAF",
},
}}
onClick={() => {
createQuestion(quizId);
updateQuestionsList<QuizQuestionBase>(quizId, 0, {
expanded: true,
});
}}
>
<AddAnswer color="#EEE4FC" />
<Typography sx={{ color: "#9A9AAF" }}>
Добавить еще один вопрос
</Typography>
</Box>
</Box>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

@ -17,7 +17,6 @@ import Slider from "../../../assets/icons/questionsPage/slider";
import Download from "../../../assets/icons/questionsPage/download"; import Download from "../../../assets/icons/questionsPage/download";
import Page from "../../../assets/icons/questionsPage/page"; import Page from "../../../assets/icons/questionsPage/page";
import RatingIcon from "../../../assets/icons/questionsPage/rating"; import RatingIcon from "../../../assets/icons/questionsPage/rating";
import AddAnswer from "../../../assets/icons/questionsPage/addAnswer";
import { import {
questionStore, questionStore,
@ -133,27 +132,6 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
text={title} text={title}
/> />
))} ))}
<Box
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
gap: "15px",
padding: "4px",
width: "100%",
border: "1px solid transparent",
borderRadius: "8px",
"&:hover": {
border: "1px solid #9A9AAF",
},
}}
onClick={() => console.log("add")}
>
<AddAnswer color="#EEE4FC" />
<Typography sx={{ color: "#9A9AAF" }}>
Добавить еще один вопрос
</Typography>
</Box>
</Box> </Box>
<ButtonsOptions <ButtonsOptions
switchState={switchState} switchState={switchState}