smarthut/frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New style for tabs

Browse Source
This commit is contained in:
britea 2020-04-14 22:56:00 +02:00
parent 82c4f3ea57
commit 3bc219c926
2 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
smart-hut/src/components/dashboard/devices/styleComponents.js
View File

@ -18,10 +18,17 @@ export const editButtonStyle = {
}; };
export const panelStyle = { export const panelStyle = {
position: "relative",
backgroundColor: "#fafafa", backgroundColor: "#fafafa",
height: "100vh", height: "85vh",
width: "auto", padding: "0rem 3rem",
color: "#000000",
overflow: "auto",
maxHeight: "75vh",
};
export const mobilePanelStyle = {
backgroundColor: "#fafafa",
minHeight: "100vh",
padding: "0rem 3rem", padding: "0rem 3rem",
color: "#000000", color: "#000000",
}; };

53
smart-hut/src/views/Dashboard.js
View File

@ -5,7 +5,10 @@ import AutomationsPanel from "../components/dashboard/AutomationsPanel";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import MyHeader from "../components/HeaderController"; import MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button } from "semantic-ui-react"; import { Grid, Responsive, Button } from "semantic-ui-react";
import { panelStyle } from "../components/dashboard/devices/styleComponents"; import {
panelStyle,
mobilePanelStyle,
} from "../components/dashboard/devices/styleComponents";
import { RemoteService } from "../remote"; import { RemoteService } from "../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -45,7 +48,7 @@ class Dashboard extends Component {
render() { render() {
return ( return (
<div style={{ height: "110vh", background: "#1b1c1d" }}> <div style={{ background: "#1b1c1d" }}>
<Responsive minWidth={768}> <Responsive minWidth={768}>
<Grid> <Grid>
<Grid.Row color="black"> <Grid.Row color="black">
@ -53,27 +56,31 @@ class Dashboard extends Component {
<MyHeader /> <MyHeader />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
<Grid.Row color="black" centered> <Grid.Row color="black">
<Grid.Column> <Grid.Column width={3}></Grid.Column>
<Grid.Column textAlign="center" width={13}>
<Button <Button
basic
name="Devices" name="Devices"
content="Devices" content="Devices"
active={this.activeTab === "Devices"} active={this.activeTab === "Devices"}
color={this.activeTab === "Devices" ? "green" : "olive"} color={this.activeTab === "Devices" ? "yellow" : "grey"}
onClick={this.selectTab} onClick={this.selectTab}
/> />
<Button <Button
basic
name="Scenes" name="Scenes"
content="Scenes" content="Scenes"
active={this.activeTab === "Scenes"} active={this.activeTab === "Scenes"}
color={this.activeTab === "Scenes" ? "green" : "olive"} color={this.activeTab === "Scenes" ? "yellow" : "grey"}
onClick={this.selectTab} onClick={this.selectTab}
/> />
<Button <Button
basic
name="Automations" name="Automations"
content="Automations" content="Automations"
active={this.activeTab === "Automations"} active={this.activeTab === "Automations"}
color={this.activeTab === "Automations" ? "green" : "olive"} color={this.activeTab === "Automations" ? "yellow" : "grey"}
onClick={this.selectTab} onClick={this.selectTab}
/> />
</Grid.Column> </Grid.Column>
@ -96,6 +103,34 @@ class Dashboard extends Component {
<MyHeader /> <MyHeader />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
<Grid.Row color="black">
<Grid.Column textAlign="center">
<Button
basic
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
color={this.activeTab === "Devices" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Automations"
content="Automations"
active={this.activeTab === "Automations"}
color={this.activeTab === "Automations" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row color="black"> <Grid.Row color="black">
<Grid.Column color="black"> <Grid.Column color="black">
<Navbar /> <Navbar />
@ -103,7 +138,9 @@ class Dashboard extends Component {
</Grid.Row> </Grid.Row>
<Grid.Row> <Grid.Row>
<Grid.Column> <Grid.Column>
<DevicePanel /> <div style={mobilePanelStyle}>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>