fix options list style

MetaCell · May 31, 2023 · d0756f4 · d0756f4
1 parent 5da5826
commit d0756f4
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 70 deletions.
diff --git a/src/client/assets/styles/variables.js b/src/client/assets/styles/variables.js
@@ -91,7 +91,7 @@ const vars = {
 
   popperBG: 'rgba(255, 255, 255, 1)',
   nodeSecLabelColor: 'rgba(143, 143, 143, 1)',
-  cardBG: ' #F4F4F4',
+  cardBG: '#F4F4F4',
   switchShadow:
     '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',
 
@@ -109,6 +109,8 @@ const vars = {
   functionCodeColor: '#ED745D',
 
   lightBlack: 'rgba(0, 0, 0, 0.8)',
+  lightgray: "#F4F4F4",
+  optionTextColor: '#1A1A1A'
 };
 
 export default vars;
diff --git a/src/client/components/common/CondaSelectionDialog.js b/src/client/components/common/CondaSelectionDialog.js
@@ -1,15 +1,17 @@
 import React from "react";
-import {Box, Button, FormControl, IconButton, InputLabel, NativeSelect, Paper, Typography} from "@mui/material";
+import {Box, Button, IconButton, Paper, Typography} from "@mui/material";
 import {messageTypes} from "../../../messageTypes";
 import vars from "../../assets/styles/variables";
 import {CloseModalIcon} from "../views/visualiseView/icons/layoutIcons";
+import {CustomSelect} from "./CustomSelect";
+
 const {
-  breadcrumbTextColor,
   lightBlack,
   listItemActiveBg
 } = vars;
 
 export const CondaSelectionDialog = ({state, setState, getMenuItems}) => {
+
   return <Paper
     id='pnl-wall'
     open={true}
@@ -72,63 +74,7 @@ export const CondaSelectionDialog = ({state, setState, getMenuItems}) => {
           >
             {'Select conda environment:'}
           </Typography>
-          <FormControl
-            fullWidth
-            sx={{
-              background: '#F4F4F4',
-              borderRadius: '8px',
-              "& .MuiInputLabel-root": {
-                transition: 'none',
-                position: 'absolute',
-                top: '50%',
-                left: '16px',
-                transform: 'translateY(-50%)',
-                pointerEvents: 'none',
-                zIndex: 1,
-                fontSize: '14px',
-                color: '#1A1A1A',
-                fontWeight:400,
-
-                "&.Mui-focused": {
-                    color: '#8F8F8F'
-                }
-              },
-
-              "& .MuiInputLabel-shrink":  {
-                  transform: 'translateY(-100%)',
-                  fontSize: '10px',
-                  color: '#8F8F8F'
-               },
-
-               "& .MuiSvgIcon-root": {
-                 top: 'calc(50% - 0.8em)'
-               }
-            }}>
-            <InputLabel id="demo-simple-select-label">Conda environment</InputLabel>
-            <NativeSelect
-              labelId="demo-simple-select-label"
-              id="demo-simple-select"
-              value={state.condaEnv}
-              label="Conda environment"
-              onChange={(event) => {setState({condaEnv: event.target.value})}}
-              sx={{
-                color: breadcrumbTextColor,
-                "& .MuiInput-input": {
-                  paddingLeft: '17px'
-                },
-                "&:before, &:after": {
-                  border: "none",
-                },
-                "&:hover:not(.Mui-disabled, .Mui-error)": {
-                  "&:before": {
-                    border: "none"
-                  },
-                },
-              }}
-            >
-              {getMenuItems()}
-            </NativeSelect>
-          </FormControl>
+          <CustomSelect state={state} setState={(val) => setState(val)} getMenuItems={getMenuItems} />
         </Box>
 
         <Button

diff --git a/src/client/components/common/CustomSelect.js b/src/client/components/common/CustomSelect.js
@@ -0,0 +1,75 @@
+import React from "react";
+import { FormControl, InputLabel, Select } from "@mui/material";
+import vars from "../../assets/styles/variables";
+const {
+  breadcrumbTextColor,
+} = vars;
+
+export const CustomSelect = ({state, setState, getMenuItems}) => {
+
+  const onSelectChange = (event) => {
+    setState({condaEnv: event.target.value})
+  }
+  return <FormControl
+    fullWidth
+    sx={{
+      background: '#F4F4F4',
+      borderRadius: '8px',
+      "& .MuiInputLabel-root": {
+        transition: 'none',
+        position: 'absolute',
+        top: '50%',
+        left: '13px',
+        transform: 'translateY(-50%)',
+        pointerEvents: 'none',
+        zIndex: 1,
+        fontSize: '14px',
+        color: '#1A1A1A',
+        fontWeight:400,
+
+        "&.Mui-focused": {
+          color: '#8F8F8F'
+        }
+      },
+
+      "& .MuiInputLabel-shrink":  {
+        transform: 'translateY(-150%)',
+        fontSize: '10px',
+        color: '#8F8F8F'
+      },
+    }}>
+    <InputLabel id="conda-environment-select-label">Conda environment</InputLabel>
+    <Select
+      labelId="conda-environment-select-label"
+      id="conda-environment-select"
+      value={state.condaEnv}
+      label="Conda environment"
+      onChange={onSelectChange}
+      renderValue={(selected) => selected}
+      sx={{
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: 0
+        },
+        "&.Mui-focused": {
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: 0
+          }
+        },
+        color: breadcrumbTextColor,
+        "& .MuiInput-input": {
+          paddingLeft: '17px'
+        },
+        "&:before, &:after": {
+          border: "none",
+        },
+        "&:hover:not(.Mui-disabled, .Mui-error)": {
+          "&:before": {
+            border: "none"
+          },
+        },
+      }}
+    >
+      {getMenuItems()}
+    </Select>
+  </FormControl>
+}
diff --git a/src/client/components/common/Layout.js b/src/client/components/common/Layout.js
@@ -6,12 +6,17 @@ import MainEdit from '../views/editView/MainEdit';
 import messageHandler from '../../grpc/messagesHandler';
 import Visualize from '../views/visualiseView/Visualize';
 import { openFile, loadModel, updateModel } from '../../redux/actions/general';
-
+import CheckIcon from '@mui/icons-material/Check';
 import { Rnd } from "react-rnd";
-import { Box, LinearProgress, Paper } from "@mui/material";
+import {Box, LinearProgress, MenuItem, Paper} from "@mui/material";
 
 import {CondaSelectionDialog} from "./CondaSelectionDialog";
 import {DependenciesDialog} from "./DependenciesDialog";
+import vars from "../../assets/styles/variables";
+const {
+  listItemActiveBg,
+  optionTextColor
+} = vars;
 
 const appStates = require('../../../messageTypes').appStates;
 const messageTypes = require('../../../messageTypes').messageTypes;
@@ -26,8 +31,8 @@ class Layout extends React.Component {
       electronState: appStates.FRONTEND_STARTED,
       condaEnv: '',
       condaEnvs: undefined,
-      dependenciesFound: true,
-      condaEnvSelection: false,
+      dependenciesFound: false,
+      condaEnvSelection: true,
       spinnerEnabled: !isFrontendDev,
     };
 
@@ -42,8 +47,8 @@ class Layout extends React.Component {
   }
 
   async componentDidMount() {
-    const envs = await window.api.getInterfaces().PsyneulinkHandler.getCondaEnvs();
-
+    // const envs = await window.api.getInterfaces().PsyneulinkHandler.getCondaEnvs();
+    const envs = ['js', 'mnc']
     if (window.api) {
       window.api.receive("fromMain", (data) => {
         messageHandler(data, {
@@ -62,7 +67,7 @@ class Layout extends React.Component {
         payload: null
       });
     }
-    this.setState({condaEnv: envs > 0 ? envs[0] : '', condaEnvs: envs});
+    this.setState({condaEnv: envs.length > 0 ? envs[0] : '', condaEnvs: envs});
   }
 
   setServerStarted(data) {
@@ -96,7 +101,19 @@ class Layout extends React.Component {
 
   getMenuItems() {
     return this.state.condaEnvs?.map((env) => {
-      return <option id={`${env}-id`} value={env}>{env}</option>
+      return (
+        <MenuItem id={`${env}-id`} value={env}>
+        <Box width={1} sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          color: optionTextColor
+        }}>
+          {env}
+          {env === this.state.condaEnv && <CheckIcon style={{ fontSize: '1rem', color: listItemActiveBg }} />}
+        </Box>
+      </MenuItem>
+      )
     });
   }
 
@@ -110,7 +127,7 @@ class Layout extends React.Component {
             enableResizing={false}
             style={{ zIndex: 1305 }}
           >
-           <DependenciesDialog state={this.state} setState={this.setState} />
+           <DependenciesDialog state={this.state} setState={(val) => this.setState(val)} />
         </Rnd>
         : <></>
     );
@@ -128,7 +145,7 @@ class Layout extends React.Component {
           >
           <CondaSelectionDialog
             state={this.state}
-            setState={this.setState}
+            setState={(val) => this.setState(val)}
             getMenuItems={this.getMenuItems}
             onCloseCondaSelectionDialog={this.onCloseCondaSelectionDialog}
           />

diff --git a/src/theme.js b/src/theme.js
@@ -51,6 +51,7 @@ const {
   elementBorderColor,
   elementBgColor,
   tabDividerBgColor,
+  lightgray
 } = vars;
 
 const theme = {
@@ -667,6 +668,19 @@ const theme = {
         },
       },
     },
+    MuiPopover: {
+      styleOverrides: {
+        root: {
+          zIndex: 1305,
+
+          "& .MuiMenuItem-root": {
+            "&.Mui-selected": {
+              backgroundColor: lightgray
+            }
+          }
+        }
+      }
+    }
   },
 };