point, weed, and plant info panel style update

FarmBot · Jan 30, 2025 · b585809 · b585809
1 parent 64fee2e
commit b585809
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 108 deletions.
diff --git a/frontend/css/components/go_button.scss b/frontend/css/components/go_button.scss
@@ -6,6 +6,8 @@
   button {
     margin: 0;
     float: none;
+    height: 3rem !important;
+    padding: 0 1rem;
   }
   .go-button-axes-text {
     border-top-right-radius: 0;

diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -362,18 +362,6 @@
   }
 }
 
-.point-name-input {
-  label {
-    margin-top: 2rem !important;
-  }
-}
-
-li {
-  label {
-    margin-top: 0 !important;
-  }
-}
-
 .additional-weed-properties {
   li {
     display: grid;

diff --git a/frontend/css/panels/plants.scss b/frontend/css/panels/plants.scss
@@ -1,19 +1,6 @@
 @use "../variables" as *;
 @use "sass:color";
 
-.plants-panel-settings-menu {
-  label {
-    line-height: 3rem;
-    vertical-align: bottom;
-    margin-bottom: 0;
-  }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 0.5rem;
-    line-height: 3rem;
-  }
-}
-
 .crop-search-result-wrapper {
   .crop-search-results-wrapper {
     display: grid;
@@ -114,6 +101,7 @@
       p {
         font-weight: bold;
         text-transform: none;
+        white-space: nowrap;
       }
     }
     img {
@@ -124,17 +112,18 @@
   .crop-info-grid {
     grid-template-columns: auto auto;
   }
-  .crop-info-box {
-    background: var(--secondary-bg);
-    border-radius: 0.5rem;
-    padding: 1rem;
-    align-content: baseline;
-    &:has(.crop-companions) {
-      grid-column: span 2;
-    }
-  }
   .crop-info-field-data {
     font-size: 1.3rem;
     margin-left: 2.5rem;
   }
 }
+
+.info-box {
+  background: var(--secondary-bg);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  align-content: baseline;
+  &:has(.crop-companions) {
+    grid-column: span 2;
+  }
+}
diff --git a/frontend/css/panels/points.scss b/frontend/css/panels/points.scss
@@ -11,3 +11,7 @@
     }
   }
 }
+
+.row.edit-point-location {
+  align-items: end;
+}
diff --git a/frontend/plants/__tests__/plant_info_test.tsx b/frontend/plants/__tests__/plant_info_test.tsx
@@ -41,8 +41,8 @@ describe("<PlantInfo />", () => {
     ["Strawberry Plant 1", "Plant Type", "Strawberry"].map(string =>
       expect(wrapper.text().toLowerCase()).toContain(string.toLowerCase()));
     const buttons = wrapper.find("button");
-    expect(buttons.at(0).text()).toEqual("GO (X, Y)");
-    expect(buttons.at(2).text()).toEqual("Planned");
+    expect(buttons.at(0).text()).toEqual("Planned");
+    expect(buttons.at(1).text()).toEqual("GO (X, Y)");
   });
 
   it("renders: no plant", () => {

diff --git a/frontend/plants/__tests__/plant_panel_test.tsx b/frontend/plants/__tests__/plant_panel_test.tsx
@@ -109,7 +109,7 @@ describe("<PlantPanel />", () => {
 
   it("moves to plant location", () => {
     const wrapper = mount(<PlantPanel {...fakeProps()} />);
-    clickButton(wrapper, 0, "go (x, y)");
+    clickButton(wrapper, 1, "go (x, y)");
     expect(move).toHaveBeenCalledWith({ x: 12, y: 34, z: 0 });
   });
 

diff --git a/frontend/plants/crop_info.tsx b/frontend/plants/crop_info.tsx
@@ -68,7 +68,7 @@ const shortenTitle = (title: string) => {
 
 /** Basic field: value display for crop properties. */
 const InfoField = (props: InfoFieldProps) =>
-  <div className="grid no-gap crop-info-box">
+  <div className="grid no-gap info-box">
     <div className={"row grid-exp-2"}>
       <span>{EMOJI[props.title]}</span>
       <label>
@@ -334,7 +334,7 @@ export class RawCropInfo extends React.Component<CropInfoProps, {}> {
         <CropInfoList crop={crop}
           dispatch={dispatch}
           selectMostUsedCurves={this.selectMostUsedCurves} />
-        <div className={"row grid-2-col crop-info-box"}>
+        <div className={"row grid-2-col info-box"}>
           <label className="stage">{t("status")}</label>
           <FBSelect
             list={PLANT_STAGE_LIST()}
@@ -346,7 +346,7 @@ export class RawCropInfo extends React.Component<CropInfoProps, {}> {
               payload: ddi.value,
             })} />
         </div>
-        <div className={"row grid-2-col crop-info-box"}>
+        <div className={"row grid-2-col info-box"}>
           <label className="planted-at">{t("start date")}</label>
           <BlurableInput
             type="date"
@@ -359,7 +359,7 @@ export class RawCropInfo extends React.Component<CropInfoProps, {}> {
             })
             } />
         </div>
-        <div className={"row grid-2-col crop-info-box"}>
+        <div className={"row grid-2-col info-box"}>
           <label className="radius">{t("radius (mm)")}</label>
           <BlurableInput
             type="number"

diff --git a/frontend/plants/edit_plant_status.tsx b/frontend/plants/edit_plant_status.tsx
@@ -93,7 +93,7 @@ const getUpdateByPlantStage = (plant_stage: PlantStage): PlantOptions => {
 /** Select a `plant_stage` for a plant. */
 export function EditPlantStatus(props: EditPlantStatusProps) {
   const { plantStatus, updatePlant, uuid } = props;
-  return <div className="row grid-2-col">
+  return <div className="grid half-gap">
     <label>{t("Status")}</label>
     <FBSelect
       list={PLANT_STAGE_LIST()}

diff --git a/frontend/plants/plant_panel.tsx b/frontend/plants/plant_panel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FormattedPlantInfo } from "./map_state_to_props";
 import { useNavigate } from "react-router";
-import { BlurableInput, Row, Help } from "../ui";
+import { BlurableInput, Help } from "../ui";
 import {
   PlantStage, TaggedCurve, TaggedFarmwareEnv, TaggedGenericPointer,
   TaggedPlantPointer, Xyz,
@@ -86,9 +86,9 @@ export const EditPlantLocation = (props: EditPlantLocationProps) => {
     points: props.soilHeightPoints,
     farmwareEnvs: props.farmwareEnvs,
   });
-  return <Row>
+  return <div className="row">
     {["x", "y", "z"].map((axis: Xyz) =>
-      <div key={axis}>
+      <div key={axis} className="grid half-gap">
         <div className="row grid-exp-2 half-gap">
           <label style={{ marginTop: 0 }}>{t("{{axis}} (mm)", { axis })}</label>
           {axis == "z" && !isUndefined(soilZ) &&
@@ -102,15 +102,15 @@ export const EditPlantLocation = (props: EditPlantLocationProps) => {
             [axis]: parseIntInput(e.currentTarget.value)
           })} />
       </div>)}
-  </Row>;
+  </div>;
 };
 
 export interface EditPlantRadiusProps extends EditPlantProperty {
   radius: number;
 }
 
 export const EditPlantRadius = (props: EditPlantRadiusProps) =>
-  <Row className="grid-2-col">
+  <div className="grid half-gap">
     <label style={{ marginTop: 0 }}>{t("radius (mm)")}</label>
     <BlurableInput
       type="number"
@@ -120,14 +120,14 @@ export const EditPlantRadius = (props: EditPlantRadiusProps) =>
       onCommit={e => props.updatePlant(props.uuid, {
         radius: parseIntInput(e.currentTarget.value)
       })} />
-  </Row>;
+  </div>;
 
 export interface EditPlantDepthProps extends EditPlantProperty {
   depth: number;
 }
 
 export const EditPlantDepth = (props: EditPlantDepthProps) =>
-  <Row className="grid-2-col">
+  <div className="grid half-gap">
     <label style={{ marginTop: 0 }}>{t("depth (mm)")}</label>
     <BlurableInput
       type="number"
@@ -137,23 +137,23 @@ export const EditPlantDepth = (props: EditPlantDepthProps) =>
       onCommit={e => props.updatePlant(props.uuid, {
         depth: parseIntInput(e.currentTarget.value)
       })} />
-  </Row>;
+  </div>;
 
 interface ListItemProps {
   name?: string;
   children: React.ReactNode;
 }
 
 export const ListItem = (props: ListItemProps) =>
-  <li>
+  <div className="info-box">
     {props.name &&
       <label>
         {props.name}
       </label>}
     <div className={"plant-info-field-data"}>
       {props.children}
     </div>
-  </li>;
+  </div>;
 
 export function PlantPanel(props: PlantPanelProps) {
   const {
@@ -165,7 +165,7 @@ export function PlantPanel(props: PlantPanelProps) {
   const navigate = useNavigate();
   const slugForCropInfoLink = ALIASED_SLUG_LOOKUP[slug] || slug;
   return <DesignerPanelContent panelName={"plants"}>
-    <ul className="grid">
+    <div className="grid">
       <ListItem name={t("Plant Type")}>
         <Link
           title={t("View crop info")}
@@ -180,45 +180,40 @@ export function PlantPanel(props: PlantPanelProps) {
           }} />
       </ListItem>
       {(timeSettings && !inSavedGarden) &&
-        <Row>
-          <div>
-            <ListItem name={t("Started")}>
-              <EditDatePlanted {...commonProps}
-                datePlanted={plantedAt}
-                timeSettings={timeSettings} />
-            </ListItem>
+        <div className="row info-box">
+          <div className="grid half-gap">
+            <label>{t("Started")}</label>
+            <EditDatePlanted {...commonProps}
+              datePlanted={plantedAt}
+              timeSettings={timeSettings} />
           </div>
-          <div>
-            <ListItem name={t("Age")}>
-              {daysOldText({ age: daysOld, stage: plantStatus })}
-            </ListItem>
+          {(!inSavedGarden)
+            ? <EditPlantStatus {...commonProps} plantStatus={plantStatus} />
+            : t(startCase(plantStatus))}
+          <div className="grid half-gap">
+            <label>{t("Age")}</label>
+            {daysOldText({ age: daysOld, stage: plantStatus })}
           </div>
-        </Row>}
-      <ListItem>
+        </div>}
+      <div className="row grid-exp-1 info-box" style={{ alignItems: "end" }}>
         <EditPlantLocation {...commonProps}
           plantLocation={{ x, y, z }}
           soilHeightPoints={props.soilHeightPoints}
           farmwareEnvs={props.farmwareEnvs} />
-      </ListItem>
-      <GoToThisLocationButton
-        dispatch={props.dispatch}
-        locationCoordinate={{ x, y, z }}
-        botOnline={props.botOnline}
-        arduinoBusy={props.arduinoBusy}
-        currentBotLocation={props.currentBotLocation}
-        movementState={props.movementState}
-        defaultAxes={props.defaultAxes} />
-      <ListItem>
+        <GoToThisLocationButton
+          dispatch={props.dispatch}
+          locationCoordinate={{ x, y, z }}
+          botOnline={props.botOnline}
+          arduinoBusy={props.arduinoBusy}
+          currentBotLocation={props.currentBotLocation}
+          movementState={props.movementState}
+          defaultAxes={props.defaultAxes} />
+      </div>
+      <div className="row info-box">
         <EditPlantRadius {...commonProps} radius={info.radius} />
-      </ListItem>
-      {!isUndefined(info.depth) && <ListItem>
-        <EditPlantDepth {...commonProps} depth={info.depth} />
-      </ListItem>}
-      <ListItem>
-        {(!inSavedGarden)
-          ? <EditPlantStatus {...commonProps} plantStatus={plantStatus} />
-          : t(startCase(plantStatus))}
-      </ListItem>
+        {!isUndefined(info.depth) && <EditPlantDepth
+          {...commonProps} depth={info.depth} />}
+      </div>
       {info.uuid.startsWith("Point") &&
         <AllCurveInfo
           dispatch={props.dispatch}
@@ -242,6 +237,6 @@ export function PlantPanel(props: PlantPanelProps) {
             return <ListItem key={key} name={key}>{value || ""}</ListItem>;
         }
       })}
-    </ul>
+    </div>
   </DesignerPanelContent>;
 }
diff --git a/frontend/points/create_points.tsx b/frontend/points/create_points.tsx
@@ -218,9 +218,9 @@ export class RawCreatePoints
 
   PointProperties = () =>
     <ul className="grid">
-      <li>
-        <Row className="grid-exp-1">
-          <div className={"point-name-input"}>
+      <div className="info-box">
+        <div className="row grid-exp-1" style={{ alignItems: "end" }}>
+          <div className={"point-name-input grid half-gap"}>
             <label>{t("Name")}</label>
             <BlurableInput
               name="pointName"
@@ -231,8 +231,8 @@ export class RawCreatePoints
           <ColorPicker
             current={(this.attr("color") || this.defaultColor) as ResourceColor}
             onChange={this.changeColor} />
-        </Row>
-      </li>
+        </div>
+      </div>
       <ListItem>
         <Row className="add-point-grid">
           <div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,7 @@ @@
         }
       }
     }
+    .row.edit-point-location {
+      align-items: end;
+    }