Add report settings

Toggle text info

compare/src/components/atoms/ImagePreview.js

@@ -1,12 +1,13 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 import { colors, fonts } from '../../styles'
 
 const Image = styled.img`
   width: auto;
   max-width: 100%;
-  max-height: 150px;
+  max-height: ${props => (props.settings.textInfo ? '150px' : '300px')};
 
   &:hover {
     cursor: pointer;
@@ -16,7 +17,7 @@ const Image = styled.img`
 const Wrapper = styled.div`
   flex: 1 1 auto;
   padding: 0 25px;
-  padding-top: 20px;
+  padding-top: ${props => (props.withText ? '20px' : '60px')};
   text-align: center;
 `
 
@@ -32,15 +33,25 @@ const Label = styled.span`
   font-size: 12px;
 `
 
-export default class ImagePreview extends React.Component {
+class ImagePreview extends React.Component {
   render() {
-    let { hidden } = this.props
+    let { hidden, settings } = this.props
 
     return (
-      <Wrapper hidden={hidden}>
+      <Wrapper hidden={hidden} withText={settings.textInfo}>
         <Label>{this.props.label}</Label>
         <Image {...this.props} />
       </Wrapper>
     )
   }
 }
+
+const mapStateToProps = state => {
+  return {
+    settings: state.layoutSettings
+  }
+}
+
+const ImagePreviewContainer = connect(mapStateToProps)(ImagePreview)
+
+export default ImagePreviewContainer

compare/src/components/atoms/TextDetails.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 import { colors, fonts } from '../../styles'
@@ -24,12 +25,13 @@ const Value = styled.span`
   padding-right: 20px;
 `
 
-export default class TextDetails extends React.Component {
+class TextDetails extends React.Component {
   render() {
-    let { label, fileName, selector, diff } = this.props.info
+    const { label, fileName, selector, diff } = this.props.info
+    const { settings } = this.props
 
     return (
-      <WrapperDetails>
+      <WrapperDetails hidden={!settings.textInfo}>
         <Row>
           <Label>label: </Label>
           <Value>{label}</Value>
@@ -52,3 +54,13 @@ export default class TextDetails extends React.Component {
     )
   }
 }
+
+const mapStateToProps = state => {
+  return {
+    settings: state.layoutSettings
+  }
+}
+
+const TextDetailsContainer = connect(mapStateToProps)(TextDetails)
+
+export default TextDetailsContainer

compare/src/components/molecules/SettingsPopup.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
-import { updateSettings, toggleAllImages } from '../../actions'
+import { updateSettings, toggleAllImages, toggleTextInfo } from '../../actions'
 
 import { colors, fonts, shadows } from '../../styles'
 
@@ -69,6 +69,12 @@ class SettingsPopup extends React.Component {
 
     return (
       <PopupWrapper>
+        <SettingOption
+          id="textInfo"
+          label="Text info"
+          value={settings.textInfo}
+          onToggle={this.onToggle.bind(this, 'textInfo')}
+        />
         <SettingOption
           id="hideAll"
           label="Hide all images"
@@ -111,6 +117,9 @@ const mapDispatchToProps = dispatch => {
     },
     toggleAll: value => {
       dispatch(toggleAllImages(value))
+    },
+    toogleTextInfo: value => {
+      dispatch(toggleTextInfo(value))
     }
   }
 }

compare/src/components/molecules/TestImages.js

@@ -23,8 +23,6 @@ class TestImages extends React.Component {
   }
 
   onImageClick() {
-    console.log('click on image')
-
     let { openModal } = this.props
 
     openModal(this.props.info)

compare/src/reducers/layoutSettings.js

@@ -1,11 +1,3 @@
-function toggleAll(obj, val) {
-  let res = Object.assign({}, obj)
-
-  for (let key in res) res[key] = val
-
-  return res
-}
-
 const visibilityFilter = (state = {}, action) => {
   switch (action.type) {
     case 'UPDATE_SETTINGS':
@@ -14,7 +6,11 @@ const visibilityFilter = (state = {}, action) => {
       })
 
     case 'TOGGLE_ALL_IMAGES':
-      return Object.assign({}, state, toggleAll(state, action.value))
+      return Object.assign({}, state, {
+        refImage: action.value,
+        testImage: action.value,
+        diffImage: action.value
+      })
 
     default:
       return state

compare/src/store.js

@@ -33,6 +33,7 @@ const defaultState = {
     test: {}
   },
   layoutSettings: {
+    textInfo: true,
     refImage: true,
     testImage: true,
     diffImage: true