SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

кастомные радиокнопки и свич-ползунки исправила и поменяла во всем проекте

Browse Source
This commit is contained in:
Tamara 2023-05-04 02:25:35 +03:00
parent 03545f2a13
commit b39577d191
12 changed files with 172 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/SwichResult.tsx
View File

@ -1,12 +1,16 @@
import { Box, IconButton, Typography } from "@mui/material";
import {Box, FormControlLabel, IconButton, Typography} from "@mui/material";
import { useState } from "react";
import CustomizedSwitch from "@ui_kit/CustomSwitch";
import * as React from "react";
type Props = {
interface Props {
text: string;
icon: any;
};
export const SwitchSetting = ({ text, icon }: Props) => {
const [active, setActive] = useState<boolean>(false);
onClick?: () => void
}
export const SwitchSetting = ({ text, icon, onClick }: Props) => {
// const [active, setActive] = useState<boolean>(false);
return (
<Box
sx={{
@ -19,26 +23,43 @@ export const SwitchSetting = ({ text, icon }: Props) => {
alignItems: "center",
}}
>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "left" }}>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "left", maxWidth: "756px", width: "100%" }}>
<img src={icon} alt="icon" />
<Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>
{/*<Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>*/}
<FormControlLabel
value="start"
control={<CustomizedSwitch/>}
label={text}
labelPlacement="start"
sx={{
display: 'flex',
justifyContent: 'space-between',
color: "#9A9AAF",
width: "100%",
paddingRight: "15px"
}}
onClick={onClick}
/>
</Box>
<IconButton disableRipple onClick={() => setActive(!active)}>
<svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
<rect
x={active ? "23" : "1"}
y="1"
width="28"
height="28"
rx="14"
fill="white"
stroke={active ? "#7E2AEA" : "#9A9AAF"}
strokeWidth="2"
/>
</svg>
</IconButton>
{/*<IconButton disableRipple onClick={() => setActive(!active)}>*/}
{/* <svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
{/* <rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />*/}
{/* <rect*/}
{/* x={active ? "23" : "1"}*/}
{/* y="1"*/}
{/* width="28"*/}
{/* height="28"*/}
{/* rx="14"*/}
{/* fill="white"*/}
{/* stroke={active ? "#7E2AEA" : "#9A9AAF"}*/}
{/* strokeWidth="2"*/}
{/* />*/}
{/* </svg>*/}
{/*</IconButton>*/}
</Box>
);
};

2
src/index.tsx
View File

@ -21,7 +21,7 @@ import QuestionsPage from "./pages/Questions/QuestionsPage";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
import {Result} from "./pages/Result/Result";
import { Setting } from "./pages/Setting";
import { Setting } from "./pages/Result/Setting";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement

6
src/pages/ContactFormPage/BranchingForm.tsx
View File

