#143 Move filter inside breadcrumb and style

Author: rodriguez-facundo

webapp/components/definition/populations/NetPyNEPopulations.js

@@ -15,6 +15,7 @@ import ExpansionPanel from '../../general/ExpansionPanel'
 
 import Dialog from '@material-ui/core/Dialog/Dialog';
 import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
 
 export default class NetPyNEPopulations extends React.Component {
 
@@ -210,15 +211,17 @@ export default class NetPyNEPopulations extends React.Component {
                 handleClick={this.handleNewPopulation}
               />
             </div>
+            <Divider />
             <RulePath text={`netParams.popParams["${this.state.selectedPopulation}"]`}/>
+            <Divider />
+            <Filter
+              value={this.state.filterPopValue}
+              label="Filter population by name..."
+              handleFilterChange={newValue => this.setState({ filterPopValue: newValue })}
+              options={model === undefined ? [] : Object.keys(model)}
+            />
           </ExpansionPanel>
-
-          <Filter
-            value={this.state.filterPopValue}
-            label="Filter population by name..."
-            handleFilterChange={newValue => this.setState({ filterPopValue: newValue })}
-            options={model === undefined ? [] : Object.keys(model)}
-          />
+          
 
         </div>
 

webapp/components/general/Filter.js

@@ -10,17 +10,15 @@ import Tooltip from './Tooltip'
 
 const styles = ({ spacing, shape }) => ({
   root: {
-    marginTop: spacing(1),
-    marginBottom: spacing(1),
     display: 'flex',
     backgroundColor: bgRegular,
     borderRadius: shape.borderRadius
   },
-  adornment: { display: 'flex', alignItems: 'center', paddingLeft: spacing(1) },
+  adornment: { display: 'flex', alignItems: 'center', paddingLeft: spacing(1), paddingTop: spacing(1) },
   filter: { flex: 1, paddingRight: spacing(1), paddingTop: spacing(1), paddingBottom: spacing(1) },
   underline: {
-    "&&&:before": { borderBottom: "none" },
-    "&&:after": { borderBottom: "none" }
+    "&&&:before": { },
+    "&&:after": { }
   },
   listbox: { color: 'white', maxHeight: '20vh' }
 })
@@ -32,7 +30,7 @@ class Filter extends Component {
     return (
       <div className={classes.root}>
         <div className={classes.adornment}>
-          <Icon className="fa fa-filter"/>
+          <Icon className="fa fa-filter" fontSize="small"/>
         </div>
 
         <Autocomplete

webapp/components/general/RulePath.js

@@ -8,7 +8,7 @@ import { withStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 
 const styles = ({ spacing, palette }) => ({ 
-  root: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', margin: `0px ${spacing(1)}px ${spacing(1)}px ${spacing(1)}px` },
+  root: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: `0px ${spacing(1)}px 0px ${spacing(1)}px` },
   text: { color: palette.text.secondary },
   icon: { marginRight: 2 }
 })

webapp/components/settings/Drawer.js

@@ -69,17 +69,19 @@ export default ({ newWidget, editMode, activateWidget, updateWidget }) => {
   const mapItem = ({ name, id }) => {
     const widget = layoutManager.getWidget(id);
 
-    const item = (<ListItem button key={name} dense disableGutters className={widget ? classes.selected : classes.unselected} onClick={() => createOrFocusWidget(id)}>
-      <ListItemIcon className={classes.icon}>
-        <DrawerIcon widgetId={id} selected={widget && widget.status !== WidgetStatus.MINIMIZED} />
-      </ListItemIcon>
-      <ListItemText className={classes.text}>
-        <Typography noWrap>{name}</Typography>
-      </ListItemText>
-    </ListItem>)
+    const item = (
+      <ListItem button key={name} dense disableGutters className={widget ? classes.selected : classes.unselected} onClick={() => createOrFocusWidget(id)}>
+        <ListItemIcon className={classes.icon}>
+          <DrawerIcon widgetId={id} selected={widget && widget.status !== WidgetStatus.MINIMIZED} />
+        </ListItemIcon>
+        <ListItemText className={classes.text}>
+          <Typography noWrap>{name}</Typography>
+        </ListItemText>
+      </ListItem>
+    )
 
     // Show tooltip only when drawer is collapsed
-    return expand ? item : <Tooltip title={widget.name} placement="right">{item}</Tooltip>
+    return expand ? item : <Tooltip key={name} title={widget.name} placement="right">{item}</Tooltip>
 
 
   };

webapp/theme.js

@@ -71,7 +71,7 @@ export default createMuiTheme({
       content: { margin: '0px!important', cursor: 'auto' },
       expandIcon: { marginRight: 0 }
     },
-    MuiExpansionPanelDetails: { root: { padding: 0, margin: 0, minHeight: 'unset!important' } },
+    MuiExpansionPanelDetails: { root: { padding: 0, margin: 0, minHeight: 'unset!important', flexDirection: 'column' } },
     MuiExpansionPanel: { root: { padding: 0, margin: '0px!important', minHeight: 'unset' } },
     MuiAutocomplete: { popupIndicator: { marginRight: 0 } }
   }