From 96a746fa9b5fe2a469735666fb7149a107ca9643 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Tue, 11 Jun 2019 16:30:55 +0300 Subject: Visitor bubbles in Thread --- vnext/src/ui/PM.js | 26 +------------------------- vnext/src/ui/Thread.js | 8 +++++--- vnext/src/ui/helpers/BubbleStyle.js | 24 ++++++++++++++++++++++++ 3 files changed, 30 insertions(+), 28 deletions(-) create mode 100644 vnext/src/ui/helpers/BubbleStyle.js (limited to 'vnext') 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 ( -