Improve UX of numeric input

mxcube · Jul 26, 2023 · c7c5009 · c7c5009
1 parent 781c439
commit c7c5009
Show file tree

Hide file tree

Showing 7 changed files with 287 additions and 121 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -37,6 +37,7 @@
     "lodash": "^4.17.21",
     "plotly.js": "^1.52.3",
     "popper.js": "^1.16.1",
+    "rc-input-number": "8.0.3",
     "react": "^17.0.2",
     "react-bootstrap": "2.8.0",
     "react-chat-widget": "^3.1.4",
@@ -49,7 +50,6 @@
     "react-hook-form": "7.45.0",
     "react-icons": "^4.3.1",
     "react-lazyload": "^3.2.0",
-    "react-numeric-input": "^2.2.3",
     "react-plotly.js": "^2.4.0",
     "react-redux": "7.2.6",
     "react-router": "^6.2.1",
@@ -78,9 +78,9 @@
     "cypress": "^12.13.0",
     "eslint": "8.42.0",
     "eslint-config-galex": "4.5.2",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jest": "27.2.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-react": "7.32.2",
     "less": "^4.1.2",
     "less-watch-compiler": "^1.16.3",

diff --git a/ui/src/components/MotorInput/MotorInput.jsx b/ui/src/components/MotorInput/MotorInput.jsx
@@ -140,59 +140,50 @@ export default class MotorInput extends React.Component {
                   }
                 />
               </div>
-              <div
-                className="rw-widget-right-border"
-                style={{
-                  width: 'auto',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  textAlign: 'center',
-                  fontSize: '12px',
-                  cursor: 'pointer',
-                  backgroundColor: '#EAEAEA',
-                }}
-              >
-                {this.props.saveStep &&
-                this.props.state === MOTOR_STATE.READY &&
-                !this.props.inplace ? (
-                  <PopInput
-                    pkey={motorName.toLowerCase()}
-                    value={step}
-                    suffix={suffix}
-                    inputSize="5"
-                    immediate
-                    onSave={this.props.saveStep}
+              {this.props.saveStep &&
+                (this.props.state === MOTOR_STATE.READY ? (
+                  <div
+                    className="rw-widget-right-border"
                     style={{
-                      display: 'inline-block',
-                      marginLeft: 'auto',
-                      marginRight: '0.5em',
-                      paddingLeft: '0.5em',
+                      width: 'auto',
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      textAlign: 'center',
+                      fontSize: '12px',
+                      cursor: 'pointer',
+                      backgroundColor: '#EAEAEA',
                     }}
-                  />
-                ) : null}
-                {this.props.state !== MOTOR_STATE.READY ? (
+                  >
+                    {this.props.inplace ? (
+                      <span className="ms-2 me-2">
+                        {this.props.step} {suffix}
+                      </span>
+                    ) : (
+                      <PopInput
+                        pkey={motorName.toLowerCase()}
+                        value={step}
+                        suffix={suffix}
+                        inputSize="5"
+                        immediate
+                        onSave={this.props.saveStep}
+                        style={{
+                          display: 'inline-block',
+                          marginLeft: 'auto',
+                          marginRight: '0.5em',
+                          paddingLeft: '0.5em',
+                        }}
+                      />
+                    )}
+                  </div>
+                ) : (
                   <Button
-                    style={{
-                      width: '100%',
-                      height: '100%',
-                      display: 'block',
-                      border: 'none',
-                    }}
                     className="btn-xs motor-abort rw-widget-no-left-border"
                     variant="danger"
                     onClick={this.stopMotor}
                   >
                     <i className="fas fa-times" />
                   </Button>
-                ) : null}
-                {this.props.saveStep &&
-                this.props.state === MOTOR_STATE.READY &&
-                this.props.inplace ? (
-                  <span className="ms-2 me-2">
-                    {this.props.step} {suffix}
-                  </span>
-                ) : null}
-              </div>
+                ))}
             </div>
           </form>
           {this.props.inplace && (