SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: branch tooltip

Browse Source
This commit is contained in:
IlyaDoronin 2023-08-16 16:29:28 +03:00
parent 5ac5d8c0af
commit 04a3719224
2 changed files with 127 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/Questions/ButtonsOptionsAndPict.css Normal file
View File

@ -0,0 +1,10 @@
.MuiTooltip-popper > .MuiTooltip-tooltip {
background: #fff;
border-radius: 6px;
color: #9A9AAF;
box-shadow: 0px 8px 24px rgba(210, 208, 225, 0.4);
}
.MuiTooltip-popper > .MuiTooltip-tooltip .MuiTooltip-arrow::before {
background: #fff;
}

153
src/pages/Questions/ButtonsOptionsAndPict.tsx
View File

@ -3,28 +3,37 @@ import React from "react";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Clue from "../../assets/icons/questionsPage/clue";
import Branching from "../../assets/icons/questionsPage/branching";
import { Box, IconButton, useTheme } from "@mui/material";
import { Box, IconButton, Tooltip, Typography, useTheme } from "@mui/material";
import HideIcon from "../../assets/icons/questionsPage/hideIcon";
import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import {useParams} from "react-router-dom";
import { questionStore, removeQuestion, resetSomeField} from "@root/questions";
import { useParams } from "react-router-dom";
import { questionStore, removeQuestion, resetSomeField } from "@root/questions";
import { branchStore } from "@root/branches";
import "./ButtonsOptionsAndPict.css";
interface Props {
switchState: string;
SSHC: (data: string) => void;
totalIndex: number
totalIndex: number;
}
export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
export default function ButtonsOptionsAndPict({
SSHC,
switchState,
totalIndex,
}: Props) {
const params = Number(useParams().quizId);
const {openedModalSettings} = questionStore()
const openedModal = () => {
resetSomeField({openedModalSettings: "open"})
console.log(openedModalSettings)
}
const { openedModalSettings } = questionStore();
const { branch } = branchStore();
const theme = useTheme();
const openedModal = () => {
resetSomeField({ openedModalSettings: "open" });
};
return (
<Box
sx={{
@ -46,11 +55,19 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }:
SSHC("setting");
}}
sx={{
backgroundColor: switchState === "setting" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
backgroundColor:
switchState === "setting"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
}}
>
<SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />
<SettingIcon
color={
switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
}
/>
Настройки
</MiniButtonSetting>
<MiniButtonSetting
@ -58,37 +75,98 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }:
SSHC("help");
}}
sx={{
backgroundColor: switchState === "help" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
backgroundColor:
switchState === "help"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
}}
>
<Clue color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main} />
<Clue
color={
switchState === "help" ? "#ffffff" : theme.palette.grey3.main
}
/>
Помощь
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => {
SSHC("branching");
openedModal()
}}
sx={{
backgroundColor: switchState === "branching" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "branching" ? "#ffffff" : theme.palette.grey3.main,
}}
<Tooltip
arrow
placement="right"
title={
<Box>
<Typography
sx={{
color: "#4D4D4D",
fontWeight: "bold",
fontSize: "14px",
marginBottom: "10px",
}}
>
Будет показан при условии
</Typography>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
Название
</Typography>
<Typography
sx={{
fontWeight: "bold",
fontSize: "12px",
marginBottom: "10px",
}}
>
Условие 1, Условие 2
</Typography>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
Все условия обязательны
</Typography>
</Box>
}
>
<Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />
Ветвление
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => {
SSHC("branching");
openedModal();
}}
sx={{
backgroundColor:
switchState === "branching"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main,
}}
>
<Branching
color={
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main
}
/>
Ветвление
</MiniButtonSetting>
</Tooltip>
<MiniButtonSetting
onClick={() => {
SSHC("image");
}}
sx={{
backgroundColor: switchState === "image" ? theme.palette.brightPurple.main : "transparent",
color: switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
backgroundColor:
switchState === "image"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
}}
>
<ImgIcon color={switchState === "image" ? "#ffffff" : theme.palette.grey3.main} />
<ImgIcon
color={
switchState === "image" ? "#ffffff" : theme.palette.grey3.main
}
/>
Изображение
</MiniButtonSetting>
</Box>
@ -98,13 +176,16 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }:
}}
>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon color={"#4D4D4D"}/>
<HideIcon color={"#4D4D4D"} />
</IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<CopyIcon color={"#4D4D4D"}/>
<CopyIcon color={"#4D4D4D"} />
</IconButton>
<IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(totalIndex)}>
<DeleteIcon color={"#4D4D4D"}/>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => removeQuestion(totalIndex)}
>
<DeleteIcon color={"#4D4D4D"} />
</IconButton>
</Box>
</Box>