add feed index indicator
This commit is contained in:
parent
521caf72d1
commit
9eb6c0d08a
|
@ -1,7 +1,7 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { fakeWebcamFeed } from "../../../__test_support__/fake_state/resources";
|
import { fakeWebcamFeed } from "../../../__test_support__/fake_state/resources";
|
||||||
import { mount } from "enzyme";
|
import { mount } from "enzyme";
|
||||||
import { Show } from "../show";
|
import { Show, IndexIndicator } from "../show";
|
||||||
import { props } from "../test_helpers";
|
import { props } from "../test_helpers";
|
||||||
|
|
||||||
describe("<Show/>", () => {
|
describe("<Show/>", () => {
|
||||||
|
@ -16,3 +16,22 @@ describe("<Show/>", () => {
|
||||||
expect(el.text()).toContain(feed2.body.name);
|
expect(el.text()).toContain(feed2.body.name);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("<IndexIndicator/>", () => {
|
||||||
|
it("renders index indicator: position 1", () => {
|
||||||
|
const wrapper = mount(<IndexIndicator i={0} total={2} />);
|
||||||
|
expect(wrapper.find("div").props().style)
|
||||||
|
.toEqual({ left: "calc(-10px + 0 * 50%)", width: "50%" });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders index indicator: position 2", () => {
|
||||||
|
const wrapper = mount(<IndexIndicator i={1} total={4} />);
|
||||||
|
expect(wrapper.find("div").props().style)
|
||||||
|
.toEqual({ left: "calc(-10px + 1 * 25%)", width: "25%" });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("doesn't render index indicator", () => {
|
||||||
|
const wrapper = mount(<IndexIndicator i={0} total={1} />);
|
||||||
|
expect(wrapper.html()).toEqual("<div></div>");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
|
@ -19,6 +19,16 @@ type State = {
|
||||||
|
|
||||||
const FALLBACK_FEED = { name: "", url: PLACEHOLDER_FARMBOT };
|
const FALLBACK_FEED = { name: "", url: PLACEHOLDER_FARMBOT };
|
||||||
|
|
||||||
|
export function IndexIndicator(props: { i: number, total: number }): JSX.Element {
|
||||||
|
const percentWidth = 100 / props.total;
|
||||||
|
return props.total > 1 ? <div
|
||||||
|
className="index-indicator"
|
||||||
|
style={{
|
||||||
|
width: `${percentWidth}%`,
|
||||||
|
left: `calc(-10px + ${props.i} * ${percentWidth}%)`
|
||||||
|
}} /> : <div />;
|
||||||
|
}
|
||||||
|
|
||||||
export class Show extends React.Component<WebcamPanelProps, State> {
|
export class Show extends React.Component<WebcamPanelProps, State> {
|
||||||
NO_FEED = t(`No webcams yet. Click the edit button to add a feed URL.`);
|
NO_FEED = t(`No webcams yet. Click the edit button to add a feed URL.`);
|
||||||
PLACEHOLDER_FEED = t(`Click the edit button to add or edit a feed URL.`);
|
PLACEHOLDER_FEED = t(`Click the edit button to add or edit a feed URL.`);
|
||||||
|
@ -57,6 +67,7 @@ export class Show extends React.Component<WebcamPanelProps, State> {
|
||||||
{t("Edit")}
|
{t("Edit")}
|
||||||
{unsaved ? "*" : ""}
|
{unsaved ? "*" : ""}
|
||||||
</button>
|
</button>
|
||||||
|
<IndexIndicator i={this.state.current} total={feeds.length} />
|
||||||
</WidgetHeader>
|
</WidgetHeader>
|
||||||
<div className="widget-body">
|
<div className="widget-body">
|
||||||
<div className="image-flipper">
|
<div className="image-flipper">
|
||||||
|
|
|
@ -217,8 +217,11 @@ fieldset {
|
||||||
}
|
}
|
||||||
|
|
||||||
.webcam-stream-valid img {
|
.webcam-stream-valid img {
|
||||||
min-width: 100%;
|
display: flex;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
max-height: 650px;
|
||||||
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.webcam-stream-unavailable text {
|
.webcam-stream-unavailable text {
|
||||||
|
|
|
@ -75,3 +75,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.index-indicator {
|
||||||
|
position: absolute;
|
||||||
|
background: $white;
|
||||||
|
height: 3px;
|
||||||
|
top: 3rem;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue