From d9c86ee6a8c7db2518704bff6c96f2bcb4e9c0cb Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 8 Jan 2019 14:02:25 +0000 Subject: [PATCH] add toggle button for sites --- src/actions/index.js | 7 ++ src/components/Map.jsx | 16 +++-- src/components/Toolbar.jsx | 23 ++++-- src/components/ToolbarBottomActions.jsx | 72 +++++++------------ .../presentational/Icons/SitesIcon.js | 11 ++- src/reducers/app.js | 13 ++++ src/scss/toolbar.scss | 2 +- src/store/initial.js | 2 +- 8 files changed, 82 insertions(+), 64 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 7f39a6d..da6fe64 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -244,6 +244,13 @@ export function updateSource(source) { // UI +export const TOGGLE_SITES = 'TOGGLE_SITES' +export function toggleSites() { + return { + type: TOGGLE_SITES + } +} + export const TOGGLE_FETCHING_DOMAIN = 'TOGGLE_FETCHING_DOMAIN' export function toggleFetchingDomain() { return { diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 7ced231..36608ba 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -43,13 +43,13 @@ class Map extends React.Component { this.map.setView([eventPoint.latitude, eventPoint.longitude]); } } - } + } initializeMap() { /** * Creates a Leaflet map and a tilelayer for the map background */ - const map = + const map = L.map(this.props.mapId) .setView(this.props.app.mapAnchor, 14) .setMinZoom(10) @@ -95,7 +95,7 @@ class Map extends React.Component { .getComputedStyle(mapNode) .getPropertyValue('transform'); - // Offset with leaflet map transform boundaries + // Offset with leaflet map transform boundaries this.setState({ mapTransformX: +transform.split(',')[4], mapTransformY: +transform.split(',')[5].split(')')[0] @@ -126,7 +126,7 @@ class Map extends React.Component { > - ); + ); } renderSites() { @@ -197,6 +197,7 @@ class Map extends React.Component { render() { + const { isShowingSites } = this.props.app.flags const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper'; return ( @@ -204,7 +205,7 @@ class Map extends React.Component {
{(this.map !== null) ? this.renderSVG() : ''} {(this.map !== null) ? this.renderMarkers() : ''} - {(this.map !== null) ? this.renderSites() : ''} + {(this.map !== null) && isShowingSites ? this.renderSites() : ''} {(this.map !== null) ? this.renderEvents() : ''} {(this.map !== null) ? this.renderNarratives() : ''} {(this.map !== null) ? this.renderSelected() : ''} @@ -226,7 +227,10 @@ function mapStateToProps(state) { selected: state.app.selected, highlighted: state.app.highlighted, mapAnchor: state.app.mapAnchor, - narrative: state.app.narrative + narrative: state.app.narrative, + flags: { + isShowingSites: state.app.flags.isShowingSites + } }, ui: { dom: state.ui.dom, diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 542456f..ea526f9 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -1,11 +1,13 @@ import React from 'react'; import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' +import * as actions from '../actions' import * as selectors from '../selectors' import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import Search from './Search.jsx'; import TagListPanel from './TagListPanel.jsx'; -// import ToolbarBottomActions from './ToolbarBottomActions.jsx'; +import ToolbarBottomActions from './ToolbarBottomActions.jsx'; import copy from '../js/data/copy.json'; import { trimAndEllipse } from '../js/utilities.js'; @@ -112,7 +114,6 @@ class Toolbar extends React.Component { {this.renderToolbarTab(0, 'Focus stories')} {this.renderToolbarTab(1, 'Explore freely')}
- {/* */} ) } @@ -124,7 +125,7 @@ class Toolbar extends React.Component { {this.renderClosePanel()} {this.renderToolbarNarrativePanel()} - {this.renderToolbarTagPanel()} + {/* {this.renderToolbarTagPanel()} */} ) @@ -159,7 +160,12 @@ class Toolbar extends React.Component { {this.renderToolbarTab(0, 'Narratives')} {(isTags) ? this.renderToolbarTab(1, 'Explore by tag') : ''} - {/* */} + ) } @@ -187,7 +193,14 @@ function mapStateToProps(state) { viewFilters: state.app.filters.views, features: state.app.features, narrative: state.app.narrative, + sitesShowing: state.app.flags.isShowingSites } } -export default connect(mapStateToProps)(Toolbar) +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators(actions, dispatch) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(Toolbar) diff --git a/src/components/ToolbarBottomActions.jsx b/src/components/ToolbarBottomActions.jsx index fe173a9..7e20bd2 100644 --- a/src/components/ToolbarBottomActions.jsx +++ b/src/components/ToolbarBottomActions.jsx @@ -5,60 +5,42 @@ import RefreshIcon from './presentational/Icons/RefreshIcon.js'; import CoeventIcon from './presentational/Icons/CoeventIcon.js'; import RouteIcon from './presentational/Icons/RouteIcon.js'; -class ToolbarBottomActions extends React.Component { - resetAllFilters() { - this.props.actions.resetAllFilters(); - } - - toggleInfoPopup() { - this.props.actions.toggleInfoPopup(); - } - - toggleLanguage() { - this.props.actions.toggleLanguage(); - } - - toggleMapViews(layer) { - this.props.actions.toggleMapView(layer); - } - - renderMapActions() { +function ToolbarBottomActions (props) { + function renderMapActions() { return (
- this.toggleMapViews(view)} - isEnabled={this.props.viewFilters.routes} - /> + {/* this.toggleMapViews(view)} */} + {/* isEnabled={this.props.viewFilters.routes} */} + {/* /> */} this.toggleMapViews(view)} - isEnabled={this.props.viewFilters.sites} - /> - this.toggleMapViews(view)} - isEnabled={this.props.viewFilters.coevents} + isEnabled={props.sites.enabled} + onClickHandler={props.sites.toggle} /> + {/* this.toggleMapViews(view)} */} + {/* isEnabled={this.props.viewFilters.coevents} */} + {/* /> */}
); } - render() { - return ( -
- {/*}{this.renderMapActions()} -
- - - -
*/} + return ( +
+ {renderMapActions()} +
+ {/* */} + {/* */} + {/* */}
- ); - } +
+ ) } export default ToolbarBottomActions; diff --git a/src/components/presentational/Icons/SitesIcon.js b/src/components/presentational/Icons/SitesIcon.js index a4461eb..71a4ae4 100644 --- a/src/components/presentational/Icons/SitesIcon.js +++ b/src/components/presentational/Icons/SitesIcon.js @@ -1,19 +1,18 @@ import React from 'react'; -const SitesIcon = ({ isEnabled, toggleMapViews }) => { - - const classes = (isEnabled) ? 'action-button active disabled' : 'action-button disabled'; +const SitesIcon = ({ isEnabled, onClickHandler }) => { + const classes = (isEnabled) ? 'action-button enabled' : 'action-button disabled'; return ( - ); + ) } export default SitesIcon; diff --git a/src/reducers/app.js b/src/reducers/app.js index aed37e2..8140d7a 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -14,6 +14,7 @@ import { RESET_ALLFILTERS, TOGGLE_LANGUAGE, TOGGLE_MAPVIEW, + TOGGLE_SITES, TOGGLE_FETCHING_DOMAIN, TOGGLE_FETCHING_SOURCES, TOGGLE_INFOPOPUP, @@ -126,6 +127,16 @@ function toggleMapView(appState, action) { }) } +function toggleSites(appState, action) { + return { + ...appState, + flags: { + ...appState.flags, + isShowingSites: !appState.flags.isShowingSites + } + } +} + function updateSource(appState, action) { return { ...appState, @@ -209,6 +220,8 @@ function app(appState = initial.app, action) { return toggleLanguage(appState, action) case TOGGLE_MAPVIEW: return toggleMapView(appState, action) + case TOGGLE_SITES: + return toggleSites(appState, action) case FETCH_ERROR: return fetchError(appState, action) case TOGGLE_FETCHING_DOMAIN: diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss index 445c927..0d9d400 100644 --- a/src/scss/toolbar.scss +++ b/src/scss/toolbar.scss @@ -152,7 +152,7 @@ cursor: default; } - &.active { + &.enabled { border: 1px solid $offwhite; color: $offwhite; diff --git a/src/store/initial.js b/src/store/initial.js index 77e66d3..ceed1e4 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -95,7 +95,7 @@ const initial = { isCardstack: true, isInfopopup: false, - isNotification: true + isShowingSites: true } },