Merge pull request #140 from MetaCell/feature/139

Feature/139

Author: filippomc

webapp/Theme.js

@@ -1,22 +1,21 @@
 
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
-import purple from '@material-ui/core/colors/purple';
-import orange from '@material-ui/core/colors/orange';
 
 // orange
-const primaryColor = '#f67700'
-const secondaryColor = '#f67700'
+export const primaryColor = '#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"
@@ -61,7 +60,8 @@ export default createMuiTheme({
     MuiMenuItem: { root: { color: 'white' } },
 
     MuiListItemText: { root: { color: 'white' } },
-    MuiDialogTitle: { root: { color: 'white' } }
+    MuiDialogTitle: { root: { color: 'white' } },
+    MuiTypography: { root: { color: 'white' } }
 
   }
 });

webapp/components/NetPyNE.js

@@ -1,39 +1,23 @@
 import React from "react";
-import Toolbar from "@material-ui/core/Toolbar";
 
 import {
-  NetPyNEToolBar,
-  NetPyNETabs,
+  Topbar,
   LayoutManager,
   Drawer
 } from "netpyne/components";
 
 import { withStyles } from '@material-ui/core/styles'
 
 const styles = ({ zIndex, palette, spacing }) => ({
+  root: { height: '100%', overflow: 'hidden' },
   container: {
     height: "100%",
     width: "100%",
     display: "flex",
     flexDirection: "column"
   },
-  toolbar: {
-    backgroundColor: palette.primary.main,
-    width: "100%",
-    boxShadow: "0 0px 4px 0 rgba(0, 0, 0, 0.2), 0 0px 8px 0 rgba(0, 0, 0, 0.19)",
-    position: "relative",
-    top: 0,
-    left: 0,
-    zIndex: zIndex.appBar
-  },
-  views: {
-    display: "flex",
-    flexFlow: "rows",
-    width: "100%",
-    marginRight: spacing(-1)
-  },
-  drawer: { marginLeft: spacing(-1) },
-  content: { position: "relative", zIndex: zIndex.drawer + 1 }
+  topbar: { position: "relative", zIndex: zIndex.drawer + 1 },
+  content: { flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }
 })
 
 
@@ -54,22 +38,16 @@ class NetPyNE extends React.Component {
 
   render () {
     const { classes } = this.props
-
     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>
-        </div>
-        <div style={{ flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }}>
-          <Drawer/>
-          <LayoutManager/>
+      <div className={classes.root}>
+        <div className={classes.container}>
+          <div className={classes.topbar}>
+            <Topbar/>
+          </div>
+          <div className={classes.content}>
+            <Drawer/>
+            <LayoutManager/>
+          </div>
         </div>
       </div>
     );

webapp/components/general/FileBrowser.js

@@ -140,6 +140,7 @@ export default class FileBrowser extends React.Component {
       <Dialog
         open={this.props.open}
         onClose={() => this.props.onRequestClose()}
+        style={{ zIndex: 5000 }}
       >
         <DialogContent>
           <div style={{ marginBottom: '15px', color: 'white' }}>

webapp/components/general/NetPyNEField.js

@@ -72,6 +72,7 @@ export default class NetPyNEField extends Component {
               onClick={() => this.handleOpenHelp(help)}
             />
             <Dialog
+              style={{ zIndex: 5000 }}
               open={this.state.openHelp}
               onClose={() => this.setState({ openHelp: false })}
             >

webapp/components/general/NetPyNEIcons.js

@@ -7,6 +7,7 @@ import {
   destroyWidget,
   minimizeWidget,
   maximizeWidget,
+  updateWidget,
   newWidget
 } from "../redux/actions/flexlayout";
 import { openBackendErrorDialog, closeBackendErrorDialog } from '../redux/actions/errors';
@@ -16,6 +17,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)) });
 
@@ -76,7 +79,7 @@ export const Dimensions = connect(
 
 import _NetPyNE from "./NetPyNE";
 export const NetPyNE = connect(
-  state => ({ editMode: state.general.editMode, }),
+  state => ({ editMode: state.general.editMode }),
   pythonCallErrorDispatch
 )(_NetPyNE);
 
@@ -91,6 +94,7 @@ import _LayoutManager from "./layout/LayoutManager";
 export const LayoutManager = connect(
   state => ({ ...state.flexlayout, editMode: state.general.editMode }),
   dispatch => ({
+    updateWidget: widget => dispatch(updateWidget(widget)),
     minimizeWidget: id => dispatch(minimizeWidget(id)),
     destroyWidget: id => dispatch(destroyWidget(id)),
     maximizeWidget: id => dispatch(maximizeWidget(id)),
@@ -153,26 +157,6 @@ export const NetPyNESynapses = connect(
   updateCardsDispatch
 )(PythonControlledCapability.createPythonControlledComponent(_NetPyNESynapses));
 
-import _NetPyNETabs from "./settings/NetPyNETabs";
-export const NetPyNETabs = connect(
-  state => state.general,
-  dispatch => ({
-    editModel: () => dispatch(editModel),
-    createNetwork: () => dispatch(createNetwork),
-    createAndSimulateNetwork: () => dispatch(createAndSimulateNetwork),
-    showNetwork: () => dispatch(showNetwork)
-  })
-)(_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 +187,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 => ({ 
@@ -212,18 +196,6 @@ export const ActionDialog = connect(
   })
 )(_ActionDialog)
 
-
-import _PlotButton from './instantiation/PlotButtons'
-export const PlotButtons = connect(
-  state => ({ ...state.errors, openErrorDialogBox: state.errors.openDialog }),
-  dispatch => ({
-    newWidget: conf => dispatch(newWidget(conf)),
-    closeBackendErrorDialog: () => dispatch(closeBackendErrorDialog),
-    pythonCallErrorDialogBox: payload => dispatch(openBackendErrorDialog(payload)) 
-  })
-)(_PlotButton)
-
-
 import _NetPyNEPythonConsole from './general/NetPyNEPythonConsole'
 export const NetPyNEPythonConsole = connect(
   null,
@@ -241,11 +213,44 @@ export const Drawer = connect(
     editMode: state.general.editMode 
   }),
   dispatch => ({ 
+    updateWidget: newConf => dispatch(updateWidget(newConf)),
     newWidget: widget => dispatch(newWidget(widget)),
     activateWidget: widgetId => dispatch(activateWidget(widgetId))
   })
 )(_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/index.js

@@ -2,7 +2,7 @@ import React, { createRef } from 'react';
 import ReactDOM from 'react-dom'
 import Canvas from '@geppettoengine/geppetto-client/js/components/interface/3dCanvas/Canvas';
 import ControlPanel from 'geppetto-client/js/components/interface/controlPanel/controlpanel';
-import IconButton from '@geppettoengine/geppetto-client/js/components/controls/iconButton/IconButton';
+
 import { NetWorkControlButtons } from 'netpyne/components'
 
 

webapp/components/instantiation/NetPyNEInstantiated.js

@@ -4,7 +4,6 @@ import { Tooltip } from 'netpyne/components';
 
 import { MODEL_STATE } from '../../constants'
 import { withStyles } from '@material-ui/core/styles';
-import { PlotButtons } from 'netpyne/components'
 
 const styles = ({ spacing }) => ({
   container: {
@@ -76,9 +75,6 @@ class NetWorkControlButtons extends React.Component {
             </div>
 
           </Tooltip>
-
-          
-          <PlotButtons/>
 
         </div>
       </div>