diff --git a/src/assets/icons/TreeStructure.tsx b/src/assets/icons/TreeStructure.tsx new file mode 100644 index 00000000..282b22ad --- /dev/null +++ b/src/assets/icons/TreeStructure.tsx @@ -0,0 +1,33 @@ +export const TreeStructure = () => ( + + + + + + + +); diff --git a/src/pages/Landing/images/icons/QuizLogo.tsx b/src/pages/Landing/images/icons/QuizLogo.tsx index 0c12503d..76ae536d 100644 --- a/src/pages/Landing/images/icons/QuizLogo.tsx +++ b/src/pages/Landing/images/icons/QuizLogo.tsx @@ -2,19 +2,14 @@ import { useTheme } from "@mui/material"; interface Props { width: number; + color?: string; } -export default function QuizLogo({ width }: Props) { +export default function QuizLogo({ width, color = "#151515" }: Props) { const theme = useTheme(); return ( - + diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 148898d0..922817e9 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -3,6 +3,7 @@ import { LogoutButton } from "@ui_kit/LogoutButton"; import BackArrowIcon from "@icons/BackArrowIcon"; import { Burger } from "@icons/Burger"; import EyeIcon from "@icons/EyeIcon"; +import { PenaLogoIcon } from "@icons/PenaLogoIcon"; import VisibilityIcon from "@mui/icons-material/Visibility"; import { @@ -27,12 +28,15 @@ import { useCurrentQuiz } from "@root/quizes/hooks"; import { useQuizStore } from "@root/quizes/store"; import CustomAvatar from "@ui_kit/Header/Avatar"; import NavMenuItem from "@ui_kit/Header/NavMenuItem"; +import PenaLogo from "@ui_kit/PenaLogo"; import Sidebar from "@ui_kit/Sidebar"; import Stepper from "@ui_kit/Stepper"; import SwitchStepPages from "@ui_kit/switchStepPages"; +import { isAxiosError } from "axios"; import { enqueueSnackbar } from "notistack"; -import { useEffect, useState } from "react"; +import React, { useEffect, useLayoutEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; +import useSWR from "swr"; import { useDebouncedCallback } from "use-debounce"; import { SidebarMobile } from "./Sidebar/SidebarMobile"; import { @@ -47,8 +51,10 @@ import { setShowConfirmLeaveModal, updateSomeWorkBackend, } from "@root/uiTools/actions"; +import { BranchingPanel } from "../Questions/BranchingPanel"; import { Header } from "./Header"; import { useQuestionsStore } from "@root/questions/store"; +import { useQuizes } from "@root/quizes/hooks"; import { questionApi } from "@api/question"; import { useUiTools } from "@root/uiTools/store"; @@ -64,7 +70,9 @@ import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; import { toggleQuizPreview } from "@root/quizPreview"; import { LinkSimple } from "@icons/LinkSimple"; import { BackButtonIcon } from "@icons/BackButtonIcon"; +import { TreeStructure } from "@icons/TreeStructure"; +let init: () => void; export default function EditPage() { const quiz = useCurrentQuiz(); const { editQuizId } = useQuizStore(); @@ -106,14 +114,16 @@ export default function EditPage() { const navigate = useNavigate(); const currentStep = useQuizStore((state) => state.currentStep); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100)); const isMobile = useMediaQuery(theme.breakpoints.down(660)); + const isLinkButton = useMediaQuery(theme.breakpoints.down(708)); const isMobileSm = useMediaQuery(theme.breakpoints.down(370)); const [mobileSidebar, setMobileSidebar] = useState(false); const [nextStep, setNextStep] = useState(0); const quizConfig = quiz?.config; const disableTest = quiz === undefined ? true : quiz.config.type === null; const [openBranchingPage, setOpenBranchingPage] = useState(false); - const [buttonText, setButtonText] = useState("Опубликовать"); + const [buttonText, setButtonText] = useState(quiz?.status === "stop" ? "Опубликовать" : "Отозвать"); const openBranchingPageHC = () => { if (!openBranchingPage) { @@ -174,7 +184,7 @@ export default function EditPage() { setButtonText("Опубликовано"); setTimeout(() => { setButtonText("Отозвать"); - }, 3000); + }, 1500); } else { setButtonText("Опубликовать"); } @@ -204,6 +214,7 @@ export default function EditPage() { {isMobile ? ( @@ -223,8 +234,12 @@ export default function EditPage() { padding: isMobile ? "16px 16px 20px 16px" : "25px 25px 20px 25px", overflow: "auto", height: isMobile - ? ` calc(100vh - 125px) ` - : `calc(100vh - ${isConditionMet ? "186px" : "166px"})`, + ? `calc(100vh - 125px)` + : isConditionMet + ? isBranchingLogic + ? `calc(100vh - 166px)` + : `calc(100vh - 186px)` + : `calc(100vh - 166px)`, boxSizing: "border-box", }} > @@ -259,75 +274,141 @@ export default function EditPage() { background: "#FFF", }} > - {isConditionMet && ( - - - - - Логика ветвления - + > + } + checkedIcon={} + checked={openBranchingPage} + onChange={openBranchingPageHC} + sx={{ + width: 50, + height: 30, + padding: 0, + "& .MuiSwitch-switchBase": { + padding: 0, + margin: "2px", + width: "26px", + height: "26px", + background: "#fff", + transitionDuration: "300ms", + "&:hover": { + backgroundColor: "#fff !important", + }, + "&:active": { + background: "#fff", + }, + "&.Mui-checked": { + transform: "translateX(20px)", + color: theme.palette.brightPurple.main, + "& + .MuiSwitch-track": { + backgroundColor: "#7E2AEA", + opacity: 1, + border: 0, + }, + "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 }, + }, + "&.Mui-disabled .MuiSwitch-thumb": { + color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600], + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: theme.palette.mode === "light" ? 0.7 : 0.3, + }, + }, + "& .MuiSwitch-thumb": { + boxSizing: "border-box", + width: 25, + height: 25, + }, + "& .MuiSwitch-track": { + backgroundColor: "rgba(217, 188, 255, 0.16)", + borderRadius: 13, + opacity: 1, + transition: theme.transitions.create(["background-color"], { + duration: 500, + }), + }, + }} + /> - - )} + ) : ( + + + + + Логика ветвления + + + + ))} {!canCreatePublic && quiz.config.type !== "form" ? ( @@ -338,6 +419,7 @@ export default function EditPage() { fontSize: "14px", lineHeight: "18px", height: "34px", + whiteSpace: "nowrap", minWidth: "130px", }} onClick={() => @@ -359,9 +441,9 @@ export default function EditPage() { variant="contained" sx={{ fontSize: "14px", + whiteSpace: "nowrap", lineHeight: "18px", height: "34px", - minWidth: "130px", }} > Тестовый просмотр @@ -376,8 +458,9 @@ export default function EditPage() { fontSize: "14px", lineHeight: "18px", height: "34px", - background: - buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA", + background: buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA", + p: "0 18px", + minWidth: "120px", }} onClick={handleClickStatusQuiz} > @@ -389,20 +472,44 @@ export default function EditPage() { buttonText )} - {quiz?.status === "start" && ( - - https://hbpn.link/{quiz.qid} - - )} + {quiz?.status === "start" && + (!isLinkButton ? ( + + https://hbpn.link/{quiz.qid} + + ) : ( + + + + ))} {isMobile ? (