Merge branch 'dev' of penahub.gitlab.yandexcloud.net:frontend/squiz into dev
This commit is contained in:
commit
7e84a3006b
190
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
190
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
@ -37,21 +37,17 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
const quiz = useCurrentQuiz();
|
||||
const [widgetWidth, setWidgetWidth] = useState<string>("");
|
||||
const [widgetHeight, setWidgetHeight] = useState<string>("");
|
||||
const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] =
|
||||
useState<boolean>(false);
|
||||
const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState<boolean>(false);
|
||||
const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
|
||||
const [rounded, setRounded] = useState<boolean>(false);
|
||||
const [withShadow, setWithShadow] = useState<boolean>(false);
|
||||
const [buttonFlash, setButtonFlash] = useState<boolean>(false);
|
||||
const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(
|
||||
theme.palette.brightPurple.main,
|
||||
);
|
||||
const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(theme.palette.brightPurple.main);
|
||||
const [buttonTextColor, setButtonTextColor] = useState<string>("#FFFFFF");
|
||||
const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
|
||||
const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
|
||||
const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
|
||||
const [position, setPosition] =
|
||||
useState<BannerWidgetParams["position"]>("bottomleft");
|
||||
const [position, setPosition] = useState<BannerWidgetParams["position"]>("bottomleft");
|
||||
const [bannerFullWidth, setBannerFullWidth] = useState<boolean>(false);
|
||||
const [autoShowWidgetTime, setAutoShowWidgetTime] = useState<number>(10);
|
||||
const [appealText, setAppealText] = useState<string>("");
|
||||
@ -88,12 +84,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
: undefined,
|
||||
});
|
||||
|
||||
return (
|
||||
<WidgetScript
|
||||
scriptText={scriptText}
|
||||
helperText="Установите код внутрь тэга head"
|
||||
/>
|
||||
);
|
||||
return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -129,17 +120,39 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
sx={[
|
||||
{
|
||||
position: "absolute",
|
||||
top: "calc(12.5 / 262 * 100%)",
|
||||
left: "calc(50.6 / 520 * 100%)",
|
||||
width: "calc(196 / 520 * 100%)",
|
||||
height: "calc(30 / 262 * 100%)",
|
||||
},
|
||||
bannerFullWidth && {
|
||||
top: "calc(7 / 262 * 100%)",
|
||||
left: "calc(45 / 520 * 100%)",
|
||||
width: "calc(348 / 520 * 100%)",
|
||||
height: "calc(30 / 262 * 100%)",
|
||||
position === "topleft" && {
|
||||
top: "calc(12.5 / 262 * 100%)",
|
||||
left: "calc(50.6 / 520 * 100%)",
|
||||
},
|
||||
position === "topright" && {
|
||||
top: "calc(12.5 / 262 * 100%)",
|
||||
left: "calc(190 / 520 * 100%)",
|
||||
},
|
||||
position === "bottomleft" && {
|
||||
top: "calc(178 / 262 * 100%)",
|
||||
left: "calc(50.6 / 520 * 100%)",
|
||||
},
|
||||
position === "bottomright" && {
|
||||
top: "calc(178 / 262 * 100%)",
|
||||
left: "calc(190 / 520 * 100%)",
|
||||
},
|
||||
bannerFullWidth &&
|
||||
position.startsWith("top") && {
|
||||
top: "calc(7 / 262 * 100%)",
|
||||
left: "calc(45 / 520 * 100%)",
|
||||
width: "calc(348 / 520 * 100%)",
|
||||
height: "calc(30 / 262 * 100%)",
|
||||
},
|
||||
bannerFullWidth &&
|
||||
position.startsWith("bottom") && {
|
||||
top: "calc(185 / 262 * 100%)",
|
||||
left: "calc(45 / 520 * 100%)",
|
||||
width: "calc(348 / 520 * 100%)",
|
||||
height: "calc(30 / 262 * 100%)",
|
||||
},
|
||||
pulsation && {
|
||||
":before": {
|
||||
content: "''",
|
||||
@ -196,16 +209,10 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
fontSize="calc(6 / 29.5 * 100cqh)"
|
||||
lineHeight="120%"
|
||||
>
|
||||
<Typography fontSize="calc(6 / 29.5 * 100cqh)" lineHeight="120%">
|
||||
{appealText || "Пройти тест"}
|
||||
</Typography>
|
||||
<Typography
|
||||
fontSize="calc(11 / 29.5 * 100cqh)"
|
||||
lineHeight="120%"
|
||||
>
|
||||
<Typography fontSize="calc(11 / 29.5 * 100cqh)" lineHeight="120%">
|
||||
{quizHeaderText || "Заголовок теста"}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -220,8 +227,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
height: "calc(10 / 29.5 * 100%)",
|
||||
width: "auto",
|
||||
aspectRatio: 1,
|
||||
backgroundColor:
|
||||
rounded || bannerFullWidth ? "#581CA7" : undefined,
|
||||
backgroundColor: rounded || bannerFullWidth ? "#581CA7" : undefined,
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
@ -255,9 +261,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Ширина окна (px)
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Ширина окна (px)</Typography>
|
||||
<PenaTextField
|
||||
type="number"
|
||||
value={widgetWidth}
|
||||
@ -273,9 +277,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Высота окна (px)
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Высота окна (px)</Typography>
|
||||
<PenaTextField
|
||||
type="number"
|
||||
value={widgetHeight}
|
||||
@ -286,18 +288,14 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
</Box>
|
||||
</Box>
|
||||
</Collapse>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Текст-призыв
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Текст-призыв</Typography>
|
||||
<PenaTextField
|
||||
placeholder="Пройти тест"
|
||||
value={appealText}
|
||||
onChange={(e) => setAppealText(e.target.value)}
|
||||
FormControlSx={{ maxWidth: "360px" }}
|
||||
/>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Заголовок quiz
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Заголовок quiz</Typography>
|
||||
<PenaTextField
|
||||
placeholder="Заголовок quiz"
|
||||
value={quizHeaderText}
|
||||
@ -311,9 +309,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Показывать через
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
|
||||
<PenaTextField
|
||||
type="number"
|
||||
value={autoShowWidgetTime}
|
||||
@ -322,9 +318,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
width: "90px",
|
||||
}}
|
||||
/>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
секунд
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
@ -333,20 +327,10 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Цвет кнопки
|
||||
</Typography>
|
||||
<CircleColorPicker
|
||||
color={buttonBackgroundColor}
|
||||
onChange={(color) => setButtonBackgroundColor(color)}
|
||||
/>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Цвет текста кнопки
|
||||
</Typography>
|
||||
<CircleColorPicker
|
||||
color={buttonTextColor}
|
||||
onChange={(color) => setButtonTextColor(color)}
|
||||
/>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
|
||||
<CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
|
||||
<CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
|
||||
</Box>
|
||||
<CustomCheckbox
|
||||
label="Баннер на всю ширину экрана"
|
||||
@ -356,9 +340,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
if (e.target.checked) setPosition("topleft");
|
||||
}}
|
||||
/>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Расположение
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Расположение</Typography>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
value={position}
|
||||
@ -384,17 +366,13 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
<FormControlLabel
|
||||
label="Сверху страницы"
|
||||
value="topleft"
|
||||
control={
|
||||
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
|
||||
}
|
||||
control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
/>
|
||||
<FormControlLabel
|
||||
label="Снизу страницы"
|
||||
value="bottomleft"
|
||||
control={
|
||||
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
|
||||
}
|
||||
control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
/>
|
||||
</Box>
|
||||
@ -409,23 +387,13 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
<FormControlLabel
|
||||
label="Слева сверху"
|
||||
value="topleft"
|
||||
control={
|
||||
<Radio
|
||||
checkedIcon={<RadioCheck />}
|
||||
icon={<RadioIcon />}
|
||||
/>
|
||||
}
|
||||
control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
/>
|
||||
<FormControlLabel
|
||||
label="Справа сверху"
|
||||
value="topright"
|
||||
control={
|
||||
<Radio
|
||||
checkedIcon={<RadioCheck />}
|
||||
icon={<RadioIcon />}
|
||||
/>
|
||||
}
|
||||
label="Слева снизу"
|
||||
value="bottomleft"
|
||||
control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
/>
|
||||
</Box>
|
||||
@ -436,25 +404,15 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
label="Слева снизу"
|
||||
value="bottomleft"
|
||||
control={
|
||||
<Radio
|
||||
checkedIcon={<RadioCheck />}
|
||||
icon={<RadioIcon />}
|
||||
/>
|
||||
}
|
||||
label="Справа сверху"
|
||||
value="topright"
|
||||
control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
/>
|
||||
<FormControlLabel
|
||||
label="Справа снизу"
|
||||
value="bottomright"
|
||||
control={
|
||||
<Radio
|
||||
checkedIcon={<RadioCheck />}
|
||||
icon={<RadioIcon />}
|
||||
/>
|
||||
}
|
||||
control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
/>
|
||||
</Box>
|
||||
@ -462,26 +420,12 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
)}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Параметры
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Параметры</Typography>
|
||||
{!bannerFullWidth && (
|
||||
<CustomCheckbox
|
||||
label="Закругленная"
|
||||
checked={rounded}
|
||||
handleChange={(e) => setRounded(e.target.checked)}
|
||||
/>
|
||||
<CustomCheckbox label="Закругленная" checked={rounded} handleChange={(e) => setRounded(e.target.checked)} />
|
||||
)}
|
||||
<CustomCheckbox
|
||||
label="С тенью"
|
||||
checked={withShadow}
|
||||
handleChange={(e) => setWithShadow(e.target.checked)}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
label="С бликом"
|
||||
checked={buttonFlash}
|
||||
handleChange={(e) => setButtonFlash(e.target.checked)}
|
||||
/>
|
||||
<CustomCheckbox label="С тенью" checked={withShadow} handleChange={(e) => setWithShadow(e.target.checked)} />
|
||||
<CustomCheckbox label="С бликом" checked={buttonFlash} handleChange={(e) => setButtonFlash(e.target.checked)} />
|
||||
<CustomCheckbox
|
||||
label={'Эффект "пульсация"'}
|
||||
checked={pulsation}
|
||||
@ -546,22 +490,16 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Показывать через
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
|
||||
<PenaTextField
|
||||
type="number"
|
||||
value={autoShowQuizTime}
|
||||
onChange={(e) =>
|
||||
setAutoShowQuizTime(parseInt(e.target.value))
|
||||
}
|
||||
onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))}
|
||||
FormControlSx={{
|
||||
width: "90px",
|
||||
}}
|
||||
/>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
секунд
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Collapse>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user