fix: branchOptions
This commit is contained in:
IlyaDoronin
parent
9eea74c18e
commit
8c983cb91a
@ -129,140 +129,130 @@ export default function ButtonsOptions({
|
||||
{buttonSetting.map(({ icon, title, value, myFunc }) => (
|
||||
<Box key={value}>
|
||||
{value === "branching" ? (
|
||||
quize.config.type === "quize" && (
|
||||
<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>
|
||||
}
|
||||
<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>
|
||||
}
|
||||
>
|
||||
<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
|
||||
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 },
|
||||
},
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
{isWrappMiniButtonSetting ? null : title}
|
||||
</MiniButtonSetting>
|
||||
</Tooltip>
|
||||
)
|
||||
{icon}
|
||||
{isWrappMiniButtonSetting ? null : title}
|
||||
</MiniButtonSetting>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<>
|
||||
{(value !== "setting" ||
|
||||
quize.config.type === "quize" ||
|
||||
(value === "setting" &&
|
||||
quize.config.type === "form" &&
|
||||
question.type)) && (
|
||||
<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 },
|
||||
},
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
{isWrappMiniButtonSetting ? null : title}
|
||||
</MiniButtonSetting>
|
||||
)}
|
||||
<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 },
|
||||
},
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
{isWrappMiniButtonSetting ? null : title}
|
||||
</MiniButtonSetting>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
{quize.config.type === "quize" && (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
<>
|
||||
<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
|
||||
sx={{
|
||||
|
||||
@ -149,160 +149,156 @@ export default function ButtonsOptionsAndPict({
|
||||
/>
|
||||
{isIconMobile ? null : "Подсказка"}
|
||||
</MiniButtonSetting>
|
||||
{quize.config.type === "quize" && (
|
||||
<>
|
||||
<Tooltip
|
||||
arrow
|
||||
placement="right"
|
||||
componentsProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
background: "#fff",
|
||||
borderRadius: "6px",
|
||||
color: "#9A9AAF",
|
||||
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
||||
"& .MuiTooltip-arrow": {
|
||||
color: "#FFF",
|
||||
},
|
||||
<>
|
||||
<Tooltip
|
||||
arrow
|
||||
placement="right"
|
||||
componentsProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
background: "#fff",
|
||||
borderRadius: "6px",
|
||||
color: "#9A9AAF",
|
||||
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
||||
"& .MuiTooltip-arrow": {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
}}
|
||||
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>
|
||||
}
|
||||
>
|
||||
<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>
|
||||
},
|
||||
}}
|
||||
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>
|
||||
}
|
||||
>
|
||||
<MiniButtonSetting
|
||||
onMouseEnter={() => setButtonHover("image")}
|
||||
onMouseEnter={() => setButtonHover("branching")}
|
||||
onMouseLeave={() => setButtonHover("")}
|
||||
onClick={() => {
|
||||
SSHC("image");
|
||||
SSHC("branching");
|
||||
openedModal();
|
||||
}}
|
||||
sx={{
|
||||
height: "30px",
|
||||
maxWidth: "123px",
|
||||
maxWidth: "103px",
|
||||
minWidth: isIconMobile ? "30px" : "64px",
|
||||
backgroundColor:
|
||||
switchState === "image"
|
||||
switchState === "branching"
|
||||
? theme.palette.brightPurple.main
|
||||
: "transparent",
|
||||
color:
|
||||
switchState === "image"
|
||||
switchState === "branching"
|
||||
? "#ffffff"
|
||||
: theme.palette.grey3.main,
|
||||
"&:hover": {
|
||||
color:
|
||||
switchState === "image" ? theme.palette.grey3.main : null,
|
||||
switchState === "branching"
|
||||
? theme.palette.grey3.main
|
||||
: null,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ImgIcon
|
||||
<Branching
|
||||
color={
|
||||
buttonHover === "image"
|
||||
buttonHover === "branching"
|
||||
? theme.palette.grey3.main
|
||||
: switchState === "image"
|
||||
: switchState === "branching"
|
||||
? "#ffffff"
|
||||
: theme.palette.grey3.main
|
||||
}
|
||||
/>
|
||||
{isIconMobile ? null : "Изображение"}
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
</Tooltip>
|
||||
<MiniButtonSetting
|
||||
onMouseEnter={() => setButtonHover("image")}
|
||||
onMouseLeave={() => setButtonHover("")}
|
||||
onClick={() => {
|
||||
SSHC("image");
|
||||
}}
|
||||
sx={{
|
||||
height: "30px",
|
||||
maxWidth: "123px",
|
||||
minWidth: isIconMobile ? "30px" : "64px",
|
||||
backgroundColor:
|
||||
switchState === "image"
|
||||
? theme.palette.brightPurple.main
|
||||
: "transparent",
|
||||
color:
|
||||
switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
|
||||
"&:hover": {
|
||||
color:
|
||||
switchState === "image" ? theme.palette.grey3.main : null,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ImgIcon
|
||||
color={
|
||||
buttonHover === "image"
|
||||
? theme.palette.grey3.main
|
||||
: switchState === "image"
|
||||
? "#ffffff"
|
||||
: 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
|
||||
sx={{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user