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 = {
position: "relative",
backgroundColor: "#fafafa",
height: "100vh",
width: "auto",
height: "85vh",
padding: "0rem 3rem",
color: "#000000",
overflow: "auto",
maxHeight: "75vh",
};
export const mobilePanelStyle = {
backgroundColor: "#fafafa",
minHeight: "100vh",
padding: "0rem 3rem",
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 MyHeader from "../components/HeaderController";
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 { connect } from "react-redux";
@ -45,7 +48,7 @@ class Dashboard extends Component {
render() {
return (
<div style={{ height: "110vh", background: "#1b1c1d" }}>
<div style={{ background: "#1b1c1d" }}>
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
@ -53,27 +56,31 @@ class Dashboard extends Component {
<MyHeader />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black" centered>
<Grid.Column>
<Grid.Row color="black">
<Grid.Column width={3}></Grid.Column>
<Grid.Column textAlign="center" width={13}>
<Button
basic
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
color={this.activeTab === "Devices" ? "green" : "olive"}
color={this.activeTab === "Devices" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}
color={this.activeTab === "Scenes" ? "green" : "olive"}
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Automations"
content="Automations"
active={this.activeTab === "Automations"}
color={this.activeTab === "Automations" ? "green" : "olive"}
color={this.activeTab === "Automations" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
</Grid.Column>
@ -96,6 +103,34 @@ class Dashboard extends Component {
<MyHeader />
</Grid.Column>
</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.Column color="black">
<Navbar />
@ -103,7 +138,9 @@ class Dashboard extends Component {
</Grid.Row>
<Grid.Row>
<Grid.Column>
<DevicePanel />
<div style={mobilePanelStyle}>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column>
</Grid.Row>
</Grid>