From b861d6f9132b78cb93e4845f5c879c18c07f339c Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Thu, 28 Jun 2018 14:32:38 -0400
Subject: [PATCH] Add colored dots
---
.../connection-modal/connected-step.jsx | 2 +-
.../connection-modal/connecting-step.jsx | 2 +-
.../connection-modal/connection-modal.css | 46 +++++++++++++++++++
src/components/connection-modal/dots.jsx | 45 +++++++++++++++++-
.../connection-modal/error-step.jsx | 5 ++
.../connection-modal/scanning-step.jsx | 2 +-
src/css/colors.css | 4 ++
7 files changed, 101 insertions(+), 5 deletions(-)
diff --git a/src/components/connection-modal/connected-step.jsx b/src/components/connection-modal/connected-step.jsx
index cf4d87221..e889e272f 100644
--- a/src/components/connection-modal/connected-step.jsx
+++ b/src/components/connection-modal/connected-step.jsx
@@ -20,7 +20,7 @@ const ConnectedStep = props => (
/>
</Box>
<Dots
- counter={3}
+ success
total={3}
/>
<div className={styles.cornerButtons}>
diff --git a/src/components/connection-modal/connecting-step.jsx b/src/components/connection-modal/connecting-step.jsx
index 7ad5e0c36..7b0fd6f43 100644
--- a/src/components/connection-modal/connecting-step.jsx
+++ b/src/components/connection-modal/connecting-step.jsx
@@ -19,7 +19,7 @@ const ConnectingStep = props => (
/>
</Box>
<Dots
- counter={2}
+ counter={1}
total={3}
/>
<button
diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css
index 61d1e2ede..410569fa5 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/src/components/connection-modal/connection-modal.css
@@ -95,3 +95,49 @@
text-align: center;
padding: 1rem;
}
+
+.dots-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 1rem;
+}
+
+.dots-holder {
+ display: flex;
+ padding: 0.2rem;
+ border-radius: 1rem;
+ background: $motion-light-transparent;
+}
+
+.dots-holder-success {
+ background: $pen-transparent;
+}
+
+.dots-holder-error {
+ background: $error-transparent;
+}
+
+.dot {
+ width: 0.5rem;
+ height: 0.5rem;
+ margin: 0 0.3rem;
+ border-radius: 100%;
+}
+
+.inactive-step-dot {
+ background: $motion-transparent;
+}
+
+.active-step-dot {
+ background: $motion-primary;
+}
+
+.success-dot {
+ background: $pen-primary;
+}
+
+.error-dot {
+ background: $error-primary;
+}
diff --git a/src/components/connection-modal/dots.jsx b/src/components/connection-modal/dots.jsx
index e0f40ef43..23814eaf7 100644
--- a/src/components/connection-modal/dots.jsx
+++ b/src/components/connection-modal/dots.jsx
@@ -1,18 +1,59 @@
import PropTypes from 'prop-types';
import React from 'react';
+import classNames from 'classnames';
import Box from '../box/box.jsx';
import styles from './connection-modal.css';
const Dots = props => (
- <Box className={styles.dots}>
- <div>{'step: '}{props.counter}{' / '}{props.total}</div>
+ <Box className={styles.dotsRow}>
+ <div
+ className={classNames(
+ styles.dotsHolder,
+ {
+ [styles.dotsHolderError]: props.error,
+ [styles.dotsHolderSuccess]: props.success
+ }
+ )}
+ >
+ {Array(props.total).fill(0)
+ .map((_, i) => {
+ let type = 'inactive';
+ if (props.counter === i) type = 'active';
+ if (props.success) type = 'success';
+ if (props.error) type = 'error';
+ return (<Dot
+ key={`dot-${i}`}
+ type={type}
+ />);
+ })}
+ </div>
</Box>
);
Dots.propTypes = {
counter: PropTypes.number,
+ error: PropTypes.bool,
+ success: PropTypes.bool,
total: PropTypes.number
};
+const Dot = props => (
+ <div
+ className={classNames(
+ styles.dot,
+ {
+ [styles.inactiveStepDot]: props.type === 'inactive',
+ [styles.activeStepDot]: props.type === 'active',
+ [styles.successDot]: props.type === 'success',
+ [styles.errorDot]: props.type === 'error'
+ }
+ )}
+ />
+);
+
+Dot.propTypes = {
+ type: PropTypes.string
+};
+
export default Dots;
diff --git a/src/components/connection-modal/error-step.jsx b/src/components/connection-modal/error-step.jsx
index ee236006f..11af0a29b 100644
--- a/src/components/connection-modal/error-step.jsx
+++ b/src/components/connection-modal/error-step.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import Box from '../box/box.jsx';
+import Dots from './dots.jsx';
import styles from './connection-modal.css';
@@ -17,6 +18,10 @@ const ErrorStep = props => (
id="gui.connection.errorMessage"
/>
</div>
+ <Dots
+ error
+ total={3}
+ />
<Box className={styles.buttonRow}>
<button
className={styles.connectionButton}
diff --git a/src/components/connection-modal/scanning-step.jsx b/src/components/connection-modal/scanning-step.jsx
index 03d7441fe..754568fd4 100644
--- a/src/components/connection-modal/scanning-step.jsx
+++ b/src/components/connection-modal/scanning-step.jsx
@@ -52,7 +52,7 @@ const ScanningStep = props => (
/>
</Box>
<Dots
- counter={1}
+ counter={0}
total={3}
/>
<button
diff --git a/src/css/colors.css b/src/css/colors.css
index 29c15c84e..d4cf5696e 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -28,3 +28,7 @@ $control-primary: hsla(38, 100%, 55%, 1); /* #FFAB19 */
$data-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
$pen-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
+$pen-transparent: hsla(163, 85%, 40%, 0.25); /* #0FBD8C */
+
+$error-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
+$error-transparent: hsla(30, 100%, 55%, 0.25); /* #FF8C1A */
--
GitLab