PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

делаю модалку

Browse Source
This commit is contained in:
Nikolai 2022-09-13 19:16:57 +03:00
parent 16a087b066
commit 27c1a782ed
8 changed files with 596 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
example.js Normal file
View File

@ -0,0 +1,185 @@
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useHistory,
useLocation,
useParams
} from "react-router-dom";
// This example shows how to render two different screens
// (or the same screen in a different context) at the same URL,
// depending on how you got there.
//
// Click the "featured images" and see them full screen. Then
// "visit the gallery" and click on the colors. Note the URL and
// the component are the same as before but now we see them
// inside a modal on top of the gallery screen.
export default function ModalGalleryExample() {
return (
<Router>
<ModalSwitch />
</Router>
);
}
function ModalSwitch() {
let location = useLocation();
// This piece of state is set when one of the
// gallery links is clicked. The `background` state
// is the location that we were at when one of
// the gallery links was clicked. If it's there,
// use it as the location for the <Switch> so
// we show the gallery in the background, behind
// the modal.
let background = location.state && location.state.background;
return (
<div>
<Switch location={background || location}>
<Route exact path="/" children={<Home />} />
<Route path="/gallery" children={<Gallery />} />
<Route path="/img/:id" children={<ImageView />} />
</Switch>
{/* Show the modal when a background page is set */}
{background && <Route path="/img/:id" children={<Modal />} />}
</div>
);
}
const IMAGES = [
{ id: 0, title: "Dark Orchid", color: "DarkOrchid" },
{ id: 1, title: "Lime Green", color: "LimeGreen" },
{ id: 2, title: "Tomato", color: "Tomato" },
{ id: 3, title: "Seven Ate Nine", color: "#789" },
{ id: 4, title: "Crimson", color: "Crimson" }
];
function Thumbnail({ color }) {
return (
<div
style={{
width: 50,
height: 50,
background: color
}}
/>
);
}
function Image({ color }) {
return (
<div
style={{
width: "100%",
height: 400,
background: color
}}
/>
);
}
function Home() {
return (
<div>
<Link to="/gallery">Visit the Gallery</Link>
<h2>Featured Images</h2>
<ul>
<li>
<Link to="/img/2">Tomato</Link>
</li>
<li>
<Link to="/img/4">Crimson</Link>
</li>
</ul>
</div>
);
}
function Gallery() {
let location = useLocation();
return (
<div>
{IMAGES.map(i => (
<Link
key={i.id}
to={{
pathname: `/img/${i.id}`,
// This is the trick! This link sets
// the `background` in location state.
state: { background: location }
}}
>
<Thumbnail color={i.color} />
<p>{i.title}</p>
</Link>
))}
</div>
);
}
function ImageView() {
let { id } = useParams();
let image = IMAGES[parseInt(id, 10)];
if (!image) return <div>Image not found</div>;
return (
<div>
<h1>{image.title}</h1>
<Image color={image.color} />
</div>
);
}
function Modal() {
let history = useHistory();
let { id } = useParams();
let image = IMAGES[parseInt(id, 10)];
if (!image) return null;
let back = e => {
e.stopPropagation();
history.goBack();
};
return (
<div
onClick={back}
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
background: "rgba(0, 0, 0, 0.15)"
}}
>
<div
className="modal"
style={{
position: "absolute",
background: "#fff",
top: 25,
left: "10%",
right: "10%",
padding: 15,
border: "2px solid #444"
}}
>
<h1>{image.title}</h1>
<Image color={image.color} />
<button type="button" onClick={back}>
Close
</button>
</div>
</div>
);
}

78
package-lock.json generated
View File

@ -11,7 +11,7 @@
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.3",
"@mui/material": "^5.10.5",
"@mui/styled-engine-sc": "^5.10.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
@ -3170,9 +3170,9 @@
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
"node_modules/@mui/base": {
"version": "5.0.0-alpha.95",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.95.tgz",
"integrity": "sha512-fcxnDeO7rBwzP0buVdI5fn0aA7NQ/AeUV5RzIIH0kOXVVT21HB4JFf41Qhwd0PIq63PXxmc6Fs2mdlzMYuPo9g==",
"version": "5.0.0-alpha.97",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.97.tgz",
"integrity": "sha512-gvo0hOg/tBzfJ3eDQOGAPBJJU+qTWd0e5zBEMFIkT1ekJqXx14JtIHvheOFU17y9iDciYE256Q8g+tj6a1dcBA==",
"dependencies": {
"@babel/runtime": "^7.18.9",
"@emotion/is-prop-valid": "^1.2.0",
@ -3207,9 +3207,9 @@
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@mui/core-downloads-tracker": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.3.tgz",
"integrity": "sha512-mX2S0d1oboKBbWQqWIgRmyALAEzh37yiknpD3mKx8bcoMKbp1VtqzIt0aeHP16Uhsd0eValDFILxLNHWi0oddQ==",
"version": "5.10.5",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.5.tgz",
"integrity": "sha512-sZYg85rQdlgDYU3V4WcT2Dl+k+y2wYqN04aUvVkFksRR0j81sj6KmfXx4842HJQcq5rjzcTvh4N+yv66XR/9fA==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
@ -3241,14 +3241,14 @@
}
},
"node_modules/@mui/material": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.3.tgz",
"integrity": "sha512-g0lzHcqWHYeOEAxTzcwpM1I7b+wyiRTeXkEdRsspnOpZtb0H/1xg386tMFRGbxBJ4zfVGT+TWublofw7pyQkqw==",
"version": "5.10.5",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.5.tgz",
"integrity": "sha512-VFMadvfA6jqx5DCk2xoBl4bAGyzgmmubJIuB7fUWUZBwYIYL5Ea9SsoFpt5kawA6O2feuj69alDN2fhxPw1MeQ==",
"dependencies": {
"@babel/runtime": "^7.18.9",
"@mui/base": "5.0.0-alpha.95",
"@mui/core-downloads-tracker": "^5.10.3",
"@mui/system": "^5.10.3",
"@mui/base": "5.0.0-alpha.97",
"@mui/core-downloads-tracker": "^5.10.5",
"@mui/system": "^5.10.5",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.3",
"@types/react-transition-group": "^4.4.5",
@ -3316,9 +3316,9 @@
}
},
"node_modules/@mui/styled-engine": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.3.tgz",
"integrity": "sha512-9Uz7eB8xXoiDvpJ9qBxZ/2xGO8xKfA2T23dw4AsQ69SQtGatrOLAapzP2lNr0tfB9xvKucclPFhRO5aLhDFOVQ==",
"version": "5.10.5",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.5.tgz",
"integrity": "sha512-6U6tTdf+H1OsjgcFoY12gYPR+qqZ1WHGGIahK5V7JhMkMUgH7ozyiNi8s1LzmwrUlAz1hAAhuO5nBYXku3wWvw==",
"dependencies": {
"@babel/runtime": "^7.18.9",
"@emotion/cache": "^11.10.3",
@ -3372,13 +3372,13 @@
}
},
"node_modules/@mui/system": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.3.tgz",
"integrity": "sha512-uLW/CIz3zk1jr5zH0ahOUqJIrpWP02Mv4emfrplh7Mh5JCb/oumhYaC/ALJJEjzUHKg9wwiyuM0pCwK/kSf1jQ==",
"version": "5.10.5",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.5.tgz",
"integrity": "sha512-GUPiDVZTKp9yH3FVeLSIw3Bqsyl7qLxtAK1ZiZmC8e+zdH7bcnZZXvWK3vPIbx35ZyhQpvAOWQFpiF9TjdA77w==",
"dependencies": {
"@babel/runtime": "^7.18.9",
"@mui/private-theming": "^5.10.3",
"@mui/styled-engine": "^5.10.3",
"@mui/styled-engine": "^5.10.5",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.3",
"clsx": "^1.2.1",
@ -19353,9 +19353,9 @@
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
"@mui/base": {
"version": "5.0.0-alpha.95",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.95.tgz",
"integrity": "sha512-fcxnDeO7rBwzP0buVdI5fn0aA7NQ/AeUV5RzIIH0kOXVVT21HB4JFf41Qhwd0PIq63PXxmc6Fs2mdlzMYuPo9g==",
"version": "5.0.0-alpha.97",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.97.tgz",
"integrity": "sha512-gvo0hOg/tBzfJ3eDQOGAPBJJU+qTWd0e5zBEMFIkT1ekJqXx14JtIHvheOFU17y9iDciYE256Q8g+tj6a1dcBA==",
"requires": {
"@babel/runtime": "^7.18.9",
"@emotion/is-prop-valid": "^1.2.0",
@ -19375,9 +19375,9 @@
}
},
"@mui/core-downloads-tracker": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.3.tgz",
"integrity": "sha512-mX2S0d1oboKBbWQqWIgRmyALAEzh37yiknpD3mKx8bcoMKbp1VtqzIt0aeHP16Uhsd0eValDFILxLNHWi0oddQ=="
"version": "5.10.5",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.5.tgz",
"integrity": "sha512-sZYg85rQdlgDYU3V4WcT2Dl+k+y2wYqN04aUvVkFksRR0j81sj6KmfXx4842HJQcq5rjzcTvh4N+yv66XR/9fA=="
},
"@mui/icons-material": {
"version": "5.10.3",
@ -19388,14 +19388,14 @@
}
},
"@mui/material": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.3.tgz",
"integrity": "sha512-g0lzHcqWHYeOEAxTzcwpM1I7b+wyiRTeXkEdRsspnOpZtb0H/1xg386tMFRGbxBJ4zfVGT+TWublofw7pyQkqw==",
"version": "5.10.5",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.5.tgz",
"integrity": "sha512-VFMadvfA6jqx5DCk2xoBl4bAGyzgmmubJIuB7fUWUZBwYIYL5Ea9SsoFpt5kawA6O2feuj69alDN2fhxPw1MeQ==",
"requires": {
"@babel/runtime": "^7.18.9",
"@mui/base": "5.0.0-alpha.95",
"@mui/core-downloads-tracker": "^5.10.3",
"@mui/system": "^5.10.3",
"@mui/base": "5.0.0-alpha.97",
"@mui/core-downloads-tracker": "^5.10.5",
"@mui/system": "^5.10.5",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.3",
"@types/react-transition-group": "^4.4.5",
@ -19424,9 +19424,9 @@
}
},
"@mui/styled-engine": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.3.tgz",
"integrity": "sha512-9Uz7eB8xXoiDvpJ9qBxZ/2xGO8xKfA2T23dw4AsQ69SQtGatrOLAapzP2lNr0tfB9xvKucclPFhRO5aLhDFOVQ==",
"version": "5.10.5",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.5.tgz",
"integrity": "sha512-6U6tTdf+H1OsjgcFoY12gYPR+qqZ1WHGGIahK5V7JhMkMUgH7ozyiNi8s1LzmwrUlAz1hAAhuO5nBYXku3wWvw==",
"requires": {
"@babel/runtime": "^7.18.9",
"@emotion/cache": "^11.10.3",
@ -19444,13 +19444,13 @@
}
},
"@mui/system": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.3.tgz",
"integrity": "sha512-uLW/CIz3zk1jr5zH0ahOUqJIrpWP02Mv4emfrplh7Mh5JCb/oumhYaC/ALJJEjzUHKg9wwiyuM0pCwK/kSf1jQ==",
"version": "5.10.5",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.5.tgz",
"integrity": "sha512-GUPiDVZTKp9yH3FVeLSIw3Bqsyl7qLxtAK1ZiZmC8e+zdH7bcnZZXvWK3vPIbx35ZyhQpvAOWQFpiF9TjdA77w==",
"requires": {
"@babel/runtime": "^7.18.9",
"@mui/private-theming": "^5.10.3",
"@mui/styled-engine": "^5.10.3",
"@mui/styled-engine": "^5.10.5",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.3",
"clsx": "^1.2.1",

2
package.json
View File

@ -6,7 +6,7 @@
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.3",
"@mui/material": "^5.10.5",
"@mui/styled-engine-sc": "^5.10.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",

234
src/Components/Menu/index.tsx
View File

@ -19,7 +19,8 @@ const Menu: React.FC = () => {
backgroundColor: theme.palette.menu.main,
width: "96px",
height: "100vh",
borderRight: "1px solid #45494c"
borderRight: "1px solid #45494c",
overflow: "hidden"
}}>
<Box sx={{
width: "100%",
@ -30,122 +31,131 @@ const Menu: React.FC = () => {
alignItems: "center",
cursor: "pointer"
}}>
<MenuOutlinedIcon sx={{
transform: "scale(1.4)"
}} />
<MenuOutlinedIcon sx={{
transform: "scale(1.4)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
height: "calc( 100vh -85px )",
overflowY: "scroll",
'&::-webkit-scrollbar': {
display: "none"
}
}}>
<PersonOutlineOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<SettingsOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<BathtubOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<AddPhotoAlternateOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<NaturePeopleOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<SettingsIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<CameraIcon sx={{
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<HeadsetMicOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}}/>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<PersonOutlineOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<SettingsOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<BathtubOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<AddPhotoAlternateOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<NaturePeopleOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<SettingsIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<CameraIcon sx={{
transform: "scale(1.2)"
}} />
</Box>
<Box sx={{
width: "100%",
height: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}>
<HeadsetMicOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}}/>
</Box>
</Box>
</Box>
</React.Fragment>
);

