Refactored common settings and ESC settings to use MUI components. Di…

…splay two ESCs next to each other if possible. #164
stylesuxx · Jan 12, 2022 · a870d3b · a870d3b
1 parent c38d0ac
commit a870d3b
Show file tree

Hide file tree

Showing 25 changed files with 413 additions and 539 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "react-gtm-module": "^2.0.11",
     "react-highlight-within-textarea": "^1.0.1",
     "react-i18next": "^11.8.8",
-    "react-input-range": "^1.3.0",
     "react-scripts": "4.0.3",
     "react-toastify": "^7.0.3",
     "scheduler": "0.14.0",

diff --git a/src/Components/App/style.scss b/src/Components/App/style.scss
@@ -13,7 +13,6 @@ body {
   background-color: lightgray;
   margin: 0px;
   padding: 0px;
-  width: 100%;
   overflow-x: hidden;
 }
 

diff --git a/src/Components/AppSettings/index.jsx b/src/Components/AppSettings/index.jsx
@@ -33,18 +33,14 @@ function AppSettings({
     switch(setting.type) {
       case 'boolean': {
         return (
-          <>
-            <Checkbox
-              hint={t(`${key}Hint`)}
-              key={key}
-              label={t(key)}
-              name={key}
-              onChange={handleCheckboxChange}
-              value={setting.value ? 1 : 0}
-            />
-
-            <Divider />
-          </>
+          <Checkbox
+            hint={t(`${key}Hint`)}
+            key={key}
+            label={t(key)}
+            name={key}
+            onChange={handleCheckboxChange}
+            value={setting.value ? 1 : 0}
+          />
         );
       }
     }
@@ -59,10 +55,12 @@ function AppSettings({
         open={open}
       >
         <FormControl
-          component="fieldset"
+          fullWidth
           variant="standard"
         >
-          <Stack spacing={1}>
+          <Stack
+            spacing={2}
+          >
             {settingElements}
           </Stack>
         </FormControl>

diff --git a/src/Components/FirmwareSelector/index.jsx b/src/Components/FirmwareSelector/index.jsx
@@ -215,7 +215,7 @@ function FirmwareSelector({
       <div className="center-wrapper">
         <Stack spacing={1}>
           <Checkbox
-            hint={force ? t('forceFlashHint') : null}
+            help={force ? t('forceFlashHint') : null}
             key='force'
             label={t('forceFlashText')}
             name='force'
@@ -225,7 +225,7 @@ function FirmwareSelector({
           />
 
           <Checkbox
-            hint={migrate ? t('migrateFlashHint') : null}
+            help={migrate ? t('migrateFlashHint') : null}
             key='migrate'
             label={t('migrateFlashText')}
             name='migrate'

diff --git a/src/Components/Flash/CommonSettings/index.jsx b/src/Components/Flash/CommonSettings/index.jsx
@@ -5,8 +5,11 @@ import React, {
   useState,
 } from 'react';
 
+import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 import {
   getMasterSettings,
@@ -159,73 +162,53 @@ function CommonSettings({
     switch (setting.type) {
       case 'bool': {
         return (
-          <>
-            <Checkbox
-              disabled={disabled}
-              hint={hint}
-              inSync={inSync}
-              key={setting.name}
-              label={t(setting.label)}
-              name={setting.name}
-              onChange={handleCheckboxChange}
-              value={value}
+          <Grid container>
+            <Grid
+              item
+              xs={6}
             />
 
-            <Divider />
-          </>
+            <Grid
+              className="inset"
+              item
+              xs={6}
+            >
+              <Checkbox
+                disabled={disabled}
+                hint={hint}
+                inSync={inSync}
+                key={setting.name}
+                label={t(setting.label)}
+                name={setting.name}
+                onChange={handleCheckboxChange}
+                value={value}
+              />
+            </Grid>
+          </Grid>
         );
       }
 
       case 'enum': {
         const { options } = setting;
         return (
-          <>
-            <Select
-              disabled={disabled}
-              hint={hint}
-              inSync={inSync}
-              key={setting.name}
-              label={t(setting.label)}
-              name={setting.name}
-              onChange={handleSelectChange}
-              options={options}
-              value={value}
-            />
-
-            <Divider />
-          </>
+          <Select
+            disabled={disabled}
+            hint={hint}
+            inSync={inSync}
+            key={setting.name}
+            label={t(setting.label)}
+            name={setting.name}
+            onChange={handleSelectChange}
+            options={options}
+            value={value}
+          />
         );
       }
 
       case 'number': {
         if(directInput) {
           return (
-            <>
-              <Number
-                disabled={disabled}
-                factor={setting.displayFactor}
-                hint={hint}
-                inSync={inSync}
-                key={setting.name}
-                label={t(setting.label)}
-                max={setting.max}
-                min={setting.min}
-                name={setting.name}
-                offset={setting.displayOffset}
-                onChange={handleNumberChange}
-                round={false}
-                step={setting.step}
-                value={value}
-              />
-
-              <Divider />
-            </>
-          );
-        }
-
-        return (
-          <>
-            <Slider
+            <Number
               disabled={disabled}
               factor={setting.displayFactor}
               hint={hint}
@@ -241,9 +224,26 @@ function CommonSettings({
               step={setting.step}
               value={value}
             />
+          );
+        }
 
-            <Divider />
-          </>
+        return (
+          <Slider
+            disabled={disabled}
+            factor={setting.displayFactor}
+            hint={hint}
+            inSync={inSync}
+            key={setting.name}
+            label={t(setting.label)}
+            max={setting.max}
+            min={setting.min}
+            name={setting.name}
+            offset={setting.displayOffset}
+            onChange={handleNumberChange}
+            round={false}
+            step={setting.step}
+            value={value}
+          />
         );
       }
 
@@ -254,16 +254,18 @@ function CommonSettings({
   return (
     <div className="gui-box grey">
       <div className="gui-box-titlebar">
-        <div className="spacer-box-title">
+        <Typography className="spacer-box-title">
           {t('commonParameters')}
-        </div>
+        </Typography>
       </div>
 
-      <div className="spacer-box">
-        <Stack spacing={1}>
+      <Box sx={{ p: 2 }}>
+        <Stack
+          spacing={1}
+        >
           {settingElements}
         </Stack>
-      </div>
+      </Box>
     </div>
   );
 }

diff --git a/src/Components/Flash/CommonSettings/style.scss b/src/Components/Flash/CommonSettings/style.scss
@@ -3,3 +3,7 @@
   color: red;
   font-weight: bold;
 }
+
+.inset > * {
+  margin-left: -1.25rem;
+}
diff --git a/src/Components/Flash/Escs/Esc/__tests__/index.test.jsx b/src/Components/Flash/Escs/Esc/__tests__/index.test.jsx
@@ -516,7 +516,6 @@ describe('Esc', () => {
       />
     );
 
-    expect(screen.getByText(/hints:COMMON_MOTOR_DIRECTION/i)).toBeInTheDocument();
     expect(screen.getByText(/escMotorDirection/i)).toBeInTheDocument();
 
     userEvent.click(screen.getByRole(/checkbox/i));
-Original file line number
+Diff line change
@@ Expand Up / @@ -516,7 +516,6 @@ describe('Esc', () => { @@
           />
         );
-        expect(screen.getByText(/hints:COMMON_MOTOR_DIRECTION/i)).toBeInTheDocument();
         expect(screen.getByText(/escMotorDirection/i)).toBeInTheDocument();
         userEvent.click(screen.getByRole(/checkbox/i));
@@ Expand Down @@