Add diff scrub button

garris · Jan 5, 2018 · 8a94839 · 8a94839
1 parent 87d0e0a
commit 8a94839
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/compare/src/actions/index.js b/compare/src/actions/index.js
@@ -39,3 +39,10 @@ export const closeModal = value => {
     value
   }
 }
+
+export const toggleScrubberMode = value => {
+  return {
+    type: 'TOGGLE_SCRUBBER_MODE',
+    value
+  }
+}
diff --git a/compare/src/components/ecosystems/ScrubberModal.js b/compare/src/components/ecosystems/ScrubberModal.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import Modal from 'react-modal'
-import { closeModal } from '../../actions'
+import { closeModal, toggleScrubberMode } from '../../actions'
 
 // styles & icons
 import { colors, fonts, shadows } from '../../styles'
@@ -20,9 +20,9 @@ const Wrapper = styled.div`
 const ButtonClose = styled.button`
   position: absolute;
   right: 60px;
-  top: 25px;
-  width: 40px;
-  height: 40px;
+  top: 35px;
+  width: 30px;
+  height: 30px;
   background-image: url(${iconClose});
   background-size: 100%;
   background-repeat: no-repeat;
@@ -38,6 +38,26 @@ const ButtonClose = styled.button`
   }
 `
 
+const ButtonToggleView = styled.button`
+  display: block;
+  margin: 0 auto;
+  border: none;
+  border-radius: 3px;
+  background-color: ${colors.lightGray};
+  text-align: center;
+  padding: 12px 40px;
+  color: ${colors.secondaryText};
+  font-size: 16px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
 const customStyles = {
   content: {
     width: '100%',
@@ -57,25 +77,30 @@ class ScrubberModal extends React.Component {
   }
 
   render() {
-    let { reference: refImage, test: testImage } = this.props.scrubber.test
-    let { visible } = this.props.scrubber
+    const { reference: refImage, test: testImage } = this.props.scrubber.test
+    const { visible, mode } = this.props.scrubber
+    const { closeModal, handleButtonMode } = this.props
 
     return (
       <Wrapper>
         <Modal
           isOpen={visible}
           /* onAfterOpen={this.afterOpenModal} */
-          onRequestClose={this.props.closeModal}
+          onRequestClose={closeModal}
           style={customStyles}
           contentLabel="Example Modal"
         >
-          <ButtonClose onClick={this.props.closeModal} />
+          <ButtonClose onClick={closeModal} />
           <Logo />
+          <ButtonToggleView onClick={handleButtonMode}>
+            DIFF / SCRUB
+          </ButtonToggleView>
           {/* <div style={{ paddingTop: '20px', paddingLeft: '5px' }}>
             <TextDetails {...this.props} />
           </div> */}
-
-          <ImageScrubber testImage={testImage} refImage={refImage} />
+          {mode === 'scrub' && (
+            <ImageScrubber testImage={testImage} refImage={refImage} />
+          )}
         </Modal>
       </Wrapper>
     )
@@ -92,6 +117,9 @@ const mapDispatchToProps = dispatch => {
   return {
     closeModal: () => {
       dispatch(closeModal(false))
+    },
+    handleButtonMode: mode => {
+      dispatch(toggleScrubberMode(mode))
     }
   }
 }

diff --git a/compare/src/reducers/scrubber.js b/compare/src/reducers/scrubber.js
@@ -12,6 +12,11 @@ const scrubber = (state = {}, action) => {
         test: {}
       })
 
+    case 'TOGGLE_SCRUBBER_MODE':
+      return Object.assign({}, state, {
+        mode: state.mode === 'scrub' ? 'diff' : 'scrub'
+      })
+
     default:
       return state
   }

diff --git a/compare/src/store.js b/compare/src/store.js
@@ -30,6 +30,7 @@ const defaultState = {
   ],
   scrubber: {
     visible: false,
+    mode: 'scrub',
     test: {}
   },
   layoutSettings: {