Skip to content
This repository was archived by the owner on May 1, 2024. It is now read-only.

Commit 227b3ab

Browse files
author
Dan Greco
committed
Rework of UI and functionality; move from SCSS -> inline style
1 parent 1cd477a commit 227b3ab

File tree

29 files changed

+593
-383
lines changed

29 files changed

+593
-383
lines changed

‎dist/bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
base_entity: 'sensor.ender_3_v2',
4646
name: "Ender 3 v2",
4747
theme: "Neumorphic",
48-
scale: 0.85,
48+
scale: 1,
4949
printer_type: 'I3',
5050
monitored: [
5151
"Status",
@@ -102,7 +102,7 @@
102102

103103
</head>
104104

105-
<body id="root">
105+
<body id="columns">
106106

107107
<div class="FauxColumn">
108108
<threedy-card>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"framer-motion": "^3.2.2-rc.1",
1111
"moment": "^2.29.1",
1212
"react": "^17.0.1",
13-
"react-dom": "^17.0.1"
13+
"react-dom": "^17.0.1",
14+
"react-measure": "^2.5.2"
1415
},
1516
"devDependencies": {
1617
"@babel/core": "^7.12.10",

‎src/Components/Card/Card.js‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/Components/Card/index.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { useContext, useState } from 'react';
2+
import ThreedyContext from '../../Contexts/ThreedyContext';
3+
import PrinterView from '../PrinterView';
4+
import Stats from '../Stats';
5+
6+
import {motion} from 'framer-motion';
7+
8+
import styles from './styles';
9+
10+
const Card = ({ }) => {
11+
12+
const {
13+
config,
14+
hass
15+
} = useContext(ThreedyContext);
16+
17+
const theme = config.theme;
18+
19+
const state = hass.states[`${config.base_entity}_current_state`].state
20+
const hidden = state !== 'Printing'
21+
const statusColor = state === 'Printing' ? "#4caf50" : state === "Unknown" ? "#f44336" : state === "Operational" ? "#00bcd4" : "#ffc107"
22+
23+
return (
24+
<motion.div
25+
animate={{ borderRadius: hidden ? 16 : 32 }}
26+
transition={{ ease: "easeInOut", duration: 0.25 }}
27+
style={{
28+
...styles.Card,
29+
...styles[theme]
30+
}}
31+
>
32+
<div style={{ ...styles.Root }}>
33+
34+
<div style={{ ...styles.Header }}>
35+
<div style={{
36+
...styles.StatusDot,
37+
backgroundColor: statusColor
38+
}}></div>
39+
<p style={{ ...styles.HeaderText }}>{ config.name }</p>
40+
</div>
41+
42+
<motion.div
43+
style={{ ...styles.Content }}
44+
animate={{ height: hidden ? 0.0 : 'auto', opacity: hidden ? 0.0 : 1.0, scale: hidden ? 0.0 : 1.0 }}
45+
transition={{ ease: "easeInOut", duration: 0.25 }}
46+
>
47+
<div style={{ ...styles.Section }}>
48+
<PrinterView />
49+
</div>
50+
<div style={{ ...styles.Section, paddingLeft: 32, paddingRight: 32 }}>
51+
<Stats />
52+
</div>
53+
</motion.div>
54+
55+
</div>
56+
57+
</motion.div>
58+
)
59+
60+
}
61+
62+
export default Card;

‎src/Components/Card/styles.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
const styles = {
2+
3+
Card: {
4+
display: 'flex',
5+
flexDirection: 'row',
6+
justifyCcontent: 'center',
7+
alignItems: 'stretch',
8+
boxSizing: 'borderBox',
9+
background: 'var( --ha-card-background, var(--card-background-color, white) )'
10+
},
11+
Section: {
12+
boxSizing: 'border-box',
13+
width: '50%',
14+
height: '100%',
15+
padding: '0 16px 32px 16px'
16+
},
17+
Default: {
18+
borderRadius: 'var(--ha-card-border-radius, 4px)',
19+
boxShadow: 'var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) )',
20+
color: 'var(--primary-text-color)'
21+
},
22+
Neumorphic: {
23+
borderRadius: 32,
24+
boxShadow: '20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff',
25+
margin: 24
26+
},
27+
Root: {
28+
display: 'flex',
29+
flexDirection: 'column',
30+
justifyContent: 'center',
31+
alignItems: 'center',
32+
boxSizing: 'border-box',
33+
width: '100%'
34+
},
35+
Header: {
36+
display: 'flex',
37+
flexDirection: 'row',
38+
justifyContent: 'center',
39+
alignItems: 'center',
40+
boxSizing: 'border-box',
41+
width: '100%'
42+
},
43+
HeaderText: {
44+
fontWeight: 'bold',
45+
fontSize: 22,
46+
color: 'var(--primary-text-color)',
47+
},
48+
Content: {
49+
width: '100%',
50+
display: 'flex',
51+
flexDirection: 'row',
52+
justifyContent: 'center',
53+
alignItems: 'center',
54+
boxSizing: 'border-box'
55+
},
56+
StatusDot: {
57+
margin: 10,
58+
marginTop: 12,
59+
height: 10,
60+
width: 10,
61+
borderRadius: 5,
62+
boxSizing: 'border-box',
63+
}
64+
65+
};
66+
67+
export default styles;

‎src/Components/Card/styles.scss‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

src/Components/NotConfigured/NotConfigured.js renamed to src/Components/NotConfigured/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22

3-
import './styles.scss';
3+
import styles from './styles';
44

55
const NotConfigured = () => {
66

77
return (
8-
<div className="NotConfigured">
8+
<div style={{ ...styles.NotConfigured }}>
99
<p>Not configured!</p>
1010
</div>
1111
)

‎src/Components/NotConfigured/styles.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const styles = {
2+
3+
NotConfigured: {
4+
minHeight: 100,
5+
backgroundColor: 'var(--primary-background-color)',
6+
display: 'flex',
7+
justifyContent: 'center',
8+
alignItems: 'center',
9+
color: 'var(--primary-text-color)',
10+
borderRadius: 'var(--ha-card-border-radius, 4px)',
11+
boxShadow: 'var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) )'
12+
}
13+
14+
};
15+
16+
export default styles;

‎src/Components/NotConfigured/styles.scss‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)