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

кнопки логики ветвления исчезают и пропадают там где нужно

Browse Source
This commit is contained in:
Tamara 2024-01-14 22:34:56 +03:00
parent 04a195ab0e
commit b8eaa5208c
6 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/Questions/QuestionSwitchWindowTool.tsx
View File

@ -13,11 +13,13 @@ import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
interface Props {
openBranchingPage: boolean;
setOpenBranchingPage: (a: boolean) => void;
widthMain: number;
}
export const QuestionSwitchWindowTool = ({
openBranchingPage,
setOpenBranchingPage,
widthMain,
}: Props) => {
const { questions } = useQuestionsStore.getState();
const theme = useTheme();
@ -54,6 +56,7 @@ export const QuestionSwitchWindowTool = ({
<SwitchBranchingPanel
openBranchingPage={openBranchingPage}
setOpenBranchingPage={openBranchingPageHC}
widthMain={widthMain}
/>
)}
</Box>

3
src/pages/Questions/QuestionsPage.tsx
View File

@ -32,11 +32,13 @@ import { useNavigate } from "react-router-dom";
interface Props {
openBranchingPage: boolean;
setOpenBranchingPage: (a: boolean) => void;
widthMain: number;
}
export default function QuestionsPage({
openBranchingPage,
setOpenBranchingPage,
widthMain,
}: Props) {
const theme = useTheme();
const { openedModalSettingsId } = useUiTools();
@ -86,6 +88,7 @@ export default function QuestionsPage({
<QuestionSwitchWindowTool
openBranchingPage={openBranchingPage}
setOpenBranchingPage={setOpenBranchingPage}
widthMain={widthMain}
/>
<Box
sx={{

5
src/pages/Questions/SwitchBranchingPanel/index.tsx
View File

@ -12,19 +12,20 @@ import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuesti
interface Props {
openBranchingPage: boolean;
setOpenBranchingPage: () => void;
widthMain: number;
}
export const SwitchBranchingPanel = ({
openBranchingPage,
setOpenBranchingPage,
widthMain,
}: Props) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const isTablet = useMediaQuery(theme.breakpoints.down(1446));
return openBranchingPage ? (
<Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
{isTablet || (
{widthMain > 1216 && (
<PanelSwitchQuestionListGraph
openBranchingPage={openBranchingPage}
setOpenBranchingPage={setOpenBranchingPage}

28
src/pages/main.tsx
View File

@ -3,7 +3,7 @@ import Sidebar from "@ui_kit/Sidebar/Sidebar";
import Box from "@mui/material/Box";
import { useTheme, useMediaQuery, IconButton } from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { SidebarMobile } from "../ui_kit/Sidebar/SidebarMobile";
import { setShowConfirmLeaveModal } from "@root/uiTools/actions";
import { setCurrentStep, setQuizes } from "@root/quizes/actions";
@ -65,7 +65,8 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const isMobileSm = useMediaQuery(theme.breakpoints.down(370));
const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
const isBranchingLogicSmall = useMediaQuery(theme.breakpoints.down(1100));
const isBranchingLogicBig = useMediaQuery(theme.breakpoints.down(1446));
const isLinkButton = useMediaQuery(theme.breakpoints.down(708));
const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
const [nextStep, setNextStep] = useState<number>(0);
@ -94,6 +95,21 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
setCurrentStep(index);
};
const [widthMain, setWidthMain] = useState(null);
const mainBlock = useRef(0);
const observer = useRef(
new ResizeObserver((entries) => {
const { width } = entries[0].contentRect;
setWidthMain(width);
}),
);
useEffect(() => {
observer.current.observe(mainBlock.current);
}, [mainBlock, observer]);
console.log(widthMain);
return (
<>
<Header setMobileSidebar={setMobileSidebar} />
@ -125,6 +141,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
}}
>
<Box
ref={mainBlock}
sx={{
background: theme.palette.background.default,
width: "100%",
@ -135,6 +152,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
<Page
openBranchingPage={openBranchingPage}
setOpenBranchingPage={openBranchingPageHC}
widthMain={widthMain}
/>
</Box>
@ -157,17 +175,19 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
}}
>
{isConditionMet &&
(isBranchingLogic ? (
(isBranchingLogicSmall ? (
<SmallSwitchQuestionListGraph
openBranchingPage={openBranchingPage}
setOpenBranchingPage={openBranchingPageHC}
/>
) : (
) : widthMain < 1216 || !openBranchingPage ? (
<PanelSwitchQuestionListGraph
openBranchingPage={openBranchingPage}
setOpenBranchingPage={openBranchingPageHC}
hideText
/>
) : (
<></>
))}
{/* Кнопка тестового просмотра */}
<ButtonTestPublication />

3
src/pages/startPage/EditPage.tsx
View File

@ -45,10 +45,12 @@ import { checkQuestionHint } from "@utils/checkQuestionHint";
interface Props {
openBranchingPage: boolean;
setOpenBranchingPage: (a: boolean) => void;
widthMain: number;
}
export default function EditPage({
openBranchingPage,
setOpenBranchingPage,
widthMain,
}: Props) {
const quiz = useCurrentQuiz();
const { editQuizId } = useQuizStore();
@ -148,6 +150,7 @@ export default function EditPage({
quizStartPageType={quizConfig.startpageType}
openBranchingPage={openBranchingPage}
setOpenBranchingPage={setOpenBranchingPage}
widthMain={widthMain}
/>
</>
)}

3
src/ui_kit/switchStepPages.tsx
View File

@ -21,6 +21,7 @@ interface Props {
quizResults: QuizResultsType;
openBranchingPage: boolean;
setOpenBranchingPage: (a: boolean) => void;
widthMain: number;
}
export default function SwitchStepPages({
@ -30,6 +31,7 @@ export default function SwitchStepPages({
quizResults,
openBranchingPage,
setOpenBranchingPage,
widthMain,
}: Props) {
switch (activeStep) {
case 0: {
@ -44,6 +46,7 @@ export default function SwitchStepPages({
<QuestionsPage
openBranchingPage={openBranchingPage}
setOpenBranchingPage={setOpenBranchingPage}
widthMain={widthMain}
/>
);
case 2: