added infoBannner
This commit is contained in:
aleksandr-raw
parent
9131826058
commit
a29297890e
35
src/assets/icons/questionsPage/EditIcon.tsx
Normal file
35
src/assets/icons/questionsPage/EditIcon.tsx
Normal file
File diff suppressed because one or more lines are too long
@ -4,8 +4,6 @@ import { clearRuleForAll } from "@root/questions/actions";
|
|||||||
import { useQuestionsStore } from "@root/questions/store";
|
import { useQuestionsStore } from "@root/questions/store";
|
||||||
import { updateRootContentId } from "@root/quizes/actions";
|
import { updateRootContentId } from "@root/quizes/actions";
|
||||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||||
import AddIcon from "@mui/icons-material/Add";
|
|
||||||
import RemoveIcon from "@mui/icons-material/Remove";
|
|
||||||
import {
|
import {
|
||||||
cleardragQuestionContentId,
|
cleardragQuestionContentId,
|
||||||
setModalQuestionParentContentId,
|
setModalQuestionParentContentId,
|
||||||
@ -15,7 +13,7 @@ import {
|
|||||||
import { useUiTools } from "@root/uiTools/store";
|
import { useUiTools } from "@root/uiTools/store";
|
||||||
import type { Core } from "cytoscape";
|
import type { Core } from "cytoscape";
|
||||||
import { enqueueSnackbar } from "notistack";
|
import { enqueueSnackbar } from "notistack";
|
||||||
import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
|
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||||
import CytoscapeComponent from "react-cytoscapejs";
|
import CytoscapeComponent from "react-cytoscapejs";
|
||||||
import { withErrorBoundary } from "react-error-boundary";
|
import { withErrorBoundary } from "react-error-boundary";
|
||||||
import { DeleteNodeModal } from "../DeleteNodeModal";
|
import { DeleteNodeModal } from "../DeleteNodeModal";
|
||||||
@ -24,13 +22,15 @@ import { addNode, layoutOptions, storeToNodes } from "./helper";
|
|||||||
import { useRemoveNode } from "./hooks/useRemoveNode";
|
import { useRemoveNode } from "./hooks/useRemoveNode";
|
||||||
import "./style/styles.css";
|
import "./style/styles.css";
|
||||||
import { stylesheet } from "./style/stylesheet";
|
import { stylesheet } from "./style/stylesheet";
|
||||||
import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
|
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
||||||
import { AlignIcon } from "@icons/questionsPage/AlignIcon";
|
import { InfoBanner } from "./InfoBanner/InfoBanner";
|
||||||
import { ExpandIcon } from "@icons/questionsPage/ExpandIcon";
|
import { PositionControl } from "./PositionControl/PositionControl";
|
||||||
|
import { ZoomControl } from "./ZoomControl/ZoomControl";
|
||||||
|
|
||||||
function CsComponent() {
|
function CsComponent() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||||
|
const [isBannerVisible, setBannerVisible] = useState(true);
|
||||||
const desireToOpenABranchingModal = useUiTools(
|
const desireToOpenABranchingModal = useUiTools(
|
||||||
(state) => state.desireToOpenABranchingModal,
|
(state) => state.desireToOpenABranchingModal,
|
||||||
);
|
);
|
||||||
@ -107,108 +107,9 @@ function CsComponent() {
|
|||||||
>
|
>
|
||||||
<CsNodeButtons csElements={csElements} cyRef={cyRef} />
|
<CsNodeButtons csElements={csElements} cyRef={cyRef} />
|
||||||
<Box sx={{ position: "relative" }}>
|
<Box sx={{ position: "relative" }}>
|
||||||
<Box
|
{isBannerVisible && <InfoBanner setBannerVisible={setBannerVisible} />}
|
||||||
sx={{
|
<PositionControl cyRef={cyRef} />
|
||||||
position: "absolute",
|
<ZoomControl cyRef={cyRef} />
|
||||||
bottom: isMobile ? "15px" : "20px",
|
|
||||||
left: isMobile ? "15px" : "20px",
|
|
||||||
display: "flex",
|
|
||||||
gap: "10px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
minWidth: "36px",
|
|
||||||
width: "36px",
|
|
||||||
height: "36px",
|
|
||||||
background: "#9A9AAF",
|
|
||||||
opacity: "0.7",
|
|
||||||
zIndex: 2,
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
cyRef.current?.zoom(1);
|
|
||||||
cyRef.current?.center();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ExpandIcon />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
minWidth: "36px",
|
|
||||||
width: "36px",
|
|
||||||
height: "36px",
|
|
||||||
background: "#9A9AAF",
|
|
||||||
opacity: "0.7",
|
|
||||||
zIndex: 2,
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
cyRef.current?.fit(undefined, 70);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AlignIcon />
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
position: "absolute",
|
|
||||||
bottom: isMobile ? "15px" : "20px",
|
|
||||||
right: isMobile ? "15px" : "20px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
gap: "10px",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
padding: "16px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
zIndex: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
minWidth: "36px",
|
|
||||||
width: "36px",
|
|
||||||
height: "36px",
|
|
||||||
background: "#7E2AEA",
|
|
||||||
fontSize: "16px",
|
|
||||||
color: "#fff",
|
|
||||||
zIndex: 2,
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
const currentZoom = cyRef.current?.zoom() || 1;
|
|
||||||
cyRef.current?.zoom(currentZoom + 0.1);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AddIcon />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
minWidth: "36px",
|
|
||||||
width: "36px",
|
|
||||||
height: "36px",
|
|
||||||
background: "#7E2AEA",
|
|
||||||
fontSize: "16px",
|
|
||||||
color: "#fff",
|
|
||||||
zIndex: 2,
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
const currentZoom = cyRef.current?.zoom() || 1;
|
|
||||||
cyRef.current?.zoom(currentZoom - 0.1);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<RemoveIcon />
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
<CytoscapeComponent
|
<CytoscapeComponent
|
||||||
wheelSensitivity={0.1}
|
wheelSensitivity={0.1}
|
||||||
elements={csElements}
|
elements={csElements}
|
||||||
|
|||||||
99
src/pages/Questions/BranchingMap/InfoBanner/InfoBanner.tsx
Normal file
99
src/pages/Questions/BranchingMap/InfoBanner/InfoBanner.tsx
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
import {
|
||||||
|
Box,
|
||||||
|
IconButton,
|
||||||
|
Typography,
|
||||||
|
useMediaQuery,
|
||||||
|
useTheme,
|
||||||
|
} from "@mui/material";
|
||||||
|
import { Add } from "@mui/icons-material";
|
||||||
|
import { EditIcon } from "@icons/questionsPage/EditIcon";
|
||||||
|
import CloseIcon from "@mui/icons-material/Close";
|
||||||
|
import { Dispatch, FC, SetStateAction } from "react";
|
||||||
|
|
||||||
|
type InfoBannerProps = {
|
||||||
|
setBannerVisible: Dispatch<SetStateAction<boolean>>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InfoBanner: FC<InfoBannerProps> = ({ setBannerVisible }) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "30px",
|
||||||
|
right: "30px",
|
||||||
|
padding: "20px",
|
||||||
|
borderRadius: "12px",
|
||||||
|
background: "#fff",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
zIndex: 2,
|
||||||
|
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
||||||
|
animation: "fadeIn 0.5s",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
maxWidth: isMobile ? "253px" : "345px",
|
||||||
|
color: "#9A9AAF",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "10px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||||
|
<Typography>Добавьте больше вопросов кнопкой</Typography>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "20px",
|
||||||
|
height: "20px",
|
||||||
|
color: "rgba(154, 154, 175, 0.5)",
|
||||||
|
backgroundColor: "#eeeff4",
|
||||||
|
borderRadius: "6px",
|
||||||
|
border: "1.5px dashed rgba(154, 154, 175, 0.5)",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Add fontSize={"small"} />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography>
|
||||||
|
Настраивайте условия их отображения в квизе с помощью
|
||||||
|
</Typography>
|
||||||
|
<EditIcon />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "-10px",
|
||||||
|
right: "-10px",
|
||||||
|
width: "30px",
|
||||||
|
height: "30px",
|
||||||
|
background: "#4D4D4D",
|
||||||
|
opacity: "0.2",
|
||||||
|
BorderRadius: "50%",
|
||||||
|
color: "#fff",
|
||||||
|
"&:hover": {
|
||||||
|
background: "black",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onClick={() => setBannerVisible(false)}
|
||||||
|
>
|
||||||
|
<CloseIcon fontSize={"medium"} />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
|
||||||
|
import { ExpandIcon } from "@icons/questionsPage/ExpandIcon";
|
||||||
|
import { AlignIcon } from "@icons/questionsPage/AlignIcon";
|
||||||
|
import { FC, MutableRefObject } from "react";
|
||||||
|
import { Core } from "cytoscape";
|
||||||
|
|
||||||
|
type PositionControlProps = {
|
||||||
|
cyRef: MutableRefObject<Core | null>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PositionControl: FC<PositionControlProps> = ({ cyRef }) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: isMobile ? "15px" : "20px",
|
||||||
|
left: isMobile ? "15px" : "20px",
|
||||||
|
display: "flex",
|
||||||
|
gap: "10px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
minWidth: "36px",
|
||||||
|
width: "36px",
|
||||||
|
height: "36px",
|
||||||
|
background: "#9A9AAF",
|
||||||
|
opacity: "0.7",
|
||||||
|
zIndex: 2,
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
cyRef.current?.zoom(1);
|
||||||
|
cyRef.current?.center();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ExpandIcon />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
minWidth: "36px",
|
||||||
|
width: "36px",
|
||||||
|
height: "36px",
|
||||||
|
background: "#9A9AAF",
|
||||||
|
opacity: "0.7",
|
||||||
|
zIndex: 2,
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
cyRef.current?.fit(undefined, 70);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AlignIcon />
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
72
src/pages/Questions/BranchingMap/ZoomControl/ZoomControl.tsx
Normal file
72
src/pages/Questions/BranchingMap/ZoomControl/ZoomControl.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
|
||||||
|
import { FC, MutableRefObject } from "react";
|
||||||
|
import AddIcon from "@mui/icons-material/Add";
|
||||||
|
import RemoveIcon from "@mui/icons-material/Remove";
|
||||||
|
import { Core } from "cytoscape";
|
||||||
|
|
||||||
|
type PositionControlProps = {
|
||||||
|
cyRef: MutableRefObject<Core | null>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ZoomControl: FC<PositionControlProps> = ({ cyRef }) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: isMobile ? "15px" : "20px",
|
||||||
|
right: isMobile ? "15px" : "20px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "10px",
|
||||||
|
background: "#EEE4FC",
|
||||||
|
padding: "16px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
zIndex: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
minWidth: "36px",
|
||||||
|
width: "36px",
|
||||||
|
height: "36px",
|
||||||
|
background: "#7E2AEA",
|
||||||
|
fontSize: "16px",
|
||||||
|
color: "#fff",
|
||||||
|
zIndex: 2,
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
const currentZoom = cyRef.current?.zoom() || 1;
|
||||||
|
cyRef.current?.zoom(currentZoom + 0.1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AddIcon />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
minWidth: "36px",
|
||||||
|
width: "36px",
|
||||||
|
height: "36px",
|
||||||
|
background: "#7E2AEA",
|
||||||
|
fontSize: "16px",
|
||||||
|
color: "#fff",
|
||||||
|
zIndex: 2,
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
const currentZoom = cyRef.current?.zoom() || 1;
|
||||||
|
cyRef.current?.zoom(currentZoom - 0.1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RemoveIcon />
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user