UI improvements for service parameters.

timing71 · Oct 23, 2023 · 2388ff8 · 2388ff8
1 parent 6b79c94
commit 2388ff8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 22 deletions.
diff --git a/src/modules/menu/components/Dialog.js b/src/modules/menu/components/Dialog.js
@@ -32,7 +32,7 @@ export const Dialog = styled(RDialog)`
   align-items: center;
   overflow-y: auto;
 
-  & > table {
+  & table {
     min-width: 75%;
     border-collapse: collapse;
     font-family: ${ props => props.theme.site.headingFont };

diff --git a/src/modules/timingScreen/components/ServiceParameters.js b/src/modules/timingScreen/components/ServiceParameters.js
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { Fragment, useCallback, useState } from "react";
 import { useDialogState } from "reakit";
 import styled from "styled-components";
 import { SettingsInputComponent } from "styled-icons/material";
@@ -10,6 +10,29 @@ import { stopEventBubble } from "../../../utils";
 import { Input } from "../../../components/Forms";
 import { Button } from "../../../components/Button";
 
+const ParamLabel = styled.th`
+  text-align: left;
+`;
+
+const HelpText = styled.td`
+  display: block;
+  font-weight: normal;
+  font-size: small;
+  color: white;
+
+  && {
+    padding-top: 0;
+  }
+`;
+
+const ValueInputTd = styled.td.attrs({ rowSpan: 2 })`
+  white-space: nowrap;
+`;
+
+const TableWrapper = styled.div`
+  flex-grow: 1;
+`;
+
 const ParamsDialog = ({ dialog }) => {
   const { manifest, setServiceParameters } = useServiceManifest();
   const { state } = useServiceState();
@@ -36,27 +59,36 @@ const ParamsDialog = ({ dialog }) => {
         {...dialog}
       >
         <h3>Set service parameters</h3>
-        <table>
-          <tbody>
-            {
-              Object.entries(spec).map(
-                ([key, pspec]) => (
-                  <tr key={key}>
-                    <th>{pspec.label}</th>
-                    <td>
-                      <Input
-                        onChange={e => changeParam(key, pspec.type === 'number' ? e.target.valueAsNumber : e.target.value)}
-                        type={pspec.type}
-                        value={workingParams[key] || ''}
-                      />
-                      {pspec.unit}
-                    </td>
-                  </tr>
+        <TableWrapper>
+          <table>
+            <tbody>
+              {
+                Object.entries(spec).map(
+                  ([key, pspec]) => (
+                    <Fragment key={key}>
+                      <tr>
+                        <ParamLabel>
+                          {pspec.label}
+                        </ParamLabel>
+                        <ValueInputTd>
+                          <Input
+                            onChange={e => changeParam(key, pspec.type === 'number' ? e.target.valueAsNumber : e.target.value)}
+                            type={pspec.type}
+                            value={workingParams[key] || ''}
+                          />
+                          {pspec.unit}
+                        </ValueInputTd>
+                      </tr>
+                      <tr>
+                        <HelpText>{pspec.description}</HelpText>
+                      </tr>
+                    </Fragment>
+                  )
                 )
-              )
-            }
-          </tbody>
-        </table>
+              }
+            </tbody>
+          </table>
+        </TableWrapper>
 
         <Button
           onClick={() => { setServiceParameters(workingParams); dialog.toggle(); }}