feat: info icon tooltips
This commit is contained in:
parent
f158726935
commit
49271576ba
@ -15,6 +15,7 @@ import {
|
||||
SelectChangeEvent,
|
||||
TextField,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import Stepper from "@ui_kit/Stepper";
|
||||
@ -46,11 +47,27 @@ type BackgroundType = "text" | "video";
|
||||
|
||||
export default function InstallQuiz() {
|
||||
const buttonInstall: { icon: string; title: string; text: string }[] = [
|
||||
{ icon: OnButton, title: "По кнопке", text: "Конструктор кнопки или собственная кнопка" },
|
||||
{
|
||||
icon: OnButton,
|
||||
title: "По кнопке",
|
||||
text: "Конструктор кнопки или собственная кнопка",
|
||||
},
|
||||
{ icon: Bunner, title: "Баннером", text: "Сбоку или на всю ширину экрана" },
|
||||
{ icon: InBidySite, title: "В тело сайта", text: "Задайте свои размеры и встройте в сайт" },
|
||||
{ icon: AutoOpen, title: "Автооткрытие", text: "Автооткрытие поп-ап на сайте" },
|
||||
{ icon: WidgetImg, title: "Виджет", text: "Сбоку страницы как консультант" },
|
||||
{
|
||||
icon: InBidySite,
|
||||
title: "В тело сайта",
|
||||
text: "Задайте свои размеры и встройте в сайт",
|
||||
},
|
||||
{
|
||||
icon: AutoOpen,
|
||||
title: "Автооткрытие",
|
||||
text: "Автооткрытие поп-ап на сайте",
|
||||
},
|
||||
{
|
||||
icon: WidgetImg,
|
||||
title: "Виджет",
|
||||
text: "Сбоку страницы как консультант",
|
||||
},
|
||||
];
|
||||
|
||||
const [activeStep, setActiveStep] = React.useState(5);
|
||||
@ -97,8 +114,20 @@ export default function InstallQuiz() {
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<LinkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
|
||||
<Typography>Ссылка на квиз</Typography> <InfoIcon />
|
||||
<LinkIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
bgcolor={"#EEE4FC"}
|
||||
/>
|
||||
<Typography>Ссылка на квиз</Typography>
|
||||
|
||||
<Tooltip
|
||||
title="Скопируйте или укажите свою ссылку на квиз. Ссылка должна быть от 4 до 20 символов включительно, может содержать латинские буквы, цифры, тире '-' и нижнее подчеркивание '_'."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
@ -223,9 +252,19 @@ export default function InstallQuiz() {
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<CopyIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} marL={"10px"} />
|
||||
<CopyIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
bgcolor={"#EEE4FC"}
|
||||
marL={"10px"}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<ButtonSocial />
|
||||
|
||||
<Typography sx={{ color: "#FC712F" }}>Не опубликован</Typography>
|
||||
@ -245,11 +284,16 @@ export default function InstallQuiz() {
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<VkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
|
||||
<VkIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
bgcolor={"#EEE4FC"}
|
||||
/>
|
||||
<Typography> Вконтакте</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography>Для публикации сниппета на стене группы, призывающего пройти тест.</Typography>
|
||||
<Typography>
|
||||
Для публикации сниппета на стене группы, призывающего пройти тест.
|
||||
</Typography>
|
||||
<Link
|
||||
component="button"
|
||||
onClick={handleOpenVk}
|
||||
@ -278,10 +322,16 @@ export default function InstallQuiz() {
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<DomenIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
|
||||
<DomenIcon
|
||||
color={theme.palette.brightPurple.main}
|
||||
bgcolor={"#EEE4FC"}
|
||||
/>
|
||||
<Typography>Свой домен</Typography>
|
||||
</Box>
|
||||
<Typography>Подключите свой домен, если хотите, чтобы квиз открывался по вашей ссылке.</Typography>
|
||||
<Typography>
|
||||
Подключите свой домен, если хотите, чтобы квиз открывался по вашей
|
||||
ссылке.
|
||||
</Typography>
|
||||
<Link
|
||||
component="button"
|
||||
onClick={handleOpenDom}
|
||||
@ -338,7 +388,13 @@ export default function InstallQuiz() {
|
||||
>
|
||||
<img src={e.icon} />
|
||||
<Typography>{e.title}</Typography>
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.grey2.main, textAlign: "start" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color: theme.palette.grey2.main,
|
||||
textAlign: "start",
|
||||
}}
|
||||
>
|
||||
{e.text}
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
@ -351,8 +407,13 @@ export default function InstallQuiz() {
|
||||
<AutoOpenInstall />
|
||||
<VidjetInstall />
|
||||
<InstallQzCode />
|
||||
<Box sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}>
|
||||
<Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
|
||||
<Box
|
||||
sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ padding: "10px 20px", borderRadius: "8px" }}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button variant="contained">Запустить рекламу</Button>
|
||||
@ -387,7 +448,9 @@ export default function InstallQuiz() {
|
||||
background: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Добавить квиз в группу ВК</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Добавить квиз в группу ВК
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
@ -408,19 +471,31 @@ export default function InstallQuiz() {
|
||||
<Typography>1. Добавьте приложение в сообщество</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ maxWidth: "275px", display: "flex", gap: "10px", padding: "13px 15px" }}
|
||||
sx={{
|
||||
maxWidth: "275px",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
padding: "13px 15px",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
<VkIconButton />
|
||||
Добавить приложение
|
||||
</Button>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Для публикации сниппета на стене, призывающего пройти тест, вставьте в новую запись ссылку на приложение
|
||||
Для публикации сниппета на стене, призывающего пройти тест,
|
||||
вставьте в новую запись ссылку на приложение
|
||||
</Typography>
|
||||
<CustomTextField placeholder={""} text={"https://vk.com/app6656524_-XXXXXXXXXXX"} />
|
||||
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
|
||||
где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки можно узнать в браузерной строке, открыв
|
||||
приложение в вашей группе
|
||||
<CustomTextField
|
||||
placeholder={""}
|
||||
text={"https://vk.com/app6656524_-XXXXXXXXXXX"}
|
||||
/>
|
||||
<Typography
|
||||
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
|
||||
>
|
||||
где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки
|
||||
можно узнать в браузерной строке, открыв приложение в вашей
|
||||
группе
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@ -431,13 +506,24 @@ export default function InstallQuiz() {
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Typography>2. Откройте квиз в группе (вы должны быть администратором группы)</Typography>
|
||||
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
|
||||
Справа снизу нажмите на значок "редактировать" В появившемся окне введите id квиза и нажмите
|
||||
"Привязать". Готово! Квиз привязан к группе
|
||||
<Typography>
|
||||
2. Откройте квиз в группе (вы должны быть администратором
|
||||
группы)
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>ID этого квиза</Typography>
|
||||
<CustomTextField placeholder={""} text={"639727c5177be5004f11a0f2"} />
|
||||
<Typography
|
||||
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
|
||||
>
|
||||
Справа снизу нажмите на значок "редактировать" В появившемся
|
||||
окне введите id квиза и нажмите "Привязать". Готово! Квиз
|
||||
привязан к группе
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
ID этого квиза
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
placeholder={""}
|
||||
text={"639727c5177be5004f11a0f2"}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
|
||||
@ -479,7 +565,9 @@ export default function InstallQuiz() {
|
||||
background: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Подключить свой домен</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Подключить свой домен
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
@ -497,14 +585,21 @@ export default function InstallQuiz() {
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Подключите домен к проекту, чтобы создать несколько квизов на одном домене
|
||||
Подключите домен к проекту, чтобы создать несколько квизов на
|
||||
одном домене
|
||||
</Typography>
|
||||
<Typography>1. Настройте записи в регистраторе домена</Typography>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
|
||||
<SelectableButton
|
||||
isSelected={backgroundType === "text"}
|
||||
onClick={() => setBackgroundType("text")}
|
||||
>
|
||||
Для поддоменов
|
||||
</SelectableButton>
|
||||
<SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
|
||||
<SelectableButton
|
||||
isSelected={backgroundType === "video"}
|
||||
onClick={() => setBackgroundType("video")}
|
||||
>
|
||||
Для доменов
|
||||
</SelectableButton>
|
||||
</Box>
|
||||
@ -538,7 +633,8 @@ export default function InstallQuiz() {
|
||||
maxWidth: "372px",
|
||||
}}
|
||||
>
|
||||
Как подключить свой домен/поддомен к квизу? Ошибки при подключении домена
|
||||
Как подключить свой домен/поддомен к квизу? Ошибки при
|
||||
подключении домена
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
@ -569,7 +665,10 @@ export default function InstallQuiz() {
|
||||
// onMouseDown={}
|
||||
edge="end"
|
||||
>
|
||||
<CopyIcon color={"#ffffff"} bgcolor={theme.palette.brightPurple.main} />
|
||||
<CopyIcon
|
||||
color={"#ffffff"}
|
||||
bgcolor={theme.palette.brightPurple.main}
|
||||
/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
@ -579,8 +678,11 @@ export default function InstallQuiz() {
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
|
||||
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
|
||||
Привязка домена и обновление DNS записей может занять до 48 часов
|
||||
<Typography
|
||||
sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
|
||||
>
|
||||
Привязка домена и обновление DNS записей может занять до 48
|
||||
часов
|
||||
</Typography>
|
||||
<Button variant="outlined" onClick={handleCloseDom}>
|
||||
Отмена
|
||||
|
@ -1,5 +1,11 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import ButtonsOptions from "../ButtonsOptions";
|
||||
import SwitchData from "./switchData";
|
||||
import { useState, useEffect } from "react";
|
||||
@ -44,7 +50,9 @@ export default function DataOptions({ totalIndex }: Props) {
|
||||
>
|
||||
<Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
|
||||
<SelectableButton
|
||||
isSelected={listQuestions[quizId][totalIndex].content.type === "calendar"}
|
||||
isSelected={
|
||||
listQuestions[quizId][totalIndex].content.type === "calendar"
|
||||
}
|
||||
onClick={() => {
|
||||
const clonContent = listQuestions[quizId][totalIndex].content;
|
||||
clonContent.type = "calendar";
|
||||
@ -55,7 +63,9 @@ export default function DataOptions({ totalIndex }: Props) {
|
||||
Использовать календарь
|
||||
</SelectableButton>
|
||||
<SelectableButton
|
||||
isSelected={listQuestions[quizId][totalIndex].content.type === "mask"}
|
||||
isSelected={
|
||||
listQuestions[quizId][totalIndex].content.type === "mask"
|
||||
}
|
||||
onClick={() => {
|
||||
const clonContent = listQuestions[quizId][totalIndex].content;
|
||||
clonContent.type = "mask";
|
||||
@ -77,10 +87,18 @@ export default function DataOptions({ totalIndex }: Props) {
|
||||
>
|
||||
Пользователю будет предложено выбрать дату
|
||||
</Typography>
|
||||
<InfoIcon />
|
||||
<Tooltip title="Выбор даты." placement="top">
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
|
||||
<ButtonsOptions
|
||||
switchState={switchState}
|
||||
SSHC={SSHC}
|
||||
totalIndex={totalIndex}
|
||||
/>
|
||||
<SwitchData switchState={switchState} totalIndex={totalIndex} />
|
||||
</>
|
||||
);
|
||||
|
@ -1,5 +1,11 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||||
@ -16,7 +22,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
|
||||
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: isWrappColumn ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography>Настройки календаря</Typography>
|
||||
<CustomCheckbox
|
||||
@ -41,7 +53,9 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px",
|
||||
padding: isWrappColumn
|
||||
? "0px 20px 20px 20px "
|
||||
: "20px 20px 20px 20px",
|
||||
minWidth: isWrappColumn ? null : "350px",
|
||||
marginRight: "30px",
|
||||
}}
|
||||
@ -70,8 +84,15 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
}}
|
||||
/>{" "}
|
||||
<InfoIcon />
|
||||
/>
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -1,5 +1,11 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||||
@ -17,7 +23,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: isWrappColumn ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography>Настройки ответов</Typography>
|
||||
<CustomCheckbox
|
||||
@ -41,7 +53,9 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px ",
|
||||
padding: isWrappColumn
|
||||
? "0px 20px 20px 20px "
|
||||
: "20px 20px 20px 20px ",
|
||||
minWidth: isWrappColumn ? null : "350px",
|
||||
marginRight: "30px",
|
||||
}}
|
||||
@ -70,8 +84,15 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
}}
|
||||
/>{" "}
|
||||
<InfoIcon />
|
||||
/>
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -1,5 +1,11 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||||
@ -104,7 +110,14 @@ export default function SettingOptionsAndPict({
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<InfoIcon />
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -1,6 +1,13 @@
|
||||
import { useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
|
||||
@ -36,12 +43,22 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
|
||||
<Button
|
||||
onClick={onClick}
|
||||
variant="outlined"
|
||||
startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
|
||||
startIcon={
|
||||
<Icon
|
||||
color={
|
||||
isActive
|
||||
? theme.palette.navbarbg.main
|
||||
: theme.palette.brightPurple.main
|
||||
}
|
||||
/>
|
||||
}
|
||||
sx={{
|
||||
backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
|
||||
borderRadius: 0,
|
||||
border: "none",
|
||||
color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
|
||||
color: isActive
|
||||
? theme.palette.brightPurple.main
|
||||
: theme.palette.grey2.main,
|
||||
p: "7px",
|
||||
width: "auto",
|
||||
minWidth: 0,
|
||||
@ -51,14 +68,18 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
|
||||
},
|
||||
"&:hover": {
|
||||
border: "none",
|
||||
borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
|
||||
borderColor: isActive
|
||||
? theme.palette.brightPurple.main
|
||||
: theme.palette.grey2.main,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictProps) {
|
||||
export default function SettingOpytionsPict({
|
||||
totalIndex,
|
||||
}: SettingOpytionsPictProps) {
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuestions } = questionStore();
|
||||
const theme = useTheme();
|
||||
@ -100,13 +121,17 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
|
||||
<SelectIconButton
|
||||
key={index}
|
||||
onClick={() => updateProportions(value)}
|
||||
isActive={listQuestions[quizId][totalIndex].content.xy === value}
|
||||
isActive={
|
||||
listQuestions[quizId][totalIndex].content.xy === value
|
||||
}
|
||||
Icon={icon}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
|
||||
<Typography sx={{ marginBottom: "15px" }}>
|
||||
Настройки ответов
|
||||
</Typography>
|
||||
|
||||
<CustomCheckbox
|
||||
sx={{ display: "block" }}
|
||||
@ -166,7 +191,9 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
|
||||
},
|
||||
})
|
||||
}
|
||||
isActive={listQuestions[quizId][totalIndex].content.format === "carousel"}
|
||||
isActive={
|
||||
listQuestions[quizId][totalIndex].content.format === "carousel"
|
||||
}
|
||||
Icon={FormatIcon2}
|
||||
/>
|
||||
<SelectIconButton
|
||||
@ -178,11 +205,15 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
|
||||
},
|
||||
})
|
||||
}
|
||||
isActive={listQuestions[quizId][totalIndex].content.format === "masonry"}
|
||||
isActive={
|
||||
listQuestions[quizId][totalIndex].content.format === "masonry"
|
||||
}
|
||||
Icon={FormatIcon1}
|
||||
/>
|
||||
</Box>
|
||||
<Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
|
||||
<Typography sx={{ marginBottom: "15px" }}>
|
||||
Настройки вопросов
|
||||
</Typography>
|
||||
<CustomCheckbox
|
||||
label={"Необязательный вопрос"}
|
||||
checked={listQuestions[quizId][totalIndex].content.required}
|
||||
@ -210,7 +241,14 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
|
||||
})
|
||||
}
|
||||
/>
|
||||
<InfoIcon />
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import { Box, Typography, Tooltip, useTheme } from "@mui/material";
|
||||
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import ButtonsOptions from "../ButtonsOptions";
|
||||
@ -57,10 +57,21 @@ export default function OwnTextField({ totalIndex }: Props) {
|
||||
>
|
||||
Пользователю будет дано поле для ввода значения{" "}
|
||||
</Typography>
|
||||
<InfoIcon />
|
||||
<Tooltip
|
||||
title="Будет использоваться для ввода значения."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
|
||||
<ButtonsOptions
|
||||
switchState={switchState}
|
||||
SSHC={SSHC}
|
||||
totalIndex={totalIndex}
|
||||
/>
|
||||
<SwitchTextField switchState={switchState} totalIndex={totalIndex} />
|
||||
</>
|
||||
);
|
||||
|
@ -6,6 +6,7 @@ import {
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
@ -33,7 +34,9 @@ const ANSWER_TYPES: Answer[] = [
|
||||
{ name: "Только числа", value: "number" },
|
||||
];
|
||||
|
||||
export default function SettingTextField({ totalIndex }: SettingTextFieldProps) {
|
||||
export default function SettingTextField({
|
||||
totalIndex,
|
||||
}: SettingTextFieldProps) {
|
||||
const { listQuestions } = questionStore();
|
||||
const quizId = Number(useParams().quizId);
|
||||
const theme = useTheme();
|
||||
@ -55,7 +58,9 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||||
name="controlled-radio-buttons-group"
|
||||
value={ANSWER_TYPES.findIndex(({ value }) => listQuestions[quizId][totalIndex].content[value])}
|
||||
value={ANSWER_TYPES.findIndex(
|
||||
({ value }) => listQuestions[quizId][totalIndex].content[value]
|
||||
)}
|
||||
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const clonContent = {
|
||||
...listQuestions[quizId][totalIndex].content,
|
||||
@ -76,7 +81,9 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
|
||||
"& .MuiRadio-root": { padding: "8px 9px" },
|
||||
}}
|
||||
value={index}
|
||||
control={<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />}
|
||||
control={
|
||||
<Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
|
||||
}
|
||||
label={name}
|
||||
/>
|
||||
))}
|
||||
@ -117,8 +124,15 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
}}
|
||||
/>{" "}
|
||||
<InfoIcon />
|
||||
/>
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { Box, Typography, Tooltip } from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
|
||||
@ -34,7 +34,14 @@ export default function SettingPageOptions({
|
||||
})
|
||||
}
|
||||
/>
|
||||
<InfoIcon />
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -4,6 +4,7 @@ import {
|
||||
ButtonBase,
|
||||
Slider,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
@ -145,8 +146,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
}}
|
||||
/>{" "}
|
||||
<InfoIcon />
|
||||
/>
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -1,5 +1,11 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||||
@ -17,7 +23,13 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : null }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: isWrappColumn ? "column" : null,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ padding: "20px" }}>
|
||||
<Typography>Настройки ползунка</Typography>
|
||||
<CustomCheckbox
|
||||
@ -55,8 +67,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
}}
|
||||
/>{" "}
|
||||
<InfoIcon />
|
||||
/>
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { Box, Typography, Tooltip } from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
|
||||
@ -50,8 +50,15 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
}}
|
||||
/>{" "}
|
||||
<InfoIcon />
|
||||
/>
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -1,5 +1,11 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Tooltip,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
@ -83,10 +89,19 @@ export default function ResponseSettings({ totalIndex }: Props) {
|
||||
clonContent.innerName = "";
|
||||
}
|
||||
|
||||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||||
updateQuestionsList(quizId, totalIndex, {
|
||||
content: clonContent,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<InfoIcon />
|
||||
<Tooltip
|
||||
title="Будет отображаться как заголовок вопроса в приходящих заявках."
|
||||
placement="top"
|
||||
>
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{listQuestions[quizId][totalIndex].content.innerNameCheck && (
|
||||
<CustomTextField
|
||||
|
@ -7,6 +7,7 @@ import {
|
||||
FormControlLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Tooltip,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
@ -40,9 +41,21 @@ interface HandleNext {
|
||||
}
|
||||
|
||||
const designTypes = [
|
||||
["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
|
||||
["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
|
||||
["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"],
|
||||
[
|
||||
"standard",
|
||||
(color: string) => <LayoutStandartIcon color={color} />,
|
||||
"Standard",
|
||||
],
|
||||
[
|
||||
"expanded",
|
||||
(color: string) => <LayoutExpandedIcon color={color} />,
|
||||
"Expanded",
|
||||
],
|
||||
[
|
||||
"centered",
|
||||
(color: string) => <LayoutCenteredIcon color={color} />,
|
||||
"Centered",
|
||||
],
|
||||
] as const;
|
||||
// type DesignType = typeof designTypes[number][0];
|
||||
|
||||
@ -56,7 +69,9 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
const designType = listQuizes[params].startpage;
|
||||
const StartPageClone = listQuizes[params];
|
||||
console.log(StartPageClone);
|
||||
const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
|
||||
const [backgroundType, setBackgroundType] = useState(
|
||||
listQuizes[params].config.startpage.background.type
|
||||
);
|
||||
const [alignType, setAlignType] = useState<AlignType>("left");
|
||||
|
||||
const videoHC = (videoInp: HTMLInputElement) => {
|
||||
@ -148,7 +163,15 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
flex: `1 1 342px`,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Дизайн
|
||||
</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
@ -163,7 +186,9 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
variant="outlined"
|
||||
value={designType}
|
||||
displayEmpty
|
||||
onChange={(e) => updateQuizesList(params, { startpage: e.target.value })}
|
||||
onChange={(e) =>
|
||||
updateQuizesList(params, { startpage: e.target.value })
|
||||
}
|
||||
sx={{
|
||||
height: "48px",
|
||||
borderRadius: "8px",
|
||||
@ -218,13 +243,26 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
{type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
|
||||
{type[1](
|
||||
type[0] === designType
|
||||
? theme.palette.orange.main
|
||||
: theme.palette.grey2.main
|
||||
)}
|
||||
{type[2]}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Фон
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -267,7 +305,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Изображение
|
||||
</Typography>
|
||||
<DropZone text={"5 MB максимум"} heightImg={"110px"} />
|
||||
@ -284,7 +329,12 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
control={<Checkbox icon={<IconCheck />} checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />} />}
|
||||
control={
|
||||
<Checkbox
|
||||
icon={<IconCheck />}
|
||||
checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />}
|
||||
/>
|
||||
}
|
||||
label="мобильная версия"
|
||||
sx={{
|
||||
color: theme.palette.brightPurple.main,
|
||||
@ -299,7 +349,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
/>
|
||||
{mobileVersion ? (
|
||||
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "11px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Изображение для мобильной версии
|
||||
</Typography>
|
||||
<DropZone text={"5 MB максимум"} heightImg={"110px"} />
|
||||
@ -325,11 +382,25 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
|
||||
<InfoIcon />
|
||||
<Typography
|
||||
sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
|
||||
>
|
||||
Добавить видео
|
||||
</Typography>
|
||||
<Tooltip title="Можно загрузить видео." placement="top">
|
||||
<Box>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
|
||||
<input onChange={(event) => videoHC(event.target)} hidden accept=".mp4" multiple type="file" />
|
||||
<input
|
||||
onChange={(event) => videoHC(event.target)}
|
||||
hidden
|
||||
accept=".mp4"
|
||||
multiple
|
||||
type="file"
|
||||
/>
|
||||
<UploadBox
|
||||
icon={<UploadIcon />}
|
||||
sx={{
|
||||
@ -340,7 +411,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
/>
|
||||
</ButtonBase>
|
||||
{video ? <video src={video} width="400" controls /> : null}
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Настройки видео
|
||||
</Typography>
|
||||
<CustomCheckbox
|
||||
@ -352,13 +430,27 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
updateQuizesList(params, { config: SPageClone });
|
||||
}}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "11px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Изображение для мобильной версии
|
||||
</Typography>
|
||||
<DropZone text={"5 MB максимум"} heightImg={"110px"} />
|
||||
</Box>
|
||||
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Расположение элементов
|
||||
</Typography>
|
||||
<Box
|
||||
@ -406,11 +498,26 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, margin: "20px 0" }}>Логотип</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
margin: "20px 0",
|
||||
}}
|
||||
>
|
||||
Логотип
|
||||
</Typography>
|
||||
<DropZone text={"5 MB максимум"} heightImg={"110px"} />
|
||||
</Box>
|
||||
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Favicon
|
||||
</Typography>
|
||||
<Box
|
||||
@ -420,7 +527,11 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<DropFav sx={{ height: "48px", width: "48px" }} heightImg={"48px"} widthImg={"48px"} />
|
||||
<DropFav
|
||||
sx={{ height: "48px", width: "48px" }}
|
||||
heightImg={"48px"}
|
||||
widthImg={"48px"}
|
||||
/>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
@ -442,13 +553,28 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
flex: `1 1 795px`,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Заголовок
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
placeholder="Текст-заполнитель — это текст, который"
|
||||
text={listQuizes[params].name}
|
||||
onChange={(e) => updateQuizesList(params, { name: e.target.value })}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Текст
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
@ -456,7 +582,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
text={listQuizes[params].config.startpage.description}
|
||||
onChange={mutationHC}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Текст кнопки
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
@ -464,7 +597,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
text={listQuizes[params].config.startpage.button}
|
||||
onChange={mutationButtonHC}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Телефон
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
@ -482,7 +622,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
updateQuizesList(params, { config: SPageClone });
|
||||
}}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "11px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Название или слоган компании
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
@ -490,7 +637,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
text={listQuizes[params].config.info.orgname}
|
||||
onChange={mutationOrgNameHC}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Сайт
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
@ -498,7 +652,14 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
text={listQuizes[params].config.info.site}
|
||||
onChange={mutationSiteHC}
|
||||
/>
|
||||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "20px",
|
||||
mb: "14px",
|
||||
}}
|
||||
>
|
||||
Юридическая информация
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
@ -524,13 +685,22 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
icon={
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ backgroundColor: "transparent", color: theme.palette.brightPurple.main }}
|
||||
sx={{
|
||||
backgroundColor: "transparent",
|
||||
color: theme.palette.brightPurple.main,
|
||||
}}
|
||||
>
|
||||
Отключить стартовую страницу
|
||||
</Button>
|
||||
}
|
||||
checkedIcon={
|
||||
<Button variant="outlined" sx={{ backgroundColor: theme.palette.brightPurple.main, color: "white" }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Включить стартовую страницу
|
||||
</Button>
|
||||
}
|
||||
@ -561,7 +731,8 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
|
||||
"https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg";
|
||||
SPageClone.startpage.background.mobile =
|
||||
"https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png";
|
||||
SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ";
|
||||
SPageClone.startpage.background.video =
|
||||
"https://youtu.be/dbaPkCiLPKQ";
|
||||
updateQuizesList(params, { config: SPageClone });
|
||||
handleNext();
|
||||
createQuestion(params);
|
||||
|
Loading…
Reference in New Issue
Block a user