Commit 1611ef67 authored by Ermolaev Timur's avatar Ermolaev Timur

#66 Небольшие поправки

parent 8b6c5d95
import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material"; import { Button, TextField } from "@mui/material";
import { memo } from "react"; import { memo } from "react";
import CustomSelect from '../UI/СustomSelect/СustomSelect' import CustomSelect from '../UI/СustomSelect/СustomSelect'
...@@ -38,8 +38,28 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti ...@@ -38,8 +38,28 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
id={'priority-type'} id={'priority-type'}
items={priorities} items={priorities}
/> />
<Button sx={{marginRight: '40px'}} onClick={sendNewTaskHandler}>Сохранить</Button> <div style={{display: 'flex', gap: '20px', margin: '20px 0'}}>
<TextField
id="task-description-title"
value={title}
label="От"
variant="outlined"
name='title'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
<TextField
id="task-description-title"
value={title}
label="До"
variant="outlined"
name='title'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
</div>
<div style={{display: 'flex', gap: '20px', margin: '10px 0'}}>
<Button onClick={sendNewTaskHandler}>Сохранить</Button>
<Button onClick={deleteTaskHandler}>Удалить</Button> <Button onClick={deleteTaskHandler}>Удалить</Button>
</div>
</>); </>);
} }
......
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal'; import Modal from '@mui/material/Modal';
import { useEffect, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
export default function ModalTask({modal, handleClose, children}) { export default function ModalTask({modal, handleClose, children}) {
...@@ -19,32 +19,35 @@ export default function ModalTask({modal, handleClose, children}) { ...@@ -19,32 +19,35 @@ export default function ModalTask({modal, handleClose, children}) {
useEffect(() => { useEffect(() => {
window.addEventListener('resize', detectSize) window.addEventListener('resize', detectSize)
return () => { return () => {
window.removeEventListener('resize', detectSize) window.removeEventListener('resize', detectSize)
} }
}, [windowDimenion]) }, [windowDimenion])
const modalRef = useRef('')
const getYCordinatesToModal = () => { const getYCordinatesToModal = () => {
if (windowDimenion.winHeight > modal.yClickСordinates + 350) { if (windowDimenion.winHeight > modal.yClickСordinates + 450) {
return modal.yClickСordinates - modal.yDiv - modal.yDivClick return modal.yClickСordinates - modal.yDiv - modal.yDivClick
} else { } else {
return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 350) - windowDimenion.winHeight) - 10 return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 450) - windowDimenion.winHeight) - 30
} }
} }
const getXCordinatesToModal = () => { const getXCordinatesToModal = () => {
if (windowDimenion.winWidth > modal.xClickСordinates + modal.xDiv + 250 + modal.xDivClick) { if (windowDimenion.winWidth > modal.xClickСordinates + 270 + modal.xDiv) {
return modal.xClickСordinates + modal.xDiv - modal.xDivClick + 10 return modal.xClickСordinates + modal.xDiv - modal.xDivClick + 10
} else { } else {
return modal.xClickСordinates - modal.xDiv - ((modal.xClickСordinates + 250) - windowDimenion.winWidth) - 120 return modal.xClickСordinates - modal.xDivClick - ((modal.yClickСordinates + 270) - windowDimenion.winHeight)
} }
} }
const style = { const style = {
display: 'flex',
flexDirection: 'column',
position: 'absolute', position: 'absolute',
top: getYCordinatesToModal(), top: getYCordinatesToModal(),
left: getXCordinatesToModal(), left: getXCordinatesToModal(),
width: 250, width: 270,
height: 350, height: 450,
bgcolor: 'background.paper', bgcolor: 'background.paper',
border: '2px solid #000', border: '2px solid #000',
boxShadow: 24, boxShadow: 24,
...@@ -59,7 +62,7 @@ export default function ModalTask({modal, handleClose, children}) { ...@@ -59,7 +62,7 @@ export default function ModalTask({modal, handleClose, children}) {
aria-describedby="modal-modal-description" aria-describedby="modal-modal-description"
BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }} BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
> >
<Box sx={style}> <Box sx={style} ref={modalRef}>
{children} {children}
</Box> </Box>
</Modal> </Modal>
......
...@@ -8,7 +8,7 @@ import Select from "@mui/material/Select"; ...@@ -8,7 +8,7 @@ import Select from "@mui/material/Select";
export default function BasicSelect({value,label,name,onChange,task,items}) { export default function BasicSelect({value,label,name,onChange,task,items}) {
return ( return (
<Box sx={{ minWidth: 60 }}> <Box sx={{ minWidth: 60, m: 0}}>
<FormControl fullWidth> <FormControl fullWidth>
<InputLabel id="demo-simple-select-label"></InputLabel> <InputLabel id="demo-simple-select-label"></InputLabel>
<Select <Select
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment