security camera icon added, I also did a restyling of the modal for the security camera: now it is centerd, and it occupies basically the entire scream, but leaving a fair margin on the for directions. Much better now, I think, but let me know in case.
This commit is contained in:
parent
a54df637cd
commit
9ca3becd8d
3 changed files with 23 additions and 12 deletions
BIN
smart-hut/public/img/security-icon.png
Normal file
BIN
smart-hut/public/img/security-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 40 KiB |
|
@ -213,7 +213,7 @@ class NewDevice extends Component {
|
|||
key: "securityCamera",
|
||||
text: "Security Camera",
|
||||
value: "securityCamera",
|
||||
image: { avatar: true, src: "/img/plusMinus.svg" },
|
||||
image: { avatar: true, src: "/img/security-icon.png" },
|
||||
}
|
||||
];
|
||||
const sensorOptions = [
|
||||
|
|
|
@ -2,24 +2,35 @@ import React from "react";
|
|||
import Modal from "react-modal";
|
||||
import { Button } from "semantic-ui-react";
|
||||
|
||||
const ModalStyle = {
|
||||
content: {
|
||||
top: "20%",
|
||||
left: "45%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-40%",
|
||||
width: "80%",
|
||||
transform: "translate(-40%, -10%)",
|
||||
},
|
||||
const ReactModalPortal = {
|
||||
opacity: 0
|
||||
};
|
||||
|
||||
const ReactModal__Overlay = {
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
transition: 'opacity 200ms ease-in-out'
|
||||
};
|
||||
|
||||
const modal = {
|
||||
background: 'grey',
|
||||
color: 'white',
|
||||
maxWidth: '2rem',
|
||||
outline: 'none',
|
||||
padding: '2rem',
|
||||
textAlign: 'center'
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const VideocamModal = (props) => (
|
||||
<Modal
|
||||
isOpen={!!props.selectedVideo}
|
||||
contentLabel="Live Cam"
|
||||
onRequestClose={props.closeModal}
|
||||
style={ModalStyle}
|
||||
style={ReactModalPortal,ReactModal__Overlay, modal}
|
||||
>
|
||||
{props.selectedVideo && (
|
||||
<video autoPlay loop muted width="100%" height="auto">
|
||||
|
|
Loading…
Reference in a new issue