fix additional autofocus and style bugs

FarmBot · Nov 16, 2023 · 4f99440 · 4f99440
1 parent c79a492
commit 4f99440
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 42 deletions.
diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -1310,6 +1310,7 @@ li {
 .go-button-axes-wrapper {
   margin-top: 1rem;
   button {
+    margin: 0;
     float: none;
   }
   .go-button-axes {
@@ -1355,6 +1356,7 @@ li {
       display: grid;
       gap: 0.75rem;
       button {
+        margin: 0;
         padding: 0.5rem 1rem;
         float: none;
         &.x,
@@ -2320,6 +2322,7 @@ li {
   margin-bottom: 1rem;
   .manual-group-member-count,
   .criteria-group-member-count {
+    margin-bottom: 0.5rem;
     div {
       display: inline;
       padding: 0.25rem;

diff --git a/frontend/sequences/step_button_cluster.tsx b/frontend/sequences/step_button_cluster.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { t } from "../i18next_wrapper";
 import { StepButton, stepClick } from "./step_buttons";
 import { equals, scrollToBottom } from "../util";
-import { Col, Row } from "../ui";
+import { Col } from "../ui";
 import { Color, SequenceBodyItem, TaggedSequence } from "farmbot";
 import { FarmwareData, MessageType } from "./interfaces";
 import { FarmwareName } from "./step_tiles/tile_execute_script";
@@ -239,53 +239,54 @@ export class StepButtonCluster
       args: { sequence_id: sequences[0].body.id },
       body: variableList(resources.sequenceMetas[sequences[0].uuid])
     });
-    const Cluster = () => <div className={[
-      "step-button-cluster",
-      Path.inDesigner() ? "designer-cluster" : "",
-    ].join(" ")}>
-      <SearchField nameKey={"commands"}
-        searchTerm={searchTerm}
-        placeholder={t("Search commands and sequences...")}
-        customLeftIcon={<i />}
-        autoFocus={Path.inDesigner()}
-        onEnter={() => {
-          if (first) {
-            click();
-            stepClick(dispatch, first, current, stepIndex)();
-          }
-        }}
-        onChange={this.setSearchTerm} />
-      <div className={"commands"}>
-        {commands.map((stepButton, inx) =>
-          <div className={[
-            "step-button",
-            inx == 0 ? "highlight" : "",
-          ].join(" ")} key={inx} onClick={click}>
-            <StepButton {...commonStepProps}
-              step={stepButton.step}
-              label={stepButton.title}
-              color={stepButton.color} />
-          </div>)}
-        {!Path.inDesigner() && sequences.length > 0 &&
-          <Col xs={12}><label></label></Col>}
-        <div className={"pinned-sequences"}>
-          {sequences.map((s, inx) => s.body.id &&
+    return <div className={Path.inDesigner() ? "" : "row"}>
+      <div className={[
+        "step-button-cluster",
+        Path.inDesigner() ? "designer-cluster" : "",
+      ].join(" ")}>
+        <SearchField nameKey={"commands"}
+          searchTerm={searchTerm}
+          placeholder={t("Search commands and sequences...")}
+          customLeftIcon={<i />}
+          autoFocus={Path.inDesigner()}
+          onEnter={() => {
+            if (first) {
+              click();
+              stepClick(dispatch, first, current, stepIndex)();
+            }
+          }}
+          onChange={this.setSearchTerm} />
+        <div className={"commands"}>
+          {commands.map((stepButton, inx) =>
             <div className={[
               "step-button",
-              commands.length == 0 && inx == 0 ? "highlight" : "",
-            ].join(" ")} key={s.uuid} onClick={click}>
+              inx == 0 ? "highlight" : "",
+            ].join(" ")} key={inx} onClick={click}>
               <StepButton {...commonStepProps}
-                step={{
-                  kind: "execute",
-                  args: { sequence_id: s.body.id },
-                  body: variableList(resources.sequenceMetas[s.uuid])
-                }}
-                label={s.body.name}
-                color={s.body.color} />
+                step={stepButton.step}
+                label={stepButton.title}
+                color={stepButton.color} />
             </div>)}
+          {!Path.inDesigner() && sequences.length > 0 &&
+            <Col xs={12}><label></label></Col>}
+          <div className={"pinned-sequences"}>
+            {sequences.map((s, inx) => s.body.id &&
+              <div className={[
+                "step-button",
+                commands.length == 0 && inx == 0 ? "highlight" : "",
+              ].join(" ")} key={s.uuid} onClick={click}>
+                <StepButton {...commonStepProps}
+                  step={{
+                    kind: "execute",
+                    args: { sequence_id: s.body.id },
+                    body: variableList(resources.sequenceMetas[s.uuid])
+                  }}
+                  label={s.body.name}
+                  color={s.body.color} />
+              </div>)}
+          </div>
         </div>
       </div>
     </div>;
-    return Path.inDesigner() ? <Cluster /> : <Row><Cluster /></Row>;
   }
 }