diff --git a/src/client/components/DatasetSelector.js b/src/client/components/DatasetSelector.js index 47b2e47843f6303f427c438aeb4fb6081135bc87..5e28cc4efb7ea952cce0a50dde3323eea8f6e1f6 100644 --- a/src/client/components/DatasetSelector.js +++ b/src/client/components/DatasetSelector.js @@ -3,12 +3,8 @@ import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; -//import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; import Checkbox from '@material-ui/core/Checkbox'; -//import IconButton from '@material-ui/core/IconButton'; -//import CommentIcon from '@material-ui/icons/Comment'; -import ListSubheader from '@material-ui/core/ListSubheader'; const styles = theme => ({ root: { @@ -30,15 +26,9 @@ const DatasetSelector = props => { props.toggleDataset(value); }; - // <ListItemSecondaryAction> - // <IconButton aria-label="Comments"> - // <CommentIcon /> - // </IconButton> - // </ListItemSecondaryAction> - return ( <div className={classes.root}> - <List subheader={<ListSubheader>Select data sources</ListSubheader>}> + <List> {Object.keys(props.datasets).map(id => ( <ListItem key={id} @@ -54,7 +44,6 @@ const DatasetSelector = props => { disableRipple /> <ListItemText primary={props.datasets[id].title} /> - </ListItem> ))} </List> diff --git a/src/client/components/IntegrationAutosuggest.js b/src/client/components/IntegrationAutosuggest.js index 14d43c851bfa5a350407bc3eaee976d692d2733b..0912f436d0ffe1f8c8c299d622584cdcae4515c6 100644 --- a/src/client/components/IntegrationAutosuggest.js +++ b/src/client/components/IntegrationAutosuggest.js @@ -49,7 +49,7 @@ const styles = theme => ({ container: { //flexGrow: 0, position: 'relative', - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing.unit * 4, // paddingLeft: theme.spacing.unit * 15, // paddingRight: theme.spacing.unit * 15, //marginLeft: 24, diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js index d74b7d69390517003c15f52306397ee501fd3fd6..03e242c650703d748b1dfb89643a7c29efc35bb9 100644 --- a/src/client/containers/MapApp.js +++ b/src/client/containers/MapApp.js @@ -7,13 +7,11 @@ import Drawer from '@material-ui/core/Drawer'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; -import Divider from '@material-ui/core/Divider'; +// import Divider from '@material-ui/core/Divider'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; -import Tabs from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; import IntegrationAutosuggest from '../components/IntegrationAutosuggest'; import LeafletMap from '../components/map/LeafletMap'; import Message from '../components/Message'; @@ -21,6 +19,11 @@ import VirtualizedTable from '../components/VirtualizedTable'; import DatasetSelector from '../components/DatasetSelector'; import Immutable from 'immutable'; import Pie from '../components/Pie.js'; +import ExpansionPanel from '@material-ui/core/ExpansionPanel'; +import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; +import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + import { updateQuery, toggleDataset, @@ -85,7 +88,7 @@ const styles = theme => ({ drawerHeader: { display: 'flex', alignItems: 'center', - justifyContent: 'center', + justifyContent: 'flex-end', padding: '0 8px', ...theme.mixins.toolbar, }, @@ -152,26 +155,32 @@ let MapApp = (props) => { }} > <div className={classes.drawerHeader}> - <Tabs - value={0} - onChange={null} - fullWidth - indicatorColor="secondary" - textColor="secondary" - > - <Tab label="Places" /> - <Tab label="Options" disabled /> - </Tabs> <IconButton onClick={props.closeDrawer}> {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />} </IconButton> </div> - <Divider /> - <DatasetSelector - datasets={props.search.datasets} - toggleDataset={props.toggleDataset} - /> - <Divider /> + <ExpansionPanel> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Select data sources</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <DatasetSelector + datasets={props.search.datasets} + toggleDataset={props.toggleDataset} + /> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Saved searches</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> <div className={classes.drawerSearch}> <IntegrationAutosuggest search={props.search}