настройка панелей переключания с списка вопросов на панель ветвления + вынесение некоторых общих элементов управления в кит

2024-01-02 12:38:31 +03:00 · 2024-01-02 12:38:31 +03:00 · 953ba0b5a3
commit 953ba0b5a3
parent bb8e8026e1
16 changed files with 361 additions and 454 deletions
--- a/src/pages/DesignPage/DesignFilling.tsx
+++ b/src/pages/DesignPage/DesignFilling.tsx
@ -13,21 +13,21 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
 import { toggleQuizPreview } from "@root/quizPreview";
 import VisibilityIcon from "@mui/icons-material/Visibility";

-  const ButtonsThemeLight = [
-    ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"],
-    ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"],
-    ["Оливковый", "OliveTheme", "#758E4F", "#F9FBF1"],
-    ["Фиолетовый", "PurpleTheme", "#7E2AEA", "#FBF8FF"],
-    ["Желтый", "YellowTheme", "#F2B133", "#FFFCF6"],
-    ["Голубой", "BlueTheme", "#4964ED", "#F5F7FF"],
-    ["Розовый", "PinkTheme", "#D34085", "#FFF9FC"],
-  ];
-  const ButtonsThemeDark = [
-    ["Стандартный", "StandardDarkTheme", "#7E2AEA", "#FFFFFF"],
-    ["Золотой", "GoldDarkTheme", "#E6AA37", "#FFFFFF"],
-    ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"],
-    ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"],
-  ];
+const ButtonsThemeLight = [
+  ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"],
+  ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"],
+  ["Оливковый", "OliveTheme", "#758E4F", "#F9FBF1"],
+  ["Фиолетовый", "PurpleTheme", "#7E2AEA", "#FBF8FF"],
+  ["Желтый", "YellowTheme", "#F2B133", "#FFFCF6"],
+  ["Голубой", "BlueTheme", "#4964ED", "#F5F7FF"],
+  ["Розовый", "PinkTheme", "#D34085", "#FFF9FC"],
+];
+const ButtonsThemeDark = [
+  ["Стандартный", "StandardDarkTheme", "#7E2AEA", "#FFFFFF"],
+  ["Золотой", "GoldDarkTheme", "#E6AA37", "#FFFFFF"],
+  ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"],
+  ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"],
+];
 export const DesignFilling = () => {
  const quiz = useCurrentQuiz();
  const theme = useTheme();
@ -51,7 +51,7 @@ export const DesignFilling = () => {
          borderRadius: "12px",
          flexWrap: "wrap",
          height: "calc(100vh - 280px)",
-          overflow: "auto"
+          overflow: "auto",
        }}
      >
        <Box
--- a/src/pages/DesignPage/DesignPage.tsx
+++ b/src/pages/DesignPage/DesignPage.tsx
@ -1,19 +1,13 @@
 import { quizApi } from "@api/quiz";
 import { Box, useMediaQuery, useTheme, Skeleton } from "@mui/material";
