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

Driwer для кнопок мессенджеры и поле ввода

Browse Source
This commit is contained in:
Tamara 2023-04-17 05:27:22 +03:00 committed by krokodilka
parent 5986c250f7
commit 07c4382dbf
12 changed files with 181 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,6 @@
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import SettingIcon from "@icons/questionsPage/settingIcon";
import Clue from "@icons/questionsPage/clue";
import HideIcon from "@icons/questionsPage/hideIcon";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import Branching from "@icons/questionsPage/branching";
import {Box, useTheme} from "@mui/material";
import SupplementIcon from "@icons/ContactFormIcon/supplementIcon";
@ -14,7 +10,7 @@ interface Props {
SSHC: (data:string) => void
}
export default function ButtonsOptions ({SSHC, switchState}:Props) {
export default function ButtonSettingForms ({SSHC, switchState}:Props) {
const theme = useTheme();
const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
{icon: <SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Настройки', value: 'setting'},

133
src/pages/ContactFormPage/ContactFormPage.tsx
View File

@ -1,13 +1,17 @@
import React from "react";
import Stepper from '@ui_kit/Stepper';
import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from '@mui/material';
import {Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "../../components/icons/questionsPage/OneIcon";
import PointsIcon from "../../components/icons/questionsPage/PointsIcon";
import AddPlus from "../../components/icons/questionsPage/addPlus";
import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
import InfoIcon from "@icons/InfoIcon";
import ButtonSettingForms from "./ButtonSettingForms";
import SwitchContactForm from "./switchContactForm";
import DrawerNewField from "./DrawerParent";
import WindowNewField from "./NewField/WindowNewField";
import WindowMessengers from "./Massengers/WindowMessengers";
export default function ContactFormPage() {
@ -34,29 +38,7 @@ export default function ContactFormPage() {
textDecorationColor: theme.palette.brightPurple.main
}}>Как собрать данные посетителя</Link> <InfoIcon/>
</Box>
<Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex',}}>
<Box
sx={{
borderRight: `1px solid ${theme.palette.grey2.main}`,
maxWidth: '386px',
width: '100%',
padding: '113px 20px 20px 20px',
display: 'flex',
flexDirection: 'column',
gap: '20px'
}}>
<CustomTextField placeholder="Заголовок формы" text={""}/>
<CustomTextField placeholder="Дополнительный текст формы" text={""}
sx={{
"& .MuiInputBase-root": {
height: "48px",
borderRadius: "10px",
minHeight: '287px',
alignItems: 'start',
},
}} />
</Box>
<Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%'}}>
<ContactFormParent>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
<OneIcon/>
<IconButton> <ExpandMoreIcon /> </IconButton>
@ -68,9 +50,38 @@ export default function ContactFormPage() {
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
<Typography>Телефон*</Typography>
<CustomTextField placeholder="+7 900 000 00 00" text={""} />
<Button variant='main' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
<DrawerNewField><WindowNewField/></DrawerNewField>
<DrawerNewField>
{/* <Link sx={{*/}
{/* mt: "20px",*/}
{/* fontSize: "16px",*/}
{/* lineHeight: "19px",*/}
{/* color: theme.palette.brightPurple.main,*/}
{/* textDecorationColor: theme.palette.brightPurple.main*/}
{/*}}>Добавить мессенджеры</Link>*/}
<WindowMessengers/>
</DrawerNewField>
<Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
Название кнопки
</Button>
</Box>
</ContactFormParent>
<ContactFormParent>
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
<OneIcon/>
<IconButton> <ExpandMoreIcon /> </IconButton>
</Box>
<Button variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
Добавить поле +
</Button>
<Box sx={{display: 'flex'}}>
<Typography sx={{color: theme.palette.orange.main}}>Будут показаны поля по умолчанию</Typography>
<InfoIcon/>
</Box>
<Link sx={{
mt: "20px",
fontSize: "16px",
@ -78,28 +89,19 @@ export default function ContactFormPage() {
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main
}}>Добавить мессенджеры</Link>
<Button variant='main' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
<Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
Название кнопки
</Button>
</Box>
</Box>
{/*<Box*/}
{/* sx={{width: '100%', maxWidth: "760px", display: 'flex', alignItems: 'center', gap: '10px', padding: '20px' }}*/}
{/*>*/}
{/*</Box>*/}
</Paper>
</ContactFormParent>
<Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
<IconButton>
<AddPlus/>
</IconButton>
<Box sx={{display: 'flex', gap: '8px'}}>
<Button variant='outmain'>
<Button variant='outlined'>
<ArrowLeft/>
</Button>
<Button variant='main' sx={{padding: '10px 20px'}}>
<Button variant='contained' sx={{padding: '10px 20px'}}>
Установка квиза
</Button>
</Box>
@ -107,3 +109,56 @@ export default function ContactFormPage() {
</>
)
}
interface Props {
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
}
function ContactFormParent({outerContainerSx: sx, children }: Props) {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
return(
<Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex', flexDirection: 'column'}}>
<Box sx={{width: '100%', display: 'flex'}} >
<Box
sx={{
borderRight: `1px solid ${theme.palette.grey2.main}`,
maxWidth: '386px',
width: '100%',
padding: '113px 20px 20px 20px',
display: 'flex',
flexDirection: 'column',
gap: '20px'
}}>
<CustomTextField placeholder="Заголовок формы" text={""}/>
<TextField
id="outlined-multiline-static"
multiline
rows={8}
placeholder="Дополнительный текст формы"
sx={{
backgroundColor: theme.palette.background.default,
"& .MuiInputBase-root": {
borderRadius: "10px",
alignItems: 'start',
color: theme.palette.grey2.main,
},
}}
/>
</Box>
<Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%', gap: '20px'}}>
{children}
</Box>
</Box>
<Box>
<ButtonSettingForms switchState={switchState} SSHC={SSHC}/>
<SwitchContactForm switchState={switchState}/>
</Box>
</Paper>
)
}

21
src/pages/ContactFormPage/DrawerParent.tsx
View File

@ -7,17 +7,28 @@ import {SxProps, Theme} from "@mui/material";
interface Props {
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
isOpen: boolean;
openHC: (arg0: boolean) => void
}
export default function DrawerNewField({outerContainerSx: sx, children, isOpen, openHC }: Props) {
export default function DrawerNewField({outerContainerSx: sx, children }: Props) {
const [state, setState] = React.useState({
right: false,
});
const toggleDrawer =
(anchor: 'right', open: boolean) =>
() => {
setState({ ...state, 'right' : open });
};
return (
<>
<Button onClick={toggleDrawer("right", true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
Добавить поле +
</Button>
<Drawer
anchor='right'
open={isOpen}
onClose={() => openHC(false)}
open={state['right']}
onClose={toggleDrawer("right", false)}
>
<Box
sx={{ width: 450 }}

3
src/pages/ContactFormPage/Massengers/WindowMessengers.tsx
View File

@ -15,7 +15,7 @@ export default function WindowMessengers() {
const [selectMessenger, setSelectMessenger] = useState<SelectMessenger>("contact");
return(
<>
<Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default}}>
<Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', background: theme.palette.background.default}}>
<Typography>Настройки мессенджеров</Typography>
<Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
</Box>
@ -61,7 +61,6 @@ export default function WindowMessengers() {
:
<></>
}
<Button variant='contained' sx={{maxWidth: '125px', margin: '20px'}}>Добавить</Button>
</>
)
}

6
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
View File

@ -26,6 +26,11 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
]
return (
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
}}>
<Box
sx={{
padding: '20px',
@ -46,5 +51,6 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
</MiniButtonSetting>
))}
</Box>
</Box>
)
}

2
src/pages/ContactFormPage/NewField/NewFieldParent.tsx
View File

@ -34,7 +34,7 @@ export default function NewFieldParent ({defaultValue, placeholderHelp, placehol
<TextField
disabled
id="outlined-disabled"
value={defaultValue}
defaultValue={defaultValue}
sx={{
"& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
border: 'none'

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

@ -11,10 +11,6 @@ interface Props {
export default function SwitchNewField({switchState ='name'}: Props) {
const [SwitchMask, setSwitchMask] = React.useState(false);
const SwitchMaskHC = (bool:boolean) => {
setSwitchMask(bool)
}
switch (switchState) {
case 'name':
return (<NewFieldParent placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
@ -35,16 +31,8 @@ export default function SwitchNewField({switchState ='name'}: Props) {
display: 'flex',
justifyContent: 'space-between'
}}
onClick={() => {
SwitchMaskHC(!SwitchMask)
}}
/>
{SwitchMask ?
<SelectMask/>
:
<></>
}
</NewFieldParent>
);
break;

4
src/pages/ContactFormPage/NewField/WindowNewField.tsx
View File

@ -10,7 +10,7 @@ import {useState} from "react";
export default function WindowNewField() {
const theme = useTheme();
const [switchState, setSwitchState] = React.useState('name');
const [switchState, setSwitchState] = React.useState('setting');
const SSHC = (data: string) => {
setSwitchState(data)
}
@ -18,7 +18,7 @@ export default function WindowNewField() {
return(
<>
<Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default}}>
<Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', background: theme.palette.background.default}}>
<Typography>Новое поле</Typography>
<Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
</Box>

19
src/pages/ContactFormPage/SelectMask.tsx
View File

@ -7,10 +7,10 @@ import {useState} from "react";
type SelectMask = 'country'| 'mymask';
export default function SelectMask () {
const [State, setState] = React.useState(false);
const StateHC = (bool:boolean) => {
setState(bool)
}
// const [State, setState] = React.useState('');
// const StateHC = (data: string) => {
// setState(data)
// }
const theme = useTheme()
const [selectMask, setSelectMask] = useState<SelectMask>("country");
@ -37,13 +37,12 @@ export default function SelectMask () {
component="button"
variant="body2"
sx={{color: theme.palette.brightPurple.main, textAlign: 'left'}}
onClick={() => {
StateHC(!State)
}}
// onClick={() => {
// StateHC()
// }}
>
Расширенные настройки
</Link>
{State ?
<Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
<Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
<Typography>Страна по умолчанию</Typography>
@ -66,10 +65,6 @@ export default function SelectMask () {
<Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут не будут показываться в списке</Typography>
</Box>
</Box>
:
<></>
}
</>
:
<>

10
src/pages/ContactFormPage/switchContactForm.tsx
View File

@ -1,4 +1,6 @@
import * as React from 'react';
import SettingForm from "./settingForm";
import BranchingForm from "./BranchingForm";
@ -6,17 +8,17 @@ interface Props {
switchState: string,
}
export default function SwitchAnswerOptions({switchState = 'setting' }: Props) {
export default function SwitchContactForm({switchState = 'setting' }: Props) {
switch (switchState) {
case 'setting':
// return (<ResponseSettings/>);
return (<SettingForm/>);
break;
case 'branching':
// return (<BranchingQuestions/>);
return (<BranchingForm/>);
break;
case 'supplement':
// return (<UploadImage/>);
return (<></>);
break;
default:
return (<></>)

6
src/ui_kit/CustomTextField.tsx
View File

@ -2,7 +2,7 @@ import {FormControl, TextField, useTheme, SxProps, Theme} from "@mui/material";
interface CustomTextFieldProps {
placeholder: string;
text: string;
text?: string;
sx?: SxProps<Theme>;
}
@ -16,12 +16,12 @@ export default function CustomTextField({ placeholder, text, sx}: CustomTextFiel
sx={{ p: 0 }}
>
<TextField
// value={text}
value={text}
fullWidth
placeholder={placeholder}
sx={{
backgroundColor: theme.palette.background.default,
"& .MuiInputBase-root": {
backgroundColor: theme.palette.background.default,
height: "48px",
borderRadius: "10px",

4
src/utils/themes/generic.ts
View File

@ -29,7 +29,7 @@ const theme = createTheme({
variants: [
{
props: {
variant: 'main' },
variant: 'contained' },
style: {
backgroundColor: "#7E2AEA",
padding: '13px 20px',
@ -43,7 +43,7 @@ const theme = createTheme({
},
{
props: {
variant: 'outmain' },
variant: 'outlined' },
style: {
backgroundColor: "#F2F3F7",
padding: '10px 20px',