Skip to content

Commit

Permalink
feat(graph): improve small layout
Browse files Browse the repository at this point in the history
  • Loading branch information
davidballester committed Nov 2, 2019
1 parent e558efa commit 8d3bff4
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 20 deletions.
7 changes: 4 additions & 3 deletions src/components/navbar/navbar.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@ const styles = {
},
};

function Navbar({ title, onBack, classes, children }) {
function Navbar({ title, onBack, classes, children, additionalToolbars }) {
return (
<>
<AppBar>
<AppBar position="sticky">
<Toolbar>
{!!onBack && <BackButton onBack={onBack} />}
<Typography className={classes.title} variant="h6" color="inherit">
{title}
</Typography>
{children}
</Toolbar>
{additionalToolbars}
</AppBar>
<Toolbar />
</>
);
}
Expand All @@ -35,6 +35,7 @@ Navbar.propTypes = {
onBack: PropTypes.func,
classes: PropTypes.any,
children: PropTypes.any,
additionalToolbars: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
};

export default withStyles(styles)(Navbar);
7 changes: 6 additions & 1 deletion src/scenes/graph/components/graph-large.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Grid from '@material-ui/core/Grid';
import { Box } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

import Navbar from '../../../components/navbar';
import ActionsMenu from './actions-menu';
import Editor from './editor';
import Groups from './groups';
import SelectedItems from './selection';
Expand Down Expand Up @@ -40,9 +42,12 @@ const styles = () => ({
},
});

function GraphLarge({ classes }) {
function GraphLarge({ classes, openGraphList, graphName }) {
return (
<>
<Navbar title={graphName} onBack={openGraphList}>
<ActionsMenu />
</Navbar>
<Grid container classes={{ root: classes.grid }}>
<Grid item md={4} className={classes.panel}>
<Box className={classes.panelContent} padding={0} height="100%">
Expand Down
30 changes: 21 additions & 9 deletions src/scenes/graph/components/graph-small.component.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { useState } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Box from '@material-ui/core/Box';
import { withStyles } from '@material-ui/core/styles';

import Navbar from '../../../components/navbar';
import ActionsMenu from './actions-menu';
import Editor from './editor';
import Canvas from '../../../components/canvas';

Expand All @@ -28,25 +29,36 @@ function a11yProps(index) {
};
}

function GraphSmall({ classes }) {
function GraphSmall({ graphName, openGraphList, classes }) {
const [value, setValue] = useState(0);

return (
<>
<AppBar position="static">
<Tabs value={value} onChange={(event, newValue) => setValue(newValue)} aria-label="editor and graph view in separate tabs">
<Tab label="Editor" {...a11yProps(0)} />
<Tab label="Graph view" {...a11yProps(1)} />
</Tabs>
</AppBar>
<Navbar
title={graphName}
onBack={openGraphList}
additionalToolbars={
<Tabs
value={value}
onChange={(event, newValue) => setValue(newValue)}
aria-label="editor and graph view in separate tabs"
variant="fullWidth"
>
<Tab label="Editor" {...a11yProps(0)} />
<Tab label="Graph view" {...a11yProps(1)} />
</Tabs>
}
>
<ActionsMenu />
</Navbar>
<Box
role="tabpanel"
display={value === 0 ? 'block' : 'none'}
id="simple-tabpanel-0"
aria-labelledby="simple-tab-0"
className={classes.tabContent}
>
{value === 0 && <Editor height="100%" width="100%" />}
<Editor height="100%" width="100%" />
</Box>
<Box
role="tabpanel"
Expand Down
9 changes: 2 additions & 7 deletions src/scenes/graph/graph.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
import { useTheme } from '@material-ui/core/styles';

import ConfirmDeletes from './components/confirm-deletes';
import Navbar from '../../components/navbar';
import ActionsMenu from './components/actions-menu';
import EditGraph from './components/edit-graph';
import Export from './components/export';
import Onboarding from './components/onboarding';
Expand All @@ -20,15 +18,12 @@ export default function Graph({ graphId, graphName, loadedGraphId, loadGraph, op
const bigScreen = useMediaQuery(theme.breakpoints.up('md'));
return (
<>
<Navbar title={graphName} onBack={openGraphList}>
<ActionsMenu />
</Navbar>
<ConfirmDeletes />
<EditGraph />
<Export />
<Onboarding />
{bigScreen && <GraphLarge />}
{!bigScreen && <GraphSmall />}
{bigScreen && <GraphLarge graphName={graphName} openGraphList={openGraphList} />}
{!bigScreen && <GraphSmall graphName={graphName} openGraphList={openGraphList} />}
</>
);
}
Expand Down

0 comments on commit 8d3bff4

Please sign in to comment.