@ -13,6 +13,8 @@ import * as React from "react";
import CustomButton from "../../components/CustomButton";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import {useState} from "react";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
type LogicForm = "conditions" | "results";
@ -111,8 +113,8 @@ export default function BranchingForm() {
value={value}
onChange={handleChangeRadio}
>
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="1" control={<Radio />} label="Все условия обязательны" />
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="2" control={<Radio />} label="Обязательно хотя бы одно условие" />
<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>
</>

7
src/pages/ContactFormPage/NewField/SwitchNewField.tsx
View File

@ -1,8 +1,8 @@
import * as React from 'react';
import NewFieldParent from "./NewFieldParent";
import {FormControlLabel, Switch} from "@mui/material";
import {FormControlLabel} from "@mui/material";
import SelectMask from "../SelectMask";
import CustomSwitch from "@ui_kit/CustomSwitch";
import CustomizedSwitch from "@ui_kit/CustomSwitch";
@ -30,7 +30,7 @@ export default function SwitchNewField({switchState ='name'}: Props) {
<NewFieldParent placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
<FormControlLabel
value="start"
control={<CustomSwitch/>}
control={<CustomizedSwitch/>}
label="Маска для телефона"
labelPlacement="start"
sx={{
@ -42,6 +42,7 @@ export default function SwitchNewField({switchState ='name'}: Props) {
}}
/>
{SwitchMask ?
<SelectMask/>
:

14
src/pages/InstallQuiz/BannerInstall.tsx
View File

@ -19,6 +19,8 @@ import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import AccordionDetails from "@mui/material/AccordionDetails";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
@ -130,25 +132,25 @@ export default function BannerInstall () {
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="1"
control={<Radio />}
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
label="Слева сверху"
/>
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="2"
control={<Radio />}
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
label="Справа сверху"
/>
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="3"
control={<Radio />}
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
label="Слева снизу"
/>
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="4"
control={<Radio />}
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
label="Справа снизу"
/>
</RadioGroup>
@ -185,13 +187,13 @@ export default function BannerInstall () {
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="1"
control={<Radio />}
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
label="Сверху страницы"
/>
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="2"
control={<Radio />}
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
label="Снизу страницы"
/>
</RadioGroup>

18
src/pages/InstallQuiz/VidjetInstall.tsx
View File

@ -13,10 +13,10 @@ import React, {useState} from "react";
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import VidjetImg from "../../assets/VidjetImg.png"
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import LDownButton from "@icons/InstallQuizIcon/LDownButton";
import RDownButton from "@icons/InstallQuizIcon/RDownButton";
import CustomRadio from "@ui_kit/CustomRadio";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
@ -104,13 +104,23 @@ export default function VidjetInstall () {
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="1"
control={<CustomRadio/>}
control={
<Radio
checkedIcon={<RadioCheck/>}
icon={<RadioIcon/>}
/>
}
label="Да"
/>
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="2"
control={<CustomRadio />}
control={
<Radio
checkedIcon={<RadioCheck/>}
icon={<RadioIcon/>}
/>
}
label="Нет"
/>
</RadioGroup>

6
src/pages/Questions/branchingQuestions.tsx
View File

@ -21,6 +21,8 @@ import ArrowDown from "../../assets/icons/ArrowDownIcon";
import CustomButton from "../../components/CustomButton";
import { useState } from "react";
import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
export default function BranchingQuestions() {
const theme = useTheme();
@ -246,13 +248,13 @@ export default function BranchingQuestions() {
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="1"
control={<Radio />}
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
label="Все условия обязательны"
/>
<FormControlLabel
sx={{ color: theme.palette.grey2.main }}
value="2"
control={<Radio />}
control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
label="Обязательно хотя бы одно условие"
/>
</RadioGroup>

18
src/pages/Setting.tsx → src/pages/Result/Setting.tsx
View File

@ -1,16 +1,16 @@
import { Box, Button, Typography, useTheme } from "@mui/material";
import { SettingForm } from "./Result/SettingForm";
import { DescriptionForm } from "../components/DescriptionForm/DescriptionForm";
import { ResultListForm } from "../components/ResultListForm";
import { SettingForm } from "./SettingForm";
import { DescriptionForm } from "../../components/DescriptionForm/DescriptionForm";
import { ResultListForm } from "../../components/ResultListForm";
import CustomWrapper from "../components/CustomWrapper";
import CustomButton from "../components/CustomButton";
import BackButton from "../components/Button/BackButton";
import CustomWrapper from "../../components/CustomWrapper";
import CustomButton from "../../components/CustomButton";
import BackButton from "../../components/Button/BackButton";
import Plus from "../assets/icons/Plus";
import Info from "../assets/icons/Info";
import IconPlus from "../assets/icons/IconPlus";
import Plus from "@icons/Plus";
import Info from "@icons/Info";
import IconPlus from "@icons/IconPlus";
export const Setting = () => {
const theme = useTheme();

4
src/pages/Result/SettingForm.tsx
View File

@ -29,8 +29,8 @@ const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
];
export const SettingForm = () => {
const [activeIndex, setActiveIndex] = useState<number>();
const [typeActive, setTypeActive] = useState<string>();
const [activeIndex, setActiveIndex] = useState<number>(0);
const [typeActive, setTypeActive] = useState<string>("toContactForm");
const active = (index: number, type: string) => {
setActiveIndex(index);

59
src/ui_kit/CustomSwitch.tsx
View File

@ -1,24 +1,37 @@
import {IconButton} from "@mui/material";
import {useState} from "react";
import {Switch, SwitchProps} from "@mui/material";
import {styled} from "@mui/material/styles";
export default function CustomSwitch () {
const [active, setActive] = useState<boolean>(false);
return (
<IconButton onClick={() => setActive(!active)}>
<svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
<rect
x={active ? "23" : "1"}
y="1"
width="28"
height="28"
rx="14"
fill="white"
stroke={active ? "#7E2AEA" : "#9A9AAF"}
strokeWidth="2"
/>
</svg>
</IconButton>
)
}
export default styled((props: SwitchProps) => (
<Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />))
(() => ({
width: 52,
height: 31,
padding: 0,
'& .MuiSwitch-switchBase': {
padding: 0,
margin: 2,
transitionDuration: '300ms',
'&.Mui-checked': {
transform: 'translateX(21px)',
color: '#fff',
'& + .MuiSwitch-track': {
backgroundColor: '#7E2AEA',
opacity: 1,
border: 0,
},
},
'&.Mui-disabled .MuiSwitch-thumb': {
color: '#9A9AAF',
boxShadow: 'none'
},
},
'& .MuiSwitch-thumb': {
boxSizing: 'border-box',
width: 27,
height: 27,
},
'& .MuiSwitch-track': {
borderRadius: 40 / 2,
backgroundColor: '#9A9AAF'
},
}));

24
src/ui_kit/RadioCheck.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Box, useTheme } from "@mui/material";
export default function RadioCheck() {
const theme = useTheme();
return (
<Box
sx={{
height: "26px",
width: "26px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="25" height="25" rx="12.5" fill="#7E2AEA" stroke="#7E2AEA"/>
<rect x="8" y="8" width="10" height="10" rx="5" fill="white"/>
</svg>
</Box>
);
}

23
src/ui_kit/RadioIcon.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Box, useTheme } from "@mui/material";
export default function RadioIcon() {
const theme = useTheme();
return (
<Box
sx={{
height: "26px",
width: "26px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="25" height="25" rx="12.5" fill="#F2F3F7" stroke="#9A9AAF"/>
</svg>
</Box>
);
}