Issue #1378 Sequence step 'move to' more compact

frontend/sequences/locals_list/location_form.tsx

@@ -68,12 +68,13 @@ export const LocationForm =
       props.hideVariableLabel ? t("Location") : `${label} (${t("Location")})`;
     const formTitle = props.hideTypeLabel ? label : formTitleWithType;
     return <div className="location-form">
-      <div className="location-form-header">
-        <label>{formTitle}</label>
-        {props.collapsible &&
-          <i className={`fa fa-caret-${props.collapsed ? "down" : "up"}`}
-            onClick={props.toggleVarShow} />}
-      </div>
+      {!props.hideTypeLabel &&
+        <div className="location-form-header">
+          <label>{formTitle}</label>
+          {props.collapsible &&
+            <i className={`fa fa-caret-${props.collapsed ? "down" : "up"}`}
+              onClick={props.toggleVarShow} />}
+        </div>}
       {!props.collapsed &&
         <div className="location-form-content">
           <Row>

frontend/sequences/step_tiles/__tests__/index_test.ts

@@ -129,7 +129,7 @@ describe("renderCeleryNode()", () => {
           speed: 100,
           offset: { kind: "coordinate", args: { x: 4, y: 5, z: 6 } }
         }
-      } as MoveAbsolute, expected: "Location"
+      } as MoveAbsolute, expected: "x-Offsety-Offsetz-OffsetSpeed (%)"
     },
     {
       node: {

frontend/sequences/step_tiles/__tests__/tile_move_absolute_test.tsx

@@ -47,7 +47,7 @@ describe("<TileMoveAbsolute/>", () => {
   ) {
     expect(block.find("label").at(position).text().toLowerCase())
       .toEqual(label);
-    expect(block.find("input").at(position).props().value)
+    expect(block.find("input").at(position + 1).props().value)
       .toEqual(value);
   }
 
@@ -58,17 +58,17 @@ describe("<TileMoveAbsolute/>", () => {
     const labels = block.find("label");
     const buttons = block.find("button");
     expect(inputs.length).toEqual(8);
-    expect(labels.length).toEqual(8);
+    expect(labels.length).toEqual(7);
     expect(buttons.length).toEqual(1);
     expect(inputs.first().props().placeholder).toEqual("Move To");
     expect(buttons.at(0).text()).toEqual("Coordinate (1.1, 2, 3)");
-    checkField(block, 1, "x (mm)", "1.1");
-    checkField(block, 2, "y (mm)", "2");
-    checkField(block, 3, "z (mm)", "3");
-    checkField(block, 7, "speed (%)", 100);
-    checkField(block, 4, "x-offset", "4.4");
-    checkField(block, 5, "y-offset", "5");
-    checkField(block, 6, "z-offset", "6");
+    checkField(block, 0, "x (mm)", "1.1");
+    checkField(block, 1, "y (mm)", "2");
+    checkField(block, 2, "z (mm)", "3");
+    checkField(block, 6, "speed (%)", 100);
+    checkField(block, 3, "x-offset", "4.4");
+    checkField(block, 4, "y-offset", "5");
+    checkField(block, 5, "z-offset", "6");
   });
 
   it("updates input value", () => {

frontend/sequences/step_tiles/tile_move_absolute.tsx

@@ -25,12 +25,14 @@ import { ExpandableHeader } from "../../ui/expandable_header";
 
 export class TileMoveAbsolute extends React.Component<StepParams, MoveAbsState> {
   state: MoveAbsState = {
-    more: !!this.props.expandStepOptions || this.hasOffset };
+    more: !!this.props.expandStepOptions || this.hasOffset
+  };
   get step() { return this.props.currentStep as MoveAbsolute; }
   get args() { return this.step.args; }
   get hasOffset(): boolean {
-    const {x, y, z} = this.args.offset.args;
-    return !!(x || y || z); }
+    const { x, y, z } = this.args.offset.args;
+    return !!(x || y || z);
+  }
 
   /** Merge step args update into step args. */
   updateArgs = (update: Partial<MoveAbsolute["args"]>) => {
@@ -77,22 +79,34 @@ export class TileMoveAbsolute extends React.Component<StepParams, MoveAbsState>
   }
 
   LocationForm = () =>
-    <LocationForm
-      variable={{
-        celeryNode: this.celeryNode,
-        dropdown: determineDropdown(this.celeryNode, this.props.resources,
-          this.props.currentSequence.uuid),
-        vector: this.vector,
-      }}
-      sequenceUuid={this.props.currentSequence.uuid}
-      resources={this.props.resources}
-      onChange={this.updateLocation}
-      shouldDisplay={this.props.shouldDisplay || (() => false)}
-      hideVariableLabel={true}
-      locationDropdownKey={JSON.stringify(this.props.currentSequence)}
-      allowedVariableNodes={AllowedVariableNodes.identifier}
-      disallowGroups={true}
-      width={3} />
+    <Row>
+      <Col xs={10}>
+        <LocationForm
+          variable={{
+            celeryNode: this.celeryNode,
+            dropdown: determineDropdown(this.celeryNode, this.props.resources,
+              this.props.currentSequence.uuid),
+            vector: this.vector,
+          }}
+          sequenceUuid={this.props.currentSequence.uuid}
+          resources={this.props.resources}
+          onChange={this.updateLocation}
+          shouldDisplay={this.props.shouldDisplay || (() => false)}
+          hideVariableLabel={true}
+          hideTypeLabel={true}
+          locationDropdownKey={JSON.stringify(this.props.currentSequence)}
+          allowedVariableNodes={AllowedVariableNodes.identifier}
+          disallowGroups={true}
+          width={3} />
+      </Col>
+      <Col xs={2}>
+        <ExpandableHeader
+          expanded={this.state.more}
+          title={t("Options")}
+          onClick={() =>
+            this.setState({ more: !this.state.more })} />
+      </Col>
+    </Row>
 
   SpeedForm = () =>
     <Col xs={3}>
@@ -145,11 +159,6 @@ export class TileMoveAbsolute extends React.Component<StepParams, MoveAbsState>
       </StepHeader>
       <StepContent className={className}>
         <this.LocationForm />
-        <ExpandableHeader
-          expanded={this.state.more}
-          title={t("More")}
-          onClick={() =>
-            this.setState({ more: !this.state.more })} />
         <Collapse isOpen={this.state.more}>
           <this.OffsetForm />
         </Collapse>