#136 Moving HLS to flexlaout. Styling

Author: rodriguez-facundo

webapp/Main.js

@@ -25,6 +25,7 @@ jQuery(function () {
   require('./css/netpyne.less');
   require('./css/material.less');
   require('./css/traceback.less');
+  require('./css/flexlayout.less');
 
   const store = configureStore();
 

webapp/Theme.js

@@ -1,13 +1,15 @@
 
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 import purple from '@material-ui/core/colors/purple';
-import pink from '@material-ui/core/colors/pink';
+import orange from '@material-ui/core/colors/orange';
 
-// pink
-const secondaryColor = pink['A200']
-// purple
-const primaryColor = 'rgb(84, 58, 115)'
+// orange
+const primaryColor = '#f67700'
+const secondaryColor = '#f67700'
 
+const bgLight = '#616161';
+const bgRegular = '#424242';
+const bgDark = '#212121';
 
 export default createMuiTheme({
   typography: {
@@ -21,17 +23,20 @@ export default createMuiTheme({
     }
   },
   palette: {
+    type: 'dark',
     primary: { main: primaryColor, },
-    secondary: { main: secondaryColor, }
+    secondary: { main: bgLight, }
   },
   overrides: {
     MuiInputLabel: { formControl: { top: '-6px' } },
     MuiInput: {
       input: {
         outline: 'none !important', 
         border: 'none !important', 
-        boxShadow: 'none !important' 
+        boxShadow: 'none !important',
       },
+      root:{ color: 'white' }
+
     },
     MuiSelect: {
       root: {
@@ -40,6 +45,23 @@ export default createMuiTheme({
         boxShadow: 'none !important'
       },
       select: { "&:focus" :{ background: "none" } },
-    }
+    },
+    MuiCard: { root: { height: '100%', backgroundColor: bgRegular, overflowY: 'auto' } },
+    MuiBottomNavigation: { root: { backgroundColor: bgRegular } },
+    MuiPaper: { root: { color: 'inherit' } },
+    MuiBottomNavigationAction: { root: { color: 'white' } },
+    MuiFab:{ 
+      secondary: { color: 'white' },
+      primary: { color: 'white' } 
+    },
+    MuiButton: { 
+      containedSecondary: { color: 'white' },
+      containedPrimary: { color: 'white' },
+    },
+    MuiMenuItem: { root: { color: 'white' } },
+
+    MuiListItemText: { root: { color: 'white' } },
+    MuiDialogTitle: { root: { color: 'white' } }
+    
   }
 });

webapp/components/NetPyNE.js

@@ -1,21 +1,40 @@
 import React from "react";
 import Toolbar from "@material-ui/core/Toolbar";
-import Transition from "./transition/Transition";
+
 import {
-  NetPyNESynapses,
-  NetPyNEConnectivityRules,
-  NetPyNECellRules,
-  NetPyNEStimulationSources,
-  NetPyNEStimulationTargets,
-  NetPyNESimConfig,
   NetPyNEToolBar,
   NetPyNETabs,
-  NetPyNEPopulations,
   LayoutManager,
-  NetPyNEPlots
 } from "netpyne/components";
 
-export default class NetPyNE extends React.Component {
+import { withStyles } from '@material-ui/core/styles'
+
+const styles = ({ zIndex, palette, spacing }) => ({
+  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.appBar }
+})
+class NetPyNE extends React.Component {
   constructor (props) {
     super(props);
     this.widgets = {};
@@ -50,79 +69,29 @@ export default class NetPyNE extends React.Component {
     if (!this.props.data) {
       return <div></div>;
     } else {
+      const { classes } = this.props
       if (this.props.editMode) {
-        var content = (
-          <div style={{ marginBottom: "50px" }}>
-            <NetPyNEPopulations model={"netParams.popParams"} />
-            <NetPyNECellRules model={"netParams.cellParams"} />
-            <NetPyNESynapses model={"netParams.synMechParams"} />
-            <NetPyNEConnectivityRules model={"netParams.connParams"} />
-            <NetPyNEStimulationSources model={"netParams.stimSourceParams"} />
-            <NetPyNEStimulationTargets model={"netParams.stimTargetParams"} />
-            <NetPyNESimConfig model={this.props.data.simConfig} />
-            <NetPyNEPlots model={"simConfig.analysis"} />
-          </div>
-        );
+        var content = <LayoutManager/>;
       } else {
         var content = <LayoutManager />;
       }
 
       return (
-        <div
-          style={{
-            height: "100%",
-            width: "100%",
-            display: "flex",
-            flexDirection: "column"
-          }}
-        >
-          <div style={{ position: "relative", zIndex: "100" }}>
-            <Toolbar
-              id="appBar"
-              style={{
-                backgroundColor: "#543a73",
-                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: "0px",
-                left: "0px",
-                zIndex: 100
-              }}
-            >
-              <div style={{ marginLeft: -12 }}>
+        <div className={classes.container}>
+          <div className={classes.content}>
+            <Toolbar id="appBar" className={classes.toolbar}>
+              <div className={classes.drawer}>
                 <NetPyNEToolBar />
               </div>
-              <div
-                style={{
-                  display: "flex",
-                  flexFlow: "rows",
-                  width: "100%",
-                  marginRight: -10
-                }}
-              >
+              <div className={classes.views}>
                 <NetPyNETabs />
               </div>
             </Toolbar>
           </div>
-
-          {/** TODO Reengineer Transition using the middleware to handle simulation and instantiation. The transition should only show content related to what actually we want to do
-          <Transition
-            tab={this.state.value}
-            clickOnTab={this.state.tabClicked}
-            handleDeactivateInstanceUpdate={this.handleDeactivateInstanceUpdate}
-            handleDeactivateSimulationUpdate={
-              this.handleDeactivateSimulationUpdate
-            }
-            freezeInstance={this.state.freezeInstance}
-            freezeSimulation={this.state.freezeSimulation}
-            fastForwardInstantiation={this.state.fastForwardInstantiation}
-            fastForwardSimulation={this.state.fastForwardSimulation}
-          /> */}
-
           {content}
         </div>
       );
     }
   }
 }
+export default withStyles(styles)(NetPyNE)

webapp/components/definition/cellRules/NetPyNECellRules.js

@@ -463,7 +463,7 @@ export default class NetPyNECellRules extends React.Component {
           return selectedCellRule
         }
       } else {
-        return <ContentAdd/>
+        return <ContentAdd style={{ color: 'white' }}/>
       }
 
     case 'sections':
@@ -479,7 +479,7 @@ export default class NetPyNECellRules extends React.Component {
         }
       } else {
         if (page == "sections" ) {
-          return <ContentAdd style={{ height: '100%' }}/>
+          return <ContentAdd style={{ height: '100%', color: 'white' }}/>
         } else {
           if (selectedCellRule) {
             if (!!model && !!model[selectedCellRule] && Object.keys(model[selectedCellRule]['secs']).length > 0){
@@ -659,11 +659,6 @@ export default class NetPyNECellRules extends React.Component {
 
     return (
       <Card style={{ clear: 'both' }}>
-        <CardHeader
-          id="CellRules"
-          title="Cell rules"
-          subheader="Define here the rules to set the biophysics and morphology of the cells in your network"
-        />
         {content}
         {dialogPop}
       </Card>

webapp/components/definition/cellRules/sections/NetPyNESectionThumbnail.js

@@ -46,7 +46,7 @@ export default class NetPyNESectionThumbnail extends React.Component {
         <Button
           variant="contained"
           id={name}
-          color={selected ? 'secondary' : 'primary'}
+          color={selected ? 'primary' : 'secondary'}
           style={ styles.btn }
           onMouseEnter={ () => this.setState({ isHovered: true }) }
           onMouseLeave={ () => this.setState({ isHovered: false }) }

webapp/components/definition/cellRules/sections/mechanisms/NetPyNEMechanismThumbnail.js

@@ -3,8 +3,8 @@ import IconButton from '@material-ui/core/IconButton';
 import FontIcon from '@material-ui/core/Icon';
 import DeleteDialogBox from '../../../../general/DeleteDialogBox';
 
-const hoverColor = '#66d2e2';
-const changeColor = 'rgb(0, 188, 212)';
+const hoverColor = 'white';
+const changeColor = 'white';
 
 const styles = {
   main: { float: 'left', '&:hover': { backgroundColor: 'red' } },
@@ -13,7 +13,6 @@ const styles = {
     marginTop:37,
     marginLeft:38,
     position:"absolute",
-    backgroundColor:"#f23d7a",
     color: 'white'
   }
 }
@@ -72,7 +71,7 @@ export default class NetPyNEMechanismThumbnail extends React.Component {
         >
           <div>
             { label }
-            <FontIcon style={{ color: changeColor, '&:hover': { color: hoverColor } }} className="gpt-fullgear"/>
+            <FontIcon color="primary" className="gpt-fullgear"/>
           </div>
         </IconButton>
         <DeleteDialogBox

webapp/components/definition/configuration/NetPyNESimConfig.js

@@ -302,12 +302,6 @@ export default class NetPyNESimConfig extends React.Component {
 
     return (
       <Card style={{ clear: 'both' }}>
-        <CardHeader
-          title="Simulation configuration"
-          subheader="Define here the configuration options for the simulation"
-          id={"Configuration"}
-        />
-
         <CardContent className={"tabContainer"}>
           <div>
             <BottomNavigation value={this.state.selectedIndex}>

webapp/components/definition/connectivity/NetPyNEConnectivityRules.js

@@ -221,11 +221,6 @@ export default class NetPyNEConnectivityRules extends Component {
 
     return (
       <Card style={{ clear: 'both' }}>
-        <CardHeader
-          title="Connectivity rules"
-          subheader="Define here the rules to generate the connections in your network"
-          id="Connections"
-        />
         {content}
       </Card>);
   }

webapp/components/definition/plots/NetPyNEInclude.js

@@ -268,7 +268,7 @@ export default class NetPyNEInclude extends Component {
         onClose={() => this.closeSecondPopover()}
         onMouseLeave={() => this.closeSecondPopover()}
       >
-        <List style={{ width: 200 }}>
+        <List style={{ width: 200 }} dense>
           {menuItems}
         </List>
       </Popover>

webapp/components/definition/plots/NetPyNENewPlot.js

@@ -27,8 +27,8 @@ export default class NetPyNENewPlot extends React.Component {
 
   render () {
     return <div>
-      <Fab size='small' style={{ margin: 10, float: 'left' }} onClick={this.handleButtonClick}>
-        <ContentAdd />
+      <Fab size='small' color='primary' style={{ margin: 10, float: 'left' }} onClick={this.handleButtonClick}>
+        <ContentAdd style={{ color: 'white' }}/>
       </Fab>
       <Menu 
         open={Boolean(this.state.anchorEl)}