#136 Styling FileBrowser

Author: rodriguez-facundo

netpyne_ui/netpyne_geppetto.py

@@ -512,6 +512,8 @@ def deleteParam(self, model, label):
             return False
 
     def validateFunction(self, functionString):
+        if isinstance(functionString, (float, int)): 
+            return True
         return validateFunction(functionString, self.netParams.__dict__)
 
     def exportHLS(self, args):

webapp/Main.js

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

webapp/components/general/FileBrowser.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Tree from 'geppetto-client/js/components/interface/tree/Tree'
+import Tree from '@geppettoengine/geppetto-client/js/components/interface/tree/Tree'
 import Utils from '../../Utils';
 import Button from '@material-ui/core/Button';
 import { changeNodeAtPath } from 'react-sortable-tree';
@@ -142,7 +142,7 @@ export default class FileBrowser extends React.Component {
         onClose={() => this.props.onRequestClose()}
       >
         <DialogContent>
-          <div style={{ marginBottom: '15px' }}>
+          <div style={{ marginBottom: '15px', color: 'white' }}>
             <b>{selectMessage}</b>
             These paths are relative to:<br/>
             <div className="flex-row fx-center ">

webapp/components/general/HTMLViewer.js

@@ -52,10 +52,12 @@ class CustomHTMLViewer extends Component {
   adjustSVGSize () {
     const svg = this.getSvgComponent()
     if (svg) {
+      const width = (this.dimensions.width - 20) > 0 ? `${this.dimensions.width - 20}px` : '0px'
+      const height = (this.dimensions.height - 20) > 0 ? `${this.dimensions.height - 20}px` : '0px'
       svg.removeAttribute('width');
       svg.removeAttribute('height');
-      svg.setAttribute('width', `${this.dimensions.width - 20}px`);
-      svg.setAttribute('height', `${this.dimensions.height - 20}px`);
+      svg.setAttribute('width', width);
+      svg.setAttribute('height', height);
     }
 
   }

webapp/components/layout/layoutConf.json

@@ -16,7 +16,7 @@
                 "children": [
                     {
                         "type": "row",
-                        "weight": 80,
+                        "weight": 65,
                         "children": [
                             {
                                 "type": "tabset",
@@ -30,7 +30,7 @@
                     },
                     {
                         "type": "row",
-                        "weight": 20,
+                        "weight": 35,
                         "children": [
                             {
                                 "type": "tabset",

webapp/components/layout/simulateLayoutConf.json

@@ -29,7 +29,7 @@
                 "children": [
                     {
                         "type": "row",
-                        "weight": 60,
+                        "weight": 65,
                         "children": [
                             {
                                 "type": "tabset",
@@ -43,7 +43,7 @@
                     },
                     {
                         "type": "row",
-                        "weight": 40,
+                        "weight": 35,
                         "children": [
                             {
                                 "type": "tabset",

webapp/components/settings/NetPyNETabs.js

@@ -48,11 +48,16 @@ class NetPyNETabs extends React.Component {
   }
   handleChange = tab => {
     if (tab == "define") {
-      this.props.editModel();
-      this.setState({ editTab: true })
+      if (!this.props.editMode) {
+        this.props.editModel();
+        this.setState({ editTab: true })
+      }
+      
     } else {
-      this.rightTabAction();
-      this.setState({ editTab: false })
+      if (this.props.editMode) {
+        this.rightTabAction();
+        this.setState({ editTab: false })
+      }
     }
   };
 

webapp/components/settings/actions/NewModel.js

@@ -17,7 +17,7 @@ export default class NewModel extends React.Component {
         title={"Create new model"}
         {...this.props}
       >
-        <h4>The current model will be deleted</h4> 
+        <h4 style={{ color: 'white' }}>The current model will be deleted</h4> 
       </ActionDialog>
     )
   }

webapp/components/settings/actions/UploadDownloadFiles.js

@@ -14,7 +14,8 @@ import FileBrowser from '../../general/FileBrowser';
 
 import { withStyles } from '@material-ui/core/styles';
 
-const styles = ({ spacing, typography, zIndex }) => ({ 
+const styles = ({ spacing, typography, zIndex, palette }) => ({ 
+  root: { color: palette.common.white },
   container: { 
     marginTop: spacing(2),
     display: 'flex',
@@ -200,7 +201,7 @@ class UploadDownloadFile extends React.Component {
       switch (mode) {
       case 'UPLOAD':
         var content = (
-          <div>
+          <div className={classes.root}>
             <div className={classes.container}>
               <div >
                 <input 
@@ -221,7 +222,7 @@ class UploadDownloadFile extends React.Component {
         break;
       case 'DOWNLOAD':
         var content = (
-          <div>
+          <div className={classes.root}>
             <div className={classes.container}>
               <IconButton
                 className={classes.icon}