is prettier
This commit is contained in:
parent
10aeb75730
commit
580511ce6e
3 changed files with 130 additions and 124 deletions
|
@ -5,14 +5,11 @@ import {
|
||||||
BrowserView,
|
BrowserView,
|
||||||
MobileView,
|
MobileView,
|
||||||
isBrowser,
|
isBrowser,
|
||||||
isMobile
|
isMobile,
|
||||||
} from "react-device-detect";
|
} from "react-device-detect";
|
||||||
|
|
||||||
const AvatarImage = () => (
|
const AvatarImage = () => (
|
||||||
<Image
|
<Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
|
||||||
src="avatar3.png"
|
|
||||||
style={{ width: "25px", height: "auto" }}
|
|
||||||
centered />
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const IconHomeImage = () => (
|
const IconHomeImage = () => (
|
||||||
|
@ -35,13 +32,7 @@ const IconHomeImageMobile = () => (
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
const TitleImage = () => (
|
const TitleImage = () => <Image src="title7.png" size="medium" centered />;
|
||||||
<Image
|
|
||||||
src="title7.png"
|
|
||||||
size="medium"
|
|
||||||
centered
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const BrowserStructure = (props) => (
|
const BrowserStructure = (props) => (
|
||||||
<Grid columns="equal" divided inverted padded>
|
<Grid columns="equal" divided inverted padded>
|
||||||
|
@ -90,7 +81,7 @@ const MobileStructure = (props) => (
|
||||||
<Grid.Column>
|
<Grid.Column>
|
||||||
<IconHomeImage />
|
<IconHomeImage />
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column >
|
<Grid.Column>
|
||||||
<AvatarImage />
|
<AvatarImage />
|
||||||
<Divider />
|
<Divider />
|
||||||
<Dropdown item icon="setting" size="huge">
|
<Dropdown item icon="setting" size="huge">
|
||||||
|
@ -113,13 +104,6 @@ const MobileStructure = (props) => (
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default class MyHeader extends React.Component {
|
export default class MyHeader extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from "react";
|
||||||
import { Button, Grid, Responsive } from 'semantic-ui-react'
|
import { Button, Grid, Responsive } from "semantic-ui-react";
|
||||||
|
|
||||||
export default class SelectIcons extends Component {
|
export default class SelectIcons extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -31,8 +31,7 @@ export default class SelectIcons extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid centered relaxed>
|
<Grid centered relaxed>
|
||||||
{
|
{myicons.map((e, i) => {
|
||||||
myicons.map((e, i) => {
|
|
||||||
return (
|
return (
|
||||||
<Grid.Row key={i}>
|
<Grid.Row key={i}>
|
||||||
{e.map((e, i) => {
|
{e.map((e, i) => {
|
||||||
|
|
|
@ -7,17 +7,17 @@ import {
|
||||||
Input,
|
Input,
|
||||||
Icon,
|
Icon,
|
||||||
Responsive,
|
Responsive,
|
||||||
Image
|
Image,
|
||||||
} from "semantic-ui-react";
|
} from "semantic-ui-react";
|
||||||
import SelectIcons from "./SelectIcons";
|
import SelectIcons from "./SelectIcons";
|
||||||
|
|
||||||
const NO_IMAGE="https://react.semantic-ui.com/images/wireframe/image.png";
|
const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";
|
||||||
|
|
||||||
export default class ModalWindow extends Component {
|
export default class ModalWindow extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
console.table(this.props);
|
console.table(this.props);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
id: "",
|
id: "",
|
||||||
|
@ -90,8 +90,7 @@ console.table(this.props);
|
||||||
reader.onerror = console.error;
|
reader.onerror = console.error;
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render() {
|
||||||
|
|
||||||
const spaceDiv = {
|
const spaceDiv = {
|
||||||
background: "#f4f4f4",
|
background: "#f4f4f4",
|
||||||
padding: "10px 10px",
|
padding: "10px 10px",
|
||||||
|
@ -115,81 +114,105 @@ console.table(this.props);
|
||||||
<Button icon fluid labelPosition="left" onClick={this.openModal}>
|
<Button icon fluid labelPosition="left" onClick={this.openModal}>
|
||||||
<Icon name="plus" size="small" />
|
<Icon name="plus" size="small" />
|
||||||
ADD ROOM
|
ADD ROOM
|
||||||
</Button>)
|
</Button>
|
||||||
:
|
) : (
|
||||||
<Icon name='pencil' size='small' onClick={this.openModal} />
|
<Icon name="pencil" size="small" onClick={this.openModal} />
|
||||||
}
|
)}
|
||||||
</Responsive>
|
</Responsive>
|
||||||
<Responsive maxWidth={768} >
|
<Responsive maxWidth={768}>
|
||||||
{
|
{this.props.type === "new" ? (
|
||||||
this.props.type === "new" ?
|
<Button icon fluid labelPosition="left" onClick={this.openModal}>
|
||||||
<Button icon fluid labelPosition='left' onClick={this.openModal}>
|
<Icon name="plus" size="small" />
|
||||||
<Icon name='plus' size='small'/>
|
|
||||||
ADD ROOM
|
ADD ROOM
|
||||||
</Button>
|
</Button>
|
||||||
:
|
) : (
|
||||||
<Button icon fluid labelPosition='left' onClick={this.openModal}>
|
<Button icon fluid labelPosition="left" onClick={this.openModal}>
|
||||||
<Icon name='pencil' size='small'/>
|
<Icon name="pencil" size="small" />
|
||||||
EDIT ROOM
|
EDIT ROOM
|
||||||
</Button>
|
</Button>
|
||||||
}
|
)}
|
||||||
</Responsive>
|
</Responsive>
|
||||||
|
|
||||||
<Modal
|
<Modal onClose={this.closeModal} open={this.state.openModal}>
|
||||||
onClose={this.closeModal}
|
<Header>
|
||||||
open={this.state.openModal}>
|
{this.props.type === "new" ? "Add new room" : "Modify room"}
|
||||||
<Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
|
</Header>
|
||||||
<Modal.Content>
|
<Modal.Content>
|
||||||
<Form>
|
<Form>
|
||||||
<p>Insert the name of the room:</p>
|
<p>Insert the name of the room:</p>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Input
|
<Input
|
||||||
label='Room name'
|
label="Room name"
|
||||||
placeholder='Room Name'
|
placeholder="Room Name"
|
||||||
name="name"
|
name="name"
|
||||||
type='text'
|
type="text"
|
||||||
onChange={this.changeSomething}
|
onChange={this.changeSomething}
|
||||||
value={this.state.name}/>
|
value={this.state.name}
|
||||||
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<p>Insert an image of the room:</p>
|
<p>Insert an image of the room:</p>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
|
|
||||||
<Image
|
<Image
|
||||||
src={this.state.img == null ? NO_IMAGE : this.state.img}
|
src={this.state.img == null ? NO_IMAGE : this.state.img}
|
||||||
size='small'
|
size="small"
|
||||||
onClick={() => this.fileInputRef.current.click()}/>
|
onClick={() => this.fileInputRef.current.click()}
|
||||||
|
/>
|
||||||
<input ref={this.fileInputRef} hidden label='Room image' type='file' name="img" accept="image/png, image/jpeg"
|
|
||||||
onChange={this.getBase64.bind(this)}/>
|
|
||||||
|
|
||||||
|
<input
|
||||||
|
ref={this.fileInputRef}
|
||||||
|
hidden
|
||||||
|
label="Room image"
|
||||||
|
type="file"
|
||||||
|
name="img"
|
||||||
|
accept="image/png, image/jpeg"
|
||||||
|
onChange={this.getBase64.bind(this)}
|
||||||
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
<div style={spaceDiv}>
|
<div style={spaceDiv}>
|
||||||
<p>Select an icon:</p>
|
<p>Select an icon:</p>
|
||||||
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
|
<SelectIcons
|
||||||
|
updateIcon={this.updateIcon}
|
||||||
|
currentIcon={
|
||||||
|
this.props.type === "new" ? "home" : this.props.idRoom.icon
|
||||||
|
}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{this.props.type === "modify" ?
|
{this.props.type === "modify" ? (
|
||||||
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
|
<Button
|
||||||
<Icon name='trash alternate' />
|
icon
|
||||||
|
labelPosition="left"
|
||||||
|
inverted
|
||||||
|
color="red"
|
||||||
|
onClick={this.deleteRoom}
|
||||||
|
>
|
||||||
|
<Icon name="trash alternate" />
|
||||||
Delete room
|
Delete room
|
||||||
</Button> : null }
|
</Button>
|
||||||
|
) : null}
|
||||||
</Modal.Content>
|
</Modal.Content>
|
||||||
<Modal.Actions>
|
<Modal.Actions>
|
||||||
<Button color='red' onClick={this.closeModal}>
|
<Button color="red" onClick={this.closeModal}>
|
||||||
<Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
|
<Icon name="remove" />{" "}
|
||||||
|
{this.props.type === "new" ? "Cancel" : "Discard changes"}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
<Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
|
color="green"
|
||||||
<Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
|
onClick={
|
||||||
|
this.props.type === "new"
|
||||||
|
? this.addRoomModal
|
||||||
|
: this.modifyRoomModal
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Icon name="checkmark" />{" "}
|
||||||
|
{this.props.type === "new" ? "Add room" : "Save changes"}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
</Modal.Actions>
|
</Modal.Actions>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue