2020-03-15 14:50:25 +00:00
|
|
|
import styled from "styled-components";
|
2020-03-25 11:13:15 +00:00
|
|
|
import { useCircularInputContext } from "react-circular-input";
|
|
|
|
import { ValueStyle } from "./DimmerStyle";
|
|
|
|
import React from "react";
|
2020-03-15 14:50:25 +00:00
|
|
|
|
2020-03-09 12:52:27 +00:00
|
|
|
export const editButtonStyle = {
|
2020-03-23 20:24:17 +00:00
|
|
|
position: "absolute",
|
2020-03-09 12:52:27 +00:00
|
|
|
top: "0",
|
2020-03-23 20:24:17 +00:00
|
|
|
right: "0",
|
2020-03-25 11:13:15 +00:00
|
|
|
backgroundColor: "#505bda",
|
2020-03-23 20:24:17 +00:00
|
|
|
borderRadius: "0 0 0 20px",
|
2020-03-25 11:13:15 +00:00
|
|
|
border: "none",
|
2020-03-23 20:24:17 +00:00
|
|
|
padding: ".4rem 1.2rem",
|
|
|
|
outline: "none",
|
|
|
|
color: "white",
|
|
|
|
fontFamily: "Lato",
|
2020-03-25 16:20:53 +00:00
|
|
|
textTransform: "uppercase",
|
2020-03-09 12:52:27 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const panelStyle = {
|
2020-03-23 20:24:17 +00:00
|
|
|
position: "relative",
|
2020-03-25 11:13:15 +00:00
|
|
|
backgroundColor: "#fafafa",
|
2020-03-17 16:38:03 +00:00
|
|
|
height: "100vh",
|
2020-03-09 12:52:27 +00:00
|
|
|
width: "auto",
|
2020-03-17 16:38:03 +00:00
|
|
|
padding: "0rem 3rem",
|
2020-03-09 12:52:27 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const editModeStyle = {
|
2020-03-23 20:24:17 +00:00
|
|
|
position: "absolute",
|
2020-03-09 12:52:27 +00:00
|
|
|
top: "15%",
|
|
|
|
right: "0",
|
2020-03-23 20:24:17 +00:00
|
|
|
width: "1.5rem",
|
|
|
|
height: "1.5rem",
|
|
|
|
backgroundColor: "black",
|
2020-03-09 12:52:27 +00:00
|
|
|
borderRadius: "100%",
|
2020-03-23 20:24:17 +00:00
|
|
|
zIndex: "1000",
|
|
|
|
cursor: "pointer",
|
2020-03-09 12:52:27 +00:00
|
|
|
};
|
|
|
|
|
2020-03-26 08:36:00 +00:00
|
|
|
export const editModeStyleLeft = {
|
|
|
|
position: "absolute",
|
|
|
|
top: "15%",
|
|
|
|
left: "0",
|
|
|
|
width: "1.5rem",
|
|
|
|
height: "1.5rem",
|
|
|
|
backgroundColor: "white",
|
|
|
|
borderRadius: "100%",
|
|
|
|
zIndex: "1000",
|
|
|
|
cursor: "pointer",
|
|
|
|
};
|
|
|
|
|
2020-03-09 12:52:27 +00:00
|
|
|
export const editModeIconStyle = {
|
2020-03-23 20:24:17 +00:00
|
|
|
position: "absolute",
|
2020-03-09 12:52:27 +00:00
|
|
|
top: "50%",
|
|
|
|
left: "50%",
|
2020-03-23 20:24:17 +00:00
|
|
|
transform: "translate(-50%, -50%)",
|
2020-03-09 12:52:27 +00:00
|
|
|
width: "0.75rem",
|
2020-03-23 20:24:17 +00:00
|
|
|
height: "0.75rem",
|
|
|
|
borderRadius: "20%",
|
2020-03-25 16:20:53 +00:00
|
|
|
zIndex: "101",
|
2020-03-15 14:50:25 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const iconStyle = {
|
2020-03-25 15:04:02 +00:00
|
|
|
width: "3.5rem",
|
2020-03-15 14:50:25 +00:00
|
|
|
height: "auto",
|
|
|
|
position: "absolute",
|
2020-03-25 15:04:02 +00:00
|
|
|
top: "10%",
|
2020-03-15 14:50:25 +00:00
|
|
|
left: "50%",
|
|
|
|
transform: "translateX(-50%)",
|
|
|
|
};
|
|
|
|
export const nameStyle = {
|
|
|
|
position: "absolute",
|
|
|
|
top: "50%",
|
|
|
|
left: "50%",
|
2020-03-25 16:20:53 +00:00
|
|
|
transform: "translateX(-50%)",
|
2020-03-15 14:50:25 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const formStyle = {
|
2020-03-23 20:24:17 +00:00
|
|
|
position: "absolute",
|
2020-03-15 14:50:25 +00:00
|
|
|
zIndex: "1000",
|
2020-03-23 20:24:17 +00:00
|
|
|
width: "80rem",
|
|
|
|
height: "10rem",
|
|
|
|
padding: "1rem",
|
|
|
|
margin: "1rem",
|
|
|
|
borderRadius: "10%",
|
|
|
|
boxShadow: "1px 1px 5px 2px #5d5d5d",
|
2020-03-15 14:50:25 +00:00
|
|
|
backgroundColor: "#3e99ff",
|
|
|
|
};
|
|
|
|
|
|
|
|
export const addDeviceFormStyle = {
|
2020-03-23 20:24:17 +00:00
|
|
|
maxWidth: "400px",
|
|
|
|
background: "#3e99ff",
|
|
|
|
paddingRight: "5rem",
|
2020-03-15 14:50:25 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const StyledDiv = styled.div`
|
2020-03-25 11:13:15 +00:00
|
|
|
cursor: pointer;
|
2020-03-25 16:20:53 +00:00
|
|
|
background-color: white;
|
|
|
|
padding: 3rem;
|
2020-03-15 14:50:25 +00:00
|
|
|
width: 10rem;
|
|
|
|
height: 10rem;
|
2020-03-23 20:24:17 +00:00
|
|
|
border-radius: 100%;
|
|
|
|
border: none;
|
|
|
|
position: relative;
|
2020-03-15 14:50:25 +00:00
|
|
|
box-shadow: 3px 2px 10px 5px #ccc;
|
2020-03-23 20:24:17 +00:00
|
|
|
transition: all 0.3s ease-out;
|
|
|
|
text-align: center;
|
|
|
|
:hover {
|
|
|
|
background-color: #f2f2f2;
|
2020-03-15 14:50:25 +00:00
|
|
|
}
|
2020-03-23 20:24:17 +00:00
|
|
|
:active {
|
|
|
|
transform: translate(0.3px, 0.8px);
|
2020-03-15 14:50:25 +00:00
|
|
|
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
|
|
|
}
|
|
|
|
`;
|
2020-03-25 11:13:15 +00:00
|
|
|
|
|
|
|
export const ButtonDimmerContainer = styled.div`
|
2020-03-25 16:20:53 +00:00
|
|
|
background-color: white;
|
|
|
|
padding: 3rem;
|
2020-03-25 11:13:15 +00:00
|
|
|
width: 10rem;
|
|
|
|
height: 10rem;
|
2020-03-25 16:20:53 +00:00
|
|
|
border-radius: 100%;
|
|
|
|
border: none;
|
|
|
|
position: relative;
|
2020-03-25 11:13:15 +00:00
|
|
|
box-shadow: 3px 2px 10px 5px #ccc;
|
2020-03-25 16:20:53 +00:00
|
|
|
transition: all 0.3s ease-out;
|
|
|
|
text-align: center;
|
2020-03-25 11:13:15 +00:00
|
|
|
display: inline-block;
|
|
|
|
.knob {
|
2020-03-25 16:20:53 +00:00
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
width: 10rem;
|
|
|
|
color: #1a2849;
|
2020-03-25 11:13:15 +00:00
|
|
|
}
|
2020-03-25 16:20:53 +00:00
|
|
|
img {
|
2020-03-25 11:13:15 +00:00
|
|
|
position: absolute;
|
|
|
|
top: 10%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
width: 1.5rem;
|
|
|
|
height: 1.5rem;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
export const PlusPanel = styled.div`
|
2020-03-25 16:20:53 +00:00
|
|
|
position: absolute;
|
|
|
|
cursor: pointer;
|
|
|
|
bottom: 0;
|
|
|
|
left: 5rem;
|
|
|
|
background-color: #1a2849;
|
|
|
|
width: 5rem;
|
|
|
|
height: 5rem;
|
|
|
|
border-radius: 0 0 5rem 0;
|
|
|
|
:hover {
|
|
|
|
background-color: #505bda;
|
|
|
|
}
|
|
|
|
:active {
|
|
|
|
transform: translate(0.3px, 0.8px);
|
|
|
|
}
|
|
|
|
span {
|
|
|
|
color: white;
|
|
|
|
position: absolute;
|
|
|
|
top: 40%;
|
|
|
|
left: 45%;
|
|
|
|
font-size: 3rem;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
2020-03-25 11:13:15 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
export const MinusPanel = styled.div`
|
2020-03-25 16:20:53 +00:00
|
|
|
cursor: pointer;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
background-color: #1a2849;
|
|
|
|
width: 5rem;
|
|
|
|
height: 5rem;
|
|
|
|
border-radius: 0 0 0 5rem;
|
|
|
|
:hover {
|
|
|
|
background-color: #505bda;
|
|
|
|
}
|
|
|
|
:active {
|
|
|
|
transform: translate(0.3px, 0.8px);
|
|
|
|
}
|
|
|
|
span {
|
|
|
|
color: white;
|
|
|
|
position: absolute;
|
|
|
|
top: 40%;
|
|
|
|
left: 45%;
|
|
|
|
font-size: 3rem;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
2020-03-25 11:13:15 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
export const BottomPanel = styled.div`
|
2020-03-25 16:20:53 +00:00
|
|
|
position: absolute;
|
|
|
|
cursor: pointer;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0rem;
|
|
|
|
width: 10rem;
|
|
|
|
height: 5rem;
|
|
|
|
border-bottom-left-radius: 10rem;
|
|
|
|
border-bottom-right-radius: 10rem;
|
|
|
|
span {
|
|
|
|
color: white;
|
|
|
|
position: absolute;
|
|
|
|
top: 40%;
|
|
|
|
left: 45%;
|
|
|
|
font-size: 3rem;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
2020-03-25 11:13:15 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
export const ThumbText = (props) => {
|
|
|
|
const { getPointFromValue, value } = useCircularInputContext();
|
|
|
|
const { x, y } = getPointFromValue();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<text style={{ ...ValueStyle, fill: props.color }} x={x} y={y + 5}>
|
|
|
|
{Math.round(value * 100)}
|
|
|
|
</text>
|
2020-03-25 16:20:53 +00:00
|
|
|
);
|
|
|
|
};
|