Merge branch 'staging' of github.com:FarmBot/Farmbot-Web-App into ind…

…ividual_releases
FarmBot · Sep 4, 2020 · d4078e0 · d4078e0
2 parents a768cca + d23c0fb
commit d4078e0
Show file tree

Hide file tree

Showing 11 changed files with 276 additions and 33 deletions.
diff --git a/frontend/constants.ts b/frontend/constants.ts
@@ -134,10 +134,10 @@ export namespace ToolTips {
     trim(`Z axis coordinate (millimeters) to which the z axis should be
     retracted during Safe Z moves. It is recommended to choose a value at
     which the z axis is all of the way up to provide as much clearance as
-    possible.`);
+    possible. (default: 0)`);
 
   export const SOIL_HEIGHT =
-    trim(`Z axis coordinate (millimeters) of soil level.`);
+    trim(`Z axis coordinate (millimeters) of soil level. (default: 0)`);
 
   // Hardware Settings: Motors
   export const MAX_SPEED =

diff --git a/frontend/css/global.scss b/frontend/css/global.scss
@@ -1740,6 +1740,11 @@ ul {
   .fa-info-circle {
     color: $blue;
   }
+  &.bulletin-alert {
+    img, iframe {
+      width: 100%;
+    }
+  }
   .problem-alert-title {
     margin-top: 0.15rem;
     margin-bottom: 1rem;

diff --git a/frontend/css/image_flipper.scss b/frontend/css/image_flipper.scss
@@ -11,8 +11,7 @@
     margin-top: 3%;
     .image-flipper-image,
     svg {
-      max-height: none;
-      height: 80vh;
+      max-height: 80vh;
     }
   }
 }

diff --git a/frontend/css/inputs.scss b/frontend/css/inputs.scss
@@ -105,6 +105,12 @@ select {
   }
 }
 
+.filter-search-popover {
+  .bp3-popover-content {
+    max-width: 40rem;
+  }
+}
+
 .filter-search-item-none::after {
   content: "*";
 }

diff --git a/frontend/css/navbar.scss b/frontend/css/navbar.scss
@@ -53,7 +53,7 @@ nav {
         filter: brightness(0%) invert(100%);
         opacity: 0.8;
       }
-      .saucer {
+      .saucer, .external-icon {
         margin-left: -1rem !important;
         width: 1.5rem;
         height: 1.5rem;
@@ -62,6 +62,21 @@ nav {
           font-size: 0.9rem;
         }
       }
+      .external-icon {
+        position: relative;
+        visibility: hidden;
+        background: $dark_gray;
+        width: 0.9rem;
+        height: 0.9rem;
+        border-radius: 2px;
+        i {
+          margin-top: -1px;
+          color: $medium_light_gray;
+        }
+        &:before {
+          z-index: 0;
+        }
+      }
     }
     .nav-link-text {
       display: none;
@@ -89,6 +104,9 @@ nav {
         img {
           opacity: 0.9;
         }
+        .external-icon {
+          visibility: visible;
+        }
       }
       &.active {
         font-weight: bold;
@@ -119,7 +137,7 @@ nav {
         height: 3px;
         background: $dark_gray;
       }
-      div .saucer {
+      div .saucer, .external-icon {
         display: inline-flex;
         margin-left: 1rem;
         text-align: center;
@@ -223,8 +241,8 @@ nav {
       }
     }
   }
-  .bp3-popover-arrow-fill {
-    fill: $dark_gray;
+  .bp3-popover-arrow {
+    visibility: hidden;
   }
 }
 
@@ -235,6 +253,7 @@ nav {
     height: calc(100vh);
     overflow-y: auto;
     overflow-x: hidden;
+    padding-bottom: 3rem;
     &::-webkit-scrollbar {
       background-color: $medium_gray;
     }
@@ -256,13 +275,16 @@ nav {
       &:after {
         content: unset;
       }
-      div .saucer {
+      div .saucer, .external-icon {
         display: inline-flex;
         margin-left: 1rem;
       }
+      div .external-icon {
+        vertical-align: unset;
+      }
       .link-icon {
         display: inline-block;
-        .saucer {
+        .saucer, .external-icon {
           display: none;
         }
       }

diff --git a/frontend/farm_designer/panel_header.tsx b/frontend/farm_designer/panel_header.tsx
@@ -33,6 +33,7 @@ export enum Panel {
   Logs = "Logs",
   Help = "Help",
   Settings = "Settings",
+  Shop = "Shop",
 }
 
 type Tabs = keyof typeof Panel;
@@ -71,6 +72,7 @@ export const TAB_COLOR: Record<Panel, PanelColor> = {
   [Panel.Logs]: PanelColor.gray,
   [Panel.Help]: PanelColor.gray,
   [Panel.Settings]: PanelColor.gray,
+  [Panel.Shop]: PanelColor.gray,
 };
 
 export enum Icon {
@@ -93,6 +95,7 @@ export enum Icon {
   logs = "logs",
   help = "help",
   settings = "settings",
+  shop = "shop",
 }
 
 export const iconFile = (icon: Icon) => `/app-resources/img/icons/${icon}.svg`;
@@ -117,6 +120,7 @@ export const TAB_ICON: Record<Panel, string> = {
   [Panel.Logs]: iconFile(Icon.logs),
   [Panel.Help]: iconFile(Icon.help),
   [Panel.Settings]: iconFile(Icon.settings),
+  [Panel.Shop]: iconFile(Icon.shop),
 };
 
 export const PANEL_SLUG: Record<Panel, string> = {
@@ -139,6 +143,7 @@ export const PANEL_SLUG: Record<Panel, string> = {
   [Panel.Logs]: "logs",
   [Panel.Help]: "help",
   [Panel.Settings]: "settings",
+  [Panel.Shop]: "shop",
 };
 
 const ALT_PANEL_SLUG: Record<string, string> = {
@@ -175,6 +180,7 @@ export const PANEL_TITLE = (): Record<Panel, string> => ({
   [Panel.Logs]: t("Logs"),
   [Panel.Help]: t("Help"),
   [Panel.Settings]: t("Settings"),
+  [Panel.Shop]: t("Shop"),
 });
 
 export const getCurrentPanel = (): Tabs | undefined => {

diff --git a/frontend/nav/nav_links.tsx b/frontend/nav/nav_links.tsx
@@ -28,30 +28,58 @@ export const getLinks = (): Panel[] => [
 export const NavLinks = (props: NavLinksProps) =>
   <div className={"links"}>
     <div className={"nav-links"}>
-      {(props.addMap ? [Panel.Map] : []).concat(getLinks()).map(panel => {
-        const isActive = getCurrentPanel() === panel ? "active" : "";
-        const NotificationCircle = () =>
-          PANEL_SLUG[panel] === "messages" && props.alertCount > 0
-            ? <div className={"saucer fun"}><p>{props.alertCount}</p></div>
-            : <div className={"no-notifications"} />;
-        return <Link
+      {(props.addMap ? [Panel.Map] : []).concat(getLinks()).map(panel =>
+        <Link
           to={getPanelPath(panel)}
-          className={isActive}
+          className={getCurrentPanel() === panel ? "active" : ""}
           key={PANEL_SLUG[panel]}
           draggable={false}
           onClick={props.close("mobileMenuOpen")}>
-          <div className={"link-icon"}>
-            <img width={25} height={25}
-              src={TAB_ICON[panel]}
-              title={PANEL_TITLE()[panel]} />
-            <NotificationCircle />
-          </div>
-          <div className={"nav-link-text"}
-            data-title={PANEL_TITLE()[panel]}>
-            {PANEL_TITLE()[panel]}
-            <NotificationCircle />
-          </div>
-        </Link>;
-      })}
+          <NavIconAndText panel={panel} alertCount={props.alertCount} />
+        </Link>)}
+      <a className={"shop-link"} key={"shop"}
+        draggable={false} onClick={props.close("mobileMenuOpen")}
+        href={"https://shop.farm.bot/"} target={"_blank"}>
+        <NavIconAndText panel={Panel.Shop} customMiniIcon={
+          <div className={"external-icon"}>
+            <i className="fa fa-external-link-square" />
+          </div>} />
+      </a>
     </div>
   </div>;
+
+interface NavItemProps {
+  panel: Panel;
+  alertCount?: number;
+  customMiniIcon?: React.ReactElement;
+}
+
+const NotificationCircle = (props: NavItemProps): React.ReactElement => {
+  if (PANEL_SLUG[props.panel] === "messages"
+    && props.alertCount && props.alertCount > 0) {
+    return <div className={"saucer fun"}><p>{props.alertCount}</p></div>;
+  }
+  if (props.customMiniIcon) { return props.customMiniIcon; }
+  return <div className={"no-notifications"} />;
+};
+
+const NavIcon = (props: NavItemProps) =>
+  <div className={"link-icon"}>
+    <img width={25} height={25}
+      src={TAB_ICON[props.panel]}
+      title={PANEL_TITLE()[props.panel]} />
+    <NotificationCircle {...props} />
+  </div>;
+
+const NavText = (props: NavItemProps) =>
+  <div className={"nav-link-text"}
+    data-title={PANEL_TITLE()[props.panel]}>
+    {PANEL_TITLE()[props.panel]}
+    <NotificationCircle {...props} />
+  </div>;
+
+const NavIconAndText = (props: NavItemProps) =>
+  <div className={"link-icon-and-text"}>
+    <NavIcon {...props} />
+    <NavText {...props} />
+  </div>;
diff --git a/frontend/settings/hardware_settings/axis_settings.tsx b/frontend/settings/hardware_settings/axis_settings.tsx
@@ -157,7 +157,7 @@ export function AxisSettings(props: AxisSettingsProps) {
         <SafeHeight
           dispatch={dispatch}
           sourceFbosConfig={props.sourceFbosConfig} />}
-      {props.shouldDisplay(Feature.safe_height_input) &&
+      {props.shouldDisplay(Feature.soil_height) &&
         <SoilHeight
           dispatch={dispatch}
           sourceFbosConfig={props.sourceFbosConfig} />}

diff --git a/frontend/ui/filter_search.tsx b/frontend/ui/filter_search.tsx
@@ -36,7 +36,12 @@ export class FilterSearch extends React.Component<Props, Partial<State>> {
       itemRenderer={this.default}
       noResults={<MenuItem disabled text={t("No results.")} />}
       onItemSelect={this.handleValueChange}
-      popoverProps={{ popoverClassName: minimal ? Classes.MINIMAL : "" }}>
+      popoverProps={{
+        popoverClassName: [
+          "filter-search-popover",
+          minimal ? Classes.MINIMAL : "",
+        ].join(" ")
+      }}>
       <Button
         alignText={Alignment.LEFT}
         text={item ? item.label : t("(No selection)")} />

diff --git a/frontend/util/version.ts b/frontend/util/version.ts
@@ -110,6 +110,7 @@ const fallbackData: MinOsFeatureLookup = {
   [Feature.update_resource]: "10.0.0",
   [Feature.express_stall_detection]: "10.1.3",
   [Feature.computed_move]: "11.0.0",
+  [Feature.safe_height_input]: MinVersionOverride.NEVER,
   [Feature.soil_height]: MinVersionOverride.NEVER,
   [Feature.boot_sequence]: MinVersionOverride.NEVER,
 };