From b05b485838336559c71eec6af3f4c5657c9be2d9 Mon Sep 17 00:00:00 2001 From: Steven Huynh Date: Tue, 6 Aug 2019 21:40:52 -0400 Subject: [PATCH 1/4] Made Bucket component, attempted to implement arrows in ProgressTracker --- package.json | 1 + src/components/bucket.tsx | 74 +++++++++++++++++++++++++++++ src/components/progress-tracker.tsx | 56 ++++++++++++++++++++-- src/pages/screen-3.tsx | 10 ++++ 4 files changed, 138 insertions(+), 3 deletions(-) create mode 100644 src/components/bucket.tsx create mode 100644 src/pages/screen-3.tsx diff --git a/package.json b/package.json index 9e29a8f25..ca046f64c 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "babel-preset-gatsby": "^0.1.11", "core-js": "^2.6.5", "fast-xml-parser": "^3.12.16", + "framer-motion": "^1.4.1", "gatsby": "^2.4.2", "gatsby-cli": "^2.5.13", "gatsby-image": "^2.0.34", diff --git a/src/components/bucket.tsx b/src/components/bucket.tsx new file mode 100644 index 000000000..b4d43f130 --- /dev/null +++ b/src/components/bucket.tsx @@ -0,0 +1,74 @@ +import React, { useLayoutEffect, useRef } from "react"; +import { motion } from "framer-motion"; +import styled from "@emotion/styled"; + +const Bucket = function BucketComponent({ percentage, className }) { + const water = useRef(); + const grayPercentage = useRef(); + const bluePercentage = useRef(); + + // TODO: use state as conditional to prevent trigger on additional renders + useLayoutEffect(() => { + setTimeout(() => { + water.current.style.transformOrigin = "center bottom"; + //grayPercentage.current.style.transformOrigin = 'center bottom'; + //bluePercentage.current.style.transformOrigin = 'center bottom'; + }, 6000); + }); + + return ( + + + + {`${(1 - percentage) * 100}%`} + + + {`${percentage * 100}%`} + + + ); +}; + +const StyledBucket = styled(Bucket)` + width: 100px; + background-color: lightgray; + + > * { + transform-origin: bottom; + } + + rect { + fill: #4381c1; + } + + text { + text-anchor: middle; + } + + #blue { + fill: white; + } +`; + +export default StyledBucket; diff --git a/src/components/progress-tracker.tsx b/src/components/progress-tracker.tsx index 412eff377..b50e6a8b9 100644 --- a/src/components/progress-tracker.tsx +++ b/src/components/progress-tracker.tsx @@ -1,16 +1,17 @@ import React from "react"; import { Link } from "gatsby"; import styled from "@emotion/styled"; -import { colors } from "../constants"; +import { colors, breakPoints } from "../constants"; const StyledSeparator = styled.div` width: 1px; + display: none; `; function Step(props) { return ( - {props.label} + {props.label} ); } @@ -50,6 +51,54 @@ const StyledStep = styled(Step)` }}; padding: 1em 0.5em; border: 1px solid black; + padding-left: 25px; + + @media (max-width: ${breakPoints[3]}) { + .label { + display: ${({ status }) => { + switch (status) { + case stepStatus.complete: { + return 'none'; + } + case stepStatus.active: { + return 'inline-block'; + } + case stepStatus.ongoing: { + return 'none'; + } + } + }}; + } + } + + position: relative; + :before { + content: ""; + width: 0; + height: 0; + + position: absolute; + right: -26px; + bottom: 0; + + border-left: 25px solid red; + border-top: 25px solid transparent; + border-bottom: 25px solid transparent; + } + + :after { + content: ""; + width: 0; + height: 0; + + position: absolute; + left: 0; + bottom: 0; + + border-left: 25px solid white; + border-top: 25px solid transparent; + border-bottom: 25px solid transparent; + } `; // FIXME: does not check for duplicate paths @@ -72,7 +121,7 @@ const StyledProgressTracker = styled(ProgressTracker)` /* override html, body font-size CSS rule (was set to 130%) */ font-size: 100; - + /* *:first-child { border-radius: 1.5em 0 0 1.5em; padding-left: 1em; @@ -82,6 +131,7 @@ const StyledProgressTracker = styled(ProgressTracker)` border-radius: 0 1.5em 1.5em 0; padding-right: 1em; } + */ `; export { StyledProgressTracker as ProgressTracker }; diff --git a/src/pages/screen-3.tsx b/src/pages/screen-3.tsx new file mode 100644 index 000000000..a2a9270bb --- /dev/null +++ b/src/pages/screen-3.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import Bucket from "../components/bucket.tsx"; + +const Screen3 = function Screen3Page() { + return ( + + ); +}; + +export default Screen3; From 869fa12d14b396de1aafb13b3a30face1780d7fa Mon Sep 17 00:00:00 2001 From: Steven Huynh Date: Tue, 13 Aug 2019 19:33:40 -0400 Subject: [PATCH 2/4] box-shadow placeholder for ProgressTracker steps --- src/components/progress-tracker.tsx | 49 +++++++++++++++-------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/src/components/progress-tracker.tsx b/src/components/progress-tracker.tsx index b50e6a8b9..580e93ab5 100644 --- a/src/components/progress-tracker.tsx +++ b/src/components/progress-tracker.tsx @@ -50,9 +50,8 @@ const StyledStep = styled(Step)` } }}; padding: 1em 0.5em; - border: 1px solid black; - padding-left: 25px; - + box-shadow: 1px 1px 2px; + @media (max-width: ${breakPoints[3]}) { .label { display: ${({ status }) => { @@ -70,34 +69,36 @@ const StyledStep = styled(Step)` }}; } } - + position: relative; - :before { - content: ""; - width: 0; - height: 0; - - position: absolute; - right: -26px; - bottom: 0; - - border-left: 25px solid red; - border-top: 25px solid transparent; - border-bottom: 25px solid transparent; - } - :after { content: ""; width: 0; height: 0; - position: absolute; - left: 0; - bottom: 0; + /* FIXME: current border-width is a magic number */ + /* + border-left: 1.5em solid ${props => { + switch (props.status) { + case stepStatus.complete: { + return colors.gray; + } + case stepStatus.active: { + return colors.blue; + } + case stepStatus.ongoing: { + return colors.white; + } + } + }}; + */ + border-left: 1.5em solid red; + border-top: 1.5em solid transparent; + border-bottom: 1.5em solid transparent; - border-left: 25px solid white; - border-top: 25px solid transparent; - border-bottom: 25px solid transparent; + position: absolute; + bottom: calc(0.25em - 4px); + right: -1em; } `; From c9ae86b2e3d1d8526b1e46fbe9d5c418bdf2fbf8 Mon Sep 17 00:00:00 2001 From: Steven Huynh Date: Tue, 13 Aug 2019 20:44:08 -0400 Subject: [PATCH 3/4] Refined arrows in ProgressTracker --- src/components/progress-tracker.tsx | 57 ++++++++++++++++++++++------- 1 file changed, 44 insertions(+), 13 deletions(-) diff --git a/src/components/progress-tracker.tsx b/src/components/progress-tracker.tsx index 580e93ab5..3488afd40 100644 --- a/src/components/progress-tracker.tsx +++ b/src/components/progress-tracker.tsx @@ -4,8 +4,7 @@ import styled from "@emotion/styled"; import { colors, breakPoints } from "../constants"; const StyledSeparator = styled.div` - width: 1px; - display: none; + width: calc(1.5em + 0.5em); `; function Step(props) { @@ -26,13 +25,13 @@ const StyledStep = styled(Step)` background-color: ${props => { switch (props.status) { case stepStatus.complete: { - return colors.gray; + return '#06315e'; } case stepStatus.active: { return colors.blue; } case stepStatus.ongoing: { - return colors.white; + return '#fafafa'; } } }}; @@ -51,6 +50,7 @@ const StyledStep = styled(Step)` }}; padding: 1em 0.5em; box-shadow: 1px 1px 2px; + text-decoration-line: none; @media (max-width: ${breakPoints[3]}) { .label { @@ -71,34 +71,65 @@ const StyledStep = styled(Step)` } position: relative; + :before { + content: ""; + + /* FIXME: current border-width is a magic number */ + border-left: 1.5em solid transparent; + border-top: 1.5em solid ${props => { + switch (props.status) { + case stepStatus.complete: { + return '#06315e'; + } + case stepStatus.active: { + return colors.blue; + } + case stepStatus.ongoing: { + return '#fafafa'; + } + } + }}; + border-bottom: 1.5em solid ${props => { + switch (props.status) { + case stepStatus.complete: { + return '#06315e'; + } + case stepStatus.active: { + return colors.blue; + } + case stepStatus.ongoing: { + return '#fafafa'; + } + } + }}; + + position: absolute; + bottom: 0; + left: -1.5em; + } :after { content: ""; - width: 0; - height: 0; /* FIXME: current border-width is a magic number */ - /* border-left: 1.5em solid ${props => { switch (props.status) { case stepStatus.complete: { - return colors.gray; + return '#06315e'; } case stepStatus.active: { return colors.blue; } case stepStatus.ongoing: { - return colors.white; + return '#fafafa'; } } }}; - */ - border-left: 1.5em solid red; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; position: absolute; - bottom: calc(0.25em - 4px); - right: -1em; + bottom: 0; + right: -1.5em; } `; From 8eafa1a273487968790330dd6aac1f422546b189 Mon Sep 17 00:00:00 2001 From: Tony Chen Date: Tue, 20 Aug 2019 21:17:40 -0400 Subject: [PATCH 4/4] progress tracker --- package.json | 2 +- src/components/progress-tracker.tsx | 32 +++++++++++++++-------------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index ca046f64c..57d60f0fc 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "babel-preset-gatsby": "^0.1.11", "core-js": "^2.6.5", "fast-xml-parser": "^3.12.16", - "framer-motion": "^1.4.1", + "framer-motion": "^1.6.3", "gatsby": "^2.4.2", "gatsby-cli": "^2.5.13", "gatsby-image": "^2.0.34", diff --git a/src/components/progress-tracker.tsx b/src/components/progress-tracker.tsx index 3488afd40..9249376f0 100644 --- a/src/components/progress-tracker.tsx +++ b/src/components/progress-tracker.tsx @@ -4,7 +4,6 @@ import styled from "@emotion/styled"; import { colors, breakPoints } from "../constants"; const StyledSeparator = styled.div` - width: calc(1.5em + 0.5em); `; function Step(props) { @@ -25,13 +24,13 @@ const StyledStep = styled(Step)` background-color: ${props => { switch (props.status) { case stepStatus.complete: { - return '#06315e'; + return colors.lightblue; } case stepStatus.active: { return colors.blue; } case stepStatus.ongoing: { - return '#fafafa'; + return colors.gray; } } }}; @@ -44,11 +43,18 @@ const StyledStep = styled(Step)` return colors.white; } case stepStatus.ongoing: { - return colors.black; + return colors.white; } } }}; - padding: 1em 0.5em; + padding-left: 10px; + padding-right: 10px; + margin-left: 15px; + margin-right: 15px; + height: 48px; + line-height: 48px; + vertical-align: middle; + text-align: center; box-shadow: 1px 1px 2px; text-decoration-line: none; @@ -73,32 +79,30 @@ const StyledStep = styled(Step)` position: relative; :before { content: ""; - - /* FIXME: current border-width is a magic number */ border-left: 1.5em solid transparent; border-top: 1.5em solid ${props => { switch (props.status) { case stepStatus.complete: { - return '#06315e'; + return colors.lightblue; } case stepStatus.active: { return colors.blue; } case stepStatus.ongoing: { - return '#fafafa'; + return colors.gray; } } }}; border-bottom: 1.5em solid ${props => { switch (props.status) { case stepStatus.complete: { - return '#06315e'; + return colors.lightblue; } case stepStatus.active: { return colors.blue; } case stepStatus.ongoing: { - return '#fafafa'; + return colors.gray; } } }}; @@ -109,18 +113,16 @@ const StyledStep = styled(Step)` } :after { content: ""; - - /* FIXME: current border-width is a magic number */ border-left: 1.5em solid ${props => { switch (props.status) { case stepStatus.complete: { - return '#06315e'; + return colors.lightblue; } case stepStatus.active: { return colors.blue; } case stepStatus.ongoing: { - return '#fafafa'; + return colors.gray; } } }};