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 { updateRootContentId } from "@root/quizes/actions";
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import RemoveIcon from "@mui/icons-material/Remove";
|
||||
import {
|
||||
cleardragQuestionContentId,
|
||||
setModalQuestionParentContentId,
|
||||
@ -15,7 +13,7 @@ import {
|
||||
import { useUiTools } from "@root/uiTools/store";
|
||||
import type { Core } from "cytoscape";
|
||||
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 { withErrorBoundary } from "react-error-boundary";
|
||||
import { DeleteNodeModal } from "../DeleteNodeModal";
|
||||
@ -24,13 +22,15 @@ import { addNode, layoutOptions, storeToNodes } from "./helper";
|
||||
import { useRemoveNode } from "./hooks/useRemoveNode";
|
||||
import "./style/styles.css";
|
||||
import { stylesheet } from "./style/stylesheet";
|
||||
import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { AlignIcon } from "@icons/questionsPage/AlignIcon";
|
||||
import { ExpandIcon } from "@icons/questionsPage/ExpandIcon";
|
||||
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { InfoBanner } from "./InfoBanner/InfoBanner";
|
||||
import { PositionControl } from "./PositionControl/PositionControl";
|
||||
import { ZoomControl } from "./ZoomControl/ZoomControl";
|
||||
|
||||
function CsComponent() {
|
||||
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(
|
||||
(state) => state.desireToOpenABranchingModal,
|
||||
);
|
||||
@ -107,108 +107,9 @@ function CsComponent() {
|
||||
>
|
||||
<CsNodeButtons csElements={csElements} cyRef={cyRef} />
|
||||
<Box sx={{ position: "relative" }}>
|
||||
<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>
|
||||
<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>
|
||||
{isBannerVisible && <InfoBanner setBannerVisible={setBannerVisible} />}
|
||||
<PositionControl cyRef={cyRef} />
|
||||
<ZoomControl cyRef={cyRef} />
|
||||
<CytoscapeComponent
|
||||
wheelSensitivity={0.1}
|
||||
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