aboutsummaryrefslogtreecommitdiff
path: root/vnext/src
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-06-11 16:30:55 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:55 +0300
commit96a746fa9b5fe2a469735666fb7149a107ca9643 (patch)
tree04a1e6459b0f063af03341b9f63fb9397f121ca2 /vnext/src
parent6fe5916774e9a4381da6bfb4f1f84a0941df46cc (diff)
Visitor bubbles in Thread
Diffstat (limited to 'vnext/src')
-rw-r--r--vnext/src/ui/PM.js26
-rw-r--r--vnext/src/ui/Thread.js8
-rw-r--r--vnext/src/ui/helpers/BubbleStyle.js24
3 files changed, 30 insertions, 28 deletions
diff --git a/vnext/src/ui/PM.js b/vnext/src/ui/PM.js
index e5eddb9e..08db523f 100644
--- a/vnext/src/ui/PM.js
+++ b/vnext/src/ui/PM.js
@@ -4,6 +4,7 @@ import { UserType, MessageType } from './Types';
import Avatar from './Avatar';
import { format } from '../utils/embed';
+import { bubbleStyle, chatItemStyle } from './helpers/BubbleStyle';
function PM(props) {
const { chat } = props;
@@ -21,31 +22,6 @@ function PM(props) {
export default React.memo(PM);
-function bubbleStyle(me, msg) {
- const isMe = me.uid === msg.user.uid;
- const color = isMe ? '#fff' : '#222';
- const background = isMe ? '#ec4b98' : '#eee';
- return {
- background: background,
- color: color,
- padding: '12px',
- display: 'inline-block'
- };
-}
-
-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
- };
-}
-
PM.propTypes = {
chat: MessageType.isRequired,
visitor: UserType.isRequired
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index 6cbb5188..28ad8d39 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -14,6 +14,8 @@ import { format, embedUrls } from '../utils/embed';
import { getMessages, comment, update, markReadTracker, fetchUserUri, updateAvatar } from '../api';
+import { bubbleStyle, chatItemStyle } from './helpers/BubbleStyle';
+
import './Thread.css';
let isMounted;
@@ -44,8 +46,8 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
};
}, [author.uri]);
return (
- <div>
- <div className="msg-header" style={{ padding: '6px', display: 'flex', alignItems: 'flex-start' }}>
+ <div style={chatItemStyle(visitor, msg)}>
+ <div className="msg-header">
<Avatar user={author} link={author.uri}>
<div className="msg-ts">
{msg.replyto > 0 &&
@@ -75,7 +77,7 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
}
</div>
</div>
- <div className="msg-bubble">
+ <div style={bubbleStyle(visitor, msg)}>
{
msg.html ? <div dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
:
diff --git a/vnext/src/ui/helpers/BubbleStyle.js b/vnext/src/ui/helpers/BubbleStyle.js
new file mode 100644
index 00000000..570b7337
--- /dev/null
+++ b/vnext/src/ui/helpers/BubbleStyle.js
@@ -0,0 +1,24 @@
+export function bubbleStyle(me, msg) {
+ const isMe = me.uid === msg.user.uid;
+ const color = isMe ? '#fff' : '#222';
+ const background = isMe ? '#ec4b98' : '#eee';
+ return {
+ background: background,
+ color: color,
+ padding: '12px',
+ display: 'inline-block'
+ };
+}
+
+export 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
+ };
+}