132
src/Components/ModalWindow copy/index.tsx Normal file
View File

@ -0,0 +1,132 @@
import * as React from "react";
import { Box, Modal, Fade, Backdrop, Typography, Button } from "@mui/material";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import theme from "../../theme";
const ModalWindow: React.FC = () => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<React.Fragment>
<Button onClick={handleOpen}>Open modal</Button>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<Box sx={{
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "90%",
height: "90%",
bgcolor: theme.palette.menu.main,
border: "2px solid #000",
boxShadow: 24,
color: theme.palette.secondary.main,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}>
<Typography id="transition-modal-title" variant="caption">
Проект
</Typography>
<Box sx={{
width: "100%",
marginTop: "15px",
display: "flex"
}}>
<Box sx={{
backgroundColor: theme.palette.grayMedium.main,
width: "155px"
}}>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
}}>
СТАТИСТИКА
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ТРЕКЕРЫ УСТРОЙСТВ
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ВВОДЫ
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ВЫВОДЫ
</Typography>
</Box>
<Box sx={{
backgroundColor: theme.palette.grayMedium.main,
width: "calc(100% - 155px)",
height: "55px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}>
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text
</Box>
</Box>
</Box>
</Fade>
</Modal>
</React.Fragment>
);
}
export default ModalWindow;

