aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Message.css16
-rw-r--r--vnext/src/components/Message.js26
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>&nbsp;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>&nbsp;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>&nbsp;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,