spacecruft
/
Farmbot-Web-App
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Tooltips and helpbuttons updates no.3

pull/1464/head
AscendFB 2019-09-26 12:44:51 +02:00
parent 9edd2c21fd
commit 3d83f01f5b
10 changed files with 93 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/css/global.scss
View File

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

19
frontend/css/image_flipper.scss
View File

@ -1,6 +1,7 @@
.image-flipper { .image-flipper {
position: relative; position: relative;
margin-top: 1rem; margin-top: 1rem;
display: inline-block;
} }
.image-flipper-image { .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 { .farmware-button {
div { div {
float: right; float: right;

5
frontend/css/sequences.scss
View File

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

68
frontend/css/tooltips.scss
View File

@ -24,53 +24,39 @@
} }
.title-help { .title-help {
display: inline; display: inline;
.fa { .title-help-text {
color: $dark_gray; overflow: hidden;
} max-height: 0;
&:hover { color: transparent;
.fa { 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; color: $black;
} }
} a:hover {
} font-weight: 600;
color: $black;
.title-help-text { }
overflow: hidden; a:active {
max-height: 0; color: $black;
color: transparent; }
transition: all 0.5s ease; &.open{
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 {
max-height: 16rem; max-height: 16rem;
transition-delay: 0.2s;
color: $black; color: $black;
transition: all 0.5s ease; transition: all 0.5s ease;
margin-bottom: 4rem; margin-bottom: 4rem;
} }
} }
} }
.title-help-icon {
margin: 0 1rem;
display: inline;
}

33
frontend/css/widgets.scss
View File

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

4
frontend/extras/__tests__/fallback_widget_test.tsx
View File

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

4
frontend/ui/__tests__/tooltip_test.tsx
View File

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

19
frontend/ui/__tests__/widget_header_test.ts
View File

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

23
frontend/ui/tooltip.tsx
View File

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

16
frontend/ui/widget_header.tsx
View File

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