aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Thread.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/ui/Thread.js')
-rw-r--r--vnext/src/ui/Thread.js62
1 files changed, 35 insertions, 27 deletions
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index e7ccb032..b625ecad 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, markReadTracker } from '../api';
+import './Thread.css';
+
function Comment({ msg, visitor, active, setActive, postComment }) {
const embedRef = useRef();
const msgRef = useRef();
@@ -26,8 +28,8 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
}
}, []);
return (
- <div className="msg-cont">
- <div className="msg-header">
+ <div>
+ <div className="msg-header" style={{ padding: '6px', display: 'flex', alignItems: 'flex-start' }}>
<Avatar user={msg.user}>
<div className="msg-ts">
{msg.replyto > 0 &&
@@ -36,35 +38,41 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
)}
</div>
</Avatar>
+ <div className="msg-links">
+ {
+ visitor.uid > 0 ? (
+ <>
+ {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
+ </>
+ ) : (
+ <>
+ <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
+ </>
+ )
+ }
+ </div>
</div>
- {
- msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
- :
- <div className="msg-txt" ref={msgRef}>
- <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+ <div className="msg-bubble">
+ {
+ msg.html ? <div dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
+ :
+ <div ref={msgRef}>
+ <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+ </div>
+ }
+ </div>
+ {
+ msg.photo &&
+ <div className="msg-media">
+ <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
+ <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
+ </a>
</div>
- }
- {
- msg.photo &&
- <div className="msg-media">
- <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
- <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
- </a>
- </div>
- }
+ }
<div className="embedContainer" ref={embedRef} />
<div className="msg-links">
{
- visitor.uid > 0 ? (
- <>
- {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
- {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>}
- </>
- ) : (
- <>
- <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
- </>
- )
+ active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>
}
</div>
</div>
@@ -154,7 +162,7 @@ export default function Thread(props) {
<ul id="replies">
{
!loading ? replies.map((msg) => (
- <li id={msg.rid} key={msg.rid} className="msg">
+ <li id={msg.rid} key={msg.rid}>
<Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} postComment={postComment} />
</li>
)) : (