Permalink
Browse files

Add basic layout

  • Loading branch information...
lucapette committed Feb 16, 2017
1 parent bc5b17e commit 4d2d1f7746311d493242451d710ae51e74b9aa28
Showing with 70 additions and 18 deletions.
  1. +51 −0 src/ControlPanel.js
  2. +18 −17 src/Layout.js
  3. +1 −1 src/app.css
View
@@ -0,0 +1,51 @@
+//@flow
+import React, { Component } from 'react'
+import { Icon, Menu } from 'semantic-ui-react'
+
+export default class ControlPanel extends Component {
+ handleClick = (e, item) => {
+ switch(item.name) {
+ case "start":
+ case "restart":
+ this.props.changePage("run");
+ break;
+ case "back":
+ this.props.changePage("home");
+ break;
+ }
+ }
+
+ currentPanel = (page) => {
+ switch(this.props.page) {
+ case "home":
+ return (
+ <Menu attached="bottom" widths="2">
+ <Menu.Item name="start" onClick={this.handleClick}>
+ <Icon name='video play outline' fitted color="teal" size="big"/>
+ </Menu.Item>
+ <Menu.Item onClick={this.handleClick}>
+ <Icon name='bar chart' fitted color="teal" size="big" />
+ </Menu.Item>
+ </Menu>
+ )
+ case "run":
+ return (
+ <Menu attached="bottom" widths="3">
+ <Menu.Item name="back" onClick={this.handleClick}>
+ <Icon name="arrow left" fitted color="teal" size="big"/>
+ </Menu.Item>
+ <Menu.Item name="restart" onClick={this.handleClick}>
+ <Icon name="video play outline" fitted color="teal" size="big" />
+ </Menu.Item>
+ <Menu.Item name="export" onClick={this.handleClick}>
+ <Icon name='bar chart' fitted color="teal" size="big" />
+ </Menu.Item>
+ </Menu>
+ )
+ }
+ }
+
+ render() {
+ return this.currentPanel()
+ }
+}
View
@@ -1,26 +1,27 @@
//@flow
-import React, { Component } from 'react'
-import { Menu, Icon, Grid } from 'semantic-ui-react'
+import React, { Component } from "react"
+import { Segment } from "semantic-ui-react"
+
+import ControlPanel from "./ControlPanel"
export default class Layout extends Component {
+ constructor() {
+ super();
+ this.state = {page: "home"}
+ }
+
+ changePage = (page) => {
+ this.setState({page})
+ }
+
render() {
return (
<div id="container">
- <Grid celled>
- <Grid.Row columns={1} stretched>
- <Grid.Column className="content">
- This is a segment
- </Grid.Column>
- </Grid.Row>
- <Grid.Row columns={2} stretched textAlign="center">
- <Grid.Column>
- <Icon name='video play outline' fitted color="red" size="large"/>
- </Grid.Column>
- <Grid.Column>
- <Icon name='bar chart' fitted color="red" size="large" />
- </Grid.Column>
- </Grid.Row>
- </Grid>
+ <Segment attached id="content">
+ This is a segment
+ </Segment>
+
+ <ControlPanel changePage={this.changePage.bind(this)} page={this.state.page}/>
</div>
)
}
View
@@ -1,6 +1,6 @@
#container {
width: 300px;
}
-.content {
+#content {
min-height: 450px;
}

0 comments on commit 4d2d1f7

Please sign in to comment.