diff options
author | 2019-06-11 16:30:55 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:55 +0300 | |
commit | 96a746fa9b5fe2a469735666fb7149a107ca9643 (patch) | |
tree | 04a1e6459b0f063af03341b9f63fb9397f121ca2 /vnext | |
parent | 6fe5916774e9a4381da6bfb4f1f84a0941df46cc (diff) |
Visitor bubbles in Thread
Diffstat (limited to 'vnext')
-rw-r--r-- | vnext/src/ui/PM.js | 26 | ||||
-rw-r--r-- | vnext/src/ui/Thread.js | 8 | ||||
-rw-r--r-- | vnext/src/ui/helpers/BubbleStyle.js | 24 |
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 + }; +} |