From 8d3bff49919c566380a5194a633fd76cfafc2cff Mon Sep 17 00:00:00 2001
From: David Ballester Mena <david.ballester.mena@gmail.com>
Date: Sat, 2 Nov 2019 19:29:55 +0100
Subject: [PATCH] feat(graph): improve small layout

---
 src/components/navbar/navbar.component.js     |  7 +++--
 .../graph/components/graph-large.component.js |  7 ++++-
 .../graph/components/graph-small.component.js | 30 +++++++++++++------
 src/scenes/graph/graph.component.js           |  9 ++----
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/navbar/navbar.component.js b/src/components/navbar/navbar.component.js
index 0bd7e71..794e8fd 100644
--- a/src/components/navbar/navbar.component.js
+++ b/src/components/navbar/navbar.component.js
@@ -13,10 +13,10 @@ 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">
@@ -24,8 +24,8 @@ function Navbar({ title, onBack, classes, children }) {
           </Typography>
           {children}
         </Toolbar>
+        {additionalToolbars}
       </AppBar>
-      <Toolbar />
     </>
   );
 }
@@ -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);
diff --git a/src/scenes/graph/components/graph-large.component.js b/src/scenes/graph/components/graph-large.component.js
index 2330959..182653f 100644
--- a/src/scenes/graph/components/graph-large.component.js
+++ b/src/scenes/graph/components/graph-large.component.js
@@ -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';
@@ -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%">
diff --git a/src/scenes/graph/components/graph-small.component.js b/src/scenes/graph/components/graph-small.component.js
index 1fa524c..e643cdd 100644
--- a/src/scenes/graph/components/graph-small.component.js
+++ b/src/scenes/graph/components/graph-small.component.js
@@ -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';
 
@@ -28,17 +29,28 @@ 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'}
@@ -46,7 +58,7 @@ function GraphSmall({ classes }) {
         aria-labelledby="simple-tab-0"
         className={classes.tabContent}
       >
-        {value === 0 && <Editor height="100%" width="100%" />}
+        <Editor height="100%" width="100%" />
       </Box>
       <Box
         role="tabpanel"
diff --git a/src/scenes/graph/graph.component.js b/src/scenes/graph/graph.component.js
index 2927192..aeaa061 100644
--- a/src/scenes/graph/graph.component.js
+++ b/src/scenes/graph/graph.component.js
@@ -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';
@@ -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} />}
     </>
   );
 }