Tooltips and helpbuttons updates no.3

frontend/css/global.scss

@@ -937,7 +937,6 @@ ul {
   }
 }
 
-.farmware-button,
 .farmware-settings-menu {
   position: absolute !important;
   top: 3rem;

frontend/css/image_flipper.scss

@@ -1,6 +1,7 @@
 .image-flipper {
   position: relative;
   margin-top: 1rem;
+  display: inline-block;
 }
 
 .image-flipper-image {
@@ -88,6 +89,24 @@
   }
 }
 
+.photos{
+  .farmware-button{
+    position: relative!important;
+    height: 0px;
+    bottom: 2rem;
+    float: right!important;
+  }
+}
+
+.weed-detector{
+  .farmware-button{
+    position: relative;
+    height: 0px;
+    top: 0rem;
+    float: right;
+  }
+}
+
 .farmware-button {
   div {
     float: right;

frontend/css/sequences.scss

@@ -53,6 +53,7 @@
     padding-left: 15px;
   }
   .title-help-text {
+    margin-bottom: 1.5rem;
     padding-left: 15px;
     padding-right: 15px;
   }
@@ -77,8 +78,8 @@
 .farmware-input-panel-contents {
   .farmware-info-button {
     position: absolute;
-    top: 7rem;
-    left: 35%;
+    top: 5rem;
+    left: 61%;
   }
 }
 

frontend/css/tooltips.scss

@@ -24,53 +24,39 @@
 }
 
 .title-help {
-  display: inline;
-  .fa {
-    color: $dark_gray;
-  }
-  &:hover {
-    .fa {
+    display: inline;
+  .title-help-text {
+    overflow: hidden;
+    max-height: 0;
+    color: transparent;
+    transition: all 0.5s ease;
+    transition-delay: 0.2s;
+    font-style: italic;
+    line-height: 2rem;
+    font-family: sans-serif;
+    a {
+      pointer-events: all;
+    }
+    a:link {
+      font-style: normal;
       color: $black;
     }
-  }
-}
-
-.title-help-text {
-  overflow: hidden;
-  max-height: 0;
-  color: transparent;
-  transition: all 0.5s ease;
-  transition-delay: 0.5s;
-  font-style: italic;
-  color: $black;
-  line-height: 2rem;
-  font-family: sans-serif;
-  a {
-    pointer-events: all;
-  }
-  a:link {
-    font-style: normal;
-    color: $black;
-  }
-  a:hover {
-    font-weight: 600;
-    color: $black;
-  }
-  a:active {
-    color: $black;
-  }
-}
-
-.title-help-icon {
-  margin: 0 1rem;
-  display: inline;
-  &.open{
-    .title-help-text {
+    a:hover {
+      font-weight: 600;
+      color: $black;
+    }
+    a:active {
+      color: $black;
+    }
+    &.open{
       max-height: 16rem;
-      transition-delay: 0.2s;
       color: $black;
       transition: all 0.5s ease;
       margin-bottom: 4rem;
     }
   }
 }
+  .title-help-icon {
+    margin: 0 1rem;
+    display: inline;
+ }

frontend/css/widgets.scss

@@ -26,22 +26,36 @@
   background: $dark_gray;
   letter-spacing: .05rem;
   padding: .75rem 1rem;
-  >*:not(h5):not(.help-icon) {
+  >*:not(h5):not(.title-help-icon):not(.title-help) {
     margin-left: 1rem;
   }
-  i.help-icon {
+  .title-help{
     display: inline;
-    padding: 1rem 0;
-    color: $medium_gray;
-    &:hover {
-      color: $gray;
-      transition-delay: 0.1s;
+      .title-help-text {
+        &.open{
+        opacity: 100;
+        padding: 0.5rem 0.3rem;
+        max-height: 200px;
+        transition: 0.5s;
+        color: $white;
+        display: block;
+        margin-bottom: 0%;
+      }
     }
+    .title-help-icon {
+      display: inline;
+      padding: 1rem 0;
+      color: $medium_gray;
+      &:hover {
+        color: $gray;
+        transition-delay: 0.1s;
+      }
+  }
   }
   i.fa-cog {
     color: $white;
   }
-  .help-text {
+  .title-help-text {
     font-style: italic;
     color: $off_white;
     line-height: 2rem;
@@ -51,7 +65,7 @@
     max-height: 0px;
     transition: all 0.5s ease;
     transition-delay: 0.2s;
-    pointer-events: none;
+    display: table-column-group;
     a {
       pointer-events: all;
     }
@@ -72,7 +86,6 @@
     color: $gray;
     font-size: 1.2rem;
     text-transform: uppercase;
-    margin-right: 1rem;
   }
 }
 

frontend/extras/__tests__/fallback_widget_test.tsx

@@ -18,8 +18,8 @@ describe("<FallbackWidget/>", function () {
     const wrapper = shallow(<FallbackWidget
       title="FakeWidget" helpText={helpText} />);
     expect(wrapper.html()).toContain(
-      "<i class=\"fa fa-question-circle help-icon\">" +
-      "<div class=\"help-text\">This is a fake widget.</div></i>");
+      "<i class=\"fa fa-question-circle title-help-icon\">" +
+      "</i><div class=\"title-help-text \"><i>This is a fake widget.</i></div>");
   });
 
 });

frontend/ui/__tests__/tooltip_test.tsx

@@ -21,14 +21,14 @@ describe("<ToolTip />", () => {
 
   it("Text invisible when closed", () => {
     expect(wrapper.find(".title-help-text").length).toEqual(1);
-    expect(wrapper.find(".title-help-icon.open").length).toEqual(0);
+    expect(wrapper.find(".title-help-text.open").length).toEqual(0);
   });
 
   it("Toggles state", () => {
     const parent = wrapper.find(".fa-question-circle");
     parent.simulate("click");
     expect(wrapper.state("isOpen")).toBeTruthy();
-    expect(wrapper.find(".title-help-icon.open").length).toEqual(1);
+    expect(wrapper.find(".title-help-text.open").length).toEqual(1);
   });
 
 });

frontend/ui/__tests__/widget_header_test.ts

@@ -1,6 +1,5 @@
 import { WidgetHeader } from "../widget_header";
 import { mount } from "enzyme";
-import { docLink } from "../doc_link";
 
 describe("<WidgetHeader />", () => {
   it("renders title", () => {
@@ -18,24 +17,12 @@ describe("<WidgetHeader />", () => {
     expect(wrapper.html()).toContain("children");
   });
 
-  it("renders helpText", () => {
+  it("renders ToolTip", () => {
     const wrapper = mount(WidgetHeader({
       title: "fakeWidget",
       helpText: "fakeHelp"
     }));
-    expect(wrapper.html()).toContain("fakeHelp");
-    expect(wrapper.html()).not.toContain("a href");
-  });
-
-  it("renders docs link", () => {
-    const wrapper = mount(WidgetHeader({
-      title: "fakeWidget",
-      helpText: "fakeHelp",
-      docPage: "farmware"
-    }));
-    expect(wrapper.html())
-      .toContain(docLink("farmware"));
-    expect(wrapper.text()).toContain("Documentation");
-    expect(wrapper.html()).toContain("fa-external-link");
+    expect(wrapper.html()).toContain("fa-question-circle");
+    expect(wrapper.find(".title-help-text").html()).toContain("fakeHelp");
   });
 });

frontend/ui/tooltip.tsx

@@ -26,18 +26,17 @@ export class ToolTip extends React.Component<ToolTipProps, Partial<State>> {
     const { helpText } = this.props;
     const cn = className ? className += " title-help" : "title-help";
     return <div className={cn}>
-      <div className={`fa fa-question-circle title-help-icon ${isOpen}`}
-        onClick={this.toggle("isOpen")} >
-        <div className="title-help-text">
-          <i>{t(helpText)}</i>
-          {this.props.docPage &&
-            <a
-              href={docLink(this.props.docPage)}
-              target="_blank">
-              {" " + t("Documentation")}
-              <i className="fa fa-external-link" />
-            </a>}
-        </div>
+      <i className={`fa fa-question-circle title-help-icon`}
+        onClick={this.toggle("isOpen")} />
+      <div className={`title-help-text ${isOpen}`}>
+        <i>{t(helpText)}</i>
+        {this.props.docPage &&
+          <a
+            href={docLink(this.props.docPage)}
+            target="_blank">
+            {" " + t("Documentation")}
+            <i className="fa fa-external-link" />
+          </a>}
       </div>
     </div>;
   }

frontend/ui/widget_header.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 
-import { docLink, DocSlug } from "./doc_link";
+import { DocSlug } from "./doc_link";
 import { t } from "../i18next_wrapper";
+import { ToolTip } from "./tooltip";
 
 interface WidgetHeaderProps {
   children?: React.ReactNode;
@@ -15,18 +16,7 @@ export function WidgetHeader(props: WidgetHeaderProps) {
     {props.children}
     <h5>{t(props.title)}</h5>
     {props.helpText &&
-      <i className="fa fa-question-circle help-icon">
-        <div className="help-text">
-          {t(props.helpText)}
-          {props.docPage &&
-            <a
-              href={docLink(props.docPage)}
-              target="_blank">
-              {" " + t("Documentation")}
-              <i className="fa fa-external-link" />
-            </a>}
-        </div>
-      </i>
+      <ToolTip helpText={props.helpText} docPage={props.docPage} />
     }
   </div>;
 }