From 3d83f01f5bc07daa5939d279c8f3401dc7e4c094 Mon Sep 17 00:00:00 2001 From: AscendFB Date: Thu, 26 Sep 2019 12:44:51 +0200 Subject: [PATCH] Tooltips and helpbuttons updates no.3 --- frontend/css/global.scss | 1 - frontend/css/image_flipper.scss | 19 ++++++ frontend/css/sequences.scss | 5 +- frontend/css/tooltips.scss | 68 ++++++++----------- frontend/css/widgets.scss | 33 ++++++--- .../extras/__tests__/fallback_widget_test.tsx | 4 +- frontend/ui/__tests__/tooltip_test.tsx | 4 +- frontend/ui/__tests__/widget_header_test.ts | 19 +----- frontend/ui/tooltip.tsx | 23 +++---- frontend/ui/widget_header.tsx | 16 +---- 10 files changed, 93 insertions(+), 99 deletions(-) diff --git a/frontend/css/global.scss b/frontend/css/global.scss index 388fd6354..98c6b1655 100644 --- a/frontend/css/global.scss +++ b/frontend/css/global.scss @@ -937,7 +937,6 @@ ul { } } -.farmware-button, .farmware-settings-menu { position: absolute !important; top: 3rem; diff --git a/frontend/css/image_flipper.scss b/frontend/css/image_flipper.scss index d48c07c31..32ee9a77b 100644 --- a/frontend/css/image_flipper.scss +++ b/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; diff --git a/frontend/css/sequences.scss b/frontend/css/sequences.scss index 45709235c..24e64a351 100644 --- a/frontend/css/sequences.scss +++ b/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%; } } diff --git a/frontend/css/tooltips.scss b/frontend/css/tooltips.scss index afb7406b5..098d0a399 100644 --- a/frontend/css/tooltips.scss +++ b/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; + } diff --git a/frontend/css/widgets.scss b/frontend/css/widgets.scss index 3d8fe1053..6b1ef9921 100644 --- a/frontend/css/widgets.scss +++ b/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; } } diff --git a/frontend/extras/__tests__/fallback_widget_test.tsx b/frontend/extras/__tests__/fallback_widget_test.tsx index a61d33263..2a72c312b 100644 --- a/frontend/extras/__tests__/fallback_widget_test.tsx +++ b/frontend/extras/__tests__/fallback_widget_test.tsx @@ -18,8 +18,8 @@ describe("", function () { const wrapper = shallow(); expect(wrapper.html()).toContain( - "" + - "
This is a fake widget.
"); + "" + + "
This is a fake widget.
"); }); }); diff --git a/frontend/ui/__tests__/tooltip_test.tsx b/frontend/ui/__tests__/tooltip_test.tsx index 77113f9a2..9c9f91390 100644 --- a/frontend/ui/__tests__/tooltip_test.tsx +++ b/frontend/ui/__tests__/tooltip_test.tsx @@ -21,14 +21,14 @@ describe("", () => { 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); }); }); diff --git a/frontend/ui/__tests__/widget_header_test.ts b/frontend/ui/__tests__/widget_header_test.ts index 32f862530..913e94789 100644 --- a/frontend/ui/__tests__/widget_header_test.ts +++ b/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("", () => { it("renders title", () => { @@ -18,24 +17,12 @@ describe("", () => { 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"); }); }); diff --git a/frontend/ui/tooltip.tsx b/frontend/ui/tooltip.tsx index 3a0bf274e..dff57f7cc 100644 --- a/frontend/ui/tooltip.tsx +++ b/frontend/ui/tooltip.tsx @@ -26,18 +26,17 @@ export class ToolTip extends React.Component> { const { helpText } = this.props; const cn = className ? className += " title-help" : "title-help"; return
-
-
- {t(helpText)} - {this.props.docPage && - - {" " + t("Documentation")} - - } -
+ +
+ {t(helpText)} + {this.props.docPage && + + {" " + t("Documentation")} + + }
; } diff --git a/frontend/ui/widget_header.tsx b/frontend/ui/widget_header.tsx index 60462d85e..0a1d87c54 100644 --- a/frontend/ui/widget_header.tsx +++ b/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}
{t(props.title)}
{props.helpText && - -
- {t(props.helpText)} - {props.docPage && - - {" " + t("Documentation")} - - } -
- + }
; }