Añadir plantilla

Base para front

6 files changed, 579 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/Chat/ChatHeader.js b/front/odiparpack/app/components/Chat/ChatHeader.js
new file mode 100644
index 0000000..b3456e9
--- /dev/null
+++ b/front/odiparpack/app/components/Chat/ChatHeader.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import { Typography, AppBar, Menu, MenuItem, Avatar, IconButton, Toolbar } from '@material-ui/core';
+import styles from '../Contact/contact-jss';
+
+
+const optionsOpt = [
+  'Delete Conversation',
+  'Option 1',
+  'Option 2',
+  'Option 3',
+];
+
+const ITEM_HEIGHT = 48;
+
+class ChatHeader extends React.Component {
+  state = {
+    anchorElOpt: null,
+  };
+
+  handleClickOpt = event => {
+    this.setState({ anchorElOpt: event.currentTarget });
+  };
+
+  handleCloseOpt = () => {
+    this.setState({ anchorElOpt: null });
+  };
+
+  handleRemove = (person) => {
+    this.props.remove(person);
+  }
+
+  render() {
+    const {
+      classes,
+      chatSelected,
+      dataContact,
+      showMobileDetail,
+      hideDetail,
+    } = this.props;
+    const { anchorElOpt } = this.state;
+    return (
+      <AppBar
+        position="absolute"
+        className={classNames(classes.appBar, classes.appBarShift)}
+      >
+        <Toolbar>
+          {showMobileDetail && (
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={() => hideDetail()}
+              className={classes.navIconHide}
+            >
+              <ArrowBack />
+            </IconButton>
+          )}
+          <Avatar alt="avatar" src={dataContact.getIn([chatSelected, 'avatar'])} className={classes.avatar} />
+          <Typography variant="h6" className={classes.flex} color="inherit" noWrap>
+            {dataContact.getIn([chatSelected, 'name'])}
+            <Typography variant="caption" component="p" className={classes.status} color="inherit" noWrap>
+              <span className={classes.online} />
+              {' '}
+Online
+            </Typography>
+          </Typography>
+          <IconButton
+            aria-label="More"
+            aria-owns={anchorElOpt ? 'long-menu' : null}
+            aria-haspopup="true"
+            className={classes.button}
+            onClick={this.handleClickOpt}
+          >
+            <MoreVertIcon color="inherit" />
+          </IconButton>
+        </Toolbar>
+        <Menu
+          id="long-menu"
+          anchorEl={anchorElOpt}
+          open={Boolean(anchorElOpt)}
+          onClose={this.handleCloseOpt}
+          PaperProps={{
+            style: {
+              maxHeight: ITEM_HEIGHT * 4.5,
+              width: 200,
+            },
+          }}
+        >
+          {optionsOpt.map(option => {
+            if (option === 'Delete Conversation') {
+              return (
+                <MenuItem key={option} onClick={this.handleRemove}>
+                  {option}
+                </MenuItem>
+              );
+            }
+            return (
+              <MenuItem key={option} selected={option === 'Edit Profile'} onClick={this.handleCloseOpt}>
+                {option}
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      </AppBar>
+    );
+  }
+}
+
+ChatHeader.propTypes = {
+  classes: PropTypes.object.isRequired,
+  dataContact: PropTypes.object.isRequired,
+  showMobileDetail: PropTypes.bool.isRequired,
+  hideDetail: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+  chatSelected: PropTypes.number.isRequired,
+};
+
+export default withStyles(styles)(ChatHeader);
diff --git a/front/odiparpack/app/components/Chat/ChatRoom.js b/front/odiparpack/app/components/Chat/ChatRoom.js
new file mode 100644
index 0000000..9abef89
--- /dev/null
+++ b/front/odiparpack/app/components/Chat/ChatRoom.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import Send from '@material-ui/icons/Send';
+import dummyContents from 'ba-api/dummyContents';
+import Type from 'ba-styles/Typography.scss';
+import { Avatar, Typography, Paper, Tooltip, IconButton } from '@material-ui/core';
+import MessageField from './MessageField';
+import styles from './chatStyle-jss';
+
+
+class ChatRoom extends React.Component {
+  constructor() {
+    super();
+    this.state = { message: '' };
+    this.handleWrite = this.handleWrite.bind(this);
+  }
+
+  handleWrite = (e, value) => {
+    this.setState({ message: value });
+  };
+
+  resetInput = () => {
+    const ctn = document.getElementById('roomContainer');
+    this.setState({ message: '' });
+    this._field.setState({ value: '' });
+    setTimeout(() => {
+      ctn.scrollTo(0, ctn.scrollHeight);
+    }, 300);
+  }
+
+  sendMessageByEnter = (event, message) => {
+    if (event.key === 'Enter' && event.target.value !== '') {
+      this.props.sendMessage(message.__html);
+      this.resetInput();
+    }
+  }
+
+  sendMessage = message => {
+    this.props.sendMessage(message.__html);
+    this.resetInput();
+  }
+
+  render() {
+    const html = { __html: this.state.message };
+    const {
+      classes,
+      dataChat,
+      chatSelected,
+      dataContact,
+      showMobileDetail,
+    } = this.props;
+    const { message } = this.state;
+    const getChat = dataArray => dataArray.map(data => {
+      const renderHTML = { __html: data.get('message') };
+      return (
+        <li className={data.get('from') === 'contact' ? classes.from : classes.to} key={data.get('id')}>
+          <time dateTime={data.get('date') + ' ' + data.get('time')}>{data.get('date') + ' ' + data.get('time')}</time>
+          {data.get('from') === 'contact'
+            ? <Avatar alt="avatar" src={dataContact.getIn([chatSelected, 'avatar'])} className={classes.avatar} />
+            : <Avatar alt="avatar" src={dummyContents.user.avatar} className={classes.avatar} />
+          }
+          <div className={classes.talk}>
+            <p><span dangerouslySetInnerHTML={renderHTML} /></p>
+          </div>
+        </li>
+      );
+    });
+    return (
+      <div className={classNames(classes.root, showMobileDetail ? classes.detailPopup : '')}>
+        <ul className={classes.chatList} id="roomContainer">
+          {dataChat.size > 0 ? getChat(dataChat) : (<Typography variant="caption" component="p" className={Type.textCenter}>{'You haven\'t made any conversation yet'}</Typography>)}
+        </ul>
+        <Paper className={classes.writeMessage}>
+          <MessageField
+            onChange={this.handleWrite}
+            ref={(_field) => { this._field = _field; return this._field; }}
+            placeholder="Type a message"
+            fieldType="input"
+            value={message}
+            onKeyPress={(event) => this.sendMessageByEnter(event, html)}
+          />
+          <Tooltip id="tooltip-send" title="Send">
+            <div>
+              <IconButton size="small" color="secondary" disabled={message === ''} onClick={() => this.sendMessage(html)} aria-label="send" className={classes.sendBtn}>
+                <Send />
+              </IconButton>
+            </div>
+          </Tooltip>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+ChatRoom.propTypes = {
+  classes: PropTypes.object.isRequired,
+  dataChat: PropTypes.object.isRequired,
+  showMobileDetail: PropTypes.bool.isRequired,
+  chatSelected: PropTypes.number.isRequired,
+  dataContact: PropTypes.object.isRequired,
+  sendMessage: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(ChatRoom);
diff --git a/front/odiparpack/app/components/Chat/MessageField.js b/front/odiparpack/app/components/Chat/MessageField.js
new file mode 100644
index 0000000..947bed4
--- /dev/null
+++ b/front/odiparpack/app/components/Chat/MessageField.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import 'ba-styles/vendors/emoji-picker-react/emoji-picker-react.css';
+
+class MessageField extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value || '',
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(e) {
+    const { val } = this.state;
+    const { onChange } = this.props;
+    const value = e ? e.target.value : val;
+
+    this.setState({ value }, () => {
+      if (typeof onChange === 'function') {
+        onChange(e, value);
+      }
+    });
+  }
+
+  onPickerkeypress(e) {
+    if (e.keyCode === 27 || e.which === 27 || e.key === 'Escape' || e.code === 'Escape') {
+      this.closePicker();
+    }
+  }
+
+  render() {
+    const {
+      onChange,
+      fieldType,
+      ...rest
+    } = this.props;
+
+    const className = `emoji-text-field emoji-${fieldType}`;
+    const { value } = this.state;
+    const isInput = fieldType === 'input';
+    const ref = (_field) => {
+      this._field = _field;
+      return this._field;
+    };
+
+    return (
+      <div className={className}>
+        { (isInput) && (<input {...rest} onChange={this.onChange} type="text" ref={ref} value={value} />) }
+        { (!isInput) && (<textarea {...rest} onChange={this.onChange} ref={ref} value={value} />) }
+      </div>
+    );
+  }
+}
+
+MessageField.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  fieldType: PropTypes.string.isRequired
+};
+
+MessageField.defaultProps = {
+  value: '',
+  onChange: () => {},
+};
+
+export default MessageField;
diff --git a/front/odiparpack/app/components/Chat/chatStyle-jss.js b/front/odiparpack/app/components/Chat/chatStyle-jss.js
new file mode 100644
index 0000000..360b170
--- /dev/null
+++ b/front/odiparpack/app/components/Chat/chatStyle-jss.js
@@ -0,0 +1,148 @@
+import { lighten } from '@material-ui/core/styles/colorManipulator';
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    backgroundColor: lighten(theme.palette.secondary.light, 0.9),
+  },
+  chatList: {
+    padding: 24,
+    paddingTop: 110,
+    overflow: 'auto',
+    height: 580,
+    '& li': {
+      marginBottom: theme.spacing(6),
+      display: 'flex',
+      position: 'relative',
+      '& time': {
+        position: 'absolute',
+        top: -20,
+        color: theme.palette.grey[500],
+        fontSize: 11
+      }
+    },
+  },
+  detailPopup: {
+    [theme.breakpoints.down('xs')]: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: 1200,
+      width: '100%',
+      overflow: 'auto',
+      height: 575
+    }
+  },
+  talk: {
+    flex: 1,
+    '& p': {
+      marginBottom: 10,
+      position: 'relative',
+      '& span': {
+        padding: 10,
+        borderRadius: 10,
+        display: 'inline-block'
+      }
+    }
+  },
+  avatar: {},
+  from: {
+    '& time': {
+      left: 60,
+    },
+    '& $avatar': {
+      marginRight: 20
+    },
+    '& $talk': {
+      '& > p': {
+        '& span': {
+          background: theme.palette.secondary.light,
+          border: `1px solid ${lighten(theme.palette.secondary.main, 0.5)}`,
+        },
+        '&:first-child': {
+          '& span': {
+            borderTopLeftRadius: 0,
+          },
+          '&:before': {
+            content: '""',
+            borderRight: `11px solid ${lighten(theme.palette.secondary.main, 0.5)}`,
+            borderBottom: '17px solid transparent',
+            position: 'absolute',
+            left: -11,
+            top: 0
+          },
+          '&:after': {
+            content: '""',
+            borderRight: `10px solid ${theme.palette.secondary.light}`,
+            borderBottom: '15px solid transparent',
+            position: 'absolute',
+            left: -9,
+            top: 1
+          },
+        }
+      }
+    }
+  },
+  to: {
+    flexDirection: 'row-reverse',
+    '& time': {
+      right: 60,
+    },
+    '& $avatar': {
+      marginLeft: 20
+    },
+    '& $talk': {
+      textAlign: 'right',
+      '& > p': {
+        '& span': {
+          textAlign: 'left',
+          background: theme.palette.primary.light,
+          border: `1px solid ${lighten(theme.palette.primary.main, 0.5)}`,
+        },
+        '&:first-child': {
+          '& span': {
+            borderTopRightRadius: 0,
+          },
+          '&:before': {
+            content: '""',
+            borderLeft: `11px solid ${lighten(theme.palette.primary.main, 0.5)}`,
+            borderBottom: '17px solid transparent',
+            position: 'absolute',
+            right: -11,
+            top: 0
+          },
+          '&:after': {
+            content: '""',
+            borderLeft: `10px solid ${theme.palette.primary.light}`,
+            borderBottom: '15px solid transparent',
+            position: 'absolute',
+            right: -9,
+            top: 1
+          },
+        }
+      }
+    }
+  },
+  messageBox: {
+    border: 'none',
+    padding: 0,
+    outline: 'none',
+    width: '100%',
+    '&:after, &:before': {
+      display: 'none'
+    }
+  },
+  writeMessage: {
+    position: 'relative',
+    bottom: 16,
+    display: 'flex',
+    minHeight: 55,
+    margin: '0 16px',
+    alignItems: 'center',
+    padding: '0 10px',
+  }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/components/Chat/svg/trigger-opaque.svg b/front/odiparpack/app/components/Chat/svg/trigger-opaque.svg
new file mode 100644
index 0000000..1540f5b
--- /dev/null
+++ b/front/odiparpack/app/components/Chat/svg/trigger-opaque.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<circle style="fill:#F7B239;" cx="256.004" cy="256.004" r="246.855"/>
+<path style="fill:#E09B2D;" d="M126.308,385.694c-88.802-88.802-95.799-228.426-20.999-325.241
+	c-8.286,6.401-16.258,13.399-23.858,20.999c-96.401,96.401-96.401,252.698,0,349.099s252.698,96.401,349.099,0
+	c7.599-7.599,14.597-15.573,20.999-23.858C354.734,481.492,215.108,474.495,126.308,385.694z"/>
+<path style="fill:#4D4D4D;" d="M256.001,184.864L256.001,184.864c14.551,0,29.02-1.978,43.1-5.65
+	c53.478-13.946,112.377-5.29,149.086,3.183c19.574,4.519,30.868,25.04,24.163,43.978l-20.669,58.372
+	c-4.75,13.414-17.654,22.198-31.877,21.698l-94.167-3.316c-15.87-0.559-29.283-11.933-32.426-27.5l-4.758-23.558
+	c-3.119-15.446-16.695-26.551-32.452-26.548l0,0l0,0c-15.759,0-29.333,11.108-32.453,26.554l-4.757,23.552
+	c-3.144,15.565-16.557,26.94-32.426,27.5l-94.167,3.316c-14.222,0.501-27.127-8.282-31.876-21.698l-20.669-58.372
+	c-6.706-18.937,4.589-39.459,24.163-43.978c36.709-8.472,95.607-17.129,149.086-3.183
+	C226.981,182.885,241.449,184.864,256.001,184.864L256.001,184.864z"/>
+<path d="M255.999,512C114.841,512,0,397.16,0,256.001S114.841,0,255.999,0C397.159,0,512,114.841,512,256.001
+	S397.159,512,255.999,512z M255.999,18.299c-131.068,0-237.7,106.632-237.7,237.702s106.632,237.702,237.7,237.702
+	c131.069,0,237.702-106.632,237.702-237.702S387.068,18.299,255.999,18.299z"/>
+<path d="M256.269,391.607c-2.716,0-5.443-0.051-8.186-0.155c-42.952-1.624-80.516-15.925-103.062-39.237
+	c-3.513-3.633-3.416-9.425,0.216-12.937c3.633-3.515,9.425-3.416,12.937,0.216c40.228,41.595,138.107,45.631,187.018,7.708
+	c2.506-1.942,7.259-6.399,8.879-7.952c3.646-3.496,9.437-3.376,12.936,0.272c3.498,3.648,3.376,9.439-0.272,12.936
+	c-0.666,0.638-6.616,6.324-10.33,9.204C331.637,380.865,295.496,391.607,256.269,391.607z"/>
+<path d="M420.986,315.612c-0.501,0-1-0.009-1.504-0.026l-94.167-3.316c-20.185-0.711-37.075-15.035-41.073-34.832l-4.758-23.558
+	c-2.248-11.132-12.123-19.21-23.478-19.21c-0.001,0-0.002,0-0.004,0c-11.361,0-21.238,8.082-23.486,19.215l-4.757,23.553
+	c-3.998,19.798-20.888,34.12-41.073,34.832l-94.167,3.316c-18.28,0.615-34.708-10.522-40.823-27.787l-20.669-58.372
+	c-4.061-11.469-3.034-24.162,2.817-34.826c5.859-10.681,16.034-18.378,27.913-21.121c40.032-9.239,99.151-17.283,153.454-3.122
+	c13.623,3.552,27.347,5.354,40.791,5.354l0,0c13.444,0,27.168-1.802,40.791-5.354c54.302-14.16,113.421-6.118,153.452,3.121
+	c11.88,2.742,22.054,10.44,27.913,21.121c5.851,10.665,6.878,23.357,2.817,34.826l-20.669,58.372
+	C454.359,304.588,438.678,315.611,420.986,315.612z M150.311,180.969c-23.43,0-51.525,2.745-84.439,10.341
+	c-6.805,1.57-12.631,5.978-15.986,12.092c-3.395,6.188-3.966,13.261-1.61,19.916l20.669,58.372
+	c3.434,9.697,12.647,15.962,22.929,15.607l94.167-3.316c11.687-0.411,21.465-8.704,23.78-20.166l4.757-23.553
+	c3.966-19.639,21.387-33.892,41.422-33.892c0.002,0,0.005,0,0.007,0c20.03,0,37.447,14.25,41.413,33.886l4.758,23.558
+	c2.314,11.463,12.093,19.756,23.78,20.167l94.167,3.316c10.294,0.367,19.496-5.909,22.93-15.607l20.669-58.372
+	c2.357-6.656,1.785-13.728-1.61-19.916c-3.355-6.114-9.181-10.522-15.986-12.092c-38.033-8.777-94.012-16.469-144.719-3.245
+	c-15.131,3.945-30.408,5.946-45.409,5.946c-15,0-30.279-2.001-45.41-5.946C195.972,184.255,175.932,180.969,150.311,180.969z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/front/odiparpack/app/components/Chat/svg/trigger-transparent.svg b/front/odiparpack/app/components/Chat/svg/trigger-transparent.svg
new file mode 100644
index 0000000..8555ab9
--- /dev/null
+++ b/front/odiparpack/app/components/Chat/svg/trigger-transparent.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M255.999,0C114.841,0,0,114.841,0,256.001S114.841,512,255.999,512C397.159,512,512,397.16,512,256.001
+			S397.159,0,255.999,0z M255.999,493.702c-131.068,0-237.7-106.632-237.7-237.702s106.632-237.702,237.7-237.702
+			c131.069,0,237.702,106.632,237.702,237.702S387.068,493.702,255.999,493.702z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M367.008,339.521c-3.499-3.648-9.29-3.768-12.936-0.272c-1.62,1.553-6.373,6.009-8.879,7.952
+			c-48.911,37.923-146.79,33.888-187.018-7.708c-3.512-3.632-9.304-3.731-12.937-0.216c-3.632,3.512-3.729,9.304-0.216,12.937
+			c22.546,23.312,60.11,37.613,103.062,39.237c2.742,0.104,5.47,0.155,8.186,0.155c39.227,0,75.368-10.742,100.136-29.945
+			c3.715-2.88,9.664-8.566,10.33-9.204C370.383,348.96,370.505,343.169,367.008,339.521z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M478.16,194.601c-5.859-10.681-16.034-18.378-27.913-21.121c-40.031-9.239-99.151-17.28-153.453-3.121
+			c-13.623,3.552-27.347,5.354-40.791,5.354s-27.168-1.802-40.791-5.354c-54.303-14.161-113.421-6.117-153.454,3.122
+			c-11.88,2.742-22.054,10.44-27.913,21.121c-5.851,10.664-6.878,23.357-2.817,34.826L51.697,287.8
+			c6.114,17.265,22.543,28.401,40.823,27.787l94.167-3.316c20.185-0.711,37.075-15.033,41.073-34.832l4.757-23.553
+			c2.248-11.133,12.125-19.215,23.486-19.215c0.001,0,0.002,0,0.004,0c11.355,0,21.229,8.078,23.478,19.21l4.758,23.558
+			c3.998,19.797,20.888,34.12,41.073,34.832l94.167,3.316c0.504,0.017,1.003,0.026,1.504,0.026
+			c17.692-0.001,33.373-11.023,39.321-27.813l20.669-58.372C485.038,217.958,484.011,205.266,478.16,194.601z M463.725,223.318
+			l-20.669,58.372c-3.434,9.697-12.636,15.974-22.93,15.607l-94.167-3.316c-11.687-0.411-21.466-8.704-23.78-20.167l-4.758-23.558
+			c-3.966-19.636-21.383-33.886-41.413-33.886c-0.002,0-0.005,0-0.007,0c-20.035,0-37.456,14.254-41.422,33.892l-4.757,23.553
+			c-2.315,11.461-12.093,19.754-23.78,20.166l-94.167,3.316c-10.282,0.355-19.495-5.909-22.929-15.607l-20.669-58.372
+			c-2.356-6.655-1.785-13.728,1.61-19.915c3.355-6.114,9.181-10.522,15.986-12.092c32.914-7.597,61.009-10.341,84.439-10.341
+			c25.621,0,45.661,3.285,60.28,7.096c15.131,3.945,30.409,5.946,45.41,5.946c15,0,30.278-2.001,45.409-5.946
+			c50.707-13.224,106.686-5.532,144.719,3.245c6.805,1.57,12.631,5.978,15.986,12.092
+			C465.509,209.59,466.081,216.662,463.725,223.318z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>