From 470e836f622254a57100bcc7014d6bd9406f433f Mon Sep 17 00:00:00 2001
From: Gabriele Mantovani <gabriele.mantovani92@gmail.com>
Date: Tue, 31 Oct 2017 10:18:07 +0100
Subject: [PATCH] Add report settings

Toggle text info
---
 compare/src/components/atoms/ImagePreview.js  | 21 ++++++++++++++-----
 compare/src/components/atoms/TextDetails.js   | 18 +++++++++++++---
 .../src/components/molecules/SettingsPopup.js | 11 +++++++++-
 .../src/components/molecules/TestImages.js    |  2 --
 compare/src/reducers/layoutSettings.js        | 14 +++++--------
 compare/src/store.js                          |  1 +
 6 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/compare/src/components/atoms/ImagePreview.js b/compare/src/components/atoms/ImagePreview.js
index 644bee6f3..6e0d181c3 100644
--- a/compare/src/components/atoms/ImagePreview.js
+++ b/compare/src/components/atoms/ImagePreview.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 import { colors, fonts } from '../../styles'
@@ -6,7 +7,7 @@ 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
diff --git a/compare/src/components/atoms/TextDetails.js b/compare/src/components/atoms/TextDetails.js
index 610803a07..213f6ce24 100644
--- a/compare/src/components/atoms/TextDetails.js
+++ b/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
diff --git a/compare/src/components/molecules/SettingsPopup.js b/compare/src/components/molecules/SettingsPopup.js
index 57bace463..8708df288 100644
--- a/compare/src/components/molecules/SettingsPopup.js
+++ b/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))
     }
   }
 }
diff --git a/compare/src/components/molecules/TestImages.js b/compare/src/components/molecules/TestImages.js
index 2319a4eac..166d0a457 100644
--- a/compare/src/components/molecules/TestImages.js
+++ b/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)
diff --git a/compare/src/reducers/layoutSettings.js b/compare/src/reducers/layoutSettings.js
index 7f4e462a4..c4db04e4e 100644
--- a/compare/src/reducers/layoutSettings.js
+++ b/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
diff --git a/compare/src/store.js b/compare/src/store.js
index 54915af35..7453034a2 100644
--- a/compare/src/store.js
+++ b/compare/src/store.js
@@ -33,6 +33,7 @@ const defaultState = {
     test: {}
   },
   layoutSettings: {
+    textInfo: true,
     refImage: true,
     testImage: true,
     diffImage: true