aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-28 17:42:55 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commit416acd32c4fd435cd0f86805b40afbadb135b089 (patch)
tree18ce54fd8a11bc2a9eca3e864819e0894988fb50
parent5d9e08a12ce5b97344213cf8b5dea7b0328e7db3 (diff)
PM styling
-rw-r--r--vnext/src/components/Chat.js2
-rw-r--r--vnext/src/components/Contacts.js1
-rw-r--r--vnext/src/components/PM.js38
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