diff options
| -rw-r--r-- | vnext/src/components/Chat.js | 2 | ||||
| -rw-r--r-- | vnext/src/components/Contacts.js | 1 | ||||
| -rw-r--r-- | vnext/src/components/PM.js | 38 |
3 files changed, 30 insertions, 11 deletions
diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js index e7beef35..66e7f804 100644 --- a/vnext/src/components/Chat.js +++ b/vnext/src/components/Chat.js @@ -52,7 +52,7 @@ export default class Chat extends React.Component { <ul style={chatStyle} ref="chats"> { chats.map((chat) => - <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} /> + <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} {...this.props} /> ) } </ul> diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js index 509db3b3..3f2e7288 100644 --- a/vnext/src/components/Contacts.js +++ b/vnext/src/components/Contacts.js @@ -53,7 +53,6 @@ const wrapperStyle = { const chatListStyle = { boxSizing: 'border-box', padding: '0 20px', - overflowY: 'scroll', display: 'flex', alignItems: 'center', flexDirection: 'column', diff --git a/vnext/src/components/PM.js b/vnext/src/components/PM.js index 1833f3a3..7684c6ac 100644 --- a/vnext/src/components/PM.js +++ b/vnext/src/components/PM.js @@ -6,17 +6,37 @@ import { format } from '../utils/embed'; export default function PM(props) { const { chat } = props; return ( - <li style={chatItemStyle}> - <Avatar user={chat.user} /> - <p dangerouslySetInnerHTML={{ __html: format(chat.body) }} /> + <li> + <div style={chatItemStyle(props.visitor, chat)}> + <Avatar user={chat.user} /> + <div style={bubbleStyle(props.visitor, chat)}> + <p dangerouslySetInnerHTML={{ __html: format(chat.body) }} /> + </div> + </div> </li> ); } -const chatItemStyle = { - padding: '5px 13px', - fontSize: '14px', - listStyle: 'none', - margin: '10px 0', - boxShadow: '0 0 3px rgba(0,0,0, 0.16)' +function bubbleStyle(me, msg) { + const isMe = me.uid === msg.user.uid; + const color = isMe ? '#fff' : '#222'; + const background = isMe ? '#0076ff' : '#eee'; + return { + background: background, + color: color, + padding: '0 12px' + } +} + +function chatItemStyle(me, msg) { + const isMe = me.uid === msg.user.uid; + const alignment = isMe ? 'flex-end' : 'flex-start'; + return { + padding: '3px 6px', + listStyle: 'none', + margin: '10px 0', + display: 'flex', + flexDirection: 'column', + alignItems: alignment + } }
\ No newline at end of file |