diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx index a0ed5250..6e790cf1 100644 --- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx +++ b/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(""); const [widgetHeight, setWidgetHeight] = useState(""); - const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = - useState(false); + const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState(false); const [hideOnMobile, setHideOnMobile] = useState(false); const [rounded, setRounded] = useState(false); const [withShadow, setWithShadow] = useState(false); const [buttonFlash, setButtonFlash] = useState(false); - const [buttonBackgroundColor, setButtonBackgroundColor] = useState( - theme.palette.brightPurple.main, - ); + const [buttonBackgroundColor, setButtonBackgroundColor] = useState(theme.palette.brightPurple.main); const [buttonTextColor, setButtonTextColor] = useState("#FFFFFF"); const [autoShowQuiz, setAutoShowQuiz] = useState(false); const [autoShowQuizTime, setAutoShowQuizTime] = useState(10); const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState(false); - const [position, setPosition] = - useState("bottomleft"); + const [position, setPosition] = useState("bottomleft"); const [bannerFullWidth, setBannerFullWidth] = useState(false); const [autoShowWidgetTime, setAutoShowWidgetTime] = useState(10); const [appealText, setAppealText] = useState(""); @@ -88,12 +84,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) { : undefined, }); - return ( - - ); + return ; } 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", }} > - + {appealText || "Пройти тест"} - + {quizHeaderText || "Заголовок теста"} @@ -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", }} > - - Ширина окна (px) - + Ширина окна (px) - - Высота окна (px) - + Высота окна (px) - - Текст-призыв - + Текст-призыв setAppealText(e.target.value)} FormControlSx={{ maxWidth: "360px" }} /> - - Заголовок quiz - + Заголовок quiz - - Показывать через - + Показывать через - - секунд - + секунд - - Цвет кнопки - - setButtonBackgroundColor(color)} - /> - - Цвет текста кнопки - - setButtonTextColor(color)} - /> + Цвет кнопки + setButtonBackgroundColor(color)} /> + Цвет текста кнопки + setButtonTextColor(color)} /> - - Расположение - + Расположение } icon={} /> - } + control={} icon={} />} sx={{ color: theme.palette.grey2.main }} /> } icon={} /> - } + control={} icon={} />} sx={{ color: theme.palette.grey2.main }} /> @@ -409,23 +387,13 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) { } - icon={} - /> - } + control={} icon={} />} sx={{ color: theme.palette.grey2.main }} /> } - icon={} - /> - } + label="Слева снизу" + value="bottomleft" + control={} icon={} />} sx={{ color: theme.palette.grey2.main }} /> @@ -436,25 +404,15 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) { }} > } - icon={} - /> - } + label="Справа сверху" + value="topright" + control={} icon={} />} sx={{ color: theme.palette.grey2.main }} /> } - icon={} - /> - } + control={} icon={} />} sx={{ color: theme.palette.grey2.main }} /> @@ -462,26 +420,12 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) { )} - - Параметры - + Параметры {!bannerFullWidth && ( - setRounded(e.target.checked)} - /> + setRounded(e.target.checked)} /> )} - setWithShadow(e.target.checked)} - /> - setButtonFlash(e.target.checked)} - /> + setWithShadow(e.target.checked)} /> + setButtonFlash(e.target.checked)} /> - - Показывать через - + Показывать через - setAutoShowQuizTime(parseInt(e.target.value)) - } + onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))} FormControlSx={{ width: "90px", }} /> - - секунд - + секунд