aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Message.css6
-rw-r--r--vnext/src/components/Message.js20
-rw-r--r--vnext/src/components/Thread.js18
3 files changed, 24 insertions, 20 deletions
diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css
index 337a3dc0..cd0c34ab 100644
--- a/vnext/src/components/Message.css
+++ b/vnext/src/components/Message.css
@@ -27,7 +27,7 @@
align-items: center;
display: flex;
flex-basis: 0;
- flex-direction: column;
+ flex-direction: row;
flex-grow: 1;
padding-top: 12px;
}
@@ -129,7 +129,9 @@ blockquote {
.msg-recomms {
color: #AAA;
font-size: small;
- margin-top: 10px;
+ margin-bottom: 10px;
+ padding-bottom: 6px;
+ border-bottom: 1px solid #eee;
overflow: hidden;
text-indent: 10px;
}
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index 02371ddb..f093221b 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -6,6 +6,7 @@ import moment from 'moment';
import { UserType, MessageType } from './Types';
import Icon from './Icon';
import Avatar from './Avatar';
+import { UserLink } from './UserInfo';
import { format } from '../utils/embed';
@@ -15,6 +16,7 @@ function Message({ data, visitor, children, ...rest }) {
const isCode = (data.tags || []).indexOf('code') >= 0;
return (
<div className="msg-cont">
+ <Recommendations forMessage={data} />
<header className="h">
<Avatar user={data.user}>
<div className="msg-ts">
@@ -105,6 +107,24 @@ function Tags({ data, user, ...rest }) {
const TagsList = React.memo(Tags);
+function Recommends({ forMessage, ...rest }) {
+ const { likes, recommendations } = forMessage;
+ return recommendations && recommendations.length > 0 && (
+ <div className="msg-recomms">{'❤️ by '}
+ {
+ recommendations.map(it => (
+ <UserLink key={it.uri || it.uid} user={it} />
+ )).reduce((prev, curr) => [prev, ', ', curr])
+ }
+ {
+ likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
+ }
+ </div>
+ ) || null;
+}
+
+const Recommendations = React.memo(Recommends);
+
Message.propTypes = {
data: MessageType,
visitor: UserType.isRequired,
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index f94ad358..6d8a5fd3 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -11,7 +11,6 @@ import MessageInput from './MessageInput';
import Spinner from './Spinner';
import Avatar from './Avatar';
import Button from './Button';
-import { UserLink } from './UserInfo';
import { format } from '../utils/embed';
@@ -85,7 +84,6 @@ export default class Thread extends React.Component {
msg.mid ? (
<Message data={msg} visitor={this.props.visitor}>
{this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
- <Recommendations forMessage={msg} />
</Message>
) : (
<Spinner />
@@ -157,19 +155,3 @@ Thread.propTypes = {
match: ReactRouterPropTypes.match,
visitor: UserType.isRequired
};
-
-function Recommendations({ forMessage, ...rest }) {
- const { likes, recommendations } = forMessage;
- return recommendations && recommendations.length > 0 && (
- <div className="msg-recomms">{'Recommended by '}
- {
- recommendations.map(it => (
- <UserLink key={it.uri || it.uid} user={it} />
- )).reduce((prev, curr) => [prev, ', ', curr])
- }
- {
- likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
- }
- </div>
- ) || null;
-}