-import {
-  setQuizes,
-  setCurrentStep,
-} from "@root/quizes/actions";
+import { setQuizes, setCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import Sidebar from "@ui_kit/Sidebar";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile";
-import {
-  cleanQuestions,
-  setQuestions,
-} from "@root/questions/actions";
+import { cleanQuestions, setQuestions } from "@root/questions/actions";
 import {
  updateModalInfoWhyCantCreate,
  setShowConfirmLeaveModal,
@ -82,7 +76,10 @@ export const DesignPage = () => {
  };

  console.log(quiz);
-  if (quiz === undefined) return <Skeleton sx={{width:"100vw", height: "100vh", transform: "none"}}/>
+  if (quiz === undefined)
+    return (
+      <Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
+    );
  return (
    <>
      <Header setMobileSidebar={setMobileSidebar} />
--- a/src/pages/Questions/BranchingPanel/index.tsx
+++ b/src/pages/Questions/BranchingPanel/index.tsx
@ -10,7 +10,6 @@ import {
 } from "@mui/material";

 import { QuestionsList } from "./QuestionsList";
-import { updateOpenBranchingPanel } from "@root/uiTools/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { useRef } from "react";
 import { useUiTools } from "@root/uiTools/store";
@ -18,7 +17,6 @@ import { useUiTools } from "@root/uiTools/store";
 export const BranchingPanel = (sx?: SxProps<Theme>) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
-  const { openBranchingPanel } = useUiTools();
  const ref = useRef();
  return (
    <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
@ -35,8 +33,8 @@ export const BranchingPanel = (sx?: SxProps<Theme>) => {
        }}
      >
        <Switch
-          checked={openBranchingPanel}
-          onChange={(e) => updateOpenBranchingPanel(e.target.checked)}
+          checked={true}
+          onChange={(e) => {}}
          sx={{
            width: 50,
            height: 30,
@ -90,7 +88,7 @@ export const BranchingPanel = (sx?: SxProps<Theme>) => {
          </Typography>
        </Box>
      </Box>
-      {openBranchingPanel && <QuestionsList />}
+      <QuestionsList />
    </Box>
  );
 };
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/src/pages/Questions/ButtonsOptions.tsx
@ -21,10 +21,7 @@ import {
  updateQuestion,
  getQuestionByContentId,
 } from "@root/questions/actions";
-import {
-  updateOpenBranchingPanel,
-  updateDesireToOpenABranchingModal,
-} from "@root/uiTools/actions";
+import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
 import Branching from "../../assets/icons/questionsPage/branching";
@ -58,7 +55,6 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
  const [openDelete, setOpenDelete] = useState<boolean>(false);

  const openedModal = () => {
-    updateOpenBranchingPanel(true);
    updateDesireToOpenABranchingModal(question.content.id);
  };

@ -99,7 +95,6 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
      title: "Ветвление",
      value: "branching",
      myFunc: (question) => {
-        updateOpenBranchingPanel(true);
        updateDesireToOpenABranchingModal(question.content.id);
      },
    },
--- a/src/pages/Questions/ButtonsOptionsAndPict.tsx
+++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx
@ -32,10 +32,7 @@ import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
 import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
 import { QuizQuestionVariant } from "@model/questionTypes/variant";
 import { updateOpenedModalSettingsId } from "@root/questions/actions";
-import {
-  updateOpenBranchingPanel,
-  updateDesireToOpenABranchingModal,
-} from "@root/uiTools/actions";
+import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { enqueueSnackbar } from "notistack";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@ -208,7 +205,6 @@ export default function ButtonsOptionsAndPict({
            onMouseEnter={() => setButtonHover("branching")}
            onMouseLeave={() => setButtonHover("")}
            onClick={() => {
-              updateOpenBranchingPanel(true);
              updateDesireToOpenABranchingModal(question.content.id);
            }}
            sx={{
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
@ -1,7 +1,5 @@
-import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
 import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
 import { CopyIcon } from "@icons/questionsPage/CopyIcon";
-import { OneIcon } from "@icons/questionsPage/OneIcon";
 import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import Answer from "@icons/questionsPage/answer";
 import Date from "@icons/questionsPage/date";
@ -9,7 +7,6 @@ import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
 import Download from "@icons/questionsPage/download";
 import DropDown from "@icons/questionsPage/drop_down";
 import Emoji from "@icons/questionsPage/emoji";
-import { HideIcon } from "@icons/questionsPage/hideIcon";
 import Input from "@icons/questionsPage/input";
 import OptionsAndPict from "@icons/questionsPage/options_and_pict";
 import OptionsPict from "@icons/questionsPage/options_pict";
@ -20,9 +17,7 @@ import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import {
  Box,
  Button,
-  Checkbox,
  FormControl,
-  FormControlLabel,
  IconButton,
  InputAdornment,
  Modal,
@ -36,14 +31,11 @@ import {
  copyQuestion,
  createUntypedQuestion,
  deleteQuestion,
-  clearRuleForAll,
  toggleExpandQuestion,
  updateQuestion,
  updateUntypedQuestion,
-  getQuestionByContentId,
  deleteQuestionWithTimeout,
 } from "@root/questions/actions";
-import { updateRootContentId } from "@root/quizes/actions";
 import { useRef, useState } from "react";
 import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
 import { useDebouncedCallback } from "use-debounce";
@ -58,7 +50,6 @@ import TypeQuestions from "../TypeQuestions";
 import { QuestionType } from "@model/question/question";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuestionsStore } from "@root/questions/store";
-import { updateSomeWorkBackend } from "@root/uiTools/actions";
 import { DeleteFunction } from "@utils/deleteFunc";

 interface Props {
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@ -23,10 +23,7 @@ import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
 import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal";
 import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
 import { useQuestionsStore } from "@root/questions/store";
-import {
-  updateOpenBranchingPanel,
-  updateEditSomeQuestion,
-} from "@root/uiTools/actions";
+import { updateEditSomeQuestion } from "@root/uiTools/actions";
 import { useUiTools } from "@root/uiTools/store";

 interface Props {
@ -39,11 +36,10 @@ export default function QuestionsPage({
  setOpenBranchingPage,
 }: Props) {
  const theme = useTheme();
-  const { openedModalSettingsId, openBranchingPanel } = useUiTools();
+  const { openedModalSettingsId } = useUiTools();
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
  const quiz = useCurrentQuiz();
  useLayoutEffect(() => {
-    updateOpenBranchingPanel(false);
    updateEditSomeQuestion();
  }, []);

@ -68,7 +64,6 @@ export default function QuestionsPage({
        </Typography>
        <Button
          sx={{
-            display: openBranchingPanel ? "none" : "flex",
            fontSize: "16px",
            lineHeight: "19px",
            padding: 0,
--- a/src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx
+++ b/src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx
@ -9,7 +9,6 @@ import {
 } from "@model/questionTypes/shared";
 import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
 import {
-  updateOpenBranchingPanel,
  updateEditSomeQuestion,
  updateDragQuestionContentId,
 } from "@root/uiTools/actions";
--- a/src/pages/Questions/SwitchBranchingPanel/index.tsx
+++ b/src/pages/Questions/SwitchBranchingPanel/index.tsx
@ -8,11 +8,7 @@ import {
 } from "@mui/material";

 import { QuestionsList } from "./QuestionsList";
-import { updateOpenBranchingPanel } from "@root/uiTools/actions";
-import { useQuestionsStore } from "@root/questions/store";
-import { useRef } from "react";
-import { useUiTools } from "@root/uiTools/store";
-
+import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuestionListGraph";
 interface Props {
  openBranchingPage: boolean;
  setOpenBranchingPage: () => void;
@ -25,77 +21,15 @@ export const SwitchBranchingPanel = ({
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
  const isTablet = useMediaQuery(theme.breakpoints.down(1446));
-  const ref = useRef();

-  return !isTablet || openBranchingPage ? (
+  return openBranchingPage ? (
    <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          gap: "15px",
-          padding: "18px",
-          background: "#fff",
-          borderRadius: "12px",
-          boxShadow: "0px 10px 30px #e7e7e7",
-        }}
-      >
-        <Switch
-          checked={openBranchingPage}
-          onChange={setOpenBranchingPage}
-          sx={{
-            width: 50,
-            height: 30,
-            padding: 0,
-            "& .MuiSwitch-switchBase": {
-              padding: 0,
-              margin: "2px",
-              transitionDuration: "300ms",
-              "&.Mui-checked": {
-                transform: "translateX(20px)",
-                color: theme.palette.brightPurple.main,
-                "& + .MuiSwitch-track": {
-                  backgroundColor: "#E8DCF9",
-                  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": {
-              borderRadius: 13,
-              backgroundColor:
-                theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
-              opacity: 1,
-              transition: theme.transitions.create(["background-color"], {
-                duration: 500,
-              }),
-            },
-          }}
+      {isTablet || (
+        <PanelSwitchQuestionListGraph
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
        />
-        <Box>
-          <Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
-            Логика ветвления
-          </Typography>
-          <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
-            Настройте связи между вопросами
-          </Typography>
-        </Box>
-      </Box>
+      )}
      {openBranchingPage && (
        <QuestionsList setOpenBranchingPage={setOpenBranchingPage} />
      )}
--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@ -1,42 +1,24 @@
 import { quizApi } from "@api/quiz";
-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 {
  Box,
  Button,
-  Container,
-  FormControl,
  IconButton,
  Switch,
-  TextField,
  Typography,
  useMediaQuery,
  useTheme,
 } from "@mui/material";
-import {
-  resetEditConfig,
-  setQuizes,
-  updateQuiz,
-  setCurrentStep,
-} from "@root/quizes/actions";
+import { setQuizes, updateQuiz, setCurrentStep } from "@root/quizes/actions";
 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 React, { useEffect, useLayoutEffect, useState } from "react";
+import { useEffect, 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 {
@ -45,23 +27,16 @@ import {
  setQuestions,
 } from "@root/questions/actions";
 import {
-  updateOpenBranchingPanel,
  updateCanCreatePublic,
  updateModalInfoWhyCantCreate,
  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";

-import Logotip from "../Landing/images/icons/QuizLogo";
-import { clearUserData } from "@root/user";
-import { clearAuthToken } from "@frontend/kitui";
-import { logout } from "@api/auth";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
 import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate";
 import { ConfirmLeaveModal } from "./ConfirmLeaveModal";
@ -69,10 +44,11 @@ import { checkQuestionHint } from "@utils/checkQuestionHint";
 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";
+import { SmallSwitchQuestionListGraph } from "@ui_kit/Toolbars/SmallSwitchQuestionListGraph";
+import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuestionListGraph";
+import { ButtonTestPublication } from "@ui_kit/Toolbars/ButtonTestPublication";
+import { ButtonRecallQuiz } from "@ui_kit/Toolbars/ButtonRecallQuiz";

-let init: () => void;
 export default function EditPage() {
  const quiz = useCurrentQuiz();
  const { editQuizId } = useQuizStore();
@ -86,11 +62,9 @@ export default function EditPage() {

      if (editQuizId) {
        const questions = await questionApi.getList({ quiz_id: editQuizId });
-        console.log(questions);
+
        setQuestions(questions);
        //Всегда должен существовать хоть 1 резулт - "line"
-        // console.log("сейчас будем ворошиться в этих квешенах ", questions);
-
        if (
          !questions?.find(
            (q) =>
@ -106,16 +80,10 @@ export default function EditPage() {
    getData();
  }, []);

-  const {
-    openBranchingPanel,
-    whyCantCreatePublic,
-    canCreatePublic,
-    showConfirmLeaveModal,
-  } = useUiTools();
+  const { whyCantCreatePublic, showConfirmLeaveModal } = useUiTools();
  const theme = useTheme();
  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));
@ -123,11 +91,7 @@ export default function EditPage() {
  const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
  const [nextStep, setNextStep] = useState<number>(0);
  const quizConfig = quiz?.config;
-  const disableTest = quiz === undefined ? true : quiz.config.type === null;
  const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);
-  const [buttonText, setButtonText] = useState(
-    quiz?.status === "stop" ? "Опубликовать" : "Отозвать",
-  );

  const openBranchingPageHC = () => {
    if (!openBranchingPage) {
@ -158,7 +122,6 @@ export default function EditPage() {
        updateQuiz(quiz?.id, (state) => {
          state.status = "stop";
        });
-        setButtonText("Опубликовать");
        updateCanCreatePublic(false);
      } else {
        updateCanCreatePublic(true);
@ -179,28 +142,7 @@ export default function EditPage() {
  if (!quizConfig) return <></>;

  const isConditionMet =
-    [1].includes(currentStep) &&
-    !openBranchingPanel &&
-    quizConfig.type !== "form";
-
-  const handleClickStatusQuiz = () => {
-    if (Object.keys(whyCantCreatePublic).length === 0) {
-      if (buttonText === "Опубликовать") {
-        setButtonText("Опубликовано");
-        setTimeout(() => {
-          setButtonText("Отозвать");
-        }, 1500);
-      } else {
-        setButtonText("Опубликовать");
-      }
-
-      updateQuiz(quiz?.id, (state) => {
-        state.status = quiz?.status === "start" ? "stop" : "start";
-      });
-    } else {
-      updateModalInfoWhyCantCreate(true);
-    }
-  };
+    [1].includes(currentStep) && quizConfig.type !== "form";

  const changePage = (index: number) => {
    if (currentStep === 2) {
@ -216,6 +158,7 @@ export default function EditPage() {
  return (
    <>
      <Header setMobileSidebar={setMobileSidebar} />
+
      <Box
        sx={{
          display: isMobile ? "block" : "flex",
@ -227,6 +170,7 @@ export default function EditPage() {
        ) : (
          <Sidebar changePage={changePage} />
        )}
+
        <Box
          sx={{
            background: theme.palette.background.default,
@ -248,7 +192,7 @@ export default function EditPage() {
              boxSizing: "border-box",
            }}
          >
-            {/* Выбор текущей страницы редактирования чего-либо находится здесь */}
+            {/* Выбор текущей страницы редактирования чего-либо - находится здесь */}
            {quizConfig && (
              <>
                <Stepper activeStep={currentStep} />
@ -263,6 +207,7 @@ export default function EditPage() {
              </>
            )}
          </Box>
+
          <Box
            sx={{
              width: "100%",
@ -277,228 +222,27 @@ export default function EditPage() {
              alignItems: "center",
              gap: "15px",
              background: "#FFF",
+              borderTop: "#f2f3f7 2px solid",
            }}
          >
            {isConditionMet &&
              (isBranchingLogic ? (
-                <Box
-                  sx={{
-                    width: "77px",
-                    height: "51px",
-                    position: "fixed",
-                    zIndex: "99999",
-                    right: "0",
-                    top: "20%",
-                    background: "#333647",
-                    borderTopLeftRadius: "8px",
-                    borderBottomLeftRadius: "8px",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                  }}
-                >
-                  <Switch
-                    icon={<TreeStructure />}
-                    checkedIcon={<TreeStructure />}
-                    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,
-                          },
-                        ),
-                      },
-                    }}
-                  />
-                </Box>
+                <SmallSwitchQuestionListGraph
+                  openBranchingPage={openBranchingPage}
+                  setOpenBranchingPage={openBranchingPageHC}
+                />
              ) : (
-                <Box
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "15px",
-                    padding: "18px",
-                    background: "#fff",
-                    borderRadius: "12px",
-                    boxShadow: "0px 10px 30px #e7e7e7",
-                  }}
-                >
-                  <Switch
-                    checked={openBranchingPage}
-                    onChange={openBranchingPageHC}
-                    sx={{
-                      width: 50,
-                      height: 30,
-                      padding: 0,
-                      "& .MuiSwitch-switchBase": {
-                        padding: 0,
-                        margin: "2px",
-                        transitionDuration: "300ms",
-                        "&.Mui-checked": {
-                          transform: "translateX(20px)",
-                          color: theme.palette.brightPurple.main,
-                          "& + .MuiSwitch-track": {
-                            backgroundColor: "#E8DCF9",
-                            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": {
-                        borderRadius: 13,
-                        backgroundColor:
-                          theme.palette.mode === "light"
-                            ? "#E9E9EA"
-                            : "#39393D",
-                        opacity: 1,
-                        transition: theme.transitions.create(
-                          ["background-color"],
-                          {
-                            duration: 500,
-                          },
-                        ),
-                      },
-                    }}
-                  />
-                  <Box>
-                    <Typography
-                      sx={{
-                        fontWeight: "bold",
-                        color: "#4D4D4D",
-                        whiteSpace: "nowrap",
-                      }}
-                    >
-                      Логика ветвления
-                    </Typography>
-                  </Box>
-                </Box>
+                <PanelSwitchQuestionListGraph
+                  openBranchingPage={openBranchingPage}
+                  setOpenBranchingPage={openBranchingPageHC}
+                  hideText
+                />
              ))}
-
-            <Box sx={{ display: isMobile ? "none" : "block" }}>
-              {!canCreatePublic && quiz.config.type !== "form" ? (
-                <Button
-                  variant="contained"
-                  // disabled
-                  sx={{
-                    fontSize: "14px",
-                    lineHeight: "18px",
-                    height: "34px",
-                    whiteSpace: "nowrap",
-                    minWidth: "130px",
-                  }}
-                  onClick={() =>
-                    Object.keys(whyCantCreatePublic).length === 0
-                      ? () => {}
-                      : updateModalInfoWhyCantCreate(true)
-                  }
-                >
-                  Тестовый просмотр
-                </Button>
-              ) : (
-                <a
-                  href={`/view`}
-                  target="_blank"
-                  rel="noreferrer"
-                  style={{ textDecoration: "none" }}
-                >
-                  <Button
-                    variant="contained"
-                    sx={{
-                      fontSize: "14px",
-                      whiteSpace: "nowrap",
-                      lineHeight: "18px",
-                      height: "34px",
-                    }}
-                  >
-                    Тестовый просмотр
-                  </Button>
-                </a>
-              )}
-            </Box>
-
-            <Button
-              variant="contained"
-              sx={{
-                fontSize: "14px",
-                lineHeight: "18px",
-                height: "34px",
-                background:
-                  buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA",
-                p: "0 18px",
-                minWidth: "120px",
-              }}
-              onClick={handleClickStatusQuiz}
-            >
-              {buttonText === "Отозвать" ? (
-                <Box sx={{ display: "flex", gap: "4px", alignItems: "center" }}>
-                  {buttonText} <BackButtonIcon />
-                </Box>
-              ) : (
-                buttonText
-              )}
-            </Button>
+            {/* Кнопка тестового просмотра  */}
+            <ButtonTestPublication />
+            {/* Кнопка отозвать */}
+            <ButtonRecallQuiz />
+            {/* Ссылка */}
            {quiz?.status === "start" &&
              (!isLinkButton ? (
                <Box
@ -537,40 +281,7 @@ export default function EditPage() {
                  <LinkSimple />
                </Box>
              ))}
-
-            {isMobile ? (
-              <Button
-                onClick={toggleQuizPreview}
-                variant="outlined"
-                sx={{
-                  display: "flex",
-                  gap: "4px",
-                  fontSize: "14px",
-                  lineHeight: "18px",
-                  height: "34px",
-                  border: "1px solid #7E2AEA",
-                  color: "#7E2AEA",
-                  background: "white",
-                  p: "8px 14px",
-                }}
-              >
-                <EyeIcon />
-                Предпросмотр
-              </Button>
-            ) : (
-              <IconButton
-                onClick={toggleQuizPreview}
-                sx={{
-                  pointerEvents: "auto",
-                  marginLeft: "auto",
-                  position: "relative",
-                  zIndex: "999999",
-                }}
-              >
-                <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
-              </IconButton>
-            )}
-
+            {/* Маленькая кнопка ссылки */}
            {isMobile && quiz?.status === "start" && (
              <Box
                component={Link}
@ -595,6 +306,7 @@ export default function EditPage() {
          </Box>
        </Box>
      </Box>
+
      <ModalInfoWhyCantCreate />
      <ConfirmLeaveModal
        open={showConfirmLeaveModal}
--- a/src/stores/uiTools/actions.ts
+++ b/src/stores/uiTools/actions.ts
@ -1,8 +1,5 @@
 import { useUiTools } from "./store";

-export const updateOpenBranchingPanel = (value: boolean) =>
-  useUiTools.setState({ openBranchingPanel: value });
-
 export const cleardragQuestionContentId = () => {
  useUiTools.setState({ dragQuestionContentId: null });
 };
--- a/src/stores/uiTools/store.ts
+++ b/src/stores/uiTools/store.ts
@ -4,7 +4,6 @@ import { devtools } from "zustand/middleware";
 export type UiTools = {
  openedModalSettingsId: string | null;
  dragQuestionContentId: string | null;
-  openBranchingPanel: boolean;
  desireToOpenABranchingModal: string | null;
  editSomeQuestion: string | null;
  canCreatePublic: boolean;
@ -23,7 +22,6 @@ export type WhyCantCreatePublic = {
 const initialState: UiTools = {
  openedModalSettingsId: null as null,
  dragQuestionContentId: null,
-  openBranchingPanel: false,
  desireToOpenABranchingModal: null as null,
  editSomeQuestion: null as null,
  canCreatePublic: false,
--- a/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx
+++ b/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx
@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useUiTools } from "@root/uiTools/store";
+import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
+import { updateQuiz } from "@root/quizes/actions";
+import { Button, Box } from "@mui/material";
+import { BackButtonIcon } from "@icons/BackButtonIcon";
+
+export const ButtonRecallQuiz = () => {
+  const quiz = useCurrentQuiz();
+  const { whyCantCreatePublic, canCreatePublic } = useUiTools();
+
+  console.log(quiz?.status);
+  const [buttonText, setButtonText] = useState(
+    quiz?.status === "stop" ? "Опубликовать" : "Отозвать",
+  );
+  useEffect(() => {
+    if (!canCreatePublic) setButtonText("Опубликовать");
+  }, [canCreatePublic]);
+
+  const handleClickStatusQuiz = () => {
+    if (Object.keys(whyCantCreatePublic).length === 0) {
+      if (buttonText === "Опубликовать") {
+        setButtonText("Опубликовано");
+        setTimeout(() => {
+          setButtonText("Отозвать");
+        }, 1500);
+      } else {
+        setButtonText("Опубликовать");
+      }
+
+      updateQuiz(quiz?.id, (state) => {
+        state.status = quiz?.status === "start" ? "stop" : "start";
+      });
+    } else {
+      updateModalInfoWhyCantCreate(true);
+    }
+  };
+
+  return (
+    <Button
+      variant="contained"
+      sx={{
+        fontSize: "14px",
+        lineHeight: "18px",
+        height: "34px",
+        background: buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA",
+        p: "0 18px",
+        minWidth: "120px",
+      }}
+      onClick={handleClickStatusQuiz}
+    >
+      {buttonText === "Отозвать" ? (
+        <Box sx={{ display: "flex", gap: "4px", alignItems: "center" }}>
+          {buttonText} <BackButtonIcon />
+        </Box>
+      ) : (
+        buttonText
+      )}
+    </Button>
+  );
+};
--- a/src/ui_kit/Toolbars/ButtonTestPublication.tsx
+++ b/src/ui_kit/Toolbars/ButtonTestPublication.tsx
@ -0,0 +1,51 @@
+import { useUiTools } from "@root/uiTools/store";
+import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
+import { Button } from "@mui/material";
+
+export const ButtonTestPublication = () => {
+  const { whyCantCreatePublic, canCreatePublic } = useUiTools();
+
+  if (canCreatePublic) {
+    return (
+      <a
+        href={`/view`}
+        target="_blank"
+        rel="noreferrer"
+        style={{ textDecoration: "none" }}
+      >
+        <Button
+          variant="contained"
+          sx={{
+            fontSize: "14px",
+            whiteSpace: "nowrap",
+            lineHeight: "18px",
+            height: "34px",
+          }}
+        >
+          Тестовый просмотр
+        </Button>
+      </a>
+    );
+  } else {
+    // disabled
+    return (
+      <Button
+        variant="contained"
+        sx={{
+          fontSize: "14px",
+          lineHeight: "18px",
+          height: "34px",
+          whiteSpace: "nowrap",
+          minWidth: "130px",
+        }}
+        onClick={() =>
+          Object.keys(whyCantCreatePublic).length === 0
+            ? () => {}
+            : updateModalInfoWhyCantCreate(true)
+        }
+      >
+        Тестовый просмотр
+      </Button>
+    );
+  }
+};
--- a/src/ui_kit/Toolbars/PanelSwitchQuestionListGraph.tsx
+++ b/src/ui_kit/Toolbars/PanelSwitchQuestionListGraph.tsx
@ -0,0 +1,92 @@
+import { Box, Switch, useTheme, Typography } from "@mui/material";
+
+interface Props {
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
+  hideText?: boolean;
+}
+
+export const PanelSwitchQuestionListGraph = ({
+  openBranchingPage,
+  setOpenBranchingPage,
+  hideText = false,
+}: Props) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: "15px",
+        padding: "18px",
+        background: "#fff",
+        borderRadius: "12px",
+        boxShadow: "0px 10px 30px #e7e7e7",
+      }}
+    >
+      <Switch
+        checked={openBranchingPage}
+        onChange={(e) => setOpenBranchingPage(e.target.checked)}
+        sx={{
+          width: 50,
+          height: 30,
+          padding: 0,
+          "& .MuiSwitch-switchBase": {
+            padding: 0,
+            margin: "2px",
+            transitionDuration: "300ms",
+            "&.Mui-checked": {
+              transform: "translateX(20px)",
+              color: theme.palette.brightPurple.main,
+              "& + .MuiSwitch-track": {
+                backgroundColor: "#E8DCF9",
+                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": {
+            borderRadius: 13,
+            backgroundColor:
+              theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+            opacity: 1,
+            transition: theme.transitions.create(["background-color"], {
+              duration: 500,
+            }),
+          },
+        }}
+      />
+      <Box>
+        <Typography
+          sx={{
+            fontWeight: "bold",
+            color: "#4D4D4D",
+            whiteSpace: "nowrap",
+          }}
+        >
+          Логика ветвления
+        </Typography>
+        {!hideText && (
+          <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
+            Настройте связи между вопросами
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  );
+};
--- a/src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx
+++ b/src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx
@ -0,0 +1,90 @@
+import { Box, Switch, useTheme } from "@mui/material";
+import { TreeStructure } from "@icons/TreeStructure";
+
+interface Props {
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
+}
+
+export const SmallSwitchQuestionListGraph = ({
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        width: "77px",
+        height: "51px",
+        position: "fixed",
+        zIndex: "99999",
+        right: "0",
+        top: "200px",
+        background: "#333647",
+        borderTopLeftRadius: "8px",
+        borderBottomLeftRadius: "8px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Switch
+        icon={<TreeStructure />}
+        checkedIcon={<TreeStructure />}
+        checked={openBranchingPage}
+        onChange={(e) => setOpenBranchingPage(e.target.checked)}
+        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,
+            }),
+          },
+        }}
+      />
+    </Box>
+  );
+};