201
src/Components/ModalWindow/index.tsx
View File

@ -1,130 +1,115 @@
import * as React from "react";
import { Box, Modal, Fade, Backdrop, Typography, Button } from "@mui/material";
import { Box, Typography } from "@mui/material";
import { ThemeProvider } from "@mui/material";
import theme from "../../theme";
const ModalWindow: React.FC = () => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<React.Fragment>
<Button onClick={handleOpen}>Open modal</Button>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<Box sx={{
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "90%",
height: "90%",
bgcolor: theme.palette.menu.main,
border: "2px solid #000",
boxShadow: 24,
color: theme.palette.secondary.main,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}>
<Typography id="transition-modal-title" variant="caption">
Проект
</Typography>
<ThemeProvider theme={theme}>
<Box sx={{
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "90%",
height: "90%",
bgcolor: theme.palette.menu.main,
border: "2px solid #000",
boxShadow: 24,
color: theme.palette.secondary.main,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}>
<Typography id="transition-modal-title" variant="caption">
Проект
</Typography>
<Box sx={{
width: "100%",
marginTop: "15px",
display: "flex"
}}>
<Box sx={{
width: "100%",
marginTop: "15px",
display: "flex"
backgroundColor: theme.palette.grayMedium.main,
width: "155px"
}}>
<Box sx={{
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
width: "155px"
}}>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
}}>
СТАТИСТИКА
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ТРЕКЕРЫ УСТРОЙСТВ
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ВВОДЫ
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ВЫВОДЫ
</Typography>
</Box>
<Box sx={{
backgroundColor: theme.palette.grayMedium.main,
width: "calc(100% - 155px)",
height: "55px",
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
alignItems: "center",
cursor: "pointer",
}}>
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text
</Box>
СТАТИСТИКА
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ТРЕКЕРЫ УСТРОЙСТВ
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ВВОДЫ
</Typography>
<Typography variant="h4" sx={{
backgroundColor: theme.palette.grayMedium.main,
color: theme.palette.grayDisabled.main,
width: "100%",
height: "55px", //205px
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
textAlign: "center"
}}>
ВЫВОДЫ
</Typography>
</Box>
<Box sx={{
backgroundColor: theme.palette.grayMedium.main,
width: "calc(100% - 155px)",
height: "55px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}>
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text
</Box>
</Box>
</Fade>
</Modal>
</Box>
</ThemeProvider>
</React.Fragment>
);
}
export default ModalWindow;

39
src/Components/Users/index.tsx
View File

@ -1,5 +1,6 @@
import * as React from "react";
import { Box, Typography, TextField, Button } from "@mui/material";
import { Link } from "react-router-dom";
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
@ -7,7 +8,6 @@ import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import Radio from '@mui/material/Radio';
import theme from "../../theme";
import ModalWindow from "../ModalWindow";
const Users: React.FC = () => {
@ -19,22 +19,27 @@ const Users: React.FC = () => {
return (
<React.Fragment>
<Button
variant="text"
sx={{
width: "90%",
height: "60px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
border: "2px solid",
fontWeight: "normal",
borderColor: theme.palette.golden.main,
color: theme.palette.secondary.main
}} >
ИНФОРМАЦИЯ О ПРОЕКТЕ
</Button>
<Link to={{
pathname: "/modal",
state: { modal: true }
}}>
<Button
variant="text"
sx={{
width: "90%",
height: "60px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
border: "2px solid",
fontWeight: "normal",
borderColor: theme.palette.golden.main,
color: theme.palette.secondary.main
}} >
ИНФОРМАЦИЯ О ПРОЕКТЕ
</Button>
</Link>
<Table sx={{

2
src/index.tsx
View File

@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
import Authorization from "./Components/Authorization";
import Sections from "./Components/Sections";
import LoggedIn from "./Components/LoggedIn";
import ModalWindow from "./Components/ModalWindow";
import Error404 from "./Components/Error404";
@ -16,6 +17,7 @@ root.render(
<Route path="/" element={ <Authorization /> } />
<Route path="/dispatch" element={ <Sections /> } />
<Route path="/users" element={ <LoggedIn /> } />
<Route path="/modal" element={ <ModalWindow /> } />
<Route
path="*"
element={ <Error404 /> }