From 8ba11e99634415b01b60ffde1a1ac4d58dc2e7e8 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 7 Feb 2019 17:32:20 +0000
Subject: [PATCH] add icons for home and info

---
 src/components/Toolbar.jsx                   | 10 +++++-
 src/components/ToolbarBottomActions.jsx      | 37 ++++++++++----------
 src/components/presentational/Icons/Cover.js | 21 +++++++++++
 src/components/presentational/Icons/Info.js  | 21 +++++++++++
 src/components/presentational/Icons/Sites.js |  6 ++--
 5 files changed, 72 insertions(+), 23 deletions(-)
 create mode 100644 src/components/presentational/Icons/Cover.js
 create mode 100644 src/components/presentational/Icons/Info.js

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 519c6f0..76b9cca 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -165,10 +165,17 @@ class Toolbar extends React.Component {
           {(isTags) ? this.renderToolbarTab(2, tagsLabel, 'filter_list') : null}
         </div>
         <ToolbarBottomActions
+          info={{
+            enabled: this.props.infoShowing,
+            toggle: this.props.actions.toggleInfoPopup
+          }}
           sites={{
             enabled: this.props.sitesShowing,
             toggle: this.props.actions.toggleSites
           }}
+          cover={{
+            toggle: this.props.actions.toggleCover
+          }}
         />
       </div>
     )
@@ -197,7 +204,8 @@ function mapStateToProps (state) {
     viewFilters: state.app.filters.views,
     features: state.app.features,
     narrative: state.app.narrative,
-    sitesShowing: state.app.flags.isShowingSites
+    sitesShowing: state.app.flags.isShowingSites,
+    infoShowing: state.app.flags.isInfopopup
   }
 }
 
diff --git a/src/components/ToolbarBottomActions.jsx b/src/components/ToolbarBottomActions.jsx
index b20f87d..8040948 100644
--- a/src/components/ToolbarBottomActions.jsx
+++ b/src/components/ToolbarBottomActions.jsx
@@ -1,36 +1,35 @@
 import React from 'react'
 
-import SitesIcon from './presentational/Icons/Sites.js'
-// import RefreshIcon from './presentational/Icons/RefreshIcon.js'
-// import CoeventIcon from './presentational/Icons/CoeventIcon.js'
-// import RouteIcon from './presentational/Icons/RouteIcon.js'
+import SitesIcon from './presentational/Icons/Sites'
+import CoverIcon from './presentational/Icons/Cover'
+import InfoIcon from './presentational/Icons/Info'
 
 function ToolbarBottomActions (props) {
-  function renderMapActions () {
-    return (
+  function renderToggles () {
+    return [
       <div className='bottom-action-block'>
         {process.env.features.USE_SITES ? <SitesIcon
           isActive={props.sites.enabled}
           onClickHandler={props.sites.toggle}
         /> : null}
+      </div>,
+      <div className='botttom-action-block'>
+        <InfoIcon
+          isActive={props.info.enabled}
+          onClickHandler={props.info.toggle}
+        />
+      </div>,
+      <div className='botttom-action-block'>
+        {process.env.features.USE_COVER ? <CoverIcon
+          onClickHandler={props.cover.toggle}
+        /> : null}
       </div>
-    )
+    ]
   }
 
   return (
     <div className='bottom-actions'>
-      {renderMapActions()}
-      <div className='bottom-action-block'>
-        {/* <button className='action-button tiny default' onClick={() => { toggleLanguage()}}> */}
-        {/*   {(props.language === 'es-MX') ? 'ES' : 'EN' } */}
-        {/* </button> */}
-        {/* <button className='action-button info tiny default' onClick={() => { this.toggleInfoPopup()}}> */}
-        {/*   i */}
-        {/* </button> */}
-        {/* <button className='action-button tiny' onClick={() => this.resetAllFilters()}> */}
-        {/*   <RefreshIcon /> */}
-        {/* </button> */}
-      </div>
+      {renderToggles()}
     </div>
   )
 }
diff --git a/src/components/presentational/Icons/Cover.js b/src/components/presentational/Icons/Cover.js
new file mode 100644
index 0000000..e1f1029
--- /dev/null
+++ b/src/components/presentational/Icons/Cover.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const CoverIcon = ({ isActive, isDisabled, onClickHandler }) => {
+  let classes = (isActive) ? 'action-button enabled' : 'action-button'
+  if (isDisabled) {
+    classes = 'action-button disabled'
+  }
+
+  return (
+    <button
+      className={classes}
+      onClick={onClickHandler}
+    >
+      <i class='material-icons'>
+        home
+      </i>
+    </button>
+  )
+}
+
+export default CoverIcon
diff --git a/src/components/presentational/Icons/Info.js b/src/components/presentational/Icons/Info.js
new file mode 100644
index 0000000..f328021
--- /dev/null
+++ b/src/components/presentational/Icons/Info.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const CoverIcon = ({ isActive, isDisabled, onClickHandler }) => {
+  let classes = (isActive) ? 'action-button enabled' : 'action-button'
+  if (isDisabled) {
+    classes = 'action-button disabled'
+  }
+
+  return (
+    <button
+      className={classes}
+      onClick={onClickHandler}
+    >
+      <i class='material-icons'>
+        info
+      </i>
+    </button>
+  )
+}
+
+export default CoverIcon
diff --git a/src/components/presentational/Icons/Sites.js b/src/components/presentational/Icons/Sites.js
index 0b394cb..86dcf06 100644
--- a/src/components/presentational/Icons/Sites.js
+++ b/src/components/presentational/Icons/Sites.js
@@ -11,9 +11,9 @@ const SitesIcon = ({ isActive, isDisabled, onClickHandler }) => {
       className={classes}
       onClick={onClickHandler}
     >
-      <svg x='0px' y='0px' width='30px' height='20px' viewBox='0 0 30 20' enableBackground='new 0 0 30 20'>
-        <path d='M24.615,6.793H5.385c-2.761,0-3,0.239-3,3v0.414c0,2.762,0.239,3,3,3h7.621l1.996,2.432l1.996-2.432h7.618c2.762,0,3-0.238,3-3V9.793C27.615,7.032,27.377,6.793,24.615,6.793z' />
-      </svg>
+      <i class='material-icons'>
+        location_on
+      </i>
     </button>
   )
 }