remove unused files
This commit is contained in:
nflnkr
parent
b4b282a820
commit
0edf02ea6e
@ -1,180 +0,0 @@
|
||||
import {
|
||||
Box,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import Dots from "../../assets/dots.png";
|
||||
import React from "react";
|
||||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import InfoIcon from "../../assets/icons/InfoIcon";
|
||||
|
||||
export default function AutoOpenInstall() {
|
||||
const theme = useTheme();
|
||||
|
||||
const [checked, setChecked] = React.useState([true, false]);
|
||||
|
||||
const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setChecked([event.target.checked, checked[1]]);
|
||||
};
|
||||
|
||||
const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setChecked([checked[0], event.target.checked]);
|
||||
};
|
||||
|
||||
return (
|
||||
<InstallQzOnSiteParent>
|
||||
<Box sx={{ maxWidth: "560px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
border: "1.5px solid #9A9AAF",
|
||||
borderRadius: "6px",
|
||||
maxWidth: "560px",
|
||||
height: "364px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
background: theme.palette.background.default,
|
||||
borderBottom: "1.5px solid #9A9AAF",
|
||||
borderRadius: "6px 6px 0px 0px",
|
||||
minHeight: "34px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "end",
|
||||
paddingRight: "10px",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
<img src={Dots} />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "330px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
maxWidth: "506px",
|
||||
minHeight: "280px",
|
||||
background: "#EEE4FC",
|
||||
borderRadius: "6px",
|
||||
border: "1px dashed #7E2AEA",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.brightPurple.main }}>
|
||||
Quiz будет открываться через указанное время
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
|
||||
Если quiz уже установлен на сайт, и вы что-то здесь изменили, код на
|
||||
сайте нужно будет поменять. Настройки в этом конструкторе не
|
||||
сохраняются.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
label={"Автооткрытие quiz"}
|
||||
checked={checked[0]}
|
||||
handleChange={handleChange1}
|
||||
/>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<CustomCheckbox
|
||||
label={"Открывать quiz при попытке уйти с сайта"}
|
||||
checked={checked[1]}
|
||||
handleChange={handleChange2}
|
||||
/>
|
||||
<InfoIcon />
|
||||
</Box>
|
||||
{checked[0] ? (
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "15px 0",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
borderTop: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Показывать через
|
||||
</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="standard"
|
||||
sx={{ p: 0, width: "60px" }}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="10"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "48px",
|
||||
width: "60px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
секунд
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
||||
<CustomCheckbox label={"Открывать каждый раз"} />
|
||||
<CustomCheckbox
|
||||
label={"Отключать автооткрытие на мобильных устройствах"}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
{checked[1] ? (
|
||||
<Box
|
||||
sx={{
|
||||
borderTop: "1px solid #9A9AAF",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: "15px 0",
|
||||
}}
|
||||
>
|
||||
<CustomCheckbox label={"Открывать каждый раз"} />
|
||||
<CustomCheckbox
|
||||
label={"Отключать автооткрытие на мобильных устройствах"}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Box>
|
||||
</InstallQzOnSiteParent>
|
||||
);
|
||||
}
|
||||
@ -1,91 +0,0 @@
|
||||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
Link,
|
||||
OutlinedInput,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import CopyIcon from "@icons/CopyIcon";
|
||||
import React from "react";
|
||||
import InfoIcon from "@icons/InfoIcon";
|
||||
|
||||
export default function InstallQzCode() {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<InstallQzOnSiteParent outerContainerSx={{ flexDirection: "column" }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "520px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography>1. Код вставки опросника</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Установите код в то место, где должен быть опросник
|
||||
</Typography>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
multiline
|
||||
rows={9}
|
||||
value="<script>
|
||||
(function(w, d, s, o){
|
||||
var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {
|
||||
if (document.readyState !== 'loading') Marquiz.init(o);
|
||||
else document.addEventListener('DOMContentLoaded', function() {
|
||||
Marquiz.init(o);
|
||||
});"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
maxWidth: "520px",
|
||||
width: "100%",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
fontSize: "18px",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<IconButton edge="end" sx={{ marginTop: "22px" }}>
|
||||
<CopyIcon
|
||||
color={"#ffffff"}
|
||||
bgcolor={theme.palette.brightPurple.main}
|
||||
/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
background: "#EEE4FC",
|
||||
border: "1px solid #7E2AEA",
|
||||
padding: "20px 50px 20px 20px",
|
||||
borderRadius: "8px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
Код нужно вставить один раз. Изменения в самом quiz будут отображаться
|
||||
автоматически после сохранения.
|
||||
</Typography>
|
||||
</Box>
|
||||
</InstallQzOnSiteParent>
|
||||
);
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
SxProps,
|
||||
Theme,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import OneIconBorder from "../../assets/icons/OneIconBorder";
|
||||
import React from "react";
|
||||
import NumberTwo from "@icons/NumberTwo";
|
||||
import NumberThree from "@icons/NumberThree";
|
||||
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function InstallQzOnSiteParent({
|
||||
outerContainerSx: sx,
|
||||
children,
|
||||
}: Props) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "1160px",
|
||||
backgroundColor: "#ffffff",
|
||||
padding: "20px",
|
||||
mt: "40px",
|
||||
borderRadius: "12px",
|
||||
boxShadow:
|
||||
"0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Typography variant="h5" sx={{ paddingRight: "30px" }}>
|
||||
Установка quiz на сайте
|
||||
</Typography>
|
||||
<OneIconBorder color={theme.palette.brightPurple.main} />
|
||||
<Typography sx={{ color: theme.palette.brightPurple.main }}>
|
||||
Способ установки
|
||||
</Typography>
|
||||
<NumberTwo color={"#FC712F"} />
|
||||
<Typography sx={{ color: "#FC712F" }}>Настройка кнопки</Typography>
|
||||
<NumberThree color={theme.palette.grey2.main} />
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Вставить код на сайт
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "40px",
|
||||
marginTop: "30px",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "end" }}>
|
||||
<Button variant="contained">Далее</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,219 +0,0 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import React, { useState } from "react";
|
||||
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import VidjetImg from "../../assets/VidjetImg.png";
|
||||
import LDownButton from "@icons/InstallQuizIcon/LDownButton";
|
||||
import RDownButton from "@icons/InstallQuizIcon/RDownButton";
|
||||
import RadioCheck from "@ui_kit/RadioCheck";
|
||||
import RadioIcon from "@ui_kit/RadioIcon";
|
||||
|
||||
export default function VidjetInstall() {
|
||||
const [value, setValue] = React.useState("1");
|
||||
|
||||
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue((event.target as HTMLInputElement).value);
|
||||
};
|
||||
|
||||
const [position, setPosition] = useState<"left" | "right">("left");
|
||||
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<InstallQzOnSiteParent>
|
||||
<Box sx={{ maxWidth: "560px" }}>
|
||||
<img src={VidjetImg} />
|
||||
<Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
|
||||
Если quiz уже установлен на сайт, и вы что-то здесь изменили, код на
|
||||
сайте нужно будет поменять. Настройки в этом конструкторе не
|
||||
сохраняются.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Расположение
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<SelectButtonPosition
|
||||
onClick={() => setPosition("left")}
|
||||
isActive={position === "left"}
|
||||
Icon={LDownButton}
|
||||
/>
|
||||
<SelectButtonPosition
|
||||
onClick={() => setPosition("right")}
|
||||
isActive={position === "right"}
|
||||
Icon={RDownButton}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: "10px", alignItems: "center" }}>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Показывать виджет
|
||||
</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="standard"
|
||||
sx={{ p: 0, width: "60px" }}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="10"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "48px",
|
||||
width: "60px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
секунд
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Автооткрытие виджета при входе на сайт
|
||||
</Typography>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||||
name="controlled-radio-buttons-group"
|
||||
value={value}
|
||||
onChange={handleChangeRadio}
|
||||
sx={{
|
||||
maxWidth: "365px",
|
||||
display: "flex",
|
||||
gap: "40px",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
value="1"
|
||||
control={
|
||||
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
|
||||
}
|
||||
label="Да"
|
||||
/>
|
||||
<FormControlLabel
|
||||
sx={{ color: theme.palette.grey2.main }}
|
||||
value="2"
|
||||
control={
|
||||
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
|
||||
}
|
||||
label="Нет"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
{value === "1" ? (
|
||||
<Box>
|
||||
<Box sx={{ display: "flex", gap: "10px", alignItems: "center" }}>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Показывать через
|
||||
</Typography>
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="standard"
|
||||
sx={{ p: 0, width: "60px" }}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="10"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "48px",
|
||||
width: "60px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
секунд
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
sx={{ color: theme.palette.grey2.main, fontSize: "14px" }}
|
||||
>
|
||||
Время, через которое quiz автоматически откроется
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
<CustomCheckbox label={"Отключить на мобильных устройствах"} />
|
||||
<CustomCheckbox label={"Полностью скрывать виджет при закрытии"} />
|
||||
</Box>
|
||||
</InstallQzOnSiteParent>
|
||||
);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
Icon: React.ElementType;
|
||||
isActive?: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function SelectButtonPosition({ Icon, isActive = false, onClick }: Props) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Button
|
||||
onClick={onClick}
|
||||
variant="text"
|
||||
startIcon={
|
||||
<Icon
|
||||
color={
|
||||
isActive
|
||||
? theme.palette.brightPurple.main
|
||||
: theme.palette.grey2.main
|
||||
}
|
||||
/>
|
||||
}
|
||||
sx={{
|
||||
borderRadius: "6px",
|
||||
border: "none",
|
||||
p: "7px",
|
||||
width: "auto",
|
||||
minWidth: 0,
|
||||
"& .MuiButton-startIcon": {
|
||||
mr: 0,
|
||||
ml: 0,
|
||||
},
|
||||
"&:hover": {
|
||||
border: "none",
|
||||
borderColor: isActive
|
||||
? theme.palette.brightPurple.main
|
||||
: theme.palette.grey2.main,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user