diff options
Diffstat (limited to 'vnext/src/components')
| -rw-r--r-- | vnext/src/components/Message.css | 16 | ||||
| -rw-r--r-- | vnext/src/components/Message.js | 26 |
2 files changed, 29 insertions, 13 deletions
diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css index 4b2e6d74..9bc05dc6 100644 --- a/vnext/src/components/Message.css +++ b/vnext/src/components/Message.css @@ -13,6 +13,7 @@ border-top: 1px solid #eee; display: flex; justify-content: space-around; + background: #fdfdfe; } .msg-cont > nav.l a { color: #88958d; @@ -59,7 +60,7 @@ } .msg-ts, .msg-ts > a { - color: #999; + color: #88958d; } .msg-txt { margin: 0 0 12px; @@ -84,13 +85,13 @@ blockquote { text-align: center; } .msg-links { - color: #999; + color: #88958d; font-size: small; margin: 5px 0 0 0; padding: 12px; } .msg-comments { - color: #AAA; + color: #88958d; font-size: small; margin-top: 10px; overflow: hidden; @@ -134,7 +135,8 @@ blockquote { width: 50px; } .msg-recomms { - color: #AAA; + color: #88958d; + background: #fdfdfe; font-size: small; margin-bottom: 10px; padding: 6px; @@ -142,6 +144,12 @@ blockquote { overflow: hidden; text-indent: 10px; } +.msg-summary { + color: #88958d; + font-size: small; + padding: 12px; + text-align: right; +} #replies .msg-txt, #private-messages .msg-txt { margin: 0; diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index 241aca07..0de366e4 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -38,6 +38,7 @@ function Message({ data, visitor, children, ...rest }) { <img src={`//i.juick.com/photos-512/${data.mid}.${data.attach}`} alt="" /></a> </p> } + <MessageSummary message={data} /> <nav className="l"> {visitor.uid === data.user.uid ? ( <a href={`/${data.user.uname}/${data.mid}`} className="a-like msg-button"> @@ -51,7 +52,6 @@ function Message({ data, visitor, children, ...rest }) { <Link to={{ pathname: '/post', search: `?body=!+%23${data.mid}` }} className="a-like msg-button"> <span className="msg-button-icon"> <Icon name="ei-heart" size="s" /> - {data.likes > 0 && (` ${data.likes}`)} </span> <span> Recommend</span> </Link> @@ -59,7 +59,6 @@ function Message({ data, visitor, children, ...rest }) { <a href="/login" className="a-login msg-button"> <span className="msg-button-icon"> <Icon name="ei-heart" size="s" /> - {data.likes > 0 && (` ${data.likes}`)} </span> <span> Recommend</span> </a> @@ -69,13 +68,6 @@ function Message({ data, visitor, children, ...rest }) { <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }} className="a-comment msg-button"> <span className="msg-button-icon"> <Icon name="ei-comment" size="s" /> - {data.replies > 0 && - (visitor.unread && visitor.unread.includes(data.mid) ? ( - <span className="badge">{data.replies}</span> - ) : ( - `${data.replies}` - )) - } </span> <span> Comment</span> </Link> @@ -125,6 +117,22 @@ function Recommends({ forMessage, ...rest }) { const Recommendations = React.memo(Recommends); +function Summary({ message }) { + let likes = message.likes && `Recommended: ${message.likes}`; + let comments = message.replies && `Comments: ${message.replies}`; + return ( + <div className="msg-summary"> + {[likes, comments].filter(Boolean).join(' ')} + </div> + ); +} + +Summary.propTypes = { + message: MessageType.isRequired +}; + +const MessageSummary = React.memo(Summary); + Message.propTypes = { data: MessageType, visitor: UserType.isRequired, |