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

fix: branchOptions

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-13 14:28:51 +03:00
parent 9eea74c18e
commit 8c983cb91a
2 changed files with 240 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
src/pages/Questions/ButtonsOptions.tsx
View File

@ -129,140 +129,130 @@ export default function ButtonsOptions({
{buttonSetting.map(({ icon, title, value, myFunc }) => ( {buttonSetting.map(({ icon, title, value, myFunc }) => (
<Box key={value}> <Box key={value}>
{value === "branching" ? ( {value === "branching" ? (
quize.config.type === "quize" && ( <Tooltip
<Tooltip arrow
arrow placement="right"
placement="right" title={
title={ <Box>
<Box> <Typography
<Typography sx={{
sx={{ color: "#4D4D4D",
color: "#4D4D4D", fontWeight: "bold",
fontWeight: "bold", fontSize: "14px",
fontSize: "14px", marginBottom: "10px",
marginBottom: "10px", }}
}} >
> Будет показан при условии
Будет показан при условии </Typography>
</Typography> <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}> Название
Название </Typography>
</Typography> <Typography
<Typography sx={{
sx={{ fontWeight: "bold",
fontWeight: "bold", fontSize: "12px",
fontSize: "12px", marginBottom: "10px",
marginBottom: "10px", }}
}} >
> Условие 1, Условие 2
Условие 1, Условие 2 </Typography>
</Typography> <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}> Все условия обязательны
Все условия обязательны </Typography>
</Typography> </Box>
</Box> }
} >
<MiniButtonSetting
key={title}
onClick={() => {
SSHC(value);
myFunc();
}}
sx={{
backgroundColor:
switchState === value
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
height: "30px",
"&:hover": {
color: theme.palette.grey3.main,
"& path": { stroke: theme.palette.grey3.main },
},
}}
> >
<MiniButtonSetting {icon}
key={title} {isWrappMiniButtonSetting ? null : title}
onClick={() => { </MiniButtonSetting>
SSHC(value); </Tooltip>
myFunc();
}}
sx={{
backgroundColor:
switchState === value
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === value
? "#ffffff"
: theme.palette.grey3.main,
minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
height: "30px",
"&:hover": {
color: theme.palette.grey3.main,
"& path": { stroke: theme.palette.grey3.main },
},
}}
>
{icon}
{isWrappMiniButtonSetting ? null : title}
</MiniButtonSetting>
</Tooltip>
)
) : ( ) : (
<> <>
{(value !== "setting" || <MiniButtonSetting
quize.config.type === "quize" || key={title}
(value === "setting" && onClick={() => {
quize.config.type === "form" && SSHC(value);
question.type)) && ( myFunc();
<MiniButtonSetting }}
key={title} sx={{
onClick={() => { backgroundColor:
SSHC(value); switchState === value
myFunc(); ? theme.palette.brightPurple.main
}} : "transparent",
sx={{ color:
backgroundColor: switchState === value
switchState === value ? "#ffffff"
? theme.palette.brightPurple.main : theme.palette.grey3.main,
: "transparent", minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
color: height: "30px",
switchState === value "&:hover": {
? "#ffffff" color: theme.palette.grey3.main,
: theme.palette.grey3.main, "& path": { stroke: theme.palette.grey3.main },
minWidth: isWrappMiniButtonSetting ? "30px" : "64px", },
height: "30px", }}
"&:hover": { >
color: theme.palette.grey3.main, {icon}
"& path": { stroke: theme.palette.grey3.main }, {isWrappMiniButtonSetting ? null : title}
}, </MiniButtonSetting>
}}
>
{icon}
{isWrappMiniButtonSetting ? null : title}
</MiniButtonSetting>
)}
</> </>
)} )}
</Box> </Box>
))} ))}
{quize.config.type === "quize" && ( <>
<> <MiniButtonSetting
<MiniButtonSetting onClick={() => setOpenedReallyChangingModal(true)}
onClick={() => setOpenedReallyChangingModal(true)} sx={{
sx={{ minWidth: "30px",
minWidth: "30px", height: "30px",
height: "30px", backgroundColor: "#FEDFD0",
backgroundColor: "#FEDFD0", }}
}} >
> <DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} /> </MiniButtonSetting>
</MiniButtonSetting> <MiniButtonSetting
<MiniButtonSetting onClick={() => setOpenedReallyChangingModal(true)}
onClick={() => setOpenedReallyChangingModal(true)} sx={{
sx={{ minWidth: "30px",
minWidth: "30px", height: "30px",
height: "30px", backgroundColor: "#FEDFD0",
backgroundColor: "#FEDFD0", }}
}} >
> <DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} /> </MiniButtonSetting>
</MiniButtonSetting> <MiniButtonSetting
<MiniButtonSetting onClick={() => setOpenedReallyChangingModal(true)}
onClick={() => setOpenedReallyChangingModal(true)} sx={{
sx={{ minWidth: "30px",
minWidth: "30px", height: "30px",
height: "30px", backgroundColor: "#FEDFD0",
backgroundColor: "#FEDFD0", }}
}} >
> <VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} /> </MiniButtonSetting>
</MiniButtonSetting> </>
</>
)}
</Box> </Box>
<Box <Box
sx={{ sx={{

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

@ -149,160 +149,156 @@ export default function ButtonsOptionsAndPict({
/> />
{isIconMobile ? null : "Подсказка"} {isIconMobile ? null : "Подсказка"}
</MiniButtonSetting> </MiniButtonSetting>
{quize.config.type === "quize" && ( <>
<> <Tooltip
<Tooltip arrow
arrow placement="right"
placement="right" componentsProps={{
componentsProps={{ tooltip: {
tooltip: { sx: {
sx: { background: "#fff",
background: "#fff", borderRadius: "6px",
borderRadius: "6px", color: "#9A9AAF",
color: "#9A9AAF", boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", "& .MuiTooltip-arrow": {
"& .MuiTooltip-arrow": { color: "#FFF",
color: "#FFF",
},
}, },
}, },
}} },
title={ }}
<Box> title={
<Typography <Box>
sx={{ <Typography
color: "#4D4D4D", sx={{
fontWeight: "bold", color: "#4D4D4D",
fontSize: "14px", fontWeight: "bold",
marginBottom: "10px", fontSize: "14px",
}} marginBottom: "10px",
> }}
Будет показан при условии >
</Typography> Будет показан при условии
<Typography sx={{ fontWeight: "bold", fontSize: "12px" }}> </Typography>
Название <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
</Typography> Название
<Typography </Typography>
sx={{ <Typography
fontWeight: "bold", sx={{
fontSize: "12px", fontWeight: "bold",
marginBottom: "10px", fontSize: "12px",
}} marginBottom: "10px",
> }}
Условие 1, Условие 2 >
</Typography> Условие 1, Условие 2
<Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}> </Typography>
Все условия обязательны <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
</Typography> Все условия обязательны
</Box> </Typography>
} </Box>
> }
<MiniButtonSetting >
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
SSHC("branching");
openedModal();
}}
sx={{
height: "30px",
maxWidth: "103px",
minWidth: isIconMobile ? "30px" : "64px",
backgroundColor:
switchState === "branching"
? theme.palette.brightPurple.main
: "transparent",
color:
switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main,
"&:hover": {
color:
switchState === "branching"
? theme.palette.grey3.main
: null,
},
}}
>
<Branching
color={
buttonHover === "branching"
? theme.palette.grey3.main
: switchState === "branching"
? "#ffffff"
: theme.palette.grey3.main
}
/>
{isIconMobile ? null : "Ветвление"}
</MiniButtonSetting>
</Tooltip>
<MiniButtonSetting <MiniButtonSetting
onMouseEnter={() => setButtonHover("image")} onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")} onMouseLeave={() => setButtonHover("")}
onClick={() => { onClick={() => {
SSHC("image"); SSHC("branching");
openedModal();
}} }}
sx={{ sx={{
height: "30px", height: "30px",
maxWidth: "123px", maxWidth: "103px",
minWidth: isIconMobile ? "30px" : "64px", minWidth: isIconMobile ? "30px" : "64px",
backgroundColor: backgroundColor:
switchState === "image" switchState === "branching"
? theme.palette.brightPurple.main ? theme.palette.brightPurple.main
: "transparent", : "transparent",
color: color:
switchState === "image" switchState === "branching"
? "#ffffff" ? "#ffffff"
: theme.palette.grey3.main, : theme.palette.grey3.main,
"&:hover": { "&:hover": {
color: color:
switchState === "image" ? theme.palette.grey3.main : null, switchState === "branching"
? theme.palette.grey3.main
: null,
}, },
}} }}
> >
<ImgIcon <Branching
color={ color={
buttonHover === "image" buttonHover === "branching"
? theme.palette.grey3.main ? theme.palette.grey3.main
: switchState === "image" : switchState === "branching"
? "#ffffff" ? "#ffffff"
: theme.palette.grey3.main : theme.palette.grey3.main
} }
/> />
{isIconMobile ? null : "Изображение"} {isIconMobile ? null : "Ветвление"}
</MiniButtonSetting> </MiniButtonSetting>
<MiniButtonSetting </Tooltip>
onClick={() => setOpenedReallyChangingModal(true)} <MiniButtonSetting
sx={{ onMouseEnter={() => setButtonHover("image")}
minWidth: "30px", onMouseLeave={() => setButtonHover("")}
height: "30px", onClick={() => {
backgroundColor: "#FEDFD0", SSHC("image");
}} }}
> sx={{
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} /> height: "30px",
</MiniButtonSetting> maxWidth: "123px",
<MiniButtonSetting minWidth: isIconMobile ? "30px" : "64px",
onClick={() => setOpenedReallyChangingModal(true)} backgroundColor:
sx={{ switchState === "image"
minWidth: "30px", ? theme.palette.brightPurple.main
height: "30px", : "transparent",
backgroundColor: "#FEDFD0", color:
}} switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
> "&:hover": {
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} /> color:
</MiniButtonSetting> switchState === "image" ? theme.palette.grey3.main : null,
<MiniButtonSetting },
onClick={() => setOpenedReallyChangingModal(true)} }}
sx={{ >
minWidth: "30px", <ImgIcon
height: "30px", color={
backgroundColor: "#FEDFD0", buttonHover === "image"
}} ? theme.palette.grey3.main
> : switchState === "image"
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} /> ? "#ffffff"
</MiniButtonSetting> : theme.palette.grey3.main
</> }
)} />
{isIconMobile ? null : "Изображение"}
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => setOpenedReallyChangingModal(true)}
sx={{
minWidth: "30px",
height: "30px",
backgroundColor: "#FEDFD0",
}}
>
<DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => setOpenedReallyChangingModal(true)}
sx={{
minWidth: "30px",
height: "30px",
backgroundColor: "#FEDFD0",
}}
>
<DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting>
<MiniButtonSetting
onClick={() => setOpenedReallyChangingModal(true)}
sx={{
minWidth: "30px",
height: "30px",
backgroundColor: "#FEDFD0",
}}
>
<VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
</MiniButtonSetting>
</>
</Box> </Box>
<Box <Box
sx={{ sx={{