ImagePreview

garris · Oct 17, 2017 · dda3fc0 · dda3fc0
1 parent 6e8c418
commit dda3fc0
Show file tree

Hide file tree

Showing 22 changed files with 117 additions and 0 deletions.
diff --git a/...tput/bitmaps_reference/backstop_default_BackstopJS_Banner_0_header_0_tablet.png b/...tput/bitmaps_reference/backstop_default_BackstopJS_Banner_0_header_0_tablet.png
diff --git a/.../bitmaps_reference/backstop_default_BackstopJS_Services_0_services_0_tablet.png b/.../bitmaps_reference/backstop_default_BackstopJS_Services_0_services_0_tablet.png
diff --git a/...est/20170903-155340/backstop_default_BackstopJS_Homepage_0_document_0_phone.png b/...est/20170903-155340/backstop_default_BackstopJS_Homepage_0_document_0_phone.png
diff --git a/...st/20170903-155340/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png b/...st/20170903-155340/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png
diff --git a/...est/20170918-190513/backstop_default_BackstopJS_Homepage_0_document_0_phone.png b/...est/20170918-190513/backstop_default_BackstopJS_Homepage_0_document_0_phone.png
diff --git a/...st/20170918-190513/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png b/...st/20170918-190513/backstop_default_BackstopJS_Homepage_0_document_1_tablet.png
diff --git a/...-190513/failed_diff_backstop_default_BackstopJS_Homepage_0_document_0_phone.png b/...-190513/failed_diff_backstop_default_BackstopJS_Homepage_0_document_0_phone.png
diff --git a/...190513/failed_diff_backstop_default_BackstopJS_Homepage_0_document_1_tablet.png b/...190513/failed_diff_backstop_default_BackstopJS_Homepage_0_document_1_tablet.png
diff --git a/...s_test/20170924-181714/backstop_default_BackstopJS_Banner_0_header_0_tablet.png b/...s_test/20170924-181714/backstop_default_BackstopJS_Banner_0_header_0_tablet.png
diff --git a/...st/20170924-181714/backstop_default_BackstopJS_Services_0_services_0_tablet.png b/...st/20170924-181714/backstop_default_BackstopJS_Services_0_services_0_tablet.png
diff --git a/...924-181714/failed_diff_backstop_default_BackstopJS_Banner_0_header_0_tablet.png b/...924-181714/failed_diff_backstop_default_BackstopJS_Banner_0_header_0_tablet.png
diff --git a/...181714/failed_diff_backstop_default_BackstopJS_Services_0_services_0_tablet.png b/...181714/failed_diff_backstop_default_BackstopJS_Services_0_services_0_tablet.png
diff --git a/...s_test/20170924-181742/backstop_default_BackstopJS_Banner_0_header_0_tablet.png b/...s_test/20170924-181742/backstop_default_BackstopJS_Banner_0_header_0_tablet.png
diff --git a/...st/20170924-181742/backstop_default_BackstopJS_Services_0_services_0_tablet.png b/...st/20170924-181742/backstop_default_BackstopJS_Services_0_services_0_tablet.png
diff --git a/...924-181742/failed_diff_backstop_default_BackstopJS_Banner_0_header_0_tablet.png b/...924-181742/failed_diff_backstop_default_BackstopJS_Banner_0_header_0_tablet.png
diff --git a/...181742/failed_diff_backstop_default_BackstopJS_Services_0_services_0_tablet.png b/...181742/failed_diff_backstop_default_BackstopJS_Services_0_services_0_tablet.png
diff --git a/...s_test/20170924-181906/backstop_default_BackstopJS_Banner_0_header_0_tablet.png b/...s_test/20170924-181906/backstop_default_BackstopJS_Banner_0_header_0_tablet.png
diff --git a/...st/20170924-181906/backstop_default_BackstopJS_Services_0_services_0_tablet.png b/...st/20170924-181906/backstop_default_BackstopJS_Services_0_services_0_tablet.png
diff --git a/...924-181906/failed_diff_backstop_default_BackstopJS_Banner_0_header_0_tablet.png b/...924-181906/failed_diff_backstop_default_BackstopJS_Banner_0_header_0_tablet.png
diff --git a/compare/src/components/atoms/ImagePreview.js b/compare/src/components/atoms/ImagePreview.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { colors, fonts } from '../../styles';
+
+const Image = styled.img`
+  width: auto;
+  max-height: 150px;
+`;
+
+const Wrapper = styled.div`
+  flex: 1 1 auto;
+  padding: 0 25px;
+  text-align: center;
+`;
+
+const Label = styled.span`
+  text-align: center;
+  font-family: ${fonts.latoRegular};
+  color: ${colors.secondaryText};
+  display: block;
+  margin: 0 auto;
+  text-transform: uppercase;
+  padding: 5px 0;
+  padding-bottom: 15px;
+  font-size: 12px;
+`;
+
+export default class ImagePreview extends React.Component {
+
+  render () {
+    let { hidden } = this.props;
+
+    return (
+        <Wrapper hidden={hidden} >
+          <Label>{this.props.label}</Label>
+          <Image {...this.props} />
+        </Wrapper>
+    );
+  }
+}
diff --git a/compare/src/components/molecules/TestImages.js b/compare/src/components/molecules/TestImages.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+import { connect } from 'react-redux';
+
+import { colors, shadows } from '../../styles';
+
+// atoms
+import ImagePreview from '../atoms/ImagePreview';
+
+const ImagesWrapper = styled.div`
+  position: relative;
+  display: flex;
+  padding-top: 20px;
+`;
+
+class TestImages extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      images: []
+    };
+  }
+
+  render () {
+    let { reference, test } = this.props.info;
+    let { status, settings } = this.props;
+
+    this.state.images = [
+      {
+        id: "refImage",
+        label: "Reference",
+        src: reference,
+        visible: settings.refImage
+      },
+      {
+        id: "testImage",
+        label: "Test",
+        src: test,
+        visible: settings.testImage
+      }
+    ];
+
+    if(status !== 'pass') {
+      this.state.images.push({
+        id: "diffImage",
+        label: "Diff",
+        src: this.props.info.diffImage,
+        visible: settings.diffImage
+      })
+    }
+
+    return (
+      <ImagesWrapper>
+        {this.state.images.map((img, i) =>
+          <ImagePreview src={img.src} id={img.id} label={img.label} key={i} hidden={!img.visible} />
+        )}
+      </ImagesWrapper>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    settings: state.layoutSettings
+  }
+};
+
+const TestImagesContainer = connect(mapStateToProps)(TestImages);
+
+export default TestImagesContainer
diff --git a/compare/src/components/organisms/TestCard.js b/compare/src/components/organisms/TestCard.js
@@ -6,6 +6,9 @@ import { colors, shadows } from '../../styles';
 // atoms
 import TextDetails from '../atoms/TextDetails';
 
+// molecules
+import TestImages from '../molecules/TestImages';
+
 const CardWrapper = styled.div`
   position: relative;
   margin: 10px auto;
@@ -33,6 +36,7 @@ export default class TestCard extends React.Component {
     return (
       <CardWrapper status={status} >
         <TextDetails info={info} />
+        <TestImages info={info} status={status} />
       </CardWrapper>
     );
   }