From 97b2d3ac979f844ef8896dcfc4e925a0274d6210 Mon Sep 17 00:00:00 2001 From: Tamara Date: Thu, 4 Jan 2024 05:04:44 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=B5=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B?= =?UTF-8?q?=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D0=BB=D0=BE=D0=B3=D0=B8?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=B2=D0=B5=D1=82=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 8 +- src/pages/DesignPage/DesignFilling.tsx | 14 -- src/pages/DesignPage/DesignPage.tsx | 10 +- src/pages/Questions/QuestionsPage.tsx | 2 +- .../SwitchBranchingPanel/QuestionsList.tsx | 2 +- src/pages/Tariffs/Tariffs.tsx | 2 + src/pages/main.tsx | 36 +++- src/pages/startPage/EditPage.tsx | 4 +- src/pages/startPage/Header.tsx | 178 ------------------ src/ui_kit/Header/Header.tsx | 111 ++++++++--- .../Sidebar/SidebarMobile.tsx | 0 .../Sidebar/SidebarModal/index.tsx | 0 .../Sidebar/icons/ArrowDown.tsx | 0 .../Sidebar/icons/ChartLineUp.tsx | 0 .../Sidebar/icons/Pencil.tsx | 0 .../Sidebar/icons/People.tsx | 0 .../Sidebar/icons/Question.tsx | 0 .../Sidebar/icons/ReturnTime.tsx | 0 .../Sidebar/icons/Settings.tsx | 0 19 files changed, 124 insertions(+), 243 deletions(-) delete mode 100644 src/pages/startPage/Header.tsx mode change 100755 => 100644 src/ui_kit/Header/Header.tsx rename src/{pages/startPage => ui_kit}/Sidebar/SidebarMobile.tsx (100%) rename src/{pages/startPage => ui_kit}/Sidebar/SidebarModal/index.tsx (100%) rename src/{pages/startPage => ui_kit}/Sidebar/icons/ArrowDown.tsx (100%) rename src/{pages/startPage => ui_kit}/Sidebar/icons/ChartLineUp.tsx (100%) rename src/{pages/startPage => ui_kit}/Sidebar/icons/Pencil.tsx (100%) rename src/{pages/startPage => ui_kit}/Sidebar/icons/People.tsx (100%) rename src/{pages/startPage => ui_kit}/Sidebar/icons/Question.tsx (100%) rename src/{pages/startPage => ui_kit}/Sidebar/icons/ReturnTime.tsx (100%) rename src/{pages/startPage => ui_kit}/Sidebar/icons/Settings.tsx (100%) diff --git a/src/App.tsx b/src/App.tsx index ff27dd94..e94417e5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -101,13 +101,6 @@ export function useUserAccountFetcher({ dayjs.locale("ru"); const routeslink = [ - { - path: "/tariffs", - page: , - header: true, - sidebar: false, - footer: false, - }, { path: "/edit", page: , @@ -199,6 +192,7 @@ export default function App() { /> } /> } /> + } /> }> {routeslink.map((e, i) => ( { ))} - - - - - ); }; diff --git a/src/pages/DesignPage/DesignPage.tsx b/src/pages/DesignPage/DesignPage.tsx index 8940a67c..94a2c716 100644 --- a/src/pages/DesignPage/DesignPage.tsx +++ b/src/pages/DesignPage/DesignPage.tsx @@ -6,7 +6,7 @@ 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 { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile"; import { cleanQuestions, setQuestions } from "@root/questions/actions"; import { updateModalInfoWhyCantCreate, @@ -17,7 +17,7 @@ import { questionApi } from "@api/question"; import { useUiTools } from "@root/uiTools/store"; import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal"; -import { Header } from "../startPage/Header"; +import { Header } from "@ui_kit/Header/Header"; import { DesignFilling } from "./DesignFilling"; import { createPortal } from "react-dom"; import QuizPreview from "@ui_kit/QuizPreview/QuizPreview"; @@ -69,13 +69,7 @@ export const DesignPage = () => { ); return ( <> - {/*
*/} - {/*{isMobile ? (*/} - {/* */} - {/*) : (*/} - {/* */} - {/*)}*/} {createPortal(, document.body)} diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index e08a5fa2..84e50667 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -85,6 +85,7 @@ export default function QuestionsPage({ display: "flex", justifyContent: "space-between", maxWidth: "796px", + position: "relative", }} > + - {page} + {footer && ( @@ -229,6 +231,20 @@ export default function Main({ sidebar, header, footer, page }: Props) { )} + + + + + )} diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 3b4a15c8..74528fa6 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -20,7 +20,7 @@ import SwitchStepPages from "@ui_kit/switchStepPages"; import { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { useDebouncedCallback } from "use-debounce"; -import { SidebarMobile } from "./Sidebar/SidebarMobile"; +import { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile"; import { cleanQuestions, createResult, @@ -32,7 +32,7 @@ import { setShowConfirmLeaveModal, updateSomeWorkBackend, } from "@root/uiTools/actions"; -import { Header } from "./Header"; +import { Header } from "@ui_kit/Header/Header"; import { useQuestionsStore } from "@root/questions/store"; import { questionApi } from "@api/question"; import { useUiTools } from "@root/uiTools/store"; diff --git a/src/pages/startPage/Header.tsx b/src/pages/startPage/Header.tsx deleted file mode 100644 index 6100d001..00000000 --- a/src/pages/startPage/Header.tsx +++ /dev/null @@ -1,178 +0,0 @@ -import { LogoutButton } from "@ui_kit/LogoutButton"; -import BackArrowIcon from "@icons/BackArrowIcon"; -import { Burger } from "@icons/Burger"; - -import { - Box, - Container, - FormControl, - IconButton, - TextField, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { updateQuiz } from "@root/quizes/actions"; -import { useCurrentQuiz } from "@root/quizes/hooks"; -import CustomAvatar from "@ui_kit/Header/Avatar"; -import NavMenuItem from "@ui_kit/Header/NavMenuItem"; - -import { enqueueSnackbar } from "notistack"; -import { useState } from "react"; -import { Link, useNavigate } from "react-router-dom"; - -import Logotip from "../Landing/images/icons/QuizLogo"; -import { clearUserData } from "@root/user"; -import { clearAuthToken } from "@frontend/kitui"; -import { logout } from "@api/auth"; - -type HeaderProps = { - setMobileSidebar: (callback: (visible: boolean) => boolean) => void; -}; - -export const Header = ({ setMobileSidebar }: HeaderProps) => { - const quiz = useCurrentQuiz(); - const theme = useTheme(); - const navigate = useNavigate(); - const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const isMobile = useMediaQuery(theme.breakpoints.down(660)); - - async function handleLogoutClick() { - const [, logoutError] = await logout(); - - if (logoutError) { - return enqueueSnackbar(logoutError); - } - - clearAuthToken(); - clearUserData(); - navigate("/"); - } - - return ( - - - {isMobile ? : } - - - - - - - - - - // updateQuiz(quiz.id, (quiz) => { - // quiz.name = e.target.value; - // }) - // } - fullWidth - id="project-name" - placeholder="Название проекта окно" - sx={{ - width: "270px", - "& .MuiInputBase-root": { - height: "34px", - borderRadius: "8px", - p: 0, - }, - }} - inputProps={{ - sx: { - height: "20px", - borderRadius: "8px", - fontSize: "16px", - lineHeight: "20px", - p: "7px", - color: "black", - "&::placeholder": { - opacity: 1, - }, - }, - }} - /> - - - {isTablet ? ( - - {isMobile ? ( - setMobileSidebar((visible: boolean) => !visible)} - style={{ fontSize: "30px", color: "white", cursor: "pointer" }} - /> - ) : ( - - {/* */} - - )} - - ) : ( - <> - - {/* */} - {/* - - - */} - - - {/* */} - - - - )} - - ); -}; diff --git a/src/ui_kit/Header/Header.tsx b/src/ui_kit/Header/Header.tsx old mode 100755 new mode 100644 index 68cd4850..d8c29d75 --- a/src/ui_kit/Header/Header.tsx +++ b/src/ui_kit/Header/Header.tsx @@ -1,8 +1,9 @@ +import { LogoutButton } from "@ui_kit/LogoutButton"; import BackArrowIcon from "@icons/BackArrowIcon"; -import EyeIcon from "@icons/EyeIcon"; +import { Burger } from "@icons/Burger"; + import { Box, - Button, Container, FormControl, IconButton, @@ -10,15 +11,43 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { decrementCurrentStep } from "@root/quizes/actions"; -import PenaLogo from "../PenaLogo"; -import CustomAvatar from "./Avatar"; -import NavMenuItem from "./NavMenuItem"; -import { Link } from "react-router-dom"; +import { updateQuiz } from "@root/quizes/actions"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import CustomAvatar from "@ui_kit/Header/Avatar"; +import NavMenuItem from "@ui_kit/Header/NavMenuItem"; -export default function Header() { +import { enqueueSnackbar } from "notistack"; +import { useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; + +import Logotip from "../../pages/Landing/images/icons/QuizLogo"; +import { clearUserData } from "@root/user"; +import { clearAuthToken } from "@frontend/kitui"; +import { logout } from "@api/auth"; +import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton"; + +type HeaderProps = { + setMobileSidebar: (callback: (visible: boolean) => boolean) => void; +}; + +export const Header = ({ setMobileSidebar }: HeaderProps) => { + const quiz = useCurrentQuiz(); const theme = useTheme(); + const navigate = useNavigate(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + + async function handleLogoutClick() { + const [, logoutError] = await logout(); + + if (logoutError) { + return enqueueSnackbar(logoutError); + } + + clearAuthToken(); + clearUserData(); + navigate("/"); + } return ( - - + + {isMobile ? : } - - - + + + + + + updateQuiz(quiz.id, (quiz) => { + quiz.name = e.target.value; + }) + } fullWidth id="project-name" placeholder="Название проекта окно" @@ -77,13 +114,37 @@ export default function Header() { /> - - {isTablet ? null : ( + {isTablet ? ( + + {isMobile ? ( + setMobileSidebar((visible: boolean) => !visible)} + style={{ fontSize: "30px", color: "white", cursor: "pointer" }} + /> + ) : ( + + {/* */} + + )} + + ) : ( <> */} - а я типа обычный хедер {/* */} + + )} ); -} +}; diff --git a/src/pages/startPage/Sidebar/SidebarMobile.tsx b/src/ui_kit/Sidebar/SidebarMobile.tsx similarity index 100% rename from src/pages/startPage/Sidebar/SidebarMobile.tsx rename to src/ui_kit/Sidebar/SidebarMobile.tsx diff --git a/src/pages/startPage/Sidebar/SidebarModal/index.tsx b/src/ui_kit/Sidebar/SidebarModal/index.tsx similarity index 100% rename from src/pages/startPage/Sidebar/SidebarModal/index.tsx rename to src/ui_kit/Sidebar/SidebarModal/index.tsx diff --git a/src/pages/startPage/Sidebar/icons/ArrowDown.tsx b/src/ui_kit/Sidebar/icons/ArrowDown.tsx similarity index 100% rename from src/pages/startPage/Sidebar/icons/ArrowDown.tsx rename to src/ui_kit/Sidebar/icons/ArrowDown.tsx diff --git a/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx b/src/ui_kit/Sidebar/icons/ChartLineUp.tsx similarity index 100% rename from src/pages/startPage/Sidebar/icons/ChartLineUp.tsx rename to src/ui_kit/Sidebar/icons/ChartLineUp.tsx diff --git a/src/pages/startPage/Sidebar/icons/Pencil.tsx b/src/ui_kit/Sidebar/icons/Pencil.tsx similarity index 100% rename from src/pages/startPage/Sidebar/icons/Pencil.tsx rename to src/ui_kit/Sidebar/icons/Pencil.tsx diff --git a/src/pages/startPage/Sidebar/icons/People.tsx b/src/ui_kit/Sidebar/icons/People.tsx similarity index 100% rename from src/pages/startPage/Sidebar/icons/People.tsx rename to src/ui_kit/Sidebar/icons/People.tsx diff --git a/src/pages/startPage/Sidebar/icons/Question.tsx b/src/ui_kit/Sidebar/icons/Question.tsx similarity index 100% rename from src/pages/startPage/Sidebar/icons/Question.tsx rename to src/ui_kit/Sidebar/icons/Question.tsx diff --git a/src/pages/startPage/Sidebar/icons/ReturnTime.tsx b/src/ui_kit/Sidebar/icons/ReturnTime.tsx similarity index 100% rename from src/pages/startPage/Sidebar/icons/ReturnTime.tsx rename to src/ui_kit/Sidebar/icons/ReturnTime.tsx diff --git a/src/pages/startPage/Sidebar/icons/Settings.tsx b/src/ui_kit/Sidebar/icons/Settings.tsx similarity index 100% rename from src/pages/startPage/Sidebar/icons/Settings.tsx rename to src/ui_kit/Sidebar/icons/Settings.tsx