#102 fixing material-ui

MetaCell · Mar 3, 2020 · 28f5214 · 28f5214
1 parent 24c7ca1
commit 28f5214
Show file tree

Hide file tree

Showing 57 changed files with 748 additions and 491 deletions.
diff --git a/ComponentsInitialization.js b/ComponentsInitialization.js
diff --git a/Main.js b/Main.js
@@ -22,9 +22,27 @@ jQuery(function () {
 
   const customTheme = {
     palette: {
-      primary1Color: '#543a73',
-      primary2Color: '#eb557a',
-      primary3Color: '#ebd07a'
+      type: 'light',
+      primary: {
+        main: '#543a73',
+        light: '#634587',
+        dark: '#5e4081',
+        contrastText: '#fff'
+      },
+      secondary: {
+        main: '#eb557a',
+        light: '#66d2e2',
+        contrastText: '#fff'
+      },
+      text: {
+        primary: '#333',
+        secondary: '#333'
+      }
+
+    },
+    typography: {
+      htmlFontSize: 16,
+      fontFamily: ["Roboto", "Helvetica", "Arial", "sans-serif"]
     }
   };
 

diff --git a/NetPyNE.js b/NetPyNE.js
@@ -156,7 +156,7 @@ export default class NetPyNE extends React.Component {
               <div style={{ marginLeft: -12 }} >
                 <NetPyNEToolBar changeTab={this.handleTabChangedByToolBar} />
               </div>
-              <div lastChild={true} style={{ display: 'flex', flexFlow: 'rows', width:'100%', marginRight: -10 }}>
+              <div style={{ display: 'flex', flexFlow: 'rows', width:'100%', marginRight: -10 }}>
                 <NetPyNETabs label={this.state.value} handleChange={this.handleChange} handleTransitionOptionsChange={this.handleTransitionOptionsChange}/>
               </div>
             </Toolbar>

diff --git a/components/base/SelectField.js b/components/base/SelectField.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+export default class SelectField extends Component{
+  constructor (props){
+    super(props);
+  }
+
+  render () {
+    const { id, label, children, ...selectProps } = this.props;
+    return <FormControl>
+      <InputLabel id={id + '-label'}>{label}</InputLabel>
+      <Select
+        labelId={id + '-label'}
+        id={id}
+        error = { !!selectProps.errorText }
+        {...selectProps}
+      >
+        {children}
+      </Select>
+      {
+        selectProps.errorText ? <FormHelperText error> {selectProps.errorText } </FormHelperText> : ''
+      }
+
+    </FormControl>;
+  }
+
+}
diff --git a/components/definition/cellRules/NetPyNECellRule.js b/components/definition/cellRules/NetPyNECellRule.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
-import SelectField from '@material-ui/core/Select';
+import SelectField from '../../base/SelectField';
 import Button from '@material-ui/core/Button';
 import Utils from '../../../Utils';
 import NetPyNEField from '../../general/NetPyNEField';
 import NetPyNECoordsRange from '../../general/NetPyNECoordsRange';
 import Dialog from '@material-ui/core/Dialog/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
 var PythonControlledCapability = require('geppetto-client/js/communication/geppettoJupyter/PythonControlledCapability');
 var PythonMethodControlledSelectField = PythonControlledCapability.createPythonControlledControlWithPythonDataFetch(SelectField);
@@ -77,29 +81,34 @@ export default class NetPyNECellRule extends React.Component {
         insetChildren={true}
         checked={selected.indexOf(name) > -1}
         value={name}
-        primaryText={name}
-      />
+      >{name}</MenuItem>
     ));
   }
 
   render () {
     var actions = [
       <Button
         variant="contained"
-        primary
+        color="primary"
         label={"BACK"}
         onTouchTap={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
       />
     ];
     var title = this.state.errorMessage;
     var children = this.state.errorDetails;
     var dialogPop = (this.state.errorMessage != undefined ? <Dialog
-      title={title}
       open={true}
-      actions={actions}
-      bodyStyle={{ overflow: 'auto' }}
       style={{ whiteSpace: "pre-wrap" }}>
-      {children}
+      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+      <DialogContent style={{ overflow: "auto" }}>
+        <DialogContentText id="alert-dialog-description">
+          {children}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        { actions }
+      </DialogActions>
+
     </Dialog> 
       : undefined
     )
@@ -111,7 +120,7 @@ export default class NetPyNECellRule extends React.Component {
             onChange={this.handleRenameChange}
             value={this.state.currentName}
             disabled={this.renaming}
-            floatingLabelText="The name of the cell rule"
+            label="The name of the cell rule"
             className={"netpyneField"}
             id={"cellRuleName"}
           />

diff --git a/components/definition/cellRules/NetPyNECellRules.js b/components/definition/cellRules/NetPyNECellRules.js
@@ -13,6 +13,10 @@ import NetPyNENewMechanism from './sections/mechanisms/NetPyNENewMechanism';
 import NetPyNEMechanismThumbnail from './sections/mechanisms/NetPyNEMechanismThumbnail';
 import NavigationChevronRight from '@material-ui/icons/ChevronRight';
 import Dialog from '@material-ui/core/Dialog/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
 import Utils from '../../../Utils';
 import NetPyNEHome from '../../general/NetPyNEHome';
@@ -493,16 +497,21 @@ export default class NetPyNECellRules extends React.Component {
     let selection = null;
     let container = null;
 
-    const actions = <Button variant="contained" primary label={"BACK"} onTouchTap={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}/>
+    const actions = <Button variant="contained" color="primary" label={"BACK"} onTouchTap={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}/>
 
     const dialogPop = (errorMessage != undefined 
       ? <Dialog
-        title={errorMessage}
         open={true}
-        actions={actions}
-        bodyStyle={{ overflow: 'auto' }}
         style={{ whiteSpace: "pre-wrap" }}>
-        {errorDetails}
+        <DialogTitle id="alert-dialog-title">{errorMessage}</DialogTitle>
+        <DialogContent style={{ overflow: 'auto' }}>
+          <DialogContentText id="alert-dialog-description">
+            {errorDetails}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          { actions }
+        </DialogActions>
       </Dialog> 
       : undefined
     );
@@ -586,10 +595,10 @@ export default class NetPyNECellRules extends React.Component {
             />
 
             <FloatingActionButton
-              zDepth={1}
+              style={{ "zIndex": 1 }}
               id="newCellRuleButton"
               style={styles.cellRule}
-              secondary={ page != 'main' }
+              color ={ page != 'main' ? 'secondary' : 'primary' }
               data-tooltip={ this.createTooltip('cellRule')}
               className={"actionButton smallActionButton"}
               onClick={() => this.handleHierarchyClick('main')}
@@ -602,18 +611,15 @@ export default class NetPyNECellRules extends React.Component {
             <Button
               id="newSectionButton"
               variant="contained"
-              style={styles.sections.container}
-              disabledBackgroundColor="grey"
-              buttonStyle={styles.sections.icon}
-              primary={ page != 'mechanisms' }
-              secondary={ page == 'mechanisms' }
+              style={{ ...styles.sections.container, ...styles.sections.icon }}
+              color={ page != 'mechanisms' ? "primary" : "secondary"}
               disabled={ selectedCellRule == undefined }
               onClick={ () => this.handleHierarchyClick('sections') }
               data-tooltip={ this.createTooltip('section')}
             >
-              <p style={{ color: 'white', height: '100%' }}>
+              <div style={{ color: 'white', height: '100%' }}>
                 {this.createLabel('sections')}
-              </p>
+              </div>
             </Button>
 
             <NavigationChevronRight style={styles.rightArrow}/>

diff --git a/components/definition/cellRules/sections/NetPyNESection.js b/components/definition/cellRules/sections/NetPyNESection.js
@@ -1,13 +1,17 @@
 import React from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
-import SelectField from '@material-ui/core/Select';
+import SelectField from '../../../base/SelectField';
 import FontIcon from '@material-ui/core/Icon';
 import CardContent from '@material-ui/core/CardContent';
 import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
 import ListComponent from '../../../general/List';
 import NetPyNEField from '../../../general/NetPyNEField';
 import Dialog from '@material-ui/core/Dialog/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 import Button from '@material-ui/core/Button';
 
 import Utils from '../../../../Utils';
@@ -17,9 +21,6 @@ var PythonControlledTextField = PythonControlledCapability.createPythonControlle
 var PythonControlledListComponent = PythonControlledCapability.createPythonControlledControl(ListComponent);
 var PythonMethodControlledSelectField = PythonControlledCapability.createPythonControlledControlWithPythonDataFetch(SelectField);
 
-const hoverColor = '#66d2e2';
-const changeColor = 'rgb(0, 188, 212)';
-
 export default class NetPyNESection extends React.Component {
 
   constructor (props) {
@@ -68,7 +69,8 @@ export default class NetPyNESection extends React.Component {
 
     return <BottomNavigationAction
       id={id}
-      key={sectionId}
+      key={index}
+      value={index}
       label={label}
       icon={(<FontIcon className={"fa " + icon}></FontIcon>)}
       onClick={() => this.select(index, sectionId)}
@@ -86,7 +88,9 @@ export default class NetPyNESection extends React.Component {
           key={name}
           value={name}
           primaryText={name}
-        />
+        >
+          {name}
+        </MenuItem>
       ));
     }
   }
@@ -95,7 +99,7 @@ export default class NetPyNESection extends React.Component {
     var actions = [
       <Button
         variant="contained"
-        primary
+        color="primary"
         label={"BACK"}
         onTouchTap={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
       />
@@ -104,12 +108,18 @@ export default class NetPyNESection extends React.Component {
     var children = this.state.errorDetails;
     var dialogPop = (this.state.errorMessage != undefined
       ? <Dialog
-        title={title}
         open={true}
-        actions={actions}
-        bodyStyle={{ overflow: 'auto' }}
+
         style={{ whiteSpace: "pre-wrap" }}>
-        {children}
+        <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+        <DialogContent style={{ overflow: 'auto' }}>
+          <DialogContentText id="alert-dialog-description">
+            {children}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          { actions }
+        </DialogActions>
       </Dialog> 
       : undefined
     );
@@ -123,7 +133,7 @@ export default class NetPyNESection extends React.Component {
             id={"cellParamsSectionName"}
             onChange={this.handleRenameChange}
             value = {this.state.currentName}
-            floatingLabelText="The name of the section"
+            label="The name of the section"
             className={"netpyneField"}
           />
         </div>
@@ -190,8 +200,8 @@ export default class NetPyNESection extends React.Component {
     return (
       <div>
 
-        <CardContent zDepth={0}>
-          <BottomNavigation selectedIndex={this.state.selectedIndex}>
+        <CardContent style={{ "zIndex": 0 }}>
+          <BottomNavigation value={this.state.selectedIndex} showLabels>
             {bottomNavigationItems}
           </BottomNavigation>
         </CardContent>

diff --git a/components/definition/cellRules/sections/NetPyNESectionThumbnail.js b/components/definition/cellRules/sections/NetPyNESectionThumbnail.js
@@ -37,7 +37,7 @@ export default class NetPyNESectionThumbnail extends React.Component {
 
     let label;
     if (isHovered && selected) {
-      label = <FontIcon className="fa fa-trash-o" color="white" hoverColor="white"/> 
+      label = <FontIcon className="fa fa-trash-o" style={{ color: "white" }}/> 
     } else {
       label = name.length > 14 ? `${name.slice(0,10)}...` : name
     }
@@ -46,9 +46,8 @@ export default class NetPyNESectionThumbnail extends React.Component {
         <Button
           variant="contained"
           id={name}
-          primary={true} 
+          color="primary" 
           style={ styles.btn }
-          buttonStyle={ styles.btn }
           onMouseEnter={ () => this.setState({ isHovered: true }) }
           onMouseLeave={ () => this.setState({ isHovered: false }) }
           data-tooltip={isHovered && name.length > 14 ? name : undefined}