Inline CSS for Settings component

Author: IvanGoncharov

src/components/GraphViewport.tsx

@@ -126,21 +126,7 @@ export default class GraphViewport extends Component<
     const isLoading = this.state.svgViewport == null;
     const { svgViewport } = this.state;
     return (
-      <Box
-        sx={(theme) => ({
-          flex: 1,
-          position: 'relative',
-          display: 'inline-block',
-          width: '100%',
-          height: '100%',
-          maxHeight: '100%',
-
-          [theme.breakpoints.down('md')]: {
-            height: '50%',
-            maxWidth: 'none',
-          },
-        })}
-      >
+      <>
         <Box
           role="img"
           aria-label="Visual representation of the GraphQL schema"
@@ -189,7 +175,7 @@ export default class GraphViewport extends Component<
           </Stack>
         )}
         {isLoading && <LoadingAnimation />}
-      </Box>
+      </>
     );
   }
 

src/components/Voyager.css

@@ -30,31 +30,4 @@
       max-width: none;
     }
   }
-
-  & > .menu-content {
-    position: absolute;
-    z-index: 5;
-    bottom: var(--panel-spacing);
-    left: calc(var(--doc-panel-width) + var(--panel-spacing));
-    background: var(--doc-panel-bg-color);
-    box-shadow: 0 4px 4px -2px var(--shadow-color);
-    border: 1px solid var(--shadow-color);
-    padding: var(--spacing-unit);
-
-    & > .setting-other-options {
-      display: flex;
-
-      & > label:first-of-type {
-        padding-right: var(--spacing-unit);
-      }
-
-      & > label {
-        margin-bottom: calc(var(--panel-spacing) - var(--spacing-unit));
-      }
-    }
-
-    @media (--small-viewport) {
-      left: 10px;
-    }
-  }
 }

src/components/Voyager.tsx

@@ -1,6 +1,7 @@
 import './Voyager.css';
 import './viewport.css';
 
+import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import { ThemeProvider } from '@mui/material/styles';
@@ -127,7 +128,6 @@ export default function Voyager(props: VoyagerProps) {
     <ThemeProvider theme={theme}>
       <div className="graphql-voyager">
         {!hideDocs && renderPanel()}
-        {!hideSettings && renderSettings()}
         {renderGraphViewport()}
         {allowToChangeSchema && renderIntrospectionModal()}
       </div>
@@ -190,30 +190,41 @@ export default function Voyager(props: VoyagerProps) {
     );
   }
 
-  function renderSettings() {
-    if (typeGraph == null) return null;
-
-    return (
-      <Settings
-        options={displayOptions}
-        typeGraph={typeGraph}
-        onChange={(options) =>
-          setDisplayOptions((oldOptions) => ({ ...oldOptions, ...options }))
-        }
-      />
-    );
-  }
-
   function renderGraphViewport() {
     return (
-      <GraphViewport
-        typeGraph={typeGraph}
-        selectedTypeID={selected.typeID}
-        selectedEdgeID={selected.edgeID}
-        onSelectNode={handleSelectNode}
-        onSelectEdge={handleSelectEdge}
-        ref={viewportRef}
-      />
+      <Box
+        sx={(theme) => ({
+          flex: 1,
+          position: 'relative',
+          display: 'inline-block',
+          width: '100%',
+          height: '100%',
+          maxHeight: '100%',
+
+          [theme.breakpoints.down('md')]: {
+            height: '50%',
+            maxWidth: 'none',
+          },
+        })}
+      >
+        {!hideSettings && (
+          <Settings
+            options={displayOptions}
+            typeGraph={typeGraph}
+            onChange={(options) =>
+              setDisplayOptions((oldOptions) => ({ ...oldOptions, ...options }))
+            }
+          />
+        )}
+        <GraphViewport
+          typeGraph={typeGraph}
+          selectedTypeID={selected.typeID}
+          selectedEdgeID={selected.edgeID}
+          onSelectNode={handleSelectNode}
+          onSelectEdge={handleSelectEdge}
+          ref={viewportRef}
+        />
+      </Box>
     );
   }
 

src/components/settings/Settings.tsx

@@ -1,25 +1,44 @@
 import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
 
 import { TypeGraph } from '../../graph/type-graph';
 import { VoyagerDisplayOptions } from '../Voyager';
 import RootSelector from './RootSelector';
 
 interface SettingsProps {
-  typeGraph: TypeGraph;
+  typeGraph: TypeGraph | null;
   options: VoyagerDisplayOptions;
   onChange: (options: VoyagerDisplayOptions) => void;
 }
 
 export default function Settings(props: SettingsProps) {
   const { typeGraph, options, onChange } = props;
+  if (typeGraph == null) {
+    return null;
+  }
 
   return (
-    <div className="menu-content">
+    <Stack
+      sx={(theme) => ({
+        position: 'absolute',
+        opacity: 1,
+        overflow: 'hidden',
+        background: theme.palette.background.default,
+        margin: 2,
+        border: 1,
+        borderColor: theme.palette.shadowColor.main,
+        boxShadow: 2,
+        padding: 1,
+        // left-bottom corner
+        left: 0,
+        bottom: 0,
+      })}
+    >
       <RootSelector
         typeGraph={typeGraph}
         onChange={(rootType) => onChange({ rootType })}
       />
-      <div className="setting-other-options">
+      <Stack direction="row" className="setting-other-options">
         <Checkbox
           id="sort"
           checked={!!options.sortByAlphabet}
@@ -50,7 +69,7 @@ export default function Settings(props: SettingsProps) {
           }
         />
         <label htmlFor="showLeafFields">Show leaf fields</label>
-      </div>
-    </div>
+      </Stack>
+    </Stack>
   );
 }