Tooltips and helpbuttons updates #1

frontend/css/global.scss

@@ -342,6 +342,14 @@ a {
     text-align: center;
     padding: 0.25rem;
   }
+  .widget-body-tooltips {
+    .bp3-popover-wrapper {
+      display: inline;
+      float: none;
+      margin-right: 1rem;
+      margin-left: 1rem;
+    }
+  }
   .fa-download {
     float: right;
     color: $dark_gray !important;

frontend/devices/components/__tests__/boolean_mcu_input_group_test.tsx

@@ -14,6 +14,7 @@ describe("BooleanMCUInputGroup", () => {
         return { value: bot.hardware.mcu_params[x], consistent: true };
       }}
       dispatch={dispatch}
+      tooltip={"Tooltip"}
       name={"Name"}
       x={"encoder_invert_x"}
       y={"encoder_invert_y"}

frontend/devices/components/boolean_mcu_input_group.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { ToggleButton } from "../../controls/toggle_button";
-import { SpacePanelToolTip } from "./space_panel_tool_tip";
 import { settingToggle } from "../actions";
-import { Row, Col } from "../../ui/index";
+import { Row, Col, Help } from "../../ui/index";
 import { BooleanMCUInputGroupProps } from "./interfaces";
+import { Position } from "@blueprintjs/core";
 
 export function BooleanMCUInputGroup(props: BooleanMCUInputGroupProps) {
 
@@ -26,13 +26,13 @@ export function BooleanMCUInputGroup(props: BooleanMCUInputGroupProps) {
   const zParam = sourceFwConfig(z);
 
   return <Row>
-    <Col xs={6}>
+    <Col xs={6} className={"widget-body-tooltips"}>
       <label>
         {name}
         {caution &&
           <i className="fa fa-exclamation-triangle caution-icon" />}
       </label>
-      <SpacePanelToolTip tooltip={tooltip} />
+      <Help text={tooltip} requireClick={true} position={Position.RIGHT} />
     </Col>
     <Col xs={2} className={"centered-button-div"}>
       <ToggleButton

frontend/devices/components/hardware_settings/calibration_row.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
-
 import { getDevice } from "../../../device";
 import { Axis } from "../../interfaces";
 import { LockableButton } from "../lockable_button";
 import { axisTrackingStatus } from "../axis_tracking_status";
 import { ToolTips } from "../../../constants";
-import { Row, Col } from "../../../ui/index";
+import { Row, Col, Help } from "../../../ui/index";
 import { CalibrationRowProps } from "../interfaces";
 import { commandErr } from "../../actions";
 import { t } from "../../../i18next_wrapper";
+import { Position } from "@blueprintjs/core";
 
 const calibrate = (axis: Axis) => getDevice()
   .calibrate({ axis })
@@ -19,16 +19,11 @@ export function CalibrationRow(props: CalibrationRowProps) {
   const { hardware, botDisconnected } = props;
 
   return <Row>
-    <Col xs={6}>
+    <Col xs={6} className={"widget-body-tooltips"}>
       <label>
         {t("CALIBRATION")}
       </label>
-      <div className="help">
-        <i className="fa fa-question-circle help-icon" />
-        <div className="help-text">
-          {t(ToolTips.CALIBRATION)}
-        </div>
-      </div>
+      <Help text={ToolTips.CALIBRATION} requireClick={true} position={Position.RIGHT} />
     </Col>
     {axisTrackingStatus(hardware)
       .map(row => {

frontend/devices/components/hardware_settings/homing_row.tsx

@@ -3,13 +3,13 @@ import { HomingRowProps } from "../interfaces";
 import { LockableButton } from "../lockable_button";
 import { axisTrackingStatus } from "../axis_tracking_status";
 import { ToolTips } from "../../../constants";
-import { SpacePanelToolTip } from "../space_panel_tool_tip";
-import { Row, Col } from "../../../ui/index";
+import { Row, Col, Help } from "../../../ui/index";
 import { CONFIG_DEFAULTS } from "farmbot/dist/config";
 import { commandErr } from "../../actions";
 import { Axis } from "../../interfaces";
 import { getDevice } from "../../../device";
 import { t } from "../../../i18next_wrapper";
+import { Position } from "@blueprintjs/core";
 
 const speed = CONFIG_DEFAULTS.speed;
 const findHome = (axis: Axis) => getDevice()
@@ -20,11 +20,11 @@ export function HomingRow(props: HomingRowProps) {
   const { hardware, botDisconnected } = props;
 
   return <Row>
-    <Col xs={6}>
+    <Col xs={6} className={"widget-body-tooltips"}>
       <label>
         {t("HOMING")}
       </label>
-      <SpacePanelToolTip tooltip={ToolTips.HOMING} />
+      <Help text={ToolTips.HOMING} requireClick={true} position={Position.RIGHT}/>
     </Col>
     {axisTrackingStatus(hardware)
       .map((row) => {

frontend/devices/components/hardware_settings/motors.tsx

@@ -1,14 +1,13 @@
 import * as React from "react";
 import { BooleanMCUInputGroup } from "../boolean_mcu_input_group";
 import { ToolTips } from "../../../constants";
-import { SpacePanelToolTip } from "../space_panel_tool_tip";
 import { ToggleButton } from "../../../controls/toggle_button";
 import { settingToggle } from "../../actions";
 import { NumericMCUInputGroup } from "../numeric_mcu_input_group";
 import { MotorsProps } from "../interfaces";
-import { Row, Col } from "../../../ui/index";
+import { Row, Col, Help } from "../../../ui/index";
 import { Header } from "./header";
-import { Collapse } from "@blueprintjs/core";
+import { Collapse, Position } from "@blueprintjs/core";
 import { McuInputBox } from "../mcu_input_box";
 import { minFwVersionCheck } from "../../../util";
 import { t } from "../../../i18next_wrapper";
@@ -24,9 +23,9 @@ const SingleSettingRow =
     settingType: "button" | "input",
   }) =>
     <Row>
-      <Col xs={6}>
+      <Col xs={6} className={"widget-body-tooltips"}>
         <label>{label}</label>
-        <SpacePanelToolTip tooltip={tooltip} />
+        <Help text={tooltip} requireClick={true} position={Position.RIGHT}/>
       </Col>
       {settingType === "button"
         ? <Col xs={2} className={"centered-button-div"}>{children}</Col>

frontend/devices/components/hardware_settings/pin_guard.tsx

@@ -2,9 +2,8 @@ import * as React from "react";
 import { PinGuardMCUInputGroup } from "../pin_guard_input_group";
 import { PinGuardProps } from "../interfaces";
 import { Header } from "./header";
-import { Collapse } from "@blueprintjs/core";
-import { Row, Col } from "../../../ui/index";
-import { SpacePanelToolTip } from "../space_panel_tool_tip";
+import { Collapse, Position } from "@blueprintjs/core";
+import { Row, Col, Help } from "../../../ui/index";
 import { ToolTips } from "../../../constants";
 import { t } from "../../../i18next_wrapper";
 
@@ -21,11 +20,11 @@ export function PinGuard(props: PinGuardProps) {
       dispatch={dispatch} />
     <Collapse isOpen={!!pin_guard}>
       <Row>
-        <Col xs={3} xsOffset={3}>
+        <Col xs={3} xsOffset={3} className={"widget-body-tooltips"}>
           <label>
             {t("Pin Number")}
           </label>
-          <SpacePanelToolTip tooltip={ToolTips.PIN_GUARD_PIN_NUMBER} />
+          <Help text={ToolTips.PIN_GUARD_PIN_NUMBER} requireClick={true} position={Position.RIGHT}/>
         </Col>
         <Col xs={4}>
           <label>

frontend/devices/components/hardware_settings/zero_row.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
-
 import { getDevice } from "../../../device";
 import { Axis } from "../../interfaces";
 import { ToolTips } from "../../../constants";
-import { Row, Col } from "../../../ui/index";
+import { Row, Col, Help } from "../../../ui/index";
 import { ZeroRowProps } from "../interfaces";
 import { commandErr } from "../../actions";
 import { t } from "../../../i18next_wrapper";
+import { Position } from "@blueprintjs/core";
 
 const zero =
   (axis: Axis) => getDevice().setZero(axis).catch(commandErr("Zeroing"));
@@ -24,16 +24,11 @@ export function ZeroButton(props: { axis: Axis; disabled: boolean; }) {
 
 export function ZeroRow({ botDisconnected }: ZeroRowProps) {
   return <Row>
-    <Col xs={6}>
+    <Col xs={6} className={"widget-body-tooltips"}>
       <label>
         {t("SET ZERO POSITION")}
       </label>
-      <div className="help">
-        <i className="fa fa-question-circle help-icon" />
-        <div className="help-text">
-          {t(ToolTips.SET_ZERO_POSITION)}
-        </div>
-      </div>
+      <Help text={ToolTips.SET_ZERO_POSITION} requireClick={true} position={Position.RIGHT} />
     </Col>
     {AXES.map((axis) => {
       return <Col xs={2} key={axis} className={"centered-button-div"}>

frontend/devices/components/interfaces.ts

@@ -27,7 +27,7 @@ export interface HomingAndCalibrationProps {
 export interface BooleanMCUInputGroupProps {
   sourceFwConfig: SourceFwConfig;
   dispatch: Function;
-  tooltip?: string | undefined;
+  tooltip: string;
   name: string;
   x: McuParamName;
   y: McuParamName;
@@ -46,7 +46,7 @@ export interface CalibrationRowProps {
 export interface NumericMCUInputGroupProps {
   sourceFwConfig: SourceFwConfig;
   dispatch: Function;
-  tooltip?: string | undefined;
+  tooltip: string;
   name: string;
   x: McuParamName;
   xScale?: number;
@@ -97,4 +97,4 @@ export interface DangerZoneProps {
   controlPanelState: ControlPanelState;
   onReset(): void;
   botDisconnected: boolean;
-}
+}

frontend/devices/components/numeric_mcu_input_group.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { McuInputBox } from "./mcu_input_box";
-import { SpacePanelToolTip } from "./space_panel_tool_tip";
 import { NumericMCUInputGroupProps } from "./interfaces";
-import { Row, Col } from "../../ui/index";
+import { Row, Col, Help } from "../../ui/index";
+import { Position } from "@blueprintjs/core";
 
 export function NumericMCUInputGroup(props: NumericMCUInputGroupProps) {
 
@@ -10,11 +10,11 @@ export function NumericMCUInputGroup(props: NumericMCUInputGroupProps) {
     sourceFwConfig, dispatch, tooltip, name, x, y, z, intSize, gray, float,
   } = props;
   return <Row>
-    <Col xs={6}>
+    <Col xs={6} className={"widget-body-tooltips"}>
       <label>
         {name}
       </label>
-      <SpacePanelToolTip tooltip={tooltip} />
+      <Help text={tooltip} requireClick={true} position={Position.RIGHT}/>
     </Col>
     <Col xs={2}>
       <McuInputBox

frontend/devices/components/space_panel_tool_tip.tsx

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { t } from "../../i18next_wrapper";
-
-interface SPTTProps {
-  tooltip?: string | undefined;
-}
-
-export function SpacePanelToolTip({ tooltip }: SPTTProps) {
-  return (tooltip && <div className="help">
-    <i className="fa fa-question-circle help-icon" />
-    <div className="help-text">
-      {t(tooltip)}
-    </div>
-  </div>) || <span />;
-}

frontend/logs/components/settings_menu.tsx

@@ -8,6 +8,7 @@ import { safeNumericSetting } from "../../session";
 import { ConfigurationName } from "farmbot";
 import { MessageType } from "../../sequences/interfaces";
 import { t } from "../../i18next_wrapper";
+import { Position } from "@blueprintjs/core";
 
 interface LogSettingRecord {
   label: string;
@@ -64,7 +65,7 @@ const LogSetting = (props: LogSettingProps) => {
     <label>
       {t(label)}
     </label>
-    <Help text={t(toolTip)} />
+    <Help text={t(toolTip)} position={Position.LEFT_TOP}/>
     <ToggleButton
       toggleValue={config.value}
       dim={!config.consistent}

frontend/sequences/locals_list/default_value_form.tsx

@@ -9,6 +9,7 @@ import {
 import { Help } from "../../ui";
 import { ToolTips } from "../../constants";
 import { t } from "../../i18next_wrapper";
+import { Position } from "@blueprintjs/core";
 
 export interface DefaultValueFormProps {
   variableNode: VariableNode;
@@ -20,7 +21,7 @@ export const DefaultValueForm = (props: DefaultValueFormProps) =>
   props.variableNode.kind === "parameter_declaration"
     ? <div className="default-value-form">
       <div className="default-value-tooltip">
-        <Help text={ToolTips.DEFAULT_VALUE} />
+        <Help text={ToolTips.DEFAULT_VALUE} position={Position.TOP_LEFT} />
       </div>
       <LocationForm
         key={props.variableNode.args.label + "default_value"}

frontend/sequences/sequence_editor_middle_active.tsx

@@ -75,7 +75,7 @@ export const SequenceSetting = (props: SequenceSettingProps) => {
     <label>
       {t(props.label)}
     </label>
-    <Help text={t(props.description)} requireClick={true} />
+    <Help text={t(props.description)} requireClick={true}/>
     <ToggleButton
       toggleValue={value}
       toggleAction={() => proceed() &&

frontend/sequences/step_icon_group.tsx

@@ -41,6 +41,6 @@ export function StepIconGroup(props: StepIconBarProps) {
     <StepUpDownButtonPopover onMove={onMove} />
     <i className="fa fa-clone step-control" onClick={onClone} />
     <i className="fa fa-trash step-control" onClick={onTrash} />
-    <Help text={helpText} />
+    <Help text={helpText} requireClick={true} position={Position.TOP} />
   </span>;
 }

frontend/ui/help.tsx

@@ -1,15 +1,16 @@
 import * as React from "react";
-import { Popover, Position, PopoverInteractionKind } from "@blueprintjs/core";
+import { Popover, PopoverInteractionKind, PopoverPosition } from "@blueprintjs/core";
 import { t } from "../i18next_wrapper";
 
 interface HelpProps {
   text: string;
   requireClick?: boolean;
+  position?: PopoverPosition;
 }
 
 export function Help(props: HelpProps) {
   return <Popover
-    position={Position.LEFT_TOP}
+    position={props.position}
     interactionKind={props.requireClick
       ? PopoverInteractionKind.CLICK : PopoverInteractionKind.HOVER}
     popoverClassName={"help"} >