Refactored Motor sliders to MUI sliders. Refactored Text. Improved La…

…yout of the Motor slider Tab. #164
stylesuxx · Jan 12, 2022 · c38d0ac · c38d0ac
1 parent da24baf
commit c38d0ac
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 56 deletions.
diff --git a/src/Components/Input/Slider/index.jsx b/src/Components/Input/Slider/index.jsx
@@ -5,6 +5,8 @@ import React, {
 } from 'react';
 import InputRange from 'react-input-range';
 
+import MuiSlider from '@mui/material/Slider';
+
 import Info from '../Info';
 
 import 'react-input-range/lib/css/index.css';
@@ -67,6 +69,7 @@ function Slider({
     <div className="number">
       <label>
         <div className="input-wrapper">
+          {/*
           <InputRange
             disabled={disabled}
             formatLabel={format}
@@ -79,6 +82,9 @@ function Slider({
             step={step}
             value={inSync ? getDisplayValue() : min}
           />
+          */}
+
+          <MuiSlider />
         </div>
 
         <Info

diff --git a/src/Components/MainContent/style.scss b/src/Components/MainContent/style.scss
@@ -57,10 +57,8 @@
 
     .spacer-box-title {
       padding-left: 10px;
-      padding-right: 10px;
-      padding-top: 4px;
-      margin-bottom: 0px;
       color: white;
+      line-height: 2;
     }
 
     .gui-box {
@@ -82,7 +80,6 @@
         border-radius: 3px 3px 0px 0px;
         font-size: 13px;
         width: 100%;
-        height: 27px;
         padding-bottom: 0px;
         //float: left;
         font-family: 'open_sanssemibold', Arial;
@@ -92,7 +89,7 @@
         font-weight: normal;
         font-family: 'open_sansregular', Arial;
         line-height: 19px;
-        color: #4F4F4F;
+        //color: #4F4F4F;
         font-size: 11px;
       }
 
@@ -103,8 +100,6 @@
       }
     }
 
-    //.checkbox,
-    //.select,
     .number,
     .number-text  {
       margin-top: 7px;
@@ -133,17 +128,6 @@
       }
     }
 
-    /*
-    .checkbox {
-      display: flex;
-      flex-direction: row;
-      label {
-        flex: 1;
-        flex: 0 0 195px;
-      }
-    }
-    */
-
     .number {
       margin-top: 20px;
 

diff --git a/src/Components/MotorControl/index.jsx b/src/Components/MotorControl/index.jsx
@@ -7,6 +7,11 @@ import React, {
 } from 'react';
 import 'rc-slider/assets/index.css';
 
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import MuiSlider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
+
 import Checkbox from '../Input/Checkbox';
 import { useInterval } from '../../utils/helpers/React';
 
@@ -97,32 +102,37 @@ function MotorControl({
 
   function MotorSlider({
     disabled,
+    key,
     onChange,
   }) {
     const [value, setValue] = useState(startValue);
     /* istanbul ignore next */
-    function update(value) {
-      setValue(value);
-      onChange(value);
+    function update(e) {
+      const newValue = e.target.value;
+      if(newValue !== value) {
+        console.log(newValue);
+        setValue(newValue);
+        onChange(newValue);
+      }
     }
 
     return(
-      <SliderWithTooltip
-        defaultValue={value}
+      <MuiSlider
+        aria-label="Small"
         disabled={disabled}
+        key={key}
         max={maxValue}
         min={minValue}
         onChange={update}
         step={10}
-        tipProps={{
-          visible: true,
-          placement: 'top',
-        }}
+        value={value}
+        valueLabelDisplay="auto"
       />
     );
   }
   MotorSlider.propTypes = {
     disabled: PropTypes.bool.isRequired,
+    key: PropTypes.number.isRequired,
     onChange: PropTypes.func.isRequired,
   };
 
@@ -146,12 +156,13 @@ function MotorControl({
 
     return(
       <div className={`slider slider-${index}`}>
-        <h3>
+        <Typography>
           {t("motorNr", { index: index + 1 })}
-        </h3>
+        </Typography>
 
         <MotorSlider
           disabled={!unlock || !unlockIndividual}
+          key={index + 1}
           onChange={update}
         />
       </div>
@@ -181,15 +192,25 @@ function MotorControl({
     <div id="motor-control-wrapper">
       <div className="gui-box grey">
         <div className="gui-box-titlebar">
-          <div className="spacer-box-title">
+          <Typography className="spacer-box-title">
             {t('motorControl')}
-          </div>
+          </Typography>
         </div>
 
-        <div className="spacer-box">
-          <div
-            dangerouslySetInnerHTML={{ __html: t('motorControlText') }}
-          />
+        <Box
+          sx={{ p: 2 }}
+        >
+          <Typography paragraph>
+            {t('motorControlText-1')}
+          </Typography>
+
+          <Typography paragraph>
+            {t('motorControlText-2')}
+          </Typography>
+
+          <Typography paragraph>
+            {t('motorControlText-3')}
+          </Typography>
 
           <div className="line-wrapper">
             <Checkbox
@@ -204,20 +225,29 @@ function MotorControl({
             />
           </div>
 
-          <div id="slider-wrapper">
-            <div id="single-slider">
+          <Grid
+            container
+            spacing={3}
+          >
+            <Grid
+              item
+              xs={6}
+            >
               {singleSliderElements}
-            </div>
+            </Grid>
 
-            <div id="master-slider">
-              <h3>
+            <Grid
+              item
+              xs={6}
+            >
+              <Typography>
                 {t('masterSpeed')}
-              </h3>
+              </Typography>
 
               {memoizedMasterSlider}
-            </div>
-          </div>
-        </div>
+            </Grid>
+          </Grid>
+        </Box>
       </div>
     </div>
   );

diff --git a/src/Components/MotorControl/style.scss b/src/Components/MotorControl/style.scss
@@ -1,15 +1,8 @@
 #motor-control-wrapper {
   max-width: 600px;
   width: 100%;
-  // margin-bottom: 65px;
 
   .gui-box {
-    .spacer-box {
-      p {
-        font-weight: normal;
-        padding-bottom: 10px;
-      }
-    }
 
     .line-wrapper {
       display: flex;

diff --git a/src/translations/de/common.json b/src/translations/de/common.json
@@ -91,7 +91,9 @@
   "versionUnsupported": "{{name}} Version '{{version}}' (Layout {{layout}}) wird noch nicht unterstützt.<br/><br/>Lass es uns wissen indem du einen <a href=\"https://github.com/stylesuxx/esc-configurator\" title=\"https://www.github.com/issues/new\" target=\"_blank\">Fehlerbericht erstellst</a>.",
   "useDedicatedConfigurator": "{{name}} wird nicht unterstützt, bitte verwende einen dedizierten Konfigurator.",
   "motorControl": "Motorsteuerung",
-  "motorControlText": "<p>Stelle sicher das deine ESCs entsprechend der Slider Positionen konfiguriert sind.</p><p>zB.: Wenn du den 3D Modus aktiviert hast, stelle sicher, dass deinen ESCs entsprechend konfiguriert sind, ansonsten können die Motoren mit voller Geschwindigkeit anlaufen. </p><p>Die Motoren werden nicht anlaufen wenn am Flugregler bi-directtinal Dshot aktiviert ist, aber nicht auf den ESCs, was beispielsweise passieren könnte wenn du von einer RPM firmware auf klassisches BlHeli_S zurück flasht.</p>",
+  "motorControlText-1": "Stelle sicher das deine ESCs entsprechend der Slider Positionen konfiguriert sind.",
+  "motorControlText-2": "Zb.: Wenn du den 3D Modus aktiviert hast, stelle sicher, dass deinen ESCs entsprechend konfiguriert sind, ansonsten können die Motoren mit voller Geschwindigkeit anlaufen.",
+  "motorControlText-3": "Die Motoren werden nicht anlaufen wenn am Flugregler bi-directtinal Dshot aktiviert ist, aber nicht auf den ESCs, was beispielsweise passieren könnte wenn du von einer RPM firmware auf klassisches BlHeli_S zurück flasht.",
   "enableMotorControl": "Motorsteuerung aktivieren",
   "masterSpeed": "Geschwindigkeit aller Motoren",
   "motorNr": "Motor {{index}}",

diff --git a/src/translations/en/common.json b/src/translations/en/common.json
@@ -91,7 +91,9 @@
   "versionUnsupported": "{{name}} version '{{version}}' (Layout {{layout}}) is not yet supported.<br/><br/>Let us know by opening an <a href=\"https://github.com/stylesuxx/esc-configurator\" title=\"https://www.github.com/issues/new\" target=\"_blank\">issue</a>.",
   "useDedicatedConfigurator": "{{name}} not supported, please use dedicated configurator.",
   "motorControl": "Motor Control",
-  "motorControlText": "<p>Make sure your ESCs are properly set up to reflect the state of the sliders.</p><p>Eg.: When you enabled 3D mode in your flight controller, make sure the ESCs are also set up for 3D mode, otherwise the motors might go off with full power.</p><p>Also be aware that the motors will not spin if you have bi-directional Dshot enabled on the Flight-controller, but the ESC does not support it. Which might be the case when flashing from RPM enabled firmware to BLHeli_S.</p>",
+  "motorControlText-1": "Make sure your ESCs are properly set up to reflect the state of the sliders.",
+  "motorControlText-2": "Eg.: When you enabled 3D mode in your flight controller, make sure the ESCs are also set up for 3D mode, otherwise the motors might go off with full power.",
+  "motorControlText-3": "Also be aware that the motors will not spin if you have bi-directional Dshot enabled on the Flight-controller, but the ESC does not support it. Which might be the case when flashing from RPM enabled firmware to BLHeli_S.",
   "enableMotorControl": "Enable motor control",
   "masterSpeed": "Master Speed",
   "motorNr": "Motor {{index}}",

diff --git a/src/translations/es/common.json b/src/translations/es/common.json
@@ -91,7 +91,9 @@
   "versionUnsupported": "{{name}} version '{{version}}' (Layout {{layout}}) no esta soportada.<br/><br/>Haznoslo saber abriendo un <a href=\"https://github.com/stylesuxx/esc-configurator\" title=\"https://www.github.com/issues/new\" target=\"_blank\">problema</a>.",
   "useDedicatedConfigurator": "{{name}} no soportado, por favor use un configurador dedicado.",
   "motorControl": "Control de Motor",
-  "motorControlText": "<p>Asegúrate de que tus ESC estén correctamente configurados para reflejar el estado de los deslizadores.</p><p>Ej. Cuando activaste el modo 3D en tu controlador de vuelo, Asegúrese de que los ESC también están configurados para el modo 3D, de lo contrario los motores podrían apagarse con plena potencia.</p><p>También tenga en cuenta que los motores no girarán si tiene activada la opción Dshot bidireccional en el controlador de vuelo, pero el ESC no lo soporta. Esto puede ser el caso cuando se flashea a BlHeli_S desde un firmware con RPM activado.</p>",
+  "motorControlText-1": "Asegúrate de que tus ESC estén correctamente configurados para reflejar el estado de los deslizadores.",
+  "motorControlText-2": "Ej. Cuando activaste el modo 3D en tu controlador de vuelo, Asegúrese de que los ESC también están configurados para el modo 3D, de lo contrario los motores podrían apagarse con plena potencia.",
+  "motorControlText-3": "También tenga en cuenta que los motores no girarán si tiene activada la opción Dshot bidireccional en el controlador de vuelo, pero el ESC no lo soporta. Esto puede ser el caso cuando se flashea a BlHeli_S desde un firmware con RPM activado.</p>",
   "enableMotorControl": "Activar el control de motores",
   "masterSpeed": "Velocidad principal",
   "motorNr": "Motor {{index}}",

diff --git a/src/translations/zh-CN/common.json b/src/translations/zh-CN/common.json
@@ -91,7 +91,9 @@
   "versionUnsupported": "{{name}} 版本 '{{version}}' (布局 {{layout}}) 尚未支持。<br/><br/>请打开一个<a href=\"https://github.com/stylesuxx/esc-configurator\" title=\"https://www.github.com/issues/new\" target=\"_blank\">问题</a>来让我们知道。",
   "useDedicatedConfigurator": "{{name}} 不支持，请使用专用配置程序。",
   "motorControl": "电机控制",
-  "motorControlText": "<p>请确保您的ESC正确设置以反映滑块的状态。</p><p>例如，当您在飞控中启用3D模式后， 请确保 ESC 也已经设置为 3D 模式，否则电机可能在解锁瞬间满负荷运行。</p><p>同样地，如果你在飞控上使用双向 Dshot，而 ESC 固件并不支持双向 Dshot，那么电机将不会旋转。从已有 RPM 回传的固件向前回滚刷入 BLHeli_S 时可能会出现这种情况。</p>",
+  "motorControlText-1": "请确保您的ESC正确设置以反映滑块的状态。",
+  "motorControlText-2": "例如，当您在飞控中启用3D模式后， 请确保 ESC 也已经设置为 3D 模式，否则电机可能在解锁瞬间满负荷运行。",
+  "motorControlText-3": "同样地，如果你在飞控上使用双向 Dshot，而 ESC 固件并不支持双向 Dshot，那么电机将不会旋转。从已有 RPM 回传的固件向前回滚刷入 BLHeli_S 时可能会出现这种情况。",
   "enableMotorControl": "启用电机控制",
   "masterSpeed": "主速度",
   "motorNr": "电机 {{index}}",

diff --git a/src/translations/zh-TW/common.json b/src/translations/zh-TW/common.json
@@ -91,7 +91,9 @@
   "versionUnsupported": "{{name}} 版本 '{{version}}' (佈局 {{layout}}) 尚未支援。<br/><br/>請打開一個<a href=\"https://github.com/stylesuxx/esc-configurator\" title=\"https://www.github.com/issues/new\" target=\"_blank\">問題</a>來讓我們知道。",
   "useDedicatedConfigurator": "{{name}} 不支持，請使用專用配置程式。",
   "motorControl": "電機控制",
-  "motorControlText": "<p>請確保您的 ESC 正確設置以反映滑塊的狀態。</p><p>例如，當您在飛控中啓用3D模式後，請確保 ESC 也已經設置為 3D 模式，否則電機可能在解鎖瞬間滿負荷運行。</p><p>同樣地，如果您在飛控上使用雙向 Dshot，二 ESC 固件并不支持雙向 Dshot，那麽電機將不會旋轉。從已有 RPM 回傳的固件向前回滾刷入 BLHeli_S 時可能會出現這種情況。</p>",
+  "motorControlText-1": "請確保您的 ESC 正確設置以反映滑塊的狀態。",
+  "motorControlText-2": "例如，當您在飛控中啓用3D模式後，請確保 ESC 也已經設置為 3D 模式，否則電機可能在解鎖瞬間滿負荷運行。",
+  "motorControlText-3": "同樣地，如果您在飛控上使用雙向 Dshot，二 ESC 固件并不支持雙向 Dshot，那麽電機將不會旋轉。從已有 RPM 回傳的固件向前回滾刷入 BLHeli_S 時可能會出現這種情況。",
   "enableMotorControl": "啓用電機控制",
   "masterSpeed": "主速度",
   "motorNr": "電機 {{index}}",