From 2c9b946b7774de75de49b4207031739da44f7d8b Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 22 Jun 2017 15:30:52 -0400
Subject: [PATCH] Clean up the meter code
---
src/components/record-modal/meter.css | 18 +++++++
src/components/record-modal/meter.jsx | 77 +++++++++------------------
2 files changed, 44 insertions(+), 51 deletions(-)
create mode 100644 src/components/record-modal/meter.css
diff --git a/src/components/record-modal/meter.css b/src/components/record-modal/meter.css
new file mode 100644
index 000000000..7099b3093
--- /dev/null
+++ b/src/components/record-modal/meter.css
@@ -0,0 +1,18 @@
+.green {
+ fill: rgb(171, 220, 170);
+ stroke: rgb(174, 211, 168);
+}
+
+.yellow {
+ fill: rgb(251, 219, 130);
+ stroke: rgb(239, 212, 134);
+}
+
+.red {
+ fill: rgb(251, 194, 142);
+ stroke: rgb(235, 189, 142);
+}
+
+.container {
+ overflow: visible;
+}
diff --git a/src/components/record-modal/meter.jsx b/src/components/record-modal/meter.jsx
index e40245b92..b0efee165 100644
--- a/src/components/record-modal/meter.jsx
+++ b/src/components/record-modal/meter.jsx
@@ -1,12 +1,14 @@
const React = require('react');
const PropTypes = require('prop-types');
+const styles = require('./meter.css');
const Meter = props => {
- const level = Math.min(1, Math.max(0, props.level || 0));
const {
width,
height
} = props;
+
+ const level = Math.min(1, Math.max(0, props.level || 0));
const nGreen = 11;
const nYellow = 5;
@@ -19,61 +21,34 @@ const Meter = props => {
const barHeight = (height + barSpacing / 2 - barSpacing * nBars) / nBars;
const barWidth = width;
- const greenFill = 'rgb(171, 220, 170)';
- const yellowFill = 'rgb(251, 219, 130)';
- const redFill = 'rgb(251, 194, 142)';
-
- const indexToFill = index => {
- if (index < nGreen) return greenFill;
- if (index < nGreen + nYellow) return yellowFill;
- return redFill;
- };
-
- const greenStroke = 'rgb(174, 211, 168)';
- const yellowStroke = 'rgb(239, 212, 134)';
- const redStroke = 'rgb(235, 189, 142)';
-
- const indexToStroke = index => {
- if (index < nGreen) return greenStroke;
- if (index < nGreen + nYellow) return yellowStroke;
- return redStroke;
- };
-
- const bars = Array(nBars).fill(0)
- .map((value, index) => (
- <rect
- fill={indexToFill(index)}
- height={barHeight}
- key={index}
- rx={barRounding}
- ry={barRounding}
- stroke={indexToStroke(index)}
- width={barWidth}
- x={0}
- y={height - barHeight - index * (barHeight + barSpacing)}
- />
- ));
-
- const maskHeight = Math.floor(nBars * (1 - level)) * (barHeight + barSpacing);
- const mask = (
- <rect
- fill="white"
- height={maskHeight + 2}
- opacity="0.75"
- width={width + 4}
- x={-2}
- y={-2}
- />
- );
-
return (
<svg
+ className={styles.container}
height={height}
- style={{overflow: 'visible'}}
width={width}
>
- {bars}
- {mask}
+ {Array(nBars).fill(0)
+ .map((value, index) => (
+ <rect
+ className={index < nGreen ? styles.green :
+ (index < nGreen + nYellow ? styles.yellow : styles.red)}
+ height={barHeight}
+ key={index}
+ rx={barRounding}
+ ry={barRounding}
+ width={barWidth}
+ x={0}
+ y={height - barHeight - index * (barHeight + barSpacing)}
+ />
+ ))}
+ <rect
+ fill="white"
+ height={Math.floor(nBars * (1 - level)) * (barHeight + barSpacing) + 2}
+ opacity="0.75"
+ width={width + 4}
+ x={-2}
+ y={-2}
+ />
</svg>
);
};
--
GitLab