#139 Move topbar and tabs-bar to Geppetto topbar component. Move simulate button to new design

Author: rodriguez-facundo

webapp/Theme.js

@@ -4,19 +4,21 @@ import purple from '@material-ui/core/colors/purple';
 import orange from '@material-ui/core/colors/orange';
 
 // orange
-const primaryColor = '#f67700'
-const secondaryColor = '#f67700'
+const primaryColor = '#37ABC8'
+const secondaryColor = '#37ABC8'
 
-const bgLight = '#616161';
-const bgRegular = '#424242';
-const bgDark = '#212121';
+export const bgLight = '#4A4A4A';
+export const bgRegular = '#434343';
+export const bgDark = '#353535';
+
+export const font = 'Roboto, Helvetica, Arial, sans-serif'
 
 export default createMuiTheme({
   typography: {
     useNextVariants: true,
     htmlFontSize: 12,
     fontSize: 10,
-    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+    fontFamily: font,
     button: {
       textTransform: "none",
       fontSize: "1.0rem"

webapp/components/NetPyNE.js

@@ -1,9 +1,7 @@
 import React from "react";
-import Toolbar from "@material-ui/core/Toolbar";
 
 import {
-  NetPyNEToolBar,
-  NetPyNETabs,
+  Topbar,
   LayoutManager,
   Drawer
 } from "netpyne/components";
@@ -58,14 +56,7 @@ class NetPyNE extends React.Component {
     return (
       <div className={classes.container}>
         <div className={classes.content}>
-          <Toolbar id="appBar" className={classes.toolbar}>
-            <div className={classes.drawer}>
-              <NetPyNEToolBar />
-            </div>
-            <div className={classes.views}>
-              <NetPyNETabs />
-            </div>
-          </Toolbar>
+          <Topbar/>
         </div>
         <div style={{ flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }}>
           <Drawer/>

webapp/components/index.js

@@ -16,6 +16,8 @@ import {
 } from "../redux/actions/general";
 import { closeDrawerDialogBox, openDrawerDialogBox } from '../redux/actions/drawer';
 
+import { openTopbarDialog, closeTopbarDialog, changePageTransitionMode } from '../redux/actions/topbar'
+
 const updateCardsDispatch = dispatch => ({ updateCards: () => dispatch(updateCards) });
 const pythonCallErrorDispatch = dispatch => ({ pythonCallErrorDialogBox: payload => dispatch(openBackendErrorDialog(payload)) });
 
@@ -164,15 +166,6 @@ export const NetPyNETabs = connect(
   })
 )(_NetPyNETabs);
 
-import _NetPyNEToolbar from "./settings/NetPyNEToolBar";
-export const NetPyNEToolBar = connect(
-  state => ({ ...state.general, ...state.drawer }),
-  dispatch => ({
-    closeDrawerDialogBox: () => dispatch(closeDrawerDialogBox),
-    openDrawerDialogBox: () => dispatch(openDrawerDialogBox),
-  })
-)(_NetPyNEToolbar);
-
 import SelectField from "./general/Select";
 export const NetPyNESelectField = connect((state, ownProps) => ({
   ...ownProps,
@@ -203,7 +196,7 @@ export const NetWorkControlButtons = connect(
   })
 )(_NetWorkControlButtons)
 
-import _ActionDialog from './settings/actions/ActionDialog'
+import _ActionDialog from './topbar/dialogs/ActionDialog'
 export const ActionDialog = connect(
   state => ({ ...state.errors, openErrorDialogBox: state.errors.openDialog }),
   dispatch => ({ 
@@ -234,6 +227,38 @@ export const Drawer = connect(
   })
 )(_Drawer)
 
+
+import _Topbar from "./topbar/Topbar";
+export const Topbar = connect(
+  state => ({ 
+    dialogOpen: state.topbar.dialogOpen,
+    editMode: state.general.editMode,
+    topbarDialogName: state.topbar.dialogName,
+    pageTransitionMode: state.topbar.pageTransitionMode
+  }),
+  dispatch => ({ 
+    dispatchAction: action => dispatch(action),
+    closeDialog: () => dispatch(closeTopbarDialog),
+    changePageTransitionMode: mode => dispatch(changePageTransitionMode(mode))
+  })
+)(_Topbar)
+
+import _SwitchPageButton from "./topbar/SwitchPageButton";
+export const SwitchPageButton = connect(
+  state => ({ 
+    editModelPage: state.general.editMode,
+    pageTransitionMode: state.topbar.pageTransitionMode,
+  }),
+  dispatch => ({ 
+    switchToEditModelPage: () => dispatch(editModel),
+    changePageTransitionMode: mode => dispatch(changePageTransitionMode(mode)),
+    createNetwork: () => dispatch(createNetwork),
+    createAndSimulateNetwork: () => dispatch(createAndSimulateNetwork),
+    showNetwork: () => dispatch(showNetwork)
+  })
+)(_SwitchPageButton)
+
+
 // ---------------------------------------------------------------------------------------- //
 
 // DEFAULTS

webapp/components/settings/Drawer.js

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
 import { makeStyles } from '@material-ui/core/styles';
-import Drawer from '@material-ui/core/Drawer';
+
+import Paper from '@material-ui/core/Paper'
 
 import IconButton from '@material-ui/core/IconButton'
-import Toolbar from '@material-ui/core/Toolbar';
+
 import List from '@material-ui/core/List';
 
 import ListItem from '@material-ui/core/ListItem';
@@ -23,41 +24,51 @@ import {
 
 
 const drawerOpenWidth = 200;
-const drawerCloseWidth = 54;
+const drawerCloseWidth = 48;
 
-const drawerCss = (entering, transitions, palette) => ({ 
+const drawerCss = (entering, transitions, palette, spacing) => ({ 
   overflow: 'hidden',
+  marginTop: spacing(1),
+  marginBottom: spacing(1),
+  marginLeft: spacing(1),
   width: props => props.width,
   flexShrink: 0,
   borderRight: 'none',
+  position: 'relative',
   transition: transitions.create('width', {
     easing: transitions.easing.sharp,
     duration: entering ? transitions.duration.enteringScreen : transitions.duration.leavingScreen,
   })
 })
 
-const useStyles = makeStyles(({ transitions, palette }) => ({
-  openDrawer: drawerCss(true, transitions, palette),
+const useStyles = makeStyles(({ transitions, palette, spacing }) => ({
+  openDrawer: drawerCss(true, transitions, palette, spacing),
 
-  closeDrawer: drawerCss(false, transitions, palette),
+  closeDrawer: drawerCss(false, transitions, palette, spacing),
 
-  colapse: {
+  buttonContainer: { textAlign: 'end' },
+  button: {
     color: 'white',
-    position: 'absolute',
-    bottom: 0,
-    right: 2
+    marginBottom: spacing(1),
+    marginRight: props => props.expand ? spacing(1) : 0,
+  },
+  text: { paddingLeft: spacing(1) },
+  container: { 
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+    height: '100%'
   },
-  paper: { backgroundColor: palette.grey['900'] },
 
-  selected: { height: 48, color: palette.primary.main },
-  unselected: { height: 48, color: palette.common.white },
-  noColor: { color: 'inherit' }
+  selected: { color: palette.primary.main, paddingLeft: spacing(1) },
+  unselected: { color: palette.common.white, paddingLeft: spacing(1) },
+  icon: { color: 'inherit', minWidth: 'unset' }
 }))
 
 export default ({ widgets, newWidget, editMode }) => {
   const [expand, setExpand] = useState({ dark: !editMode })
 
-  const classes = useStyles({ width: expand ? drawerOpenWidth : drawerCloseWidth });
+  const classes = useStyles({ width: expand ? drawerOpenWidth : drawerCloseWidth, expand });
 
   function createWidget (widgetId) {
     if (!widgets[widgetId]) {
@@ -92,49 +103,48 @@ export default ({ widgets, newWidget, editMode }) => {
   }
 
   return (
-    <div>
-      <Drawer
-        variant="permanent"
-        className={expand ? classes.openDrawer : classes.closeDrawer}
-        classes={{ paper: expand ? classes.openDrawer : classes.closeDrawer }}
-      >
-        <div>
-          <Toolbar/>
+    <Paper className={expand ? classes.openDrawer : classes.closeDrawer}>
+      <div className={classes.container}>
+        <div >
           <List dense>
             {getMenu().map(({ name, id }) => (
               <ListItem 
                 button
                 key={name}
+                dense
+                disableGutters
                 className={widgets[id] ? classes.selected : classes.unselected}
                 onClick={() => createWidget(id)}
               >
-                <ListItemIcon className={classes.noColor}>
-                  <AdjustIcon/>
+                <ListItemIcon className={classes.icon}>
+                  <AdjustIcon fontSize="large"/>
                 </ListItemIcon>
-                <ListItemText>
+                <ListItemText className={classes.text}>
                   <Typography noWrap>{name}</Typography>
                 </ListItemText>
               </ListItem>
             ))}
           </List>
+        </div>
+        <div></div>
 
-          
+        <div className={classes.buttonContainer}>
           <IconButton
-            className={classes.colapse}
+            className={classes.button}
             onClick={() => {
               setExpand(!expand)
               setTimeout(() => window.dispatchEvent(new Event('resize')), 400)
-              // pepe()
+            // pepe()
             }}
           >
             {expand ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
           </IconButton>
+        </div>
 
 
-        </div>
+      </div>
 
-      </Drawer>
-    </div>
+    </Paper>
   )
 
 }