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:
Fil Cesana 2020-04-27 11:10:04 +02:00
parent a54df637cd
commit 9ca3becd8d
3 changed files with 23 additions and 12 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View file

@ -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 = [

View file

@ -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">