diff options
| -rw-r--r-- | vnext/src/components/Message.css | 6 | ||||
| -rw-r--r-- | vnext/src/components/Message.js | 20 | ||||
| -rw-r--r-- | vnext/src/components/Thread.js | 18 |
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> 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> and {likes - recommendations.length} others</span>) - } - </div> - ) || null; -} |