more responsive than before ;)
This commit is contained in:
parent
7faa63e484
commit
3360220669
1 changed files with 75 additions and 7 deletions
|
@ -1,5 +1,5 @@
|
|||
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 ModalWindow from "../components/modalform";
|
||||
|
||||
|
@ -13,9 +13,7 @@ class Navbar extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
editModeController = (e) => {
|
||||
this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
||||
};
|
||||
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
||||
|
||||
handleClick = (e, {id}) => {
|
||||
console.log(id);
|
||||
|
@ -29,7 +27,7 @@ class Navbar extends Component {
|
|||
return (
|
||||
<div>
|
||||
<Segment.Group>
|
||||
<Responsive as={Segment}>
|
||||
<Responsive as={Segment} minWidth={768}>
|
||||
<Grid>
|
||||
<Grid.Row color='black'>
|
||||
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
||||
|
@ -74,7 +72,7 @@ class Navbar extends Component {
|
|||
{e.name}
|
||||
</Grid.Column>
|
||||
<Grid.Column floated="right">
|
||||
{this.state.edit ?
|
||||
{this.state.editMode ?
|
||||
<ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
|
||||
: null
|
||||
}
|
||||
|
@ -102,9 +100,79 @@ class Navbar extends Component {
|
|||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
|
||||
<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>
|
||||
|
||||
</Segment.Group>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue