modified signup, uniformed message if no scene, device or hosts

This commit is contained in:
Nicola Brunner 2020-05-06 13:43:07 +02:00
parent ede920b628
commit bf8e822fc7
4 changed files with 42 additions and 19 deletions

View File

@ -1,7 +1,7 @@
// vim: set ts=2 sw=2 et tw=80: // vim: set ts=2 sw=2 et tw=80:
import React, { Component } from "react"; import React, { Component } from "react";
import { Segment, Card } from "semantic-ui-react"; import { Segment, Card, Header, Icon } from "semantic-ui-react";
import Device from "./devices/Device"; import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice"; import NewDevice from "./devices/NewDevice";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -25,16 +25,31 @@ class DevicePanel extends Component {
render() { render() {
return ( return (
<Card.Group centered style={{ paddingTop: "3rem" }}> <Card.Group centered style={{ paddingTop: "3rem" }}>
{this.props.devices.map((e, i) => { {this.props.devices.length !== 0 ? (
return <Device key={i} tab={this.props.tab} id={e.id} />; <React.Fragment>
})} {this.props.devices.map((e, i) => {
{!this.props.isActiveRoomHome ? ( return <Device key={i} tab={this.props.tab} id={e.id} />;
<Card style={{ height: "27em" }}> })}
<Segment basic style={{ width: "100%", height: "100%" }}> {!this.props.isActiveRoomHome ? (
<NewDevice /> <Card style={{ height: "27em" }}>
</Segment> <Segment basic style={{ width: "100%", height: "100%" }}>
</Card> <NewDevice />
) : null} </Segment>
</Card>
) : null}
</React.Fragment>
) : (
<Segment placeholder>
<Header icon>
<Icon
name="exclamation triangle"
style={{ paddingBottom: "1rem" }}
/>
Please create a room on the left, and then add devices to the
same.
</Header>
</Segment>
)}
</Card.Group> </Card.Group>
); );
} }

View File

@ -19,12 +19,17 @@ class HostsPanel extends Component {
render() { render() {
if (this.props.isActiveDefaultHost) { if (this.props.isActiveDefaultHost) {
return ( return (
<Segment placeholder style={{ paddingTop: "3rem" }}> <Card.Group centered style={{ paddingTop: "3rem" }}>
<Header icon> <Segment placeholder>
<Icon name="folder open" /> <Header icon>
Please select a host to visit on the left. <Icon
</Header> name="exclamation triangle"
</Segment> style={{ paddingBottom: "1rem" }}
/>
Please select a host to visit on the left.
</Header>
</Segment>
</Card.Group>
); );
} }

View File

@ -44,7 +44,10 @@ class ScenesPanel extends Component {
) : ( ) : (
<Segment placeholder> <Segment placeholder>
<Header icon> <Header icon>
<Icon name="folder open" /> <Icon
name="exclamation triangle"
style={{ paddingBottom: "1rem" }}
/>
Please select a scene on the left or add a new one. Please select a scene on the left or add a new one.
</Header> </Header>
</Segment> </Segment>

View File

@ -116,7 +116,7 @@ export default class Signup extends Component {
<Form.Input <Form.Input
icon="lock" icon="lock"
iconPosition="left" iconPosition="left"
placeholder="Password (at least 8 characters)" placeholder="Password (at least 6 characters)"
name="password" name="password"
type="password" type="password"
onChange={this.onChangeHandler} onChange={this.onChangeHandler}