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

more responsive than before ;)

Browse source
This commit is contained in:
Nicola Brunner 2020-03-18 17:12:29 +01:00
parent 7faa63e484
commit 3360220669
1 changed files with 75 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
smart-hut/src/views/Navbar.js
View file

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } from "semantic-ui-react"; import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment, Dropdown } from "semantic-ui-react";
import {editButtonStyle} from "../components/dashboard/devices/styleComponents"; import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform"; import ModalWindow from "../components/modalform";
@ -13,9 +13,7 @@ class Navbar extends Component {
} }
} }
editModeController = (e) => { editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
this.setState((prevState) => ({ editMode: !prevState.editMode }));
};
handleClick = (e, {id}) => { handleClick = (e, {id}) => {
console.log(id); console.log(id);
@ -29,7 +27,7 @@ class Navbar extends Component {
return ( return (
<div> <div>
<Segment.Group> <Segment.Group>
<Responsive as={Segment}> <Responsive as={Segment} minWidth={768}>
<Grid> <Grid>
<Grid.Row color='black'> <Grid.Row color='black'>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button> <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
@ -74,7 +72,7 @@ class Navbar extends Component {
{e.name} {e.name}
</Grid.Column> </Grid.Column>
<Grid.Column floated="right"> <Grid.Column floated="right">
{this.state.edit ? {this.state.editMode ?
<ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/> <ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
: null : null
} }
@ -102,9 +100,79 @@ class Navbar extends Component {
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Responsive> </Responsive>
<Responsive as={Segment} maxWidth={768}> <Responsive as={Segment} maxWidth={768}>
//dropdown menu
<Menu inverted>
<Dropdown item fluid text='Select Room'>
<Dropdown.Menu>
<Dropdown.Item
key={-1}
name='Home'
active={this.state.activeItem === 'Home'}
onClick={this.handleClick}>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small"/>
</Grid.Column>
<Grid.Column>
Home
</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
{this.props.rooms ?
this.props.rooms.map((e, i) => {
return (
<Dropdown.Item
id={e.id}
key={i}
name={e.name}
active={this.state.activeItem === e.id}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column width={1}>
<Icon name={e.icon} size="small"/>
</Grid.Column>
<Grid.Column>
{e.name}
</Grid.Column>
</Grid.Row>
</Grid>
</ Dropdown.Item>
)
}) : null
}
</Dropdown.Menu>
</Dropdown>
</Menu>
<Grid>
<Grid.Row>
<Grid.Column width={8}>
<Button icon fluid labelPosition='left'>
<Icon name='plus' size='small'/>
ADD ROOM
</Button>
</Grid.Column>
<Grid.Column width={8}>
<Button icon fluid labelPosition='left'>
<Icon name='pencil' size='small'/>
EDIT ROOM
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive> </Responsive>
</Segment.Group> </Segment.Group>
</div> </div